/* -------------------
FAQ Block
------------------- */

.faq-grid a:hover * {
    color: inherit;
}
.faq-intro,
.faq-holder {
    margin: 0 auto;
}
.faq-intro {
    margin: 0 auto;
}

.faq-grid .faq-nav ul {
    padding-bottom: 0;
    margin-top: 0;
    display: grid;
    padding: 0;
    margin: 0;
}
.faq-nav ul li.faq-li {
    margin-bottom: 0;
    padding: var(--wp--preset--spacing--30) 0;
    border-bottom: 1.5px solid currentColor;
}
.faq-nav ul li::marker {
    content: none;
}
.faq-li :where(h1, h2, h3, h4, h5, h6):has(a):hover, 
.faq-li :where(h1, h2, h3, h4, h5, h6):has(a):focus {
    transform: none;
}
.faq-nav li h3 {
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    gap: .7ch;
}
.faq-nav li h3::after {
    content: '';
    display: inline-flex;
    width: 1em;
    height: 1em;
    min-width: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='M224 128a8 8 0 0 1-8 8h-80v80a8 8 0 0 1-16 0v-80H40a8 8 0 0 1 0-16h80V40a8 8 0 0 1 16 0v80h80a8 8 0 0 1 8 8'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    mask-position: center center;
}
.wp-block-acf-faq .faq-nav h3 a {
    background-image: unset;
    border: unset;
}

/* Pop Up */
.faq-content.faq-desktop,
.faq-content.faq-mobile .faq-sec {
    display: none;
}
/* body.faq-open::after {
    content: '';
    background: rgba(0,0,0,.5);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    z-index: 2;
}*/
body .faq-content.faq-mobile .open {
    display: flex;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--wp--preset--spacing--50, 50px) var(--wp--preset--spacing--90, 5vw);
    align-items: center;
    background-color: rgba(0,0,0,0.7);
} 
.faq-mobile .faq-section-container {
    background: var(--wp--preset--color--light, snow);
    padding: var(--gap-smd) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
    max-height: 100%;
    overflow-y: auto;
}
button.faq-section-close {
    background: unset;
    color: inherit;
    box-shadow: none;
    display: flex;
    align-items: center;
    padding: 0;
    gap: .5ch;
    margin-left: auto;
    margin-bottom: var(--wp--preset--spacing--20);
    border: none;
}
button.faq-section-close:hover {
    color: inherit;
    background: inherit;
}
button.faq-section-close svg {
    height: 1.2em;
    width: 1.2em;
}
.faq-grid .faq-holder .faq-section-container h3 {
    padding-top: 0;
}


/* Media Queries */
.faq-grid {
    /* shorthand: name / type */
    container: faq-grid / inline-size;  	
}
.faq-holder {
    clear: both;
}

@container faq-grid (min-width: 768px) {
    /* Undo Mobile Styles */
    .faq-holder {
        clear: left;
        }
    .faq-content.faq-desktop {
        display: block;
    }
    .faq-nav li h3::after {
        content: none;
    }
    button.faq-section-close {
        display: none;
    }
    .faq-nav ul li.faq-li {
        border-bottom:none;
        padding: 0;
    }

    .faq-holder {
        max-width: none;
        display: flex;
        justify-content: space-between;
        gap: var(--wp--preset--spacing--50);
    }   
    .faq-intro {
        margin-bottom: 0;
    }
    .faq-nav {
        padding-bottom: unset;
        border-bottom: unset;
        flex:  0 0 25%;
        align-self: flex-start;
        position: sticky;
        top: var(--wp--preset--spacing--50);
    }
    .faq-nav ul {
        margin: 0;
        padding: 0;
        gap: var(--wp--preset--spacing--20);
    }
    .faq-nav ul li {
        padding-top: 0;
    }
    .faq-content {
        flex: 0 0 calc(75% - 70px);
        flex: 0 0 calc(75% - var(--wp--preset--spacing--60));
    }
    .faq-sec {
        padding: var(--wp--preset--spacing--30) 0;
    }
    .faq-sec:first-child {
        padding-top: 0;
    }
    .faq-sec:last-child {
        padding-bottom: 0;
    }
    .faq-content > div:not(:last-child) {
        margin-bottom: 0;
    }

    /*--- ScrollTrigger --- */
    .js .faq-content .faq-sec,
    .js .before.after .faq-content .faq-sec:last-child{
        opacity: .5;
        transition: opacity .3s ease;
    }
    .js .before.after .faq-nav li:last-child a {
        color: inherit;
    }
    .js .before .faq-content .faq-sec:first-child,
    .js .faq-content .faq-sec.active,
    .js .after .faq-content .faq-sec:last-child {
        opacity: 1;
    }
    .js .before .faq-nav li:first-child a,
    .js .faq-nav li.active a,
    .js .after .faq-nav li:last-child a,
    .js .before .faq-content .faq-sec:first-child h3,
    .js .faq-content .faq-sec.active h3,
    .js .after .faq-content .faq-sec:last-child h3 {
        color: var(--wp--preset--color--accent);
    }
    
}

/* --- NO JS --- */
.no-js .faq-nav,
.no-js .faq-content.faq-mobile {
    display: none;
}
.no-js .faq-content.faq-desktop {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--30);
}
.no-js button.faq-section-close {
    display: none;
}
.no-js .wp-block-acf-faq .faq-holder {
    justify-content: center;
}