/*
 * Custom css for header
 */

header.wp-block-template-part .wp-container-core-group-is-layout-7eca598c {
    gap: clamp(16px, 4vw, 64px);
}

header.wp-block-template-part nav {
    gap: clamp(16px, 4vw, 64px);

}

header.wp-block-template-part>div>div:first-child {
    position: relative;
    flex-wrap: wrap;
    gap: 12px;
}


header.wp-block-template-part>div>div:first-child figure {
    position: absolute;
    top: 50%;
    /* Vertically center the icon */
    right: 16px;
    /* Position it 16px from the right edge */
    transform: translateY(-50%);
    /* Adjust for vertical centering */
    cursor: pointer;
    /* Change cursor to indicate interactivity */

}

header.wp-block-template-part>div>div:first-child figure img {
    filter: invert(1) brightness(2);
}

header.wp-block-template-part>div>div:nth-child(2) {
    max-height: 132px;
    max-width: 1440px;
    margin: auto !important;
}

header.wp-block-template-part .wp-block-navigation__submenu-icon {
    display: none;
}

header.wp-block-template-part .wp-block-site-logo {
    flex-shrink: 0.3;
}

/* Header mobile styles */

@media (max-width: 870px) {
    header.wp-block-template-part .wp-block-cmd-media-mailchimp {
        zoom: 70%;
    }

    header.wp-block-template-part .wp-block-site-logo {
        min-width: 178px;
    }

    header.wp-block-template-part .wp-block-buttons {
        position: relative;
        flex-basis: 100%;
        max-width: 100px;
        margin-left: auto;
    }

    header.wp-block-template-part .wp-block-buttons::before {
        content: "Help us keep Torah Class FREE for all!";
        font-style: italic;
        position: absolute;
        left: -120px;
        top: 50%;
        transform: translateY(-50%) translateX(-57%);
        white-space: nowrap;
        pointer-events: none;
        font-size: 14px;
    }

    header.wp-block-template-part div.wp-block-group.wp-container-core-group-is-layout-7eca598c {
        margin-left: 20px !important;
        margin-right: 20px !important;
        flex-wrap: wrap;
        gap: 12px;
    }

    header.wp-block-template-part .wp-block-button[class*="is-style-give"] .wp-block-button__link {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

}

@media (max-width: 1360px) {

    header.wp-block-template-part form.wp-block-search {
        display: none;
    }

    header.wp-block-template-part .wp-block-cmd-media-dark-light-mode {
        display: none;
    }

}

@media (min-width: 428px) {
    header.wp-block-template-part .wp-block-buttons::before {
        display: none;
    }
}


/*
 * Custom css for footer
 */

footer.wp-block-template-part>div:first-child {
    justify-content: center;
}

footer.wp-block-template-part p a {
    text-decoration: none;
    color: unset;
}

footer.wp-block-template-part>.wp-block-columns>.wp-block-column:first-child p {
    width: 237px;
}

/* The Separator block is extremely buggy inside a Stack:
 * https://github.com/WordPress/gutenberg/issues/47993 
 */
footer .wp-block-separator {
    flex-basis: unset !important;
    width: 100% !important;
}

/* Alternate copyright/privacy message only shows on mobile */
footer.wp-block-template-part .copyright-mob {
    display: none;
}


@media (max-width: 1099px) {

    /* Make columns stack vertically */
    footer.wp-block-template-part .wp-block-columns {
        flex-direction: column !important;
    }

    /* Ensure each column takes full width */
    footer.wp-block-template-part .wp-block-column {
        width: 100% !important;
    }

    footer.wp-block-template-part>.wp-block-columns>.wp-block-column:first-child>div {
        min-height: unset !important;
    }

    footer.wp-block-template-part .mob-padding-40 {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    footer .wp-block-columns .wp-block-columns {
        gap: 32px;
    }

    footer .wp-block-columns .wp-block-columns div {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    footer.wp-block-template-part .wp-block-buttons {
        width: 100%;
    }

    footer.wp-block-template-part .wp-block-buttons .wp-block-button {
        flex: 1;
    }

    /* Alternate copyright/privacy message only shows on mobile */
    footer.wp-block-template-part .copyright-dsk {
        display: none;
    }

    footer.wp-block-template-part .copyright-mob {
        display: block;
        margin-top: 40px !important;
        margin-bottom: 40px !important;
    }

    /* app buttons are larger */
    footer.wp-block-template-part .app-buttons {
        width: 340px;
        justify-content: space-between;
    }

    footer.wp-block-template-part .app-buttons figure {
        zoom: 130%;
    }


}

/* For Styled Dropdowns for Hebrew Bible Audio and Language Selector  */
.select {
    position: relative;
    min-width: 200px;
}

.select svg:not(.language_icon) {
    position: absolute;
    right: 55px;
    top: calc(50% - 2px);
    width: 10px;
    height: 6px;
    stroke-width: 2px;
    stroke: #9098a9;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.select select {
    appearance: none;
    -webkit-appearance: none;
    padding: 7px 40px 7px 12px;
    width: 100%;
    border: 2px solid #e8eaed;
    border-radius: 5px;
    /* background: #fff; */
    /* box-shadow: 0 1px 3px -2px #9098a9; */
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    transition: all 150ms ease;
}

.select select.language_selector {
    padding-left: 20px;
    padding-right: 10px;
    width: 60%;
    height: 45px;
    font-size: 16px;
    color: inherit;
    border-radius: 2rem;
}

.lesson_language_selector_dropdown .select select.language_selector {
    width: 70%;
}

.cmddark .lesson_language_selector_dropdown .select select.language_selector {
    border-color: var(--wp--preset--color--davy-grey);
    background-color: transparent;
    color: white;
}

.cmddark .lesson_language_selector_dropdown .select svg:not(.language_icon) {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(69deg) brightness(108%) contrast(110%);
}

.lesson_language_selector_dropdown .select svg:not(.language_icon) {
    right: 50px;
}

.lesson_language_selector_dropdown.language_selector_wrapper svg.language_icon {
    top: 8px;
}

.lesson_language_selector_dropdown {
    flex-grow: unset !important;
    margin-right: 16px !important;
    width: 160px !important;
}

@media (max-width: 1024px) {
    .lesson_language_selector_dropdown {
        /* width: 100% !important; */
        justify-content: center;
        margin-right: 18px !important;
    }

    .lesson_language_selector_dropdown label.select {
        /* margin-left: 60px; */
    }
}

@media (max-width: 599px) {
    .lesson_language_selector_dropdown {
        display: none;
    }
}

.language_selector_wrapper svg.language_icon {
    height: 18px;
    width: 18px;
    fill: #9098a9;
    position: static;
    left: 13px;
    top: 0;
    margin-right: 5px;
}

.select select:required:invalid {
    color: #5a667f;
}

.select select option {
    color: #223254;
}

.select select option[value=""][disabled] {
    display: none;
}

.select select:focus {
    outline: none;
    border-color: #07f;
    box-shadow: 0 0 0 2px rgba(0, 119, 255, 0.2);
}

.select select:hover+svg {
    stroke: #07f;
}

.sprites {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    user-select: none;
}




/* For v3 radio buttons elements */

:root {
    /* Light mode colors */
    --radio-color: var(--wp--preset--color--tc-blue);
    --radio-border: var(--wp--preset--color--davy-grey);
    --radio-bg: var(--wp--preset--color--base);
    --radio-bg-disabled: var(--wp--preset--color--light);
    --bg-color: var(--wp--preset--color--base);
}

body.cmddark {
    --radio-color: var(--wp--preset--color--davy-grey);
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.radio-container {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* Style the native radio button */
.radio-container input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--radio-border);
    border-radius: 50%;
    background: var(--radio-bg);
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Checked state */
.radio-container input[type="radio"]:checked {
    border: 5px solid var(--radio-color);
}

/* Disabled state */
.radio-container input[type="radio"]:disabled {
    background: var(--radio-bg-disabled);
    border-color: var(--radio-border);
    cursor: not-allowed;
}

.radio-container input[type="radio"]:disabled+label {
    color: var(--radio-border);
    cursor: not-allowed;
}

/* Hover state */
.radio-container:hover input[type="radio"]:not(:disabled) {
    border-color: var(--radio-color);
}

/* START Donations Pattern CSS */
.donations-block {
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 20px;
    margin-block-end: 20px !important;
    border-radius: 0px;
    background-color: rgba(244, 249, 254, 1);
    min-height: 654px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: var(--wp--preset--spacing--40);
    padding-right: 0px;
    padding-bottom: var(--wp--preset--spacing--40);
    padding-left: 0px;
    position: relative;
}

.donations-block p {
    color: var(--wp--preset--color--accent-gray);
}

figure.donation_icon_group_dark {
    display: none;
}

.donations-block figure.tree {
    display: flex;
    align-items: flex-end;
}

.donations-block .donation-tree-img {
    flex-basis: clamp(0px, calc(700px - 14vw), 400px) !important;
}

.donations-block .donation-tree-img#donation-tree-img img {
    position: absolute;
    left: 0;
    top: 20%;
}

@media (max-width: 1600px) {
    .donations-block .donation-tree-img#donation-tree-img img {
        left: -10vw;
    }
}

@media (max-width: 1250px) {
    .donations-block .donation-tree-img#donation-tree-img img {
        left: -20vw;
    }
}

@media screen and (min-width:782px) and (max-width: 1000px) {
    .donations-block .donation-tree-img#donation-tree-img img {
        left: -15vw;
        width: 40%;
        top: 30%;
    }
}

@media (max-width: 781px) {
    .donations-block {
        padding-top: 100px !important;
        padding-bottom: 100px !important;
    }

    .donations-block .donation-tree-img#donation-tree-img img {
        /* display: none; */
        position: absolute;
        left: -15px !important;
        top: 12%;
        width: 65%;
    }

    .donations-block .donation-tree-img#donation-tree-img {
        order: 1;
        flex-basis: 25.3% !important;
    }

    .donations-block .donation-text {
        order: 2;
    }

    .donations-block div.donation-hands-img#donation-hands-img {
        order: 1;
        z-index: 99;
        flex-basis: 60% !important;
    }

    .donations-block .wp-block-buttons {
        width: 100%;
    }

    .donations-block .wp-block-buttons .wp-block-button {
        width: 100%;
    }

    .donations-block .wp-block-buttons .wp-block-button .wp-element-button {
        width: 100%;
        justify-content: center;
    }

    .donations-block .wp-block-buttons .wp-block-button .wp-element-button::before {
        position: static;
        margin-right: 5px;
        transform: unset;
    }
}


/* Dark Mode CSS styles */

.cmddark .donations-block {
    background-color: unset !important;
}

.cmddark p, .cmddark h2 {
    color: var(--wp--preset--color--accent-gray) !important;
}

.cmddark .donation_icon_group_dark img {
    display: block;
    margin-bottom: 20px;
}

.cmddark figure.donation_icon_group {
    display: none;
}

.cmddark figure.donation_icon_group_dark {
    display: block;
}

.cmddark .donations-block .wp-block-button.is-style-give .wp-block-button__link {
    background: white;
    color: #024E9E;
}

.cmddark .donations-block .wp-block-button[class*="is-style-give"] .wp-block-button__link::before {

    filter: brightness(0) saturate(100%) invert(18%) sepia(94%) saturate(2654%) hue-rotate(200deg) brightness(85%) contrast(98%);
}

.cmddark .donations-block .donation-tree-img#donation-tree-img img {
    filter: brightness(0) saturate(100%) invert(35%) sepia(10%) saturate(508%) hue-rotate(179deg) brightness(92%) contrast(93%);
    opacity: 50%;
}

/* END Donations Pattern CSS */

/* START Become a subscriber Pattern CSS*/

.wp-block-cover img.wp-block-cover__image-background {
    z-index: 1;
    height: unset;
    width: 42%;
    right: 0;
    left: unset;
}

.wp-block-cover .wp-block-cover__inner-container {
    margin: auto 0;
}

.subscriber-form .email-input {
    border-radius: 100px;
    background-color: rgba(255, 255, 255, 1) !important;
    min-height: 44px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 13px;
    padding-right: 20px;
    padding-bottom: 13px;
    padding-left: 20px;
    display: flex;
    flex-grow: 1;
}

@media only screen and (max-width: 1024px) {
    .wp-block-cover__inner-container .wp-block-columns:first-child {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

@media screen and (min-width:782px) and (max-width: 1200px) {
    .wp-block-cover img.wp-block-cover__image-background {
        width: 60%;
    }
}

@media screen and (max-width: 781px) {

    .wp-block-cover__inner-container .wp-block-columns:first-child {
        margin-bottom: 50px;
    }

    .subscriber-form a.wp-block-button__link, .subscriber-form .wp-block-button {
        width: 100%;
    }

    .subscriber-form>.wp-block-group:first-child {
        display: none;
    }

    .subscriber-form>.wp-block-group:last-child {
        flex-direction: column;
    }

    .wp-block-cover .wp-block-cover__inner-container {
        margin-top: 10vw;
    }

    .wp-block-cover {
        flex-direction: column;
    }

    .wp-block-cover img.wp-block-cover__image-background {
        object-position: 0% 0%;
        width: 100vw;
        height: 250px;
        object-fit: cover;
        object-position: 47% 0% !important;
        overflow: hidden;
        top: -13vw;
        right: 0;
        /* scale: 1; */
        position: static;
    }
}

/* END Become a subscriber Pattern CSS*/

/* Language Bar v3 */
body {
    /* Light mode colors */
    --lang-selector-bg-color: #f8f9fa;
    --lang-selector-text-color: #333;
    --lang-selector-border-color: var(--wp--preset--color--secondary-1-medium);
    --lang-selector-button-bg: transparent;
    --lang-selector-button-border: var(--wp--preset--color--secondary-1-medium);
    --lang-selector-button-hover-bg: var(--wp--preset--color--secondary-1-medium);
    --lang-selector-button-hover-border: var(--wp--preset--color--secondary-1-medium);
    --lang-selector-button-selected-bg: var(--wp--preset--color--secondary-1-medium);
    --lang-selector-button-selected-border: var(--wp--preset--color--secondary-1-medium);
    --lang-selector-button-selected-text: var(--wp--preset--color--black);
}

body.cmddark {
    /* Dark mode colors */
    --lang-selector-bg-color: #242424;
    --lang-selector-text-color: #f0f0f0;
    --lang-selector-border-color: white;
    --lang-selector-button-bg: transparent;
    --lang-selector-button-border: var(--wp--preset--color--contrast);
    --lang-selector-button-hover-bg: var(--wp--preset--color--tc-blue-background);
    --lang-selector-button-hover-border: #777;
    --lang-selector-button-selected-bg: white;
    --lang-selector-button-selected-border: var(--wp--preset--color--secondary-1-medium);
    --lang-selector-button-selected-text: var(--wp--preset--color--base);
}

.language-bar {
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 10px 20px;
}

.language-options {
    display: flex;
    gap: 10px;
    margin-left: 1vw;
}

.language-btn {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border: 1px solid var(--lang-selector-button-border);
    border-radius: 20px;
    background: var(--lang-selector-button-bg);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    color: var(--lang-selector-text-color);
}

.language-btn:hover {
    background-color: var(--lang-selector-button-hover-bg);
    border-color: var(--lang-selector-button-hover-border);
}

.language-btn.selected {
    background-color: var(--lang-selector-button-selected-bg);
    border-color: var(--lang-selector-button-selected-border);
    color: var(--lang-selector-button-selected-text);
    font-weight: 500;
}

.flag-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 8px;
    object-fit: cover;
}

/* Mobile dropdown styles */
.mobile-language-selector {
    display: none;
    position: relative;
}

.mobile-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 13px 20px;
    border: 1px solid var(--lang-selector-button-border);
    border-radius: 20px;
    background-color: var(--lang-selector-button-bg);
    color: var(--lang-selector-text-color);
    font-size: 14px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    min-width: 120px;
    width: 100%;
}

.cmddark .mobile-select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}

/* Responsive behavior */
@media (max-width: 768px) {
    .language-options {
        display: none;
    }

    .mobile-language-selector {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .language-title {
        display: none;
    }

    div.language-bar {
        margin-left: 0px !important;
        margin-right: 0px !important;
        padding: 20px 0px;
    }

    img.flag-icon {
        width: 30px;
        height: 30px;
    }
}

/* Language Bar v3 css ends */