/*
 * veelgestelde-vragen.css — de vragenpagina.
 *
 * Hoort bij veelgestelde-vragen.php en wordt alleen op die template ingeladen
 * (baserules regel 8), na reset.css, main.css, onderdelen/onthullen.css en
 * onderdelen/inhoud.css. Die laatste twee staan in samitAssets::ONDERDELEN: de
 * onthulanimatie is dezelfde als op /blog en een antwoord komt uit de editor en
 * heeft dus de tekstopmaak van een pagina nodig.
 *
 * De secties staan in dezelfde volgorde en met dezelfde nummers als in
 * veelgestelde-vragen.php en inc/js/veelgestelde-vragen.js:
 *
 *   0. tokens en de pagina zelf
 *   1. de kop
 *   2. het zoekveld en het resultatenpaneel
 *   3. de veelgevraagde vragen
 *   4. de kengetallen
 *   5. de chips (mobiel en smal)
 *   6. de romp
 *   7. de onderwerpenlijst
 *   8. de hulpkaart in de kolom
 *   9. een onderwerp
 *  10. een vraag
 *  11. de leegmelding
 *  12. het hulpblok
 *  13. de breekpunten
 *
 * Klassenamen zijn camelCase (regel 2). De breekpunten zijn 1024 en 767, gelijk
 * aan samitApparaat::BREEKPUNT en ::BREEKPUNT_SMAL — wijken ze af, dan krijgt een
 * bezoeker rond die breedte de ene HTML met de andere CSS.
 */

/* ==================================================================
 * 0. Tokens en de pagina zelf
 * ================================================================== */

.vragenPagina {
    /* De drie blauwen van de categoriebalk in de header, de hero en de footer.
       Dezelfde waarden, want dit is hetzelfde vlak: het staat aan het begin van
       de pagina en sluit visueel aan op de balk erboven. Er stonden hier drie
       bijna zwarte diepblauwen; zie de tokens in front-page.css voor waarom die
       weg zijn en waarom de lichtste van de drie niet lichter kan. */
    --vraagDiep: #0f5482;
    --vraagDiepMidden: #17699e;
    --vraagDiepLicht: #1b6f9f;

    /* De lichte laag waarop de kaarten staan. Iets koeler dan wit, zodat een
       witte kaart een kaart is en niet een stuk achtergrond met een randje. */
    --vraagZacht: #f7fafc;
    --vraagLijn: #e6ecf2;
    --vraagLijnDonker: #d7e3ec;

    --vraagRand: 14px;
    --vraagRandGroot: 28px;

    /* Eén verticale maat voor de ruimte tussen de blokken, meebewegend met de
       breedte: een telefoon hoort niet dezelfde 96 pixels wit te krijgen als
       een monitor. */
    --vraagSectie: clamp(48px, 6vw, 86px);

    background-color: var(--vraagZacht);
}

/*
 * De kop loopt van rand tot rand en zet zijn eigen ruimte bovenaan. De
 * standaardmarge van het inhoudsgebied moet er hier dus af — net als op de
 * voorpagina, de productpagina en het productoverzicht.
 */
.siteInhoud {
    padding-top: 0;
}

/* ==================================================================
 * 1. De kop
 *
 * Een diepblauwe band met afgeronde onderhoeken. De achtergrond is één
 * background-image met drie lagen: twee radiale gloeden en een lineair verloop.
 * Alle drie staan ze stil en alle drie eindigen ze op transparant — geen
 * filter: blur(), geen mix-blend-mode en geen backdrop-filter, want die zijn
 * duur zodra er iets bij beweegt. Zie de les bij `.hero` in front-page.css.
 * ================================================================== */

/*
 * `overflow-x: clip` en niet `overflow: hidden`. Het resultatenpaneel onder het
 * zoekveld is langer dan de ruimte die er in deze band onder het veld over is en
 * hangt dus over de onderrand heen; met `hidden` werd het daar afgeknipt. Clip
 * op één as laat de andere op `visible` staan — dat mag, waar `hidden` de andere
 * as naar `auto` zou trekken en er dus een schuifbalk bij zou komen. De drie
 * achtergrondlagen staan op het element zelf en worden nog steeds door de
 * `border-radius` bijgesneden.
 *
 * De z-index hoort bij diezelfde overhang: het paneel valt over de chips en over
 * de vragenlijst eronder, en die staan er in de HTML ná deze band.
 */
.vraagKop {
    position: relative;
    z-index: 2;
    overflow-x: clip;
    /* Krapper dan de hero van de voorpagina, en met reden: daar ís het vlak de
       inhoud, hier staat de inhoud eronder. Op een laptop van achthonderd pixels
       vulde deze band in zijn oude maatvoering het hele venster, en dan is een
       vragenpagina een pagina zonder zichtbare vragen. */
    padding-block: clamp(32px, 3.4vw, 48px) clamp(34px, 3.6vw, 52px);
    border-radius: 0 0 var(--vraagRandGroot) var(--vraagRandGroot);
    background-color: var(--vraagDiep);
    background-image:
        radial-gradient(760px 620px at 14% -30%, rgb(120 200 245 / 38%) 0%, rgb(120 200 245 / 0%) 64%),
        radial-gradient(680px 560px at 88% 128%, rgb(86 178 236 / 32%) 0%, rgb(86 178 236 / 0%) 62%),
        linear-gradient(158deg, var(--vraagDiep) 0%, var(--vraagDiepMidden) 54%, var(--vraagDiepLicht) 100%);
    color: var(--kleurWit);

    /* Eigen stapelcontext, zodat het decor met z-index: -1 achter de inhoud
       blijft en niet achter de achtergrond van de pagina verdwijnt. */
    isolation: isolate;
}

/*
 * Gecentreerd, met een leesmaat die de titel niet over de volle 1180 pixels
 * uitrekt. 720 is de breedte waarop de intro op twee regels uitkomt en de titel
 * op één.
 */
.vraagKopInner {
    position: relative;
    max-width: 760px;
    text-align: center;
}

.vraagKopLabel {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    padding: 7px 16px 7px 12px;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: var(--randRond);
    background-color: rgb(255 255 255 / 8%);
    font-size: 0.8125rem;
    line-height: 1.3;
}

.vraagKopStip {
    display: block;
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 100%;
    background-color: var(--kleurOranje);
}

.vraagKopTitel {
    font-size: clamp(2rem, 4.4vw, 3.125rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.08;
}

.vraagKopIntro {
    margin: 16px auto 0;
    max-width: 560px;
    color: rgb(255 255 255 / 90%);
    font-size: var(--tekstMd);
    line-height: 1.6;
}

/* ==================================================================
 * 2. Het zoekveld en het resultatenpaneel
 *
 * Staan er alleen als inc/js/veelgestelde-vragen.js draait; de houder eronder
 * is er altijd en blijft dan leeg. Vandaar dat de marge op het zoekveld staat en
 * niet op de houder: een lege houder hoort geen ruimte in te nemen.
 *
 * De houder is het ankerpunt van het paneel. Dat paneel hangt onder het veld en
 * niet in de pagina, want de eerste vraagkaart begint hier ruim negenhonderd
 * pixels van de bovenkant: wie in dit veld typt zou anders niets van het
 * resultaat te zien krijgen.
 * ================================================================== */

.vraagZoekHouder {
    position: relative;
}

.vraagZoek {
    position: relative;
    display: flex;
    margin-top: 30px;
    align-items: center;
    border-radius: var(--vraagRand);
    background-color: var(--kleurWit);
    box-shadow: 0 18px 40px rgb(3 22 39 / 26%);
}

.vraagZoekIcoon {
    display: inline-flex;
    padding-left: 20px;
    color: var(--kleurBlauw);
    pointer-events: none;
}

.vraagZoekIcoon svg {
    width: 18px;
    height: 18px;
}

.vraagZoekVeld {
    width: 100%;
    min-width: 0;
    padding: 19px 16px 19px 14px;
    border: 0;
    background-color: transparent;
    color: var(--kleurTekst);
    font-family: inherit;
    font-size: var(--tekstMd);
    line-height: 1.3;
}

.vraagZoekVeld::placeholder {
    color: var(--kleurTekstZacht);
}

/*
 * De eigen wisknop staat er al; die van WebKit zou ernaast komen te staan.
 */
.vraagZoekVeld::-webkit-search-cancel-button {
    display: none;
}

.vraagZoekVeld:focus {
    outline: 0;
}

/*
 * De ring om het hele veld en niet om de input: het veld is een rij met een
 * icoon en een knop erin, en een outline om alleen de input zou daar middenin
 * staan. :focus-within is precies wat dat betekent.
 */
.vraagZoek:focus-within {
    box-shadow:
        0 18px 40px rgb(3 22 39 / 26%),
        0 0 0 3px rgb(245 139 0 / 55%);
}

.vraagZoekWis {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: none;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    border: 0;
    border-radius: 100%;
    background-color: var(--kleurVlak);
    color: var(--kleurBlauwDonker);
    cursor: pointer;
    transition:
        background-color var(--duurSnel) ease,
        color var(--duurSnel) ease;
}

.vraagZoekWis:hover,
.vraagZoekWis:focus-visible {
    background-color: var(--kleurBlauw);
    color: var(--kleurWit);
}

.vraagZoekWis svg {
    width: 11px;
    height: 11px;
}

/* --- Het resultatenpaneel -----------------------------------------
 *
 * Dezelfde opbouw als het suggestiepaneel in de header (zie main.css): een wit
 * vlak met groepen en regels, en een voetregel die naar het volledige overzicht
 * wijst. Wat hier bewust níet staat is de hoogte bij het openklappen — dat is
 * een animatie van 0 naar zoveel als de gevonden vragen nodig hebben, en die kan
 * CSS niet (baserules regel 7). Wat CSS wel kan — de hover op een regel, het
 * pijltje dat opschuift — staat hieronder.
 *
 * De stand van het zoeken staat als `screenReaderText` in de HTML en heeft hier
 * dus geen opmaak meer: in beeld zegt de voetregel van dit paneel hoeveel er
 * gevonden is.
 * ------------------------------------------------------------------ */

.vraagZoekPaneel {
    position: absolute;
    z-index: 4;
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    overflow: hidden;
    border-radius: var(--vraagRand);
    background-color: var(--kleurWit);

    /* Steviger dan de schaduw onder het veld zelf: dit vlak zweeft werkelijk
       over de knopjes en de kengetallen eronder, en op dit diepblauw is de
       schaduw het enige waaraan dat te zien is. */
    box-shadow: 0 28px 64px -16px rgb(3 22 39 / 62%);
    color: var(--kleurTekst);
    text-align: left;
}

/*
 * Een eigen schuifgebied en niet het paneel laten doorgroeien: bij tien
 * gevonden vragen zou het anders tot ver onder de vouw doorlopen, en dan is het
 * middel net zo onzichtbaar als de lijst waar het voor in de plaats komt.
 * overscroll-behavior houdt de pagina eronder stil zodra de lijst aan zijn eind
 * is.
 */
.vraagZoekLijst {
    max-height: min(46vh, 356px);

    /* De dynamische viewport waar de browser hem kent: op een telefoon telt vh
       de adresbalk mee die er tijdens het scrollen niet is. */
    max-height: min(46dvh, 356px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.vraagZoekGroep {
    padding-block: 4px 6px;
    border-top: 1px solid var(--vraagLijn);
}

.vraagZoekGroep:first-child {
    border-top: 0;
}

/*
 * Hetzelfde labeltje als boven een kolom in de footer en boven een groep in het
 * suggestiepaneel: klein, kapitalen, met letterruimte. Het is een aanduiding en
 * geen kop, en dat hoort te zien te zijn.
 */
.vraagZoekGroepKop {
    padding: 9px 18px 3px;
    color: var(--kleurTekstZacht);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vraagZoekRegel {
    display: grid;
    align-items: center;
    padding: 9px 18px;
    color: inherit;
    column-gap: 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    text-decoration: none;
}

/*
 * De aangewezen regel. Twee selectors en één opmaak: met de muis is dat :hover,
 * met het toetsenbord zet het script aria-selected. Zo staat er één regel aan en
 * hoeft er naast die ARIA-toestand geen eigen klasse bijgehouden te worden —
 * dezelfde afweging als bij aria-current in de onderwerpenkolom.
 */
.vraagZoekRegel:hover,
.vraagZoekRegel[aria-selected="true"] {
    background-color: var(--kleurVlak);
}

.vraagZoekRegel:focus-visible {
    outline: 2px solid var(--kleurBlauw);
    outline-offset: -2px;
}

.vraagZoekRegelTekst {
    min-width: 0;
}

.vraagZoekRegelVraag {
    display: block;
    font-size: var(--tekstSm);
    font-weight: 500;
    line-height: 1.4;
}

/*
 * Dezelfde nadruk als op een vraagkaart: een onderstreping en geen vlak achter
 * de letters. Op een regel waarvan er drie woorden oplichten is een gele balk
 * luider dan de vraag zelf.
 */
.vraagZoekRegelVraag mark,
.vraagZoekRegelCitaat mark {
    background-color: transparent;
    color: var(--kleurBlauwDonker);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--kleurOranje);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/*
 * Het stukje antwoord. Staat er alleen als de gezochte woorden níet in de vraag
 * staan maar wel in het antwoord — dan is dit de uitleg waaróm deze regel er
 * staat. Eén regel hoog en met een puntje-puntje aan het eind: twee regels
 * citaat naast een vraag van één regel laat het antwoord het zwaarste ding op
 * de regel worden.
 */
.vraagZoekRegelCitaat {
    display: block;
    overflow: hidden;
    margin-top: 2px;
    color: var(--kleurTekstZacht);
    font-size: var(--tekstXs);
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vraagZoekRegelCitaat:empty {
    display: none;
}

.vraagZoekRegelPijl {
    width: 13px;
    height: 13px;
    flex: none;
    color: var(--kleurTekstZacht);
    transition:
        color var(--duurSnel) ease,
        transform var(--duurSnel) ease;
}

.vraagZoekRegel:hover .vraagZoekRegelPijl,
.vraagZoekRegel[aria-selected="true"] .vraagZoekRegelPijl {
    color: var(--kleurBlauw);
    transform: translateX(3px);
}

/*
 * Niets gevonden. De uitgebreide melding staat onder de lijst verderop op de
 * pagina; hier staat dezelfde tekst op de plek waar de bezoeker op dat moment
 * kijkt.
 */
.vraagZoekLeeg {
    padding: 20px 18px;
}

.vraagZoekLeegKop {
    color: var(--kleurTekst);
    font-size: var(--tekstMd);
    font-weight: 500;
}

.vraagZoekLeegTekst {
    margin-top: 6px;
    color: var(--kleurTekstZacht);
    font-size: var(--tekstSm);
    line-height: 1.5;
}

.vraagZoekAlles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-top: 1px solid var(--vraagLijn);
    background-color: #fbfdfe;
    color: var(--kleurBlauw);
    column-gap: 10px;
    font-size: var(--tekstSm);
    font-weight: 500;
    text-decoration: none;
}

.vraagZoekAlles:hover,
.vraagZoekAlles:focus-visible {
    background-color: var(--kleurVlak);
    color: var(--kleurBlauwDonker);
}

.vraagZoekAllesTekst {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vraagZoekAllesPijl {
    width: 13px;
    height: 13px;
    flex: none;
    transition: transform var(--duurSnel) ease;
}

.vraagZoekAlles:hover .vraagZoekAllesPijl {
    transform: translateX(3px);
}

/* ==================================================================
 * 3. De veelgevraagde vragen
 *
 * De handvol vragen die per vraag zijn aangevinkt. Het zijn gewone ankerlinks,
 * dus ze werken zonder JavaScript ook — dan scrolt de browser naar de vraag en
 * staat die dichtgeklapt in beeld. Met het script gaat hij open.
 * ================================================================== */

.vraagPillen {
    margin-top: 22px;
}

.vraagPillenKop {
    color: rgb(255 255 255 / 82%);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vraagPillenLijst {
    display: flex;
    margin-top: 12px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.vraagPil {
    display: inline-flex;
    padding: 8px 15px;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: var(--randRond);
    background-color: rgb(255 255 255 / 7%);
    color: rgb(255 255 255 / 88%);
    font-size: var(--tekstSm);
    line-height: 1.35;
    text-decoration: none;
    transition:
        background-color var(--duurSnel) ease,
        border-color var(--duurSnel) ease,
        color var(--duurSnel) ease;
}

.vraagPil:hover,
.vraagPil:focus-visible {
    border-color: var(--kleurOranje);
    background-color: var(--kleurOranje);
    color: var(--kleurWit);
}

/* ==================================================================
 * 4. De kengetallen
 *
 * Drie feiten op één regel, met een haarlijn ertussen in plaats van een punt of
 * een streepje: dan blijft de rij leesbaar als de derde er niet is.
 * ================================================================== */

.vraagFeiten {
    display: flex;
    margin-top: 24px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 26px;
}

.vraagFeit {
    display: inline-flex;
    position: relative;
    align-items: baseline;
    gap: 7px;
}

/* De haarlijn hoort bij de scheiding en dus bij het item dat volgt. */
.vraagFeit + .vraagFeit::before {
    content: "";
    position: absolute;
    left: -13px;
    width: 1px;
    height: 14px;
    align-self: center;
    background-color: rgb(255 255 255 / 22%);
}

.vraagFeitWaarde {
    color: var(--kleurWit);
    font-size: var(--tekstLg);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.vraagFeitLabel {
    color: rgb(255 255 255 / 86%);
    font-size: var(--tekstSm);
}

/* ==================================================================
 * 5. De chips (mobiel en smal)
 *
 * Een rij die horizontaal schuift, direct onder de kop.
 *
 * Hij plakt níet onder de vaste balk, en dat is een keuze. De blauwe balk van
 * dit thema laat voorbij 134 pixels los en komt alleen bij terugscrollen weer in
 * beeld (zie main.js). Een balk die op `top: var(--headerHoogte)` plakt staat
 * dus het grootste deel van de tijd met 58 pixels lucht erboven waar de kaarten
 * doorheen schuiven, en op `top: 0` verdwijnt hij achter die balk zodra iemand
 * omhoog scrolt. Beide zien eruit als een fout. Van de twee plekken die
 * aangeven waar je bent, is dit de plek om ergens naartoe te gaan; de kolom op
 * desktop houdt bij waar je bent.
 * ================================================================== */

.vraagChips {
    border-block: 1px solid var(--vraagLijn);
    background-color: var(--kleurWit);

    /* Van rand tot rand, met de rij zelf op de lijn van de inhoud. De ruimte
       achter de laatste chip is padding op de lijst en geen marge op het item:
       zo eindigt de rij op de rand van de container in plaats van tegen het
       venster. */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.vraagChips::-webkit-scrollbar {
    display: none;
}

.vraagChipsLijst {
    display: flex;
    padding: 12px 20px;
    gap: 8px;
    width: max-content;
}

.vraagChip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid var(--vraagLijn);
    border-radius: var(--randRond);
    background-color: var(--vraagZacht);
    color: var(--kleurTekst);
    font-size: var(--tekstSm);
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    transition:
        border-color var(--duurSnel) ease,
        background-color var(--duurSnel) ease;
}

.vraagChip:hover,
.vraagChip:focus-visible {
    border-color: var(--vraagLijnDonker);
    background-color: var(--kleurVlak);
}

.vraagChipIcoon {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--kleurBlauw);
}

.vraagChipAantal {
    color: var(--kleurTekstZacht);
    font-size: var(--tekstXs);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
}

/* ==================================================================
 * 6. De romp
 * ================================================================== */

.vragenRomp {
    display: grid;

    /* Boven minder dan onder. De band erboven zet zijn eigen ruimte al neer, en
       twee hele sectiemarges op elkaar is een gat waar de pagina in wegvalt —
       dezelfde afweging als tussen de secties op de voorpagina. */
    padding-block: clamp(30px, 3.2vw, 48px) var(--vraagSectie);
    align-items: start;
    column-gap: clamp(32px, 4vw, 64px);
    grid-template-columns: 264px minmax(0, 1fr);
}

/* ==================================================================
 * 7. De onderwerpenlijst
 *
 * Loopt met position: sticky mee. Het streepje ernaast wordt door het script op
 * de hoogte en de plek van de actieve link gezet; de beweging ertussen is een
 * CSS-transition, want dat is één eigenschap van A naar B (baserules regel 7).
 * ================================================================== */

.vraagRail {
    position: sticky;
    top: calc(var(--headerHoogte) + 24px);
}

.vraagIndexKop {
    margin-bottom: 14px;
    padding-left: 15px;
    color: var(--kleurTekstZacht);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vraagIndexHouder {
    position: relative;
    padding-left: 3px;
}

/*
 * De rail waar het streepje over loopt. Een pseudo-element op de houder, want
 * het is versiering: de lijst eronder is de inhoud.
 */
.vraagIndexHouder::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 2px;
    border-radius: 2px;
    background-color: var(--vraagLijnDonker);
}

.vraagIndexMarkering {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 3px;
    height: 0;
    border-radius: 3px;
    background-color: var(--kleurOranje);
    transition:
        height var(--duurMd) var(--versnelling),
        transform var(--duurMd) var(--versnelling);
}

@media (prefers-reduced-motion: reduce) {
    .vraagIndexMarkering {
        transition: none;
    }
}

.vraagIndexLijst {
    display: grid;
    gap: 2px;
}

.vraagIndexLink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 0 8px 8px 0;
    color: var(--kleurTekstZacht);
    column-gap: 12px;
    font-size: var(--tekstBasis);
    line-height: 1.35;
    text-decoration: none;
    transition:
        background-color var(--duurSnel) ease,
        color var(--duurSnel) ease;
}

.vraagIndexLink:hover,
.vraagIndexLink:focus-visible {
    background-color: var(--kleurVlak);
    color: var(--kleurTekst);
}

/*
 * De actieve stand hangt aan aria-current en niet aan een eigen klasse: dan is
 * er één bron voor wat een schermlezer voorleest en wat er te zien is. Dezelfde
 * afweging als bij de inhoudsopgave op een artikel.
 */
.vraagIndexLink[aria-current] {
    background-color: var(--kleurVlak);
    color: var(--kleurTekst);
    font-weight: 500;
}

.vraagIndexAantal {
    flex: none;
    color: var(--kleurTekstZacht);
    font-size: var(--tekstXs);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
}

.vraagIndexLink[aria-current] .vraagIndexAantal {
    color: var(--kleurOranje);
}

/*
 * Een onderwerp waarin het zoeken niets vond blijft staan, gedimd en met een 0
 * erachter: dan is te zien dát het leeg is, in plaats van dat een regel uit de
 * lijst verdwijnt terwijl je ernaar kijkt. Dezelfde afweging als bij een
 * filterwaarde die op nul uitkomt in de winkel.
 */
.vraagIndexLink[data-leeg] {
    opacity: 0.45;
}

/* ==================================================================
 * 8. De hulpkaart in de kolom
 * ================================================================== */

.vraagRailKaart {
    margin-top: 26px;
    padding: 18px 20px 20px;
    border: 1px solid var(--vraagLijn);
    border-radius: var(--vraagRand);
    background-color: var(--kleurWit);
}

.vraagRailIcoon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border-radius: 9px;
    background-color: var(--kleurVlak);
    color: var(--kleurBlauw);
}

.vraagRailIcoon svg {
    width: 15px;
    height: 15px;
}

.vraagRailLabel {
    color: var(--kleurTekstZacht);
    font-size: var(--tekstXs);
}

.vraagRailNummer {
    display: inline-block;
    margin-top: 2px;
    color: var(--kleurTekst);
    font-size: var(--tekstMd);
    font-weight: 500;
    text-decoration: none;
}

.vraagRailNummer:hover,
.vraagRailNummer:focus-visible {
    color: var(--kleurBlauw);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.vraagRailTijden {
    margin-top: 8px;
    color: var(--kleurTekstZacht);
    font-size: var(--tekstXs);
    line-height: 1.5;
}

/* ==================================================================
 * 9. Een onderwerp
 *
 * De kop is een rij: tegel met icoon, naam, haarlijn, aantal. Die haarlijn maakt
 * er een scheiding van in plaats van alleen een groter woord — op de bestaande
 * site staan de vijf koppen los boven hun lijstje en is niet te zien waar een
 * onderwerp ophoudt.
 * ================================================================== */

.vraagLijst {
    display: grid;
    gap: var(--vraagSectie);
}

.vraagGroepKop {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    column-gap: 14px;
}

.vraagGroepIcoon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--randLg);
    background-color: var(--kleurVlak);
    color: var(--kleurBlauw);
}

.vraagGroepIcoon svg {
    width: 21px;
    height: 21px;
}

.vraagGroepTitel {
    color: var(--kleurTekst);
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.vraagGroepLijn {
    height: 1px;
    flex: 1 1 auto;
    min-width: 16px;
    background-color: var(--vraagLijnDonker);
}

.vraagGroepAantal {
    flex: none;
    color: var(--kleurTekstZacht);
    font-size: var(--tekstSm);
    font-variant-numeric: tabular-nums;
}

.vraagKaarten {
    display: grid;
    gap: 10px;
}

/* ==================================================================
 * 10. Een vraag
 * ================================================================== */

.vraagKaart {
    position: relative;
    border: 1px solid var(--vraagLijn);
    border-radius: var(--vraagRand);
    background-color: var(--kleurWit);
    transition:
        border-color var(--duurMd) ease,
        box-shadow var(--duurMd) ease;
}

.vraagKaart:hover {
    border-color: var(--vraagLijnDonker);
}

.vraagKaart[open] {
    border-color: var(--vraagLijnDonker);
    box-shadow: 0 16px 38px rgb(15 24 74 / 8%);
}

/*
 * Het oranje streepje langs een open kaart. Van boven naar beneden opengeschoven
 * met transform, want dat is één eigenschap van A naar B en dus CSS-werk. De
 * inset van 12 pixels houdt hem binnen het rechte deel van de rand; op 0 zou hij
 * in de afronding van de hoek uitsteken.
 */
.vraagKaart::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background-color: var(--kleurOranje);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform var(--duurMd) var(--versnelling);
}

.vraagKaart[open]::before {
    transform: scaleY(1);
}

@media (prefers-reduced-motion: reduce) {
    .vraagKaart::before {
        transition: none;
    }
}

.vraagKaartKnop {
    display: flex;
    align-items: center;
    padding: 17px 20px;
    color: var(--kleurTekst);
    column-gap: 16px;
    cursor: pointer;

    /* Het driehoekje van de browser weg; er staat een eigen chevron in de knop. */
    list-style: none;
}

.vraagKaartKnop::-webkit-details-marker {
    display: none;
}

/*
 * Het volgnummer. Tabulaire cijfers en een vaste breedte, zodat 01 tot 09 en 10
 * tot 27 allemaal op dezelfde lijn beginnen — anders schuift de vraagtekst per
 * regel een halve letter op.
 */
.vraagKaartNummer {
    width: 22px;
    flex: none;
    color: var(--kleurTekstZacht);
    font-size: var(--tekstSm);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color var(--duurMd) ease;
}

.vraagKaart[open] .vraagKaartNummer {
    color: var(--kleurOranje);
}

.vraagKaartTekst {
    flex: 1 1 auto;
    font-size: var(--tekstMd);
    font-weight: 500;
    line-height: 1.4;
}

/*
 * Wat het zoeken gevonden heeft. Een onderstreping en geen vlak achter de
 * letters: op een regel van vijftien woorden waarvan er drie oplichten is een
 * gele balk luider dan de vraag zelf.
 */
.vraagKaartTekst mark {
    background-color: transparent;
    color: var(--kleurBlauwDonker);
    text-decoration: underline;
    text-decoration-color: var(--kleurOranje);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.vraagKaartPijl {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background-color: var(--kleurVlak);
    color: var(--kleurBlauwDonker);
    transition:
        background-color var(--duurMd) ease,
        color var(--duurMd) ease,
        transform var(--duurMd) var(--versnelling);
}

.vraagKaartPijl svg {
    width: 12px;
    height: 7px;
}

.vraagKaart[open] .vraagKaartPijl {
    background-color: var(--kleurBlauw);
    color: var(--kleurWit);
    transform: rotate(180deg);
}

/* --- Het antwoord ------------------------------------------------- */

.vraagKaartAntwoord {
    overflow: hidden;
}

.vraagKaartAntwoordBinnen {
    padding: 0 20px 20px 58px;
    color: var(--kleurTekstZacht);
    font-size: var(--tekstBasis);
}

/*
 * Een link in een antwoord hoort op te vallen: het is meestal precies het
 * volgende dat de bezoeker moet doen.
 */
.vraagKaartAntwoordBinnen a {
    color: var(--kleurBlauw);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.vraagKaartAntwoordBinnen a:hover,
.vraagKaartAntwoordBinnen a:focus-visible {
    color: var(--kleurBlauwDonker);
}

/*
 * Een vraag die door het zoeken wegvalt, gaat uit de layout — echt weg en niet
 * op nul opacity: een lege plek tussen twee kaarten leest als een fout. `hidden`
 * komt uit het script en niet uit PHP, want zonder script hoort er niets weg te
 * vallen.
 */
.vraagKaart[hidden],
.vraagGroep[hidden] {
    display: none;
}

/* ==================================================================
 * 11. De leegmelding
 * ================================================================== */

.vraagLeeg {
    padding: 36px 28px;
    border: 1px dashed var(--vraagLijnDonker);
    border-radius: var(--vraagRandGroot);
    background-color: var(--kleurWit);
    text-align: center;
}

.vraagLeegKop {
    color: var(--kleurTekst);
    font-size: var(--tekstLg);
    font-weight: 500;
}

.vraagLeegTekst {
    margin: 8px auto 0;
    max-width: 440px;
    color: var(--kleurTekstZacht);
    font-size: var(--tekstBasis);
    line-height: 1.6;
}

/* ==================================================================
 * 12. Het hulpblok
 * ================================================================== */

.vraagHulp {
    padding-bottom: var(--vraagSectie);
}

.vraagHulpPaneel {
    display: grid;
    position: relative;
    overflow: hidden;
    align-items: center;
    padding: clamp(26px, 3.4vw, 40px);
    border-radius: var(--vraagRandGroot);
    background-color: var(--vraagDiepMidden);
    background-image:
        /*
         * Lichtblauw en niet oranje. Dit paneel is ondiep en de gloed valt op de
         * lichtste hoek van het verloop; nagemeten kwam die hoek daar op #4A7D8F
         * uit, een grijsgroen. Oranje heeft geen blauw in zich, dus haalt het
         * over blauw de verzadiging eruit — zie dezelfde afweging bij de hero op
         * de voorpagina.
         */
        radial-gradient(520px 420px at 92% 120%, rgb(86 178 236 / 34%) 0%, rgb(86 178 236 / 0%) 66%),
        linear-gradient(126deg, var(--vraagDiep) 0%, var(--vraagDiepMidden) 62%, var(--vraagDiepLicht) 100%);
    color: var(--kleurWit);
    column-gap: clamp(24px, 3vw, 48px);
    grid-template-columns: minmax(0, 1fr) auto;
    isolation: isolate;
}

.vraagHulpTekst {
    display: flex;
    align-items: center;
    column-gap: 20px;
}

.vraagHulpFoto {
    width: 88px;
    height: 88px;
    flex: none;
    border: 2px solid rgb(255 255 255 / 22%);
    border-radius: 100%;
    object-fit: cover;
}

.vraagHulpKop {
    font-size: clamp(1.25rem, 2.4vw, 1.625rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.vraagHulpRegel {
    margin-top: 8px;
    color: rgb(255 255 255 / 90%);
    font-size: var(--tekstBasis);
    line-height: 1.55;
}

.vraagHulpTijden {
    display: flex;
    margin-top: 12px;
    align-items: center;
    gap: 8px;
    color: rgb(255 255 255 / 86%);
    font-size: var(--tekstXs);
}

.vraagHulpStip {
    display: block;
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 100%;
    background-color: var(--kleurGroen);
}

.vraagHulpKnoppen {
    display: grid;
    gap: 10px;
}

/*
 * Het vlakje achter een icoon is doorzichtig wit en het icoon erin oranje, en
 * niet andersom. Oranje op lage dekking over dit diepblauw wordt olijfgroen: die
 * kleur heeft geen blauw in zich, dus blijft het blauw van de achtergrond staan.
 * Zie dezelfde alinea bij de footer in main.css.
 */
.vraagHulpKnop {
    display: flex;
    align-items: center;
    min-width: 262px;
    padding: 13px 16px;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: var(--vraagRand);
    background-color: rgb(255 255 255 / 8%);
    color: var(--kleurWit);
    column-gap: 13px;
    text-decoration: none;
    transition:
        background-color var(--duurSnel) ease,
        border-color var(--duurSnel) ease;
}

.vraagHulpKnop:hover,
.vraagHulpKnop:focus-visible {
    border-color: rgb(255 255 255 / 30%);
    background-color: rgb(255 255 255 / 14%);
}

.vraagHulpKnopIcoon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background-color: rgb(255 255 255 / 12%);
    color: var(--kleurOranje);
}

.vraagHulpKnopIcoon svg {
    width: 15px;
    height: 15px;
}

.vraagHulpKnopWoorden {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
}

/*
 * Vol wit en geen gedimd wit. De knop eronder is een doorzichtig wit vlak, dus
 * op het lichtere paneel van nu is hij zelf licht — en daarop komt 84% wit op
 * 4,0:1 uit. Voor het pijltje eronder mag dat wel: dat is een icoon en geen
 * tekst, en die hebben aan 3:1 genoeg.
 */
.vraagHulpKnopLabel {
    color: var(--kleurWit);
    font-size: var(--tekstXs);
}

.vraagHulpKnopWaarde {
    font-size: var(--tekstBasis);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.vraagHulpKnopPijl {
    width: 14px;
    height: 10px;
    flex: none;
    color: rgb(255 255 255 / 82%);
    transition: transform var(--duurSnel) var(--versnelling);
}

.vraagHulpKnop:hover .vraagHulpKnopPijl,
.vraagHulpKnop:focus-visible .vraagHulpKnopPijl {
    transform: translateX(3px);
}

/* De vrije tekst uit de editor, als die er is. */
.vraagVrijeTekst {
    margin-top: var(--vraagSectie);
    padding-top: clamp(24px, 3vw, 36px);
    border-top: 1px solid var(--vraagLijn);
}

/* ==================================================================
 * 13. De breekpunten
 *
 * 1024 en 767, gelijk aan samitApparaat::BREEKPUNT en ::BREEKPUNT_SMAL. In die
 * twee weergaven bestaat de kolom met de onderwerpen niet in de HTML (regel 16),
 * dus staat hier alleen wat er aan de rest verandert.
 * ================================================================== */

@media (width <= 1024px) {
    .vragenRomp {
        display: block;
    }

    .vraagHulpPaneel {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 26px;
    }

    .vraagHulpKnoppen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vraagHulpKnop {
        min-width: 0;
    }
}

@media (width <= 767px) {
    .vraagKopInner {
        text-align: left;
    }

    .vraagKopIntro {
        margin-inline: 0;
    }

    .vraagPillenLijst,
    .vraagFeiten {
        justify-content: flex-start;
    }

    .vraagZoekVeld {
        padding-block: 16px;
    }

    /*
     * De ruimte links van de vraagtekst valt weg: op 350 pixels tekstbreedte
     * kost een uitgelijnd antwoord anderhalve regel per alinea. Het volgnummer
     * staat in deze weergave niet in de HTML — groep.php laat het weg (regel 16)
     * in plaats van het hier met display: none te verbergen.
     */
    .vraagKaartAntwoordBinnen {
        padding-left: 20px;
    }

    .vraagKaartKnop {
        padding: 15px 16px;
        column-gap: 12px;
    }

    .vraagHulpKnoppen {
        grid-template-columns: minmax(0, 1fr);
    }
}