/* =========================================================================
   Veelgestelde vragen (FAQ)
   - Twee kolommen: tekstblok (titel + intro) naast de uitklapbare vragen.
   - Onder 767px staat het tekstblok boven de vragen — ook in de variant met
     het tekstblok rechts.
   - Alle maten en kleuren komen uit CSS-variabelen die de Elementor-controls
     zetten (zie veelgestelde-vragen.php).
   - Het antwoord animeert met grid-template-rows 0fr -> 1fr: geen vaste
     max-height, dus lange antwoorden worden nooit afgekapt.
   ========================================================================= */

.rw-faq {
    /* Overschrijfbaar via de Elementor-controls. */
    --rw-faq-intro-width: 32%;
    --rw-faq-columns-gap: 5rem;
    --rw-faq-intro-gap: 1.25rem;
    --rw-faq-intro-text-width: 100%;
    --rw-faq-list-width: 43rem;
    --rw-faq-title-color: var(--primary-color, #1C2945);
    --rw-faq-intro-text-color: #8A93A5;
    --rw-faq-item-bg: #FFFFFF;
    --rw-faq-item-radius: 0.25rem;
    --rw-faq-question-color: var(--dark-grey, #131931);
    --rw-faq-question-color-open: var(--magenta-color, #A52A87);
    --rw-faq-question-color-hover: var(--magenta-color, #A52A87);
    --rw-faq-answer-color: #596173;
    --rw-faq-answer-link-color: var(--magenta-color, #A52A87);
    --rw-faq-border-color: #E2E5EA;
    --rw-faq-border-width: 0px; /* geen scheidingslijnen; het ontwerp werkt met witruimte */
    --rw-faq-items-gap: 1.25rem;
    --rw-faq-icon-size: 1.25rem;

    display: grid;
    grid-template-columns: var(--rw-faq-intro-width) 1fr;
    column-gap: var(--rw-faq-columns-gap);
    row-gap: var(--rw-faq-columns-gap);
    align-items: start;
}

/* Tekstblok rechts: kolombreedtes omdraaien en het blok naar achteren zetten.
   De DOM-volgorde blijft intro -> vragen, zodat de leesvolgorde klopt. */
.rw-faq--intro-right {
    grid-template-columns: 1fr var(--rw-faq-intro-width);
}

.rw-faq--intro-right .rw-faq__intro {
    order: 2;
}

/* Zonder titel en introtekst vullen de vragen de volle breedte. */
.rw-faq--no-intro {
    grid-template-columns: 1fr;
}

/* --- Tekstblok ---------------------------------------------------------- */
.rw-faq__intro {
    display: flex;
    flex-direction: column;
    gap: var(--rw-faq-intro-gap);
    min-width: 0;
}

/* Twee classes: de kit schrijft per heading-tag regels uit met de tag in de
   selector (0,1,1) — een enkele class zou daarvan verliezen. */
.rw-faq .rw-faq__title {
    margin: 0;
    padding: 0;
    color: var(--rw-faq-title-color);
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-weight: 300; /* Klavika Light */
    font-size: clamp(1.75rem, 2.4vw, 2.5rem);
    line-height: 1.2;
}

/* Accentwoorden: serif-italic, maar inline houden (het thema zet h_ span soms
   naar display:block met een marge — hier terugdraaien). */
.rw-faq .rw-faq__title em,
.rw-faq .rw-faq__title i {
    display: inline;
    margin: 0;
    font-family: var(--secondary-font, "Kepler", serif);
    font-style: italic;
    font-weight: 500;
}

.rw-faq .rw-faq__title span,
.rw-faq .rw-faq__title strong,
.rw-faq .rw-faq__title b {
    display: inline;
    margin: 0;
}

.rw-faq .rw-faq__intro-text {
    margin: 0;
    max-width: var(--rw-faq-intro-text-width);
    color: var(--rw-faq-intro-text-color);
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 1rem;
    font-weight: 400;
    line-height: 150%;
}

/* --- Vragenlijst -------------------------------------------------------- */
/* De kaartbreedte uit het ontwerp (43rem) als max-width, niet als vaste
   breedte: in een smallere kolom krimpt de lijst dan gewoon mee. */
.rw-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--rw-faq-items-gap);
    min-width: 0;
    max-width: var(--rw-faq-list-width);
}

/* De vraagkaart uit het ontwerp: kolom met 1rem binnenmarge rondom, dicht én open.
   De 0.5rem tussenruimte tussen vraag en antwoord staat hier niet als flex-gap
   maar als padding-top op het antwoord (zie onder): een gap zou ook ruimte
   innemen als de vraag dicht is, en springt bij het openklappen in één keer op
   z'n plek in plaats van mee te animeren.
   Het ontwerp zet de open kaart op align-items: center; dat scheelt hier niets
   omdat vraag en antwoord de volle kaartbreedte vullen. */
.rw-faq__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    gap: 0;
    box-sizing: border-box;
    min-width: 0;
    padding: 1.25rem;
    border-bottom: var(--rw-faq-border-width) solid var(--rw-faq-border-color);
    border-radius: var(--rw-faq-item-radius);
    /* Wit, ook als de vraag open staat: de open kaart krijgt geen eigen kleur. */
    background-color: var(--rw-faq-item-bg);
}

.rw-faq--top-border .rw-faq__item:first-child {
    border-top: var(--rw-faq-border-width) solid var(--rw-faq-border-color);
}

/* De heading eromheen is er alleen voor schermlezers; visueel doet de button
   het werk. De volle breedte is nodig zodat het pijltje rechts uitlijnt — de
   kaart erboven zet align-items op flex-start. */
.rw-faq .rw-faq__heading {
    width: 100%;
    margin: 0;
    padding: 0;
    font: inherit;
    line-height: inherit;
}

.rw-faq .rw-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0; /* de binnenmarge zit op de kaart (.rw-faq__item) */
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--rw-faq-question-color);
    font-family: var(--primary-font, "Klavika Basic", "Klavika", sans-serif);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 0.0225rem;
    text-align: left;
    cursor: pointer;
    appearance: none;
    transition: color 0.25s ease;
}

.rw-faq .rw-faq__question:hover,
.rw-faq .rw-faq__question:focus-visible {
    background: none;
    color: var(--rw-faq-question-color-hover);
}

/* Ná de hover-regel, zodat een open kaart z'n eigen kleur houdt. */
.rw-faq .rw-faq__item.is-open .rw-faq__question {
    background: none;
    color: var(--rw-faq-question-color-open);
}

.rw-faq .rw-faq__question:focus-visible {
    outline: 2px solid var(--rw-faq-question-color-hover);
    outline-offset: 2px;
}

/* Het thema zet elke span binnen een heading op het Kepler-accentfont, italic,
   weight 500 én margin-left: 60px (zie themes/refreshworks/assets/css/global.css).
   De vraagtekst en het pijltje zitten als span in de heading, dus die erfden dat
   allemaal. Hier terugzetten naar de stijl van de vraag zelf. */
.rw-faq .rw-faq__question-text,
.rw-faq .rw-faq__icon {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.rw-faq .rw-faq__question-text {
    display: block;
    min-width: 0;
}

/* --- Pijltje ------------------------------------------------------------ */
.rw-faq__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--rw-faq-icon-size);
    color: inherit;
    transition: transform 0.3s ease;
}

.rw-faq__icon svg {
    display: block;
    width: 100%;
    height: auto;
}

.rw-faq__item.is-open .rw-faq__icon {
    transform: rotate(180deg);
}

/* --- Antwoord ----------------------------------------------------------- */
/* 0fr -> 1fr laat de rij naar de eigenlijke inhoudshoogte animeren; overflow
   op de binnenlaag doet het clippen. */
.rw-faq__answer {
    display: grid;
    grid-template-rows: 0fr;
    box-sizing: border-box;
    width: 100%;
    transition: grid-template-rows 0.35s ease;
}

.rw-faq__item.is-open > .rw-faq__answer {
    grid-template-rows: 1fr;
}

/* Deze laag clipt en mag daarom GEEN padding of marge hebben: een grid-item in
   een 0fr-rij wordt op hoogte 0 geklemd, maar padding telt wél mee in z'n box.
   Met padding hier hield een dichte kaart 8px dode ruimte onder de vraag, en
   stond de vraagregel dus niet in het midden van de kaart.
   visibility houdt links in een dicht antwoord buiten de tabvolgorde en de
   toegankelijkheidsboom; door de transitie blijft de inhoud tijdens het
   dichtklappen nog zichtbaar. */
.rw-faq__answer-inner {
    overflow: hidden;
    visibility: hidden;
    min-height: 0;
    transition: visibility 0.35s ease;
}

.rw-faq__item.is-open > .rw-faq__answer > .rw-faq__answer-inner {
    visibility: visible;
}

/* De binnenmarge zit hier, binnen de geclipte laag: zo animeert de ruimte
   tussen vraag en antwoord mee en neemt hij niets in als de kaart dicht is. */
.rw-faq__answer-content {
    padding: 0.5rem 0 0 0;
    color: var(--rw-faq-answer-color);
    font-family: var(--primary-font, "Klavika Basic", "Klavika", sans-serif);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
}

.rw-faq__answer-content > :first-child {
    margin-top: 0;
}

.rw-faq__answer-content > :last-child {
    margin-bottom: 0;
}

.rw-faq__answer-content a {
    color: var(--rw-faq-answer-link-color);
    text-decoration: underline;
}

.rw-faq__answer-content ul,
.rw-faq__answer-content ol {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
    .rw-faq {
        --rw-faq-columns-gap: 3rem;
    }
}

@media (max-width: 767px) {
    /* Onder elkaar: het tekstblok komt boven de vragen, ook als het op desktop
       rechts staat. */
    .rw-faq,
    .rw-faq--intro-right {
        grid-template-columns: 1fr;
    }

    .rw-faq--intro-right .rw-faq__intro {
        order: 0;
    }

    .rw-faq .rw-faq__intro-text {
        max-width: none;
    }

    .rw-faq .rw-faq__question {
        gap: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rw-faq__answer,
    .rw-faq__answer-inner,
    .rw-faq__icon,
    .rw-faq .rw-faq__question {
        transition: none;
    }
}