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

.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;
}

.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) {
    .tt-faq .tt-faq__category-title {
        margin-top: 32px;
        margin-bottom: 5px;
        font-size: 20px;
        line-height: 29px;
    }
}