/*
 * informatie.css — de service- en beleidspagina's.
 *
 * Hoort bij informatie.php. Wat gedeeld is, staat elders en niet hier: het
 * labeltje met het oranje streepje, de titel en de intro komen uit
 * onderdelen/kop.css (dezelfde drie regels als op /blog en een categorie), de
 * opmaak van de tekst uit onderdelen/inhoud.css (dezelfde als op een gewone
 * pagina en een artikel), de leesbalk uit onderdelen/leesbalk.css en de
 * beginstand van de onthulanimatie uit onderdelen/onthullen.css.
 *
 * Wat hier staat is wat een dócument eigen heeft: de feitenbalk, de
 * inhoudsopgave die met de leespositie meeloopt, de genummerde onderdelen, het
 * hulpkaartje en de kaarten onderaan.
 *
 * De hoofdstukken, in de volgorde van de pagina:
 *
 *   0. Tokens en de pagina zelf
 *   1. De kop en het kruimelpad
 *   2. De feitenbalk en de afdrukknop
 *   3. De romp
 *   4. De inhoudsopgave
 *   5. De tekst en de genummerde onderdelen
 *   6. De voetregel
 *   7. Het hulpkaartje
 *   8. De andere informatiepagina's
 *   9. Mobiel en smal
 *  10. Papier
 */

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

.infoPagina {
    /* De lichte lagen. Iets koeler dan wit, zodat een witte balk of kaart een
       ding is en niet een stuk achtergrond met een randje eromheen. Dezelfde
       drie waarden als op de vragenpagina, want het is hetzelfde soort vlak. */
    --infoZacht: #f7fafc;
    --infoLijn: #e6ecf2;
    --infoLijnDonker: #d7e3ec;

    /* De lopende tekst. Zachter dan --kleurTekst en donkerder dan
       --kleurTekstZacht, dat op wit de 4,5:1 van WCAG AA niet haalt. Dezelfde
       waarde als de tekst van een blogartikel: dit zijn de twee plekken op de
       site waar iemand duizend woorden achter elkaar leest. */
    --infoTekst: #3c4767;

    /* En een eigen zachte kleur voor alles wat bijzaak is: de intro, de
       labeltjes in de feitenbalk, de rustkleur van de inhoudsopgave, de
       kaartregels en de voetregel.

       Dat is met opzet niet --kleurTekstZacht (#7a8896). Nagerekend komt dat
       grijs op deze lichte band op 3,5:1 uit en op wit ook, en WCAG AA vraagt
       4,5:1 voor tekst van deze grootte. Op een pagina die uit niets dan tekst
       bestaat is dat het verkeerde grijs. Deze komt op 5,7:1 en is nog steeds
       duidelijk lichter dan --infoTekst, dus de rangorde blijft staan. */
    --infoTekstZacht: #5a6478;

    /* Het merkblauw, net donker genoeg om tekst te mogen zijn.

       #237eb3 komt op wit op 4,46:1 uit en op de lichte band van de kop op
       4,19:1 — allebei onder de 4,5:1 die WCAG AA vraagt. Dat is precies de
       meting die in main.css tot --kleurHeaderNav (#2079ac) leidde, en ook die
       tint blijft op deze band met 4,49:1 een haar tekortkomen. Deze komt op
       5,0:1 op de band en 5,4:1 op wit; met het oog is het verschil met het
       merkblauw niet te zien.

       Gebruikt voor alles wat blauwe tékst is: het labeltje, de nummers boven
       een onderdeel, een link in de tekst en het ankerlinkje. Waar het blauw
       een icoon of een vlak is, blijft --kleurBlauw staan — daar geldt de 3:1
       van niet-tekstcontrast en die haalt hij ruim. */
    --infoBlauw: #1e719f;

    --infoRand: 12px;

    /* Eén verticale maat voor de ruimte tussen de blokken, meebewegend met de
       breedte: een telefoon hoort niet dezelfde 88 pixels wit te krijgen als
       een monitor. */
    --infoSectie: clamp(40px, 4.6vw, 72px);

    /* De zijbalk. 320 pixels en 100 ertussen, precies zoals bij een
       blogartikel — zo staat de inhoudsopgave op beide templates op dezelfde
       plek in beeld. Bij twintig artikelnamen van vier woorden is 320 ook wat
       er nodig is: op 260 breken ze alle twintig over drie regels. */
    --infoZij: 320px;
}

/*
 * De kop is een band van rand tot rand die tegen de categoriebalk aan hoort te
 * staan en zijn eigen ruimte binnenin zet. De standaardmarge van het
 * inhoudsgebied moet er dus af, net als op de voorpagina, de productpagina, het
 * productoverzicht en de vragenpagina.
 */
.siteInhoud {
    padding-top: 0;
}

/* ==================================================================
 * 1. De kop en het kruimelpad
 *
 * Licht en niet blauw, waar de kop van de vragenpagina dat wél is. Die pagina is
 * een ingang: daar ís het vlak de inhoud, met het zoekveld erin. Dit is een
 * document, en dan hoort het eerste wat een bezoeker ziet de titel te zijn en
 * niet het vlak eronder.
 *
 * Twee lagen, en allebei staan ze stil: een verloop van --infoZacht naar wit en
 * één zachte lichtblauwe gloed linksboven die op transparant eindigt. Geen
 * filter: blur(), geen mix-blend-mode en geen ruitpatroon — zie de les bij
 * `.hero` in front-page.css en het hoofdstuk over de header in main.css.
 * ================================================================== */

.infoKop {
    position: relative;
    overflow-x: clip;
    padding-block: clamp(22px, 2.4vw, 34px) clamp(30px, 3.2vw, 46px);
    border-bottom: 1px solid var(--infoLijn);
    background-color: var(--infoZacht);
    background-image:
        radial-gradient(620px 420px at 8% -40%, rgb(35 126 179 / 10%) 0%, rgb(35 126 179 / 0%) 68%),
        linear-gradient(180deg, var(--infoZacht) 0%, #fcfdfe 100%);
}

.infoKopInner {
    position: relative;
}

/* --- Het kruimelpad ------------------------------------------------
 * Eigen klassen en niet die van een artikel: elke template in dit thema heeft
 * zijn eigen kruimelprefix (winkelKruimel, wagenKruimel, productKruimel), omdat
 * de maatvoering per kop verschilt.
 * ------------------------------------------------------------------- */

.infoKruimels {
    margin-bottom: 22px;
}

.infoKruimelLijst {
    display: flex;
    max-width: 100%;
    align-items: center;
    color: var(--infoTekstZacht);
    column-gap: 8px;
    font-size: var(--tekstXs);
    row-gap: 2px;
}

.infoKruimel {
    display: flex;
    min-width: 0;
    align-items: center;
    column-gap: 8px;
}

/*
 * Het chevronnetje tussen twee kruimels is met randen getekend en niet met een
 * teken uit het font: dan staat hij op elke regel op dezelfde hoogte, ongeacht
 * welk font er werkelijk geladen is.
 */
.infoKruimel + .infoKruimel::before {
    width: 5px;
    height: 5px;
    flex: none;
    border-top: 1.5px solid var(--kleurLijn);
    border-right: 1.5px solid var(--kleurLijn);
    content: "";
    transform: rotate(45deg);
}

.infoKruimelLink {
    color: inherit;
    text-decoration: none;
    transition: color var(--duurSnel) var(--versnelling);
    white-space: nowrap;
}

.infoKruimelLink:hover,
.infoKruimelLink:focus-visible {
    color: var(--infoBlauw);
}

/*
 * De laatste kruimel is de titel van de pagina en kan lang zijn — "Privacy- en
 * cookieverklaring" past nog, "Terugbetaal- en retourneringsbeleid" op een
 * telefoon niet. Afbreken met een ellips, want een kruimelpad hoort één regel te
 * zijn.
 */
.infoKruimelHier {
    display: block;
    overflow: hidden;
    color: var(--kleurTekst);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Labeltje, titel en intro -------------------------------------- */

/* Het labeltje uit onderdelen/kop.css, in het blauw dat tekst mag zijn. */
.infoLabel {
    color: var(--infoBlauw);
}

/*
 * Het oranje punt achter de titel uit onderdelen/kop.css staat hier níet.
 *
 * Twee redenen, en de tweede is de zwaarste. Het is een redactioneel merkteken
 * en dat past bij een overzicht — /blog, een categorie — en niet bij de naam van
 * een document: "Algemene voorwaarden ●" leest als een kop met een aantekening
 * erachter. En het punt is een los inline-blokje, dus het breekt af van de
 * titel: "Privacy- en cookieverklaring" past op een tablet net niet op één
 * regel, en dan staat het punt alleen op de tweede — met de volle regelhoogte
 * eromheen. Dat is niet met `text-wrap` op te lossen, want er valt voor de
 * browser geen woord aan vast te maken.
 *
 * Het oranje in de kop staat er nog steeds: het streepje voor het labeltje
 * erboven is dezelfde kleur en hetzelfde merkteken.
 */
.infoTitel::after {
    content: none;
}

/* De intro staat boven een leeskolom en hoort daar niet breder te zijn dan. */
.infoIntro {
    max-width: 62ch;
    color: var(--infoTekstZacht);
}

/* ==================================================================
 * 2. De feitenbalk en de afdrukknop
 *
 * Eén witte balk met haarlijnen ertussen, en niet drie losse chips: zo leest hij
 * als de kop van een document. De cellen zijn `auto` breed en de afdrukknop
 * duwt zich met `margin-left: auto` naar de rechterrand.
 * ================================================================== */

.infoFeiten {
    display: flex;
    max-width: max-content;
    flex-wrap: wrap;
    align-items: stretch;
    margin-top: clamp(24px, 2.6vw, 34px);
    border: 1px solid var(--infoLijn);
    border-radius: var(--infoRand);
    background-color: var(--kleurWit);
    box-shadow: var(--schaduwZacht);
}

.infoFeit {
    display: flex;
    flex-direction: column;
    padding: 13px 22px;
    gap: 3px;
}

/*
 * De haarlijn tussen twee cellen zit op de tweede en niet als `border-right` op
 * de eerste: dan staat er nooit een lijn aan het eind van de balk, ook niet als
 * de laatste cel wegvalt omdat het veld leeg is.
 */
.infoFeit + .infoFeit,
.infoFeitActie {
    border-left: 1px solid var(--infoLijn);
}

.infoFeitLabel {
    color: var(--infoTekstZacht);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
}

.infoFeitWaarde {
    color: var(--kleurTekst);
    font-size: var(--tekstSm);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}

/*
 * De houder van de afdrukknop staat er ook zonder JavaScript, en is dan leeg.
 * `:empty` haalt de haarlijn en de ruimte er dan af, zodat er geen lege cel aan
 * het eind van de balk hangt.
 */
.infoFeitActie {
    display: flex;
    align-items: stretch;
}

.infoFeitActie:empty {
    display: none;
}

.infoPrint {
    display: inline-flex;
    align-items: center;
    padding: 13px 20px;
    border: 0;
    border-radius: 0 calc(var(--infoRand) - 1px) calc(var(--infoRand) - 1px) 0;
    background-color: transparent;
    color: var(--kleurBlauwDonker);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--tekstSm);
    font-weight: 500;
    gap: 9px;
    transition:
        background-color var(--duurSnel) var(--versnelling),
        color var(--duurSnel) var(--versnelling);
}

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

.infoPrintIcoon {
    width: 17px;
    height: 17px;
    flex: none;
}

/* ==================================================================
 * 3. De romp
 *
 * 320 pixels zijbalk en 100 ertussen, dezelfde maten als bij een blogartikel.
 * Wat er overblijft is de leeskolom; die wordt in hoofdstuk 5 op zijn leesmaat
 * gehouden en niet hier, want de haarlijn boven een onderdeel loopt over de
 * volle kolombreedte en niet over de tekstbreedte.
 * ================================================================== */

.infoRomp {
    display: grid;
    padding-block: clamp(34px, 4vw, 56px) var(--infoSectie);
    column-gap: 100px;
    grid-template-columns: minmax(0, 1fr) var(--infoZij);
}

/*
 * Geen inhoudsopgave — te weinig tussenkoppen, of per pagina uitgezet. Dan is
 * er geen zijbalk en heeft de tekst de volle breedte tot zijn beschikking.
 *
 * Wat hij daarvan gebruikt is nog steeds zijn leesmaat (`.infoInhoud`, 70ch), en
 * die staat links en niet in het midden. Dat is met opzet anders dan
 * `.artikelRasterBreed` op een artikel: hier staan het labeltje, de titel, de
 * intro en de feitenbalk erboven allemaal op de linkerrand van de container, en
 * een gecentreerde tekstkolom eronder zou vier dingen op de ene lijn en het
 * vijfde op een andere zetten. Eén linkerrand voor de hele pagina.
 */
.infoRompBreed {
    grid-template-columns: minmax(0, 1fr);
}

.infoHoofd {
    min-width: 0;
}

.infoZij {
    min-width: 0;
}

/*
 * De zijbalk plakt mee, en de inhoudsopgave erin krijgt een eigen schuifbalk
 * zodra hij niet meer past. Dat is precies wat op het productoverzicht bewust
 * níet gedaan is — daar schuift een bezoeker dan in twee gebieden tegelijk — en
 * het verschil zit in wie er scrolt: die zijbalk is een formulier dat de
 * bezoeker bedient, deze lijst wijst aan waar de bezoeker is. Het script schuift
 * het aangewezen onderdeel zelf in beeld, dus de bezoeker komt aan deze
 * schuifbalk nooit. Zonder script staat de lijst op zijn beginstand en is er ook
 * niets aangewezen; dan is de eerste regel de bovenste, en dat is de juiste.
 *
 * `max-height` en niet `height`: bij zeven onderdelen hoort de lijst zeven
 * regels hoog te zijn en niet het hele venster.
 */
.infoZijPlakker {
    position: sticky;
    top: calc(var(--headerHoogte) + 22px);
    display: flex;
    max-height: calc(100dvh - var(--headerHoogte) - 44px);
    flex-direction: column;
    gap: 20px;
}

/* ==================================================================
 * 4. De inhoudsopgave
 *
 * Een lijst met een verticale rail ernaast, en op de rail een oranje segment dat
 * naar het onderdeel schuift waar de bezoeker in leest. De opmaak van dat
 * aangewezen onderdeel 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 van een artikel en de aanwijsstand
 * in het zoekpaneel.
 * ================================================================== */

.infoIndex {
    display: flex;
    min-height: 0;
    flex-direction: column;
}

.infoIndexTitel {
    margin-bottom: 14px;
    color: var(--infoTekstZacht);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/*
 * De rol waarin de lijst schuift als hij niet past. De rail staat op deze
 * houder en niet op de lijst: dan loopt hij door over de volle hoogte van het
 * schuifgebied en niet over de hoogte van de inhoud.
 */
.infoIndexRol {
    overflow-y: auto;
    min-height: 0;
    padding-left: 1px;
    border-left: 2px solid var(--infoLijn);
    scrollbar-color: var(--infoLijnDonker) transparent;
    scrollbar-width: thin;
}

/*
 * Bij twintig artikelen past de lijst niet en wordt de laatste regel op de
 * onderrand afgeknipt — halverwege een woord, wat als een weergavefout leest in
 * plaats van als "er staat nog meer onder". Een masker maakt van die knip een
 * verloop.
 *
 * Statisch en aan beide kanten, dus ook waar er niets meer te scrollen valt
 * staat de bovenste of onderste regel een tikje zachter. Dat kost precies zoveel
 * als het alternatief oplevert: de stand per richting uitlezen is een
 * scroll-listener op dit ene element erbij, en die zou bij elke stap de layout
 * opvragen voor een verloop van twintig pixels.
 *
 * In een @supports, want een onbekende `mask-image` maakt de hele declaratie
 * ongeldig — en zonder masker staat de lijst er nog steeds, alleen met de knip.
 */
@supports (mask-image: linear-gradient(#000, #000)) {
    .infoIndexRol {
        mask-image: linear-gradient(
            180deg,
            transparent 0,
            #000 14px,
            #000 calc(100% - 20px),
            transparent 100%
        );
    }
}

.infoIndexLijst {
    counter-reset: infoIndex;
}

.infoIndexItem {
    counter-increment: infoIndex;
}

.infoIndexLink {
    position: relative;
    display: grid;
    padding: 7px 10px 7px 16px;
    color: var(--infoTekstZacht);
    column-gap: 10px;
    font-size: var(--tekstSm);
    grid-template-columns: 1.6em minmax(0, 1fr);
    line-height: 1.45;
    text-decoration: none;
    transition: color var(--duurSnel) var(--versnelling);
}

/*
 * Het nummer. Uit een teller en niet uit de lijstopmaak van de <ol>: zo staat
 * het links van de tekst uitgelijnd in plaats van in de tekstkolom, en blijven
 * regels van twee tekstregels netjes inspringen.
 */
.infoIndexLink::before {
    color: var(--kleurLijn);
    content: counter(infoIndex, decimal-leading-zero);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    line-height: inherit;
    transition: color var(--duurSnel) var(--versnelling);
}

/*
 * Het oranje segment op de rail. Alleen bij het aangewezen onderdeel, en het
 * ligt precies op de rail van `.infoIndexRol` — vandaar de negatieve waarde
 * plus de padding van één pixel op die houder.
 */
.infoIndexLink::after {
    position: absolute;
    background-color: var(--kleurOranje);
    border-radius: 2px;
    content: "";
    inset: 3px auto 3px -3px;
    opacity: 0;
    transition: opacity var(--duurSnel) var(--versnelling);
    width: 3px;
}

/*
 * De koppen dragen hun eigen nummer al ("Artikel 7 – ..."). Dan gaat de teller
 * eruit en schuift de tekst op: twee nummers voor dezelfde regel leest als een
 * fout.
 */
.infoIndexOngenummerd .infoIndexLink {
    grid-template-columns: minmax(0, 1fr);
}

.infoIndexOngenummerd .infoIndexLink::before {
    content: none;
}

.infoIndexLink:hover,
.infoIndexLink:focus-visible {
    color: var(--infoBlauw);
}

.infoIndexLink:hover::before,
.infoIndexLink:focus-visible::before {
    color: var(--infoBlauw);
}

.infoIndexLink[aria-current] {
    color: var(--kleurBlauwDonker);
    font-weight: 500;
}

.infoIndexLink[aria-current]::before {
    color: var(--kleurOranje);
}

.infoIndexLink[aria-current]::after {
    opacity: 1;
}

/* ==================================================================
 * 5. De tekst en de genummerde onderdelen
 *
 * De basisopmaak van editortekst komt uit onderdelen/inhoud.css. Wat hier
 * bovenop komt is de leesmaat, de kleur, en wat een tussenkop tot een onderdeel
 * van een document maakt: een haarlijn erboven en een nummer erbovenop.
 * ================================================================== */

.infoInhoud {
    max-width: 70ch;
    color: var(--infoTekst);
    font-size: var(--tekstMd);
    line-height: 1.75;
}

/*
 * De kop van een onderdeel. `:where()` om de soortelijkheid laag te houden: de
 * regels van onderdelen/inhoud.css staan op `.paginaInhoud h2` en die moet deze
 * blok nog kunnen aanvullen zonder er een strijd van te maken.
 */
.infoInhoud :where(h2, h3)[data-samit-nr],
.infoInhoud :where(h2, h3):has(> .infoAnker) {
    position: relative;
}

.infoInhoud h2,
.infoInhoud h3 {
    color: var(--kleurTekst);
    letter-spacing: -0.012em;

    /* Een anker landt niet tegen de vaste balk aan maar met lucht erboven.
       Alleen die lucht, want de hoogte van de balk zit al in de
       `scroll-padding-top` die reset.css op de pagina zet — de twee tellen bij
       elkaar op. Nagemeten: met `--headerHoogte` er ook nog bij landde een kop
       144 pixels van de bovenkant in plaats van 78, en dat is precies die 58
       pixels dubbel. */
    scroll-margin-top: 20px;
}

/*
 * De onderdelen staan van elkaar los met een haarlijn erboven. Alléén de koppen
 * die werkelijk een onderdeel zijn, en dat is het niveau dat samitInfoKoppen()
 * gekozen heeft: `data-samit-niveau` op de houder zegt welk.
 *
 * Niet "elke kop met een id", want die krijgen ze allemaal — ook een tussenkop
 * binnen een onderdeel. Op /terugbetaal-en-retourneringsbeleid/ zijn
 * "Omruilingen" en "Geschenken" h3's ónder "Uitverkoopartikelen": met een
 * haarlijn en een hele sectiemarge erboven lezen die als een onderdeel, terwijl
 * ze niet in de inhoudsopgave staan en geen nummer hebben. Dan wijst de
 * inhoudsopgave drie onderdelen aan en staan er zeven in beeld.
 */
.infoInhoud[data-samit-niveau="2"] > h2[id],
.infoInhoud[data-samit-niveau="3"] > h3[id] {
    margin-top: clamp(38px, 3.6vw, 54px);
    padding-top: 26px;
    border-top: 1px solid var(--infoLijn);
}

/* De eerste kop van het document heeft niets boven zich om van los te staan. */
.infoInhoud > :is(h2, h3):first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/*
 * Het nummer boven de kop. In CSS en niet in de tekst: het is een ordinaal en
 * geen inhoud, dus het hoort niet mee als iemand de kop kopieert of voorgelezen
 * krijgt. Dezelfde afweging als bij het oranje punt achter `.overzichtTitel`.
 *
 * Staat er al een nummer in de kop zelf ("Artikel 7 – ..."), dan zet
 * samitInfoKoppen het attribuut er niet op en valt dit hele blok weg.
 */
.infoInhoud [data-samit-nr]::before {
    display: block;
    margin-bottom: 9px;
    color: var(--infoBlauw);
    content: attr(data-samit-nr);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* --- Het ankerlinkje ----------------------------------------------
 * Achter de kop, en pas te zien bij hover of met de tab erop. Zo kan de
 * klantenservice iemand naar artikel 6 sturen in plaats van naar de pagina,
 * zonder dat er op elke kop een leesteken staat.
 *
 * De link komt uit een <template> en bestaat dus alleen als het script draait.
 * De kop heeft zijn id ook zonder dat script, dus een gedeelde link blijft
 * werken.
 * ------------------------------------------------------------------ */

.infoAnker {
    display: inline-flex;
    width: 1.5em;
    height: 1.5em;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    border-radius: var(--randSm);
    color: var(--infoTekstZacht);

    /*
     * De beginstand is zichtbaar-maar-zacht en niet onzichtbaar, en dat is met
     * opzet de omgekeerde volgorde van wat je zou verwachten. Een aanwijzer
     * zonder muis heeft geen hover: staat het linkje standaard op opacity 0 en
     * komt het pas met een `@media (hover: none)`-uitzondering terug, dan is een
     * browser die de vraag niet beantwoordt een browser waarin het linkje nooit
     * te vinden is. Zo is de veilige kant de standaard, en scherpt een muis het
     * pas aan.
     */
    opacity: 0.4;
    transition:
        opacity var(--duurSnel) var(--versnelling),
        background-color var(--duurSnel) var(--versnelling),
        color var(--duurSnel) var(--versnelling);
    vertical-align: 0.08em;
}

.infoAnkerIcoon {
    width: 0.82em;
    height: 0.82em;
}

.infoAnker:hover,
.infoAnker:focus-visible {
    background-color: var(--kleurVlak);
    color: var(--infoBlauw);
    opacity: 1;
}

@media (hover: hover) {
    /* Met een muis staat het linkje er pas als de cursor op de kop is: twintig
       leestekens naast twintig koppen is ruis op een pagina die het van rust
       moet hebben. */
    .infoAnker {
        opacity: 0;
    }

    :is(h2, h3):hover > .infoAnker,
    .infoAnker:focus-visible {
        opacity: 1;
    }
}

/* --- Wat de tekst zelf nog erbij krijgt ---------------------------- */

/*
 * Een lijstje in een beleidsdocument is meestal een opsomming van voorwaarden,
 * en die leest beter met wat lucht tussen de punten dan de --ruimteXs uit
 * onderdelen/inhoud.css.
 */
.infoInhoud li + li {
    margin-top: 0.4rem;
}

.infoInhoud ul,
.infoInhoud ol {
    padding-left: 1.35rem;
}

/*
 * De bolletjes in de merkkleur en niet in de tekstkleur. Een opsomming van
 * twaalf voorwaarden krijgt daarmee een lijn die het oog volgt, zonder dat er
 * iets aan de tekst verandert.
 */
.infoInhoud ul > li::marker {
    color: var(--kleurBlauw);
}

.infoInhoud ol > li::marker {
    color: var(--infoTekstZacht);
    font-size: 0.9em;
    font-variant-numeric: tabular-nums;
}

.infoInhoud strong {
    color: var(--kleurTekst);
    font-weight: 500;
}

/*
 * De links uit onderdelen/inhoud.css staan op --kleurBlauw, en dat is op wit
 * 4,46:1 — zie de toelichting bij --infoBlauw. Op een pagina die uit niets dan
 * tekst met verwijzingen bestaat, is dat de verkeerde kant van de grens.
 */
.infoInhoud a {
    color: var(--infoBlauw);
}

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

.infoInhoud table {
    font-size: var(--tekstSm);
}

/* ==================================================================
 * 6. De voetregel
 * ================================================================== */

.infoVoet {
    display: flex;
    max-width: 70ch;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-top: clamp(34px, 3.4vw, 48px);
    padding-top: 20px;
    border-top: 1px solid var(--infoLijn);
    column-gap: var(--ruimteLg);
    row-gap: var(--ruimteSm);
}

.infoVoetDatum {
    color: var(--infoTekstZacht);
    font-size: var(--tekstXs);
}

.infoVoetBoven {
    display: inline-flex;
    align-items: center;
    color: var(--kleurBlauwDonker);
    font-size: var(--tekstXs);
    font-weight: 500;
    gap: 7px;
    text-decoration: none;
    transition: color var(--duurSnel) var(--versnelling);
}

.infoVoetBoven:hover,
.infoVoetBoven:focus-visible {
    color: var(--kleurBlauw);
}

/*
 * samitPijlIcoon() is een chevron die naar rechts wijst, in een viewBox van
 * 4,37 bij 7,62 — dus geen vierkant. Een kwartslag linksom laat hem omhoog
 * wijzen, en de breedte en de hoogte houden die verhouding aan.
 */
.infoVoetBovenPijl {
    width: 7px;
    height: 11px;
    flex: none;
    transform: rotate(-90deg);
    transition: transform var(--duurMd) var(--versnelling);
}

.infoVoetBoven:hover .infoVoetBovenPijl {
    transform: rotate(-90deg) translateX(2px);
}

/* ==================================================================
 * 7. Het hulpkaartje
 * ================================================================== */

.infoHulp {
    flex: none;
    padding: 18px;
    border: 1px solid var(--infoLijn);
    border-radius: var(--infoRand);
    background-color: var(--infoZacht);
}

.infoHulpBreed {
    max-width: 70ch;
    margin-top: var(--ruimteXl);
}

.infoHulpKop {
    color: var(--kleurTekst);
    font-size: var(--tekstBasis);
    font-weight: 500;
}

.infoHulpTekst {
    margin-top: 6px;
    color: var(--infoTekstZacht);
    font-size: var(--tekstXs);
    line-height: 1.55;
}

.infoHulpKnoppen {
    display: grid;
    margin-top: 14px;
    gap: 8px;
}

.infoHulpKnop {
    display: flex;
    min-width: 0;
    align-items: center;
    padding: 9px 12px;
    border: 1px solid var(--infoLijnDonker);
    border-radius: var(--randMd);
    background-color: var(--kleurWit);
    color: var(--kleurTekst);
    font-size: var(--tekstSm);
    font-weight: 500;
    gap: 10px;
    text-decoration: none;
    transition:
        border-color var(--duurSnel) var(--versnelling),
        box-shadow var(--duurSnel) var(--versnelling);
}

.infoHulpKnop:hover,
.infoHulpKnop:focus-visible {
    border-color: var(--kleurBlauw);
    box-shadow: var(--schaduwZacht);
}

/*
 * Het vlakje achter het icoon is lichtblauw met een blauw icoon erin, en niet
 * oranje. Op een licht vlak heeft oranje op lage dekking geen contrast, en het
 * icoon is hier het herkenningspunt en niet het signaal — zie het icoonvlakje in
 * de footer voor de omgekeerde rekensom op een blauw vlak.
 */
.infoHulpKnopIcoon {
    display: flex;
    width: 28px;
    height: 28px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--randSm);
    background-color: var(--kleurVlak);
    color: var(--kleurBlauw);
}

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

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

.infoHulpTijden {
    display: flex;
    align-items: center;
    margin-top: 12px;
    color: var(--infoTekstZacht);
    font-size: 0.75rem;
    gap: 7px;
}

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

/* ==================================================================
 * 8. De andere informatiepagina's
 *
 * Een lichte band met kaarten erin. De hover is dezelfde als op een tegel in de
 * megamenu: een oranje streep die over de bovenrand van links opengroeit, plus
 * twee pixels omhoog. Zo hoort de rij bij de rest van de site zonder dat er een
 * derde kaartontwerp naast de berichtkaart en de productkaart komt te staan —
 * die twee gaan over inhoud met een foto, en deze over een document.
 * ================================================================== */

.infoVerwant {
    padding-block: var(--infoSectie);
    border-top: 1px solid var(--infoLijn);
    background-color: var(--infoZacht);
}

.infoVerwantKoppen {
    max-width: 60ch;
    margin-bottom: clamp(22px, 2.4vw, 32px);
}

.infoVerwantTitel {
    font-size: var(--tekstH2);
    font-weight: 500;
    letter-spacing: -0.016em;
    line-height: 1.2;
}

.infoVerwantUitleg {
    margin-top: 10px;
    color: var(--infoTekstZacht);
    font-size: var(--tekstBasis);
    line-height: 1.6;
}

/*
 * `auto-fit` met een minimum van 238 pixels: bij vier kaarten is dat op 1180
 * één rij van vier, bij vijf een rij van vier met één eronder, en op een tablet
 * twee naast elkaar. Geen media query nodig, en geen aantal dat bijgehouden moet
 * worden als er een informatiepagina bij komt.
 */
.infoVerwantRaster {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}

.infoKaart {
    position: relative;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    padding: 20px 20px 46px;
    border: 1px solid var(--infoLijn);
    border-radius: var(--infoRand);
    background-color: var(--kleurWit);
    transition:
        border-color var(--duurMd) var(--versnelling),
        box-shadow var(--duurMd) var(--versnelling),
        transform var(--duurMd) var(--versnelling);
}

/* De oranje streep over de bovenrand. */
.infoKaart::before {
    position: absolute;
    background-color: var(--kleurOranje);
    content: "";
    inset: 0 0 auto;
    height: 3px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duurMd) var(--versnelling);
}

.infoKaart:hover,
.infoKaart:focus-within {
    border-color: var(--infoLijnDonker);
    box-shadow: var(--schaduwMd);
    transform: translateY(-2px);
}

.infoKaart:hover::before,
.infoKaart:focus-within::before {
    transform: scaleX(1);
}

.infoKaartIcoon {
    display: flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: var(--randMd);
    background-color: var(--kleurVlak);
    color: var(--kleurBlauw);
    transition:
        background-color var(--duurMd) var(--versnelling),
        color var(--duurMd) var(--versnelling);
}

.infoKaartIcoon svg {
    width: 19px;
    height: 19px;
}

.infoKaart:hover .infoKaartIcoon,
.infoKaart:focus-within .infoKaartIcoon {
    background-color: var(--kleurBlauw);
    color: var(--kleurWit);
}

.infoKaartTitel {
    font-size: var(--tekstMd);
    font-weight: 500;
    letter-spacing: -0.008em;
    line-height: 1.3;
}

.infoKaartLink {
    color: var(--kleurTekst);
    text-decoration: none;
    transition: color var(--duurSnel) var(--versnelling);
}

/*
 * Eén link per kaart, en dit is hem: de ::after legt zich over de hele kaart
 * heen. Drie links naar dezelfde pagina — icoon, titel, pijl — zouden elke
 * kaart drie keer in de tabvolgorde zetten. Dezelfde afweging als bij de
 * berichtkaart en de productkaart.
 */
.infoKaartLink::after {
    position: absolute;
    content: "";
    inset: 0;
}

.infoKaart:hover .infoKaartLink {
    color: var(--kleurBlauwDonker);
}

.infoKaartRegel {
    margin-top: 8px;
    color: var(--infoTekstZacht);
    font-size: var(--tekstXs);
    line-height: 1.55;
}

.infoKaartPijl {
    position: absolute;
    bottom: 18px;
    left: 20px;
    width: 16px;
    height: 16px;
    color: var(--kleurOranje);
    transition: transform var(--duurMd) var(--versnelling);
}

.infoKaart:hover .infoKaartPijl,
.infoKaart:focus-within .infoKaartPijl {
    transform: translateX(3px);
}

/* ==================================================================
 * 9. Mobiel en smal
 *
 * De grenzen 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: de zijbalk-uitvoering van de inhoudsopgave met de
 * mobiele opmaak, of andersom.
 * ================================================================== */

@media (width <= 1024px) {
    .infoRomp {
        grid-template-columns: minmax(0, 1fr);
    }

    /*
     * De leesmaat blijft staan, ook zonder zijbalk: op een tablet van 1000
     * pixels zou de tekst anders over honderd tekens per regel lopen. Alleen
     * het hulpkaartje mag de volle breedte hebben — dat is een kaart en geen
     * tekst.
     */
    .infoHulpBreed {
        max-width: none;
    }

    /* --- De inhoudsopgave als <details> ---------------------------- */

    .infoIndexInklap {
        /* Dezelfde maat als de tekst eronder. Een balk die tweehonderd pixels
           breder is dan elke regel eronder leest als een balk die er niet bij
           hoort. */
        max-width: 70ch;
        margin-bottom: var(--ruimteXl);
        border: 1px solid var(--infoLijn);
        border-radius: var(--infoRand);
        background-color: var(--infoZacht);
    }

    .infoIndexVouw {
        overflow: hidden;
        border-radius: inherit;
    }

    .infoIndexInklap .infoIndexTitel {
        display: flex;
        align-items: center;
        margin-bottom: 0;
        padding: 14px 16px;
        color: var(--kleurTekst);
        cursor: pointer;
        font-size: var(--tekstBasis);
        font-weight: 500;
        gap: 10px;
        letter-spacing: 0;
        list-style: none;
        text-transform: none;
    }

    .infoIndexInklap .infoIndexTitel::-webkit-details-marker {
        display: none;
    }

    .infoIndexAantal {
        display: inline-flex;
        min-width: 22px;
        justify-content: center;
        padding: 2px 6px;
        border-radius: var(--randRond);
        background-color: var(--kleurWit);
        border: 1px solid var(--infoLijn);
        color: var(--infoTekstZacht);
        font-size: 0.6875rem;
        font-variant-numeric: tabular-nums;
    }

    /* Dichtgeklapt wijst hij omlaag en open omhoog; zie de toelichting bij
       .infoVoetBovenPijl voor de verhouding van dit icoon. */
    .infoIndexPijl {
        width: 7px;
        height: 11px;
        flex: none;
        margin-left: auto;
        color: var(--kleurBlauw);
        transform: rotate(90deg);
        transition: transform var(--duurMd) var(--versnelling);
    }

    .infoIndexVouw[open] .infoIndexPijl {
        transform: rotate(-90deg);
    }

    /*
     * In de ingeklapte uitvoering is er niets om in te schuiven: de <details>
     * geeft de lijst alle hoogte die hij nodig heeft. De rail blijft, want die
     * hoort bij de lijst en niet bij het schuiven.
     */
    .infoIndexInklap .infoIndexRol {
        overflow-y: visible;
        max-height: none;
        margin: 0 16px 16px;
    }
}

@media (width <= 767px) {
    /*
     * Op een telefoon is er geen leesmaat te bewaken: 350 pixels is altijd
     * krapper dan 70 tekens. En de feitenbalk wordt hier een raster over de
     * volle breedte, dus moet de `max-content` van zijn basisregel eraf.
     */
    .infoInhoud,
    .infoVoet,
    .infoFeiten,
    .infoIndexInklap {
        max-width: none;
    }

    /*
     * De feitenbalk wordt een raster van twee. Met `flex-wrap` hangt het van de
     * lengte van de datum af waar hij afbreekt, en dan staat "Leestijd" bij de
     * ene pagina naast de datum en bij de andere eronder.
     */
    .infoFeiten {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .infoFeit {
        padding: 11px 14px;
    }

    /*
     * Op een raster klopt "de haarlijn zit op de tweede cel" niet meer: de
     * eerste cel van de tweede rij zou er een aan zijn linkerkant krijgen. Dus
     * per rand, en de lijnen komen van de cellen zelf.
     */
    .infoFeit + .infoFeit,
    .infoFeitActie {
        border-left: 0;
    }

    .infoFeit:nth-child(2n) {
        border-left: 1px solid var(--infoLijn);
    }

    .infoFeit:nth-child(n + 3),
    .infoFeitActie {
        border-top: 1px solid var(--infoLijn);
    }

    /*
     * De derde cel over de volle breedte. Er kunnen er hoogstens drie zijn — de
     * datum, de leestijd en het aantal onderdelen — dus is de derde altijd de
     * laatste, en zonder deze regel blijft er naast hem een lege cel staan.
     * Staat er een veld leeg, dan is de derde plek de afdrukknop en raakt deze
     * regel niets: die is geen .infoFeit.
     */
    .infoFeit:nth-child(3) {
        border-left: 0;
        grid-column: 1 / -1;
    }

    /* De afdrukknop over de volle breedte, met een eigen onderhoek. */
    .infoFeitActie {
        grid-column: 1 / -1;
    }

    .infoPrint {
        width: 100%;
        justify-content: center;
        border-radius: 0 0 calc(var(--infoRand) - 1px) calc(var(--infoRand) - 1px);
    }

    .infoInhoud {
        font-size: var(--tekstBasis);
        line-height: 1.7;
    }

    .infoInhoud > h2[id],
    .infoInhoud > h3[data-samit-nr],
    .infoInhoud > h3[id]:not([data-samit-nr]) {
        padding-top: 20px;
    }

    .infoKaart {
        padding: 16px 16px 42px;
    }

    .infoKaartPijl {
        bottom: 15px;
        left: 16px;
    }
}

/* ==================================================================
 * 10. Papier
 *
 * Een beleidsdocument wordt afgedrukt — dat is de reden dat er een afdrukknop
 * in de feitenbalk staat. Wat op een blad niets doet, hoort er dan ook niet op:
 * de inhoudsopgave, het kruimelpad, het hulpkaartje en de kaarten zijn
 * navigatie, en de header en de footer van de site zijn dat ook.
 *
 * Deze stylesheet wordt alleen op deze template ingeladen (regel 8), dus raken
 * de regels voor `.siteHeader` en `.siteFooter` nooit een andere pagina.
 * ================================================================== */

@media print {
    .siteHeader,
    .siteFooter,
    .infoKruimels,
    .infoIndex,
    .infoHulp,
    .infoVerwant,
    .infoFeitActie,
    .infoVoetBoven,
    .infoAnker {
        display: none;
    }

    .infoKop {
        padding-block: 0 16pt;
        border-bottom: 1px solid #000;
        background: none;
    }

    .infoRomp {
        display: block;
        padding-block: 16pt 0;
    }

    .infoInhoud,
    .infoVoet,
    .infoRompBreed .infoHoofd {
        max-width: none;
    }

    .infoInhoud {
        color: #000;
        font-size: 10.5pt;
        line-height: 1.5;
    }

    /* De feitenbalk blijft: op een uitgeprinte voorwaardentekst is de datum
       waarop hij gold het belangrijkste wat erop staat. */
    .infoFeiten {
        box-shadow: none;
    }

    /* Een kop hoort niet als laatste regel van een blad te staan. */
    .infoInhoud :is(h2, h3) {
        break-after: avoid;
        break-inside: avoid;
    }

    .infoInhoud :is(li, tr) {
        break-inside: avoid;
    }
}