/* FAQ Index VC element (academia_faq_index): kop (icoon + titel) + categorie-lijst. */

/* Sticky sidebar.
   De WPBakery-rij is standaard `display:block`, waardoor de zijkolom niet meerekt
   met de hoofdkolom en sticky geen ruimte heeft om te "reizen". Door de rij flex te
   maken (class `tt-faq-sidebar-layout` op de rij) stretcht de zijkolom op volle
   rijhoogte; daarna kan de index sticky binnen die kolom blijven plakken. */
.tt-faq-sidebar-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.tt-faq-sidebar-layout > .wpb_column {
    display: flex;
}

.tt-faq-sidebar-layout > .wpb_column > .vc_column-inner {
    width: 100%;
    height: 100%;
}

.tt-faq-sidebar-layout > .wpb_column > .vc_column-inner > .wpb_wrapper {
    height: 100%;
}

.tt-faq-sidebar-layout .tt-faq-index {
    position: sticky;
    top: 120px;
}


.tt-faq-index {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 15px;
    padding: 24px 24px 32px;
}

.tt-faq-index__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}

.tt-faq-index__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--lighter-green, #DDF1E1);
    line-height: 0;
}

.tt-faq-index__icon-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 24px;
    max-height: 24px;
}

.tt-faq-index__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 25px;
    line-height: 36px;
    font-weight: 700;
    color: var(--font-color, #0A2636);
}

.tt-faq-index__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Pills staan in Figma vlak tegen elkaar; geen tussenruimte. */
.tt-faq-index__item + .tt-faq-index__item {
    margin-top: 0;
}

.tt-faq-index__link {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 5px;
    font-size: 16px;
    line-height: 26px;
    color: var(--font-color, #0A2636);
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease;
}

/* Groene opsommingsbullet voor de categorienaam. */
.tt-faq-index__link::before {
    content: "\2022";
    flex: 0 0 auto;
    align-self: flex-start;
    margin-right: 6px;
    color: var(--green, #1FA238);
    font-weight: 700;
}

/* Chevron-right icoon (exacte SVG uit Figma), rechts uitgelijnd. */
.tt-faq-index__link::after {
    content: "";
    flex: 0 0 auto;
    margin-left: auto;
    width: 8px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg width='12' height='21' viewBox='0 0 12 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.125 0.234375C1.35938 0 1.6875 0 1.92188 0.234375L11.7656 10.0312C11.9531 10.2656 11.9531 10.5938 11.7656 10.8281L1.92188 20.625C1.6875 20.8594 1.35938 20.8594 1.125 20.625L0.1875 19.7344C0 19.5 0 19.125 0.1875 18.9375L8.67188 10.4062L0.1875 1.92188C0 1.73438 0 1.35938 0.1875 1.125L1.125 0.234375Z' fill='%231FA238'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tt-faq-index__link:hover,
.tt-faq-index__link:focus {
    background: var(--lighter-green, #DDF1E1);
    color: var(--green, #1FA238);
    text-decoration: none !important;
}

/* Wint qua specificiteit (0,3,0) van de globale link-stijl
   `.page-default-surface .entry-content a` (0,2,1), die anders de
   kleur op pink zet en de achtergrond-transitie overschrijft. */
.tt-faq-index .tt-faq-index__list .tt-faq-index__link {
    color: var(--font-color, #0A2636);
    transition: color 0.3s ease, background-color 0.3s ease;
}

.tt-faq-index .tt-faq-index__list .tt-faq-index__link:hover,
.tt-faq-index .tt-faq-index__list .tt-faq-index__link:focus {
    color: var(--green, #1FA238);
}

/* Sprong-doelen niet onder de (op desktop bij scrollen fixed) header laten
   landen. Wordt ook gebruikt door de vloeiende scroll in faq-index-mobile.js. */
[id^="faq-cat-"] {
    scroll-margin-top: calc(var(--header-height-sticky, 68px) + 24px);
}

/* ==========================================================================
   Mobiel (<=767px): de index wordt door faq-index-mobile.js bóven de vragen
   geplaatst (onder titel + intro), plakt onder de fixed header en is initieel
   dichtgeklapt — alleen icoon + titel; tikken toont de onderwerpen.
   ========================================================================== */
@media (max-width: 767px) {
    /* De leeggehaalde sidebar-kolom geen ruimte laten innemen. */
    .tt-faq-sidebar-layout > .wpb_column.tt-faq-index-origin--empty {
        display: none;
    }

    /* Dubbele class (0,2,0) om de desktop-regel
       `.tt-faq-sidebar-layout .tt-faq-index {top:120px}` te verslaan. */
    .tt-faq-index.tt-faq-index--mobile {
        position: sticky;
        top: calc(var(--header-height-mobile, 63px) + 6px);
        z-index: 20;
        /* Dekkend, zodat de vragen er bij het scrollen niet doorheen schemeren. */
        background: #fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        padding: 0;
        margin-top: 52px;
        margin-bottom: 42px;
    }

    /* Compacte header-rij; draagt zelf de padding nu de wrapper er geen heeft. */
    .tt-faq-index--mobile .tt-faq-index__header {
        padding: 20px;
        margin-bottom: 0;
    }

    .tt-faq-index--collapsible.tt-faq-index--mobile .tt-faq-index__header {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .tt-faq-index--mobile .tt-faq-index__icon {
        width: 40px;
        height: 40px;
    }

    .tt-faq-index--mobile .tt-faq-index__icon-image {
        max-width: 20px;
        max-height: 20px;
    }

    .tt-faq-index--mobile .tt-faq-index__title {
        font-size: 20px;
        line-height: 29px;
    }

    /* Chevron rechts in de header: dicht = wijst omlaag, open = omhoog. */
    .tt-faq-index--collapsible.tt-faq-index--mobile .tt-faq-index__header::after {
        content: "";
        flex: 0 0 auto;
        margin-left: auto;
        width: 21px;
        height: 12px;
        background: url("data:image/svg+xml,%3Csvg width='21' height='12' viewBox='0 0 21 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.625 1.17188C20.8594 1.35938 20.8594 1.73438 20.625 1.96875L10.8281 11.7656C10.5938 12 10.2656 12 10.0312 11.7656L0.234375 1.96875C0 1.73438 0 1.35938 0.234375 1.17188L1.125 0.234375C1.35938 0 1.73438 0 1.92188 0.234375L10.4531 8.71875L18.9375 0.234375C19.125 0 19.5 0 19.7344 0.234375L20.625 1.17188Z' fill='%231FA238'/%3E%3C/svg%3E") center / contain no-repeat;
        transition: transform 0.3s ease;
    }

    .tt-faq-index--collapsible.tt-faq-index--mobile.tt-faq-index--open .tt-faq-index__header::after {
        transform: rotate(180deg);
    }

    /* Dichtgeklapt: lijst verborgen; open: zichtbaar. Draagt zelf padding nu
       de wrapper er geen heeft. */
    .tt-faq-index--collapsible.tt-faq-index--mobile .tt-faq-index__list {
        display: none;
        margin-top: 0;
        padding: 0 20px 20px;
    }

    .tt-faq-index--collapsible.tt-faq-index--mobile.tt-faq-index--open .tt-faq-index__list {
        display: block;
    }

    /* Pijltje naast een index-onderwerp op natuurlijke maat (12x21). */
    .tt-faq-index--mobile .tt-faq-index__link::after {
        width: 12px;
        height: 21px;
        background: url("data:image/svg+xml,%3Csvg width='12' height='21' viewBox='0 0 12 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.125 0.234375C1.35938 0 1.6875 0 1.92188 0.234375L11.7656 10.0312C11.9531 10.2656 11.9531 10.5938 11.7656 10.8281L1.92188 20.625C1.6875 20.8594 1.35938 20.8594 1.125 20.625L0.1875 19.7344C0 19.5 0 19.125 0.1875 18.9375L8.67188 10.4062L0.1875 1.92188C0 1.73438 0 1.35938 0.1875 1.125L1.125 0.234375Z' fill='%231FA238'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    /* Ankers niet onder de fixed header + sticky index laten belanden bij
       het springen naar een categorie. */
    [id^="faq-cat-"] {
        scroll-margin-top: calc(var(--header-height-mobile, 63px) + 92px);
    }
}