/* FAQ VC element (academia_faq). Categorieën met accordion-vragen (native <details>). */

/* Het element brengt zelf geen inhoudskolom mee. Staat het in een `.container`
   (de gewone paginatemplate), dan regelt die de breedte en de ruimte eromheen.
   Op een pagina zonder container -- bijvoorbeeld de "Full width"-template --
   liep de FAQ daardoor van schermrand tot schermrand, uit de pas met de
   elementen erboven, en botste hij zonder ruimte op de footer. Daar lijnt hij
   zich nu zelf uit, met dezelfde maten als `.container` in general.css. */
.tt-faq:not(.container *) {
    box-sizing: border-box;
    max-width: 1350px; /* 1320px inhoud + 15px links/rechts */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Verticale ruimte: het handmatige element regelt dat zelf (.tt-faq--manual),
   het automatische nog niet. */
.tt-faq:not(.tt-faq--manual):not(.container *) {
    margin-top: 97px;
    margin-bottom: 50px;
}

/* Volgt de FAQ direct op een beige paginablok (`.tt-page-surface`, bv. Level
   check guidance), dan loopt dat beige door achter de FAQ, zodat het één
   vlak wordt in plaats van een witte strook met een harde rand. Alleen voor
   precies deze volgorde; overal elders blijft de FAQ zoals hij was.
   - Het beige blok krijgt onderruimte, zodat de marge van zijn laatste kaart
     niet als witte naad tussen beide uit het blok lekt.
   - De vragen blijven de normale (beige) vragen. Op een beige achtergrond zijn die
     minder goed te onderscheiden; wie dat wil kiest bij het FAQ-element de optie
     "Witte achtergrond bij de vragen" (zie `.tt-faq--white-items` hieronder). */
.tt-page-surface:has(+ .tt-faq) {
    padding-bottom: 50px;
}

.tt-page-surface + .tt-faq:not(.container *) {
    display: flow-root; /* houdt de kopmarge binnen het beige vlak */
    max-width: none;
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 50px;
    /* Zelfde 1320px-kolom als de kaarten erboven. */
    padding-left: max(15px, calc((100% - 1320px) / 2));
    padding-right: max(15px, calc((100% - 1320px) / 2));
    background: var(--beige, #FDEFDA);
}

/* Optie "Witte achtergrond bij de vragen" van het FAQ-element: witte vraagblokken
   (bv. op een beige achtergrond, waar de standaard beige vragen wegvallen). */
.tt-faq--white-items .tt-faq__toggle {
    background: #fff;
}

.tt-faq--white-items .tt-faq__toggle[open] {
    background: var(--lighter-green, #DDF1E1);
}

.tt-faq__category {
    /* offset zodat een anchor-jump (#faq-cat-...) niet onder de header valt */
    scroll-margin-top: 120px;
}

.tt-faq__category + .tt-faq__category {
    margin-top: 48px;
}

/* `.tt-faq .tt-faq__category-title` (0,2,0) verslaat de algemene
   `.page-template-default h2` (0,1,1) uit general.css, die anders
   font-size/line-height én de margins oplegt. */
.tt-faq .tt-faq__category-title {
    margin: 48px 0 18px;
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
    color: var(--font-color, #0A2636);
}

/* Optionele kop bij het handmatige FAQ-element (academia_faq_manual);
   leidt het blok in, dus geen top-marge. */
/* Zelfde reden als hierboven: 0,2,0 verslaat `.page-template-default h2`. */
.tt-faq .tt-faq__title {
    margin: 0 0 18px;
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
    color: var(--font-color, #0A2636);
}

/* Handmatige FAQ krijgt onderruimte; collapse't met de margin-top van een
   volgend element (bijv. Compact CTA), dus telt niet dubbel. */
.tt-faq--manual {
    margin-top: 97px;
    margin-bottom: 50px;
}

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

.tt-faq__item + .tt-faq__item {
    margin-top: 5px;
}

.tt-faq__toggle {
    background: var(--beige, #FDEFDA);
    border-radius: 5px;
    padding: 10px 14px;
    transition: background-color 0.3s ease;
}

/* Open state: het hele item wordt lichtgroen. */
.tt-faq__toggle[open] {
    background: var(--lighter-green, #DDF1E1);
}

.tt-faq__question {
    position: relative;
    display: block;
    list-style: none;
    cursor: pointer;
    padding-right: 28px;
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--font-color, #0A2636);
    transition: color 0.3s ease;
}

/* Groene opsommingsbullet vóór de vraag (zie Figma). */
.tt-faq__question::before {
    content: "\2022";
    margin-right: 6px;
    color: var(--green, #1FA238);
    font-weight: 700;
}

/* Verberg de standaard disclosure-driehoek. */
.tt-faq__question::-webkit-details-marker {
    display: none;
}

/* Plus-icoon rechts (exacte SVG uit Figma), gesloten staat. */
.tt-faq__question::after {
    content: "";
    position: absolute;
    right: 0;
    /* Uitlijnen op het midden van de eerste regel (halve line-height van 26px),
       zodat het icoon bij meerregelige vragen niet over beide regels centreert. */
    top: 13px;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.25 7.5C17.625 7.5 18 7.875 18 8.25V9.75C18 10.1719 17.625 10.5 17.25 10.5H10.5V17.25C10.5 17.6719 10.125 18 9.75 18H8.25C7.82812 18 7.5 17.6719 7.5 17.25V10.5H0.75C0.328125 10.5 0 10.1719 0 9.75V8.25C0 7.875 0.328125 7.5 0.75 7.5H7.5V0.75C7.5 0.375 7.82812 0 8.25 0H9.75C10.125 0 10.5 0.375 10.5 0.75V7.5H17.25Z' fill='%231FA238'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Min-icoon bij opengeklapt (18x3, wordt door contain een gecentreerde balk). */
.tt-faq__toggle[open] .tt-faq__question::after {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='3' viewBox='0 0 18 3' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.25 0C17.625 0 18 0.375 18 0.75V2.25C18 2.67188 17.625 3 17.25 3H0.75C0.328125 3 0 2.67188 0 2.25V0.75C0 0.375 0.328125 0 0.75 0H17.25Z' fill='%231FA238'/%3E%3C/svg%3E");
}

.tt-faq__question:hover,
.tt-faq__toggle[open] .tt-faq__question {
    color: var(--green, #1FA238);
}

.tt-faq__answer {
    margin-top: 8px;
    padding: 15px 10px;
    border-radius: 3px;
    background: #fff;
    font-size: 16px;
    line-height: 28px;
    color: var(--font-color, #0A2636);
}

/* Antwoord soepel in beeld laten klappen (open-animatie). */
.tt-faq__toggle[open] .tt-faq__answer {
    animation: tt-faq-answer-in 0.3s ease;
}

@keyframes tt-faq-answer-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tt-faq__answer p:last-child {
    margin-bottom: 0;
}

/* Links in een antwoord in huisstijl: roze, vet, onderstreept bij hover. Zelfde
   waarden als `.page-default-surface .entry-content a` (page-default.css).
   Die regel geldt alleen in de standaard paginatemplate; op een pagina zonder
   (bv. "Full width") viel de link terug op browser-blauw met onderstreping. */
.tt-faq__answer a {
    color: var(--pink, #E4087E);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}

.tt-faq__answer a:hover,
.tt-faq__answer a:focus-visible {
    text-decoration: underline;
}

.tt-faq__answer td {
    font-size: 12px;
}

/* Mobiel (<=991px). */
@media (max-width: 991px) {
    .tt-faq .tt-faq__title {
        font-size: 20px;
        line-height: 29px;
    }

    .tt-faq--manual {
        margin-top: 64px;
        margin-bottom: 0;
    }
}

/* Mobiel (<=767px): compactere categoriekoppen. */
@media (max-width: 767px) {
    /* Zelfde zijruimte als `.container` op mobiel. */
    .tt-faq:not(.container *) {
        padding-left: 20px;
        padding-right: 20px;
    }

    .tt-page-surface + .tt-faq:not(.container *) {
        padding-left: 20px;
        padding-right: 20px;
    }

    .tt-faq .tt-faq__category-title {
        margin-top: 32px;
        margin-bottom: 5px;
        font-size: 20px;
        line-height: 29px;
    }
}