/* ==========================================================================
   FAQ — stijlen voor het overzicht en de categoriepagina's
   Pas de variabelen hieronder aan op je eigen huisstijl.
   ========================================================================== */

.faq-page {
    /* Terugval = de oorspronkelijke pakketwaarde; met het thema erbij
       volgen ze de merktokens. Dit blad droeg als enige pakket nog een
       eigen palet mét een bronzen accent, terwijl het merk één warmrood
       accent kent — een rebrand liet deze pagina daardoor staan waar hij
       stond. */
    --bg:      var(--surface, #f8f6f1);   /* pagina-achtergrond */
    --kaart:   var(--paper, #fffdf9);     /* kaart-achtergrond  */
    --inkt:    var(--ink, #26231e);       /* tekstkleur         */
    --zacht:   var(--metadata, #6c675f);  /* gedempte tekst     */
    --accent:  var(--moss, #7d6238);      /* accentkleur        */
    --lijn:    var(--line, #e6dfd1);      /* hairlines en randen */
    --display: var(--font-display); /* was Georgia; de rest van de site gebruikt --font-display */

    background: var(--bg);
    color: var(--inkt);
    /* Dezelfde tokens als de overschrijvende regels in style.css
       (sectie 34d voor boven/onder, sectie 23 voor de zijkanten), zodat
       de laadvolgorde er niet meer toe doet: dit bestand rendert
       hetzelfde óf verliest een gelijkspel — nooit een vaste 16px waar
       de responsieve gutter hoort. */
    padding: var(--dg-pagina-boven) var(--dg-gutter) var(--dg-pagina-onder);
}

.faq-page * { box-sizing: border-box; }

/* :where() houdt deze reset op (0,1,0): anders verslaat hij elke
   component met één klasse op deze pagina, en moet die zijn kleur met
   een elementdeel terugwinnen. */
.faq-page :where(a) { color: inherit; }

.faq-page :focus-visible {
    outline: var(--dg-focus-ring, 2px solid var(--accent));
    outline-offset: 3px;
}

/* --- Hero --------------------------------------------------------------- */

.faq-hero {
    max-width: 44rem;
    margin: 0 auto var(--dg-space-8);
    text-align: center;
}

/* Geen font-style: italic. --display is Cormorant Garamond en die is
   hier alleen in staand schrift geladen, dus de browser maakte er een
   kunstmatige schuinte van — precies het effect dat de merkgids met
   "verfijning komt uit vorm" wil vermijden. De eyebrow onderscheidt zich
   al door letter, kleur en grootte. */
.faq-eyebrow {
    font-family: var(--display);
    font-size: 1.05rem;
    color: var(--accent);
    margin: 0 0 var(--dg-space-2);
}

.faq-title {
    font-family: var(--display);
    font-size: clamp(2.1rem, 5.5vw, 3.4rem);
    line-height: 1.1;
    letter-spacing: .01em;
    margin: 0;
}

.faq-title::after {
    content: '';
    display: block;
    width: 2.75rem;
    height: 1px;
    background: var(--accent);
    margin: var(--dg-space-5) auto 0;
}

.faq-intro {
    color: var(--zacht);
    line-height: 1.7;
    margin-top: var(--dg-space-5);
}

.faq-intro p { margin: .5em 0; } /* geen-schaal: alinearuimte binnen de intro, schaalt met de letter */

/* --- Sectiekoppen -------------------------------------------------------- */

.faq-sectietitel {
    font-family: var(--display);
    font-size: 1.5rem;
    text-align: center;
    margin: 0 0 var(--dg-space-1);
}

.faq-sectietekst {
    text-align: center;
    color: var(--zacht);
    margin: 0 0 var(--dg-space-5);
}

/* --- Snelle acties ------------------------------------------------------- */

.faq-actions {
    max-width: 52rem;
    margin: 0 auto var(--dg-space-8);
}

.faq-actions__knoppen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--dg-space-4);
}

.faq-knop {
    display: inline-block;
    /* Geen --dg-knop-y: die staat op 16 en deze knop op 12 (afgerond
       exact daarop); de waarde meebuigen is voor taak 13. */
    padding: var(--dg-space-3) var(--dg-space-6);
    border: 1px solid var(--inkt);
    border-radius: 2px;
    font-size: .9rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.faq-knop:hover {
    background: var(--inkt);
    color: var(--bg);
}

/* --- Categoriegrid ------------------------------------------------------- */

/*
 * Onderwerpkaarten: vaste kolomaantallen in plaats van auto-fill.
 *
 * Met repeat(auto-fill, minmax(300px, 1fr)) paste er in de 1280px van de
 * site vier kolommen, en met zes onderwerpen gaf dat een 4-2-verdeling:
 * een volle rij en een halfleeg restje. Drie kolommen leveren twee volle
 * rijen van drie.
 *
 * De grenzen volgen uit de kaartbreedte, niet uit een rond getal: bij drie
 * kolommen en 1,4rem tussenruimte heeft een kaart onder ~960px minder dan
 * 300px, en dan wordt de titel met de vraaglijst te smal. Zelfde redenering
 * voor de sprong van 1 naar 2 kolommen rond 640px.
 */
.faq-grid {
    display: grid;
    gap: var(--dg-space-5);
    grid-template-columns: 1fr;
    margin: 0 auto var(--dg-space-8);
}

@media (min-width: 640px) {
    .faq-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .faq-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.faq-kaart {
    display: flex;
    flex-direction: column;
    background: var(--kaart);
    border: 1px solid var(--lijn);
    /* Geen --dg-kaart-binnen: die staat op 24, deze kaart al exact op de
       schaalstap 32. De waarde meebuigen is voor taak 13. */
    padding: var(--dg-space-6);
    transition: border-color .2s ease;
}

.faq-kaart:hover { border-color: var(--accent); }

.faq-kaart__monogram {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--accent);
    border-radius: 50%;
    font-family: var(--display);
    font-size: 1.3rem;
    color: var(--accent);
    margin-bottom: var(--dg-space-4);
}

.faq-kaart__titel {
    font-family: var(--display);
    font-size: 1.3rem;
    margin: 0 0 var(--dg-space-2);
}

.faq-kaart__lijst {
    list-style: none;
    margin: 0 0 var(--dg-space-5);
    padding: 0;
}

.faq-kaart__lijst li + li { border-top: 1px solid var(--lijn); }

.faq-kaart__lijst a {
    display: block;
    padding: var(--dg-space-3) 0;
    font-size: .95rem;
    line-height: 1.45;
    text-decoration: none;
    transition: color .15s ease;
}

.faq-kaart__lijst a:hover {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/*
 * Doorstap naar het onderwerp.
 *
 * Stond eerder zes keer identiek als "BEKIJK ALLE VRAGEN" in kapitalen op
 * .8rem — de kleinste tekst van de pagina, 21px hoog, en zes links met
 * dezelfde naam naar zes verschillende plekken. Wie per link navigeert
 * hoort nu wél waar hij heen gaat; de tekst staat in page-faq.php.
 *
 * min-height 44px voor het aanraakvlak. Kapitalen eraf, want een
 * onderwerpnaam in kapitalen leest slecht.
 */
/* De reset `.faq-page :where(a) { color: inherit }` hierboven staat op
   (0,1,0), dus de accentkleur onderaan deze regel wint gewoon. Eerder
   stond die reset op (0,1,1) en was hier een `a.`-selector nodig
   en was niet als link te herkennen. */
.faq-kaart__meer {
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    align-self: flex-start;
    min-height: var(--dg-raakvlak);
    font-size: .85rem;
    letter-spacing: .02em;
    color: var(--accent);
    text-decoration: none;
}

.faq-kaart__meer::after { content: ' \2192'; }

.faq-kaart__meer:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Contactblok --------------------------------------------------------- */

.faq-contact {
    max-width: 64rem;
    margin: 0 auto;
    padding-top: var(--dg-space-8);
    border-top: 1px solid var(--lijn);
    text-align: center;
}

.faq-contact__titel {
    font-family: var(--display);
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    margin: 0 0 var(--dg-space-2);
}

.faq-contact__tekst {
    max-width: 34rem;
    margin: 0 auto var(--dg-space-6);
    color: var(--zacht);
    line-height: 1.7;
}

.faq-contact__grid {
    display: grid;
    /* Geen --dg-rij: die is voor de twee productrasters, niet dit
       contactraster — al staat het rijgat er toevallig ook op 32. */
    gap: var(--dg-space-6) var(--dg-space-5);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.faq-kanaal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dg-space-3);
    text-decoration: none;
}

.faq-kanaal__icoon {
    width: 4.25rem;
    height: 4.25rem;
    display: grid;
    place-items: center;
    background: var(--kaart);
    border: 1px solid var(--lijn);
    border-radius: 50%;
    color: var(--accent);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.faq-kanaal__icoon svg {
    width: 1.6rem;
    height: 1.6rem;
}

.faq-kanaal:hover .faq-kanaal__icoon {
    background: var(--inkt);
    border-color: var(--inkt);
    color: var(--bg);
}

.faq-kanaal__titel {
    font-family: var(--display);
    font-size: 1.15rem;
    margin: 0;
}

.faq-kanaal__tekst {
    font-size: .85rem;
    color: var(--zacht);
    margin: 0;
}

.faq-kanaal__label {
    font-size: .85rem;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Accordeon (categoriepagina) ----------------------------------------- */

/* .faq-accordeon stond hier; geen enkel template stoot die klasse uit. */

.faq-item {
    border-bottom: 1px solid var(--lijn);
    /* Ankerruimte uit de echte headerhoogte, niet een losse literal:
       de header is al twee keer geslonken zonder dat 6rem meebewoog. */
    scroll-margin-top: var(--dg-onder-header, calc(var(--dg-header-vol, 81px) + var(--dg-space-4, 16px)));
}

.faq-item__vraag {
    position: relative;
    cursor: pointer;
    list-style: none;
    /* Verticaal (boven/onder) wordt binnen .faq-kaart__lijst — de enige
       plek waar dit element voorkomt — toch overschreven naar 16px door
       style.css (sectie 30a); alleen de rechterruimte voor het pictogram
       telt hier echt mee. */
    padding: var(--dg-space-4) var(--dg-space-7) var(--dg-space-4) 0;
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.5;
}

.faq-item__vraag::-webkit-details-marker { display: none; }

.faq-item__vraag::after {
    content: '+';
    position: absolute;
    right: .25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--accent);
    transition: transform .25s ease;
}

.faq-item[open] > .faq-item__vraag::after {
    transform: translateY(-50%) rotate(45deg);
}

.faq-item__antwoord {
    padding: 0 0 var(--dg-space-5);
    max-width: 60ch;
    font-size: .97rem;
    line-height: 1.75;
}

.faq-item__antwoord p { margin: .6em 0; } /* geen-schaal: alinearuimte in het antwoord, schaalt met de letter */

/* --- Toegankelijkheid ----------------------------------------------------- */

/* Geen eigen prefers-reduced-motion-blok meer: style.css sectie 2 zet
   `*, *::before, *::after { animation: none !important; transition: none
   !important }` en dekt alles hier al. De kopieën liepen bovendien uit
   elkaar — sommige zetten `none`, andere 0.01ms — en omdat een gescopede
   selector met !important van de universele wint, vuurde transitionend
   binnen het ene pakket wél en binnen het andere niet. Scripts die op
   dat event wachten gedroegen zich daardoor per pagina anders. */