/*
 * WCAG 2.1 AA aanvullingen (handgeschreven — de gulp-buildchain is verouderd).
 * - Aanraakdoelen: minimaal 24x24px op icon-links en -knoppen (rapportregel 7)
 * - Zichtbare focus voor toetsenbordgebruikers
 * - Styling-behoud bij kopvolgorde-normalisatie (.h1-.h5 gelden ook in content)
 */

/* Aanraakdoelen: icon-only links en knoppen */
.socials__link,
.share-bar .socials__link,
.nav-burger__btn,
.nav-search button[type="submit"],
.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
}

.socials__link {
    padding: 6px;
    margin: -6px 2px;
}

/* Zichtbare focus (zonder de muis-ervaring te veranderen) */
:focus-visible {
    outline: 3px solid #0B42A8;
    outline-offset: 2px;
    border-radius: 2px;
}

.page-foot :focus-visible,
.footer :focus-visible {
    outline-color: #fff;
}

/* Scrollbare tabellen: focusbaar gemaakt via tabindex; geef ook een visuele hint */
.table-wrap:focus-visible {
    outline: 3px solid #0B42A8;
    outline-offset: -3px;
}


/* DIN-fallback voor zware koppen (gewicht 700-900).
   De gelicentieerde Monotype-DIN (fonts.net) laadt alleen op knwu.nl; op andere
   domeinen (dev) weigert Monotype -> koppen vallen terug op DIN-max-600 en worden
   te dun. Deze regels koppelen 700-900 aan de lokaal meegeleverde DIN-bold, zodat
   dev én live dezelfde zware koppen tonen. a11y.css laadt ná main.css, dus deze
   @font-face wint van de Monotype-declaratie. */
@font-face {
    font-family: "DIN";
    font-weight: 700 900;
    font-style: normal;
    src: url(../fonts/din-bold.woff2) format("woff2"),
         url(../fonts/din-bold.woff) format("woff"),
         url(../fonts/din-bold.ttf) format("truetype");
    font-display: swap;
}
@font-face {
    font-family: "DIN";
    font-weight: 700 900;
    font-style: italic;
    src: url(../fonts/din-bold-italic.woff2) format("woff2"),
         url(../fonts/din-bold-italic.woff) format("woff"),
         url(../fonts/din-bold-italic.ttf) format("truetype");
    font-display: swap;
}

/* Class-varianten spiegelen de element-kopstijlen uit base/_typography.scss
   (nodig voor kopvolgorde-correctie met behoud van uiterlijk, in beide modi) */
.h1 { font-style: italic; }
.h2 { font-weight: 100; color: #0B42A8; }
.h3 { color: currentColor; font-style: italic; letter-spacing: 6px; text-transform: uppercase; font-weight: 900; }
.h4 { font-weight: 100; }

/* Kop 'Komende wedstrijden': expliciet de originele DIN-opmaak (beide modi) */
.content-competitions .h3,
.content-competitions h3 {
    font-family: DIN, sans-serif;
    font-weight: 600;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 6px;
    background: none;
}

/* Visueel verborgen, wel voorleesbaar */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Contrast-schakelaar: als gewone servicelink in header en footer
   (donkerblauw op wit = 8,9:1) */
.wcag-toggle-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #0B42A8;
    cursor: pointer;
}
.wcag-toggle-link[aria-pressed="true"] { font-weight: 700; }

/* Eye-Able: het zwevende hoek-icoon blijft verborgen. Openen gebeurt via het
   toegankelijkheidsicoon in het servicemenu (#eyeAble_customToolOpenerID); de
   widget zelf werkt gewoon. */
#mainIconID,
.eyeAble_mainIconClass {
    display: none !important;
}

/* Social-iconen: overal hetzelfde donkerblauwe vlak met een wit icoon.
   Stonden op cyaan (#00A2E9): wit gaf 2,86:1 en de donkere variant 2,81:1, en
   ze verschilden per plek (deelbalk, footer, onderbalk). Nu 8,9:1 en één lijn. */
html.wcag-contrast .socials__link,
html.wcag-contrast .socials__link:hover,
html.wcag-contrast .socials__link:focus {
    background-color: #0B42A8;
    color: #fff;
}
html.wcag-contrast .socials__link svg,
html.wcag-contrast .socials__link:hover svg,
html.wcag-contrast .socials__link:focus svg {
    fill: #fff;
    color: #fff;
}
html.wcag-contrast .socials__link svg path { fill: currentColor; }

/* Alleen het icoon in de header, zonder tekst ernaast. */
.a11y-opener--alleen-icoon .a11y-opener__label { display: none; }

/* Aanraakdoelen minimaal 24x24px (WCAG 2.5.8). Alleen de door de scan gemelde
   link-/knop-types; inline-flex + min-height houdt het uiterlijk vrijwel gelijk
   maar geeft het element een klikbaar oppervlak van >=24px. */
.article-block__categories-item,
.nav-quicklink__link,
.foot-links__link,
.foot-links_link,
.foot-logo__link,
.list-service__item > a,
.page-nav__combilogo > a,
.club-wizard__item-content > a,
.wcag-toggle-link {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

/* Toegankelijkheids-opener in het servicemenu: het universele "mannetje" in een
   ronde badge (KNWU-blauw, wit figuur), met tekstlabel ernaast. */
.a11y-opener {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #0B42A8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}
.a11y-opener__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #0B42A8;
    flex: 0 0 auto;
}
.a11y-opener__badge svg {
    width: 26px;
    height: 26px;
    display: block;
}
.a11y-opener:hover .a11y-opener__badge,
.a11y-opener:focus-visible .a11y-opener__badge {
    color: #062f78;
}
.a11y-opener:focus-visible {
    outline: 3px solid #FF6700;
    outline-offset: 2px;
}

/* =====================================================================
   CONTRASTMODUS (WCAG 2.1 AA) — actief via <html class="wcag-contrast">
   Standaard toont de site de originele huisstijlkleuren; deze modus is
   de 'conforming alternate version' en gaat automatisch aan bij de
   systeeminstelling 'meer contrast'.
   ===================================================================== */

/* Tekst in fel lichtblauw -> verdiept #00719F.
   Was #007EB5 (precies 4,51:1 op wit). Dat haalde de norm alleen op zuiver wit:
   in de productentabel staat dezelfde link op een licht perzikvlak (#fff0e6) en
   dan zakt het naar 4,04. Deze tint houdt marge: 5,44:1 op wit, 4,88:1 op die
   tint. Zelfde kleurfamilie, alleen dieper. */
html.wcag-contrast .article-block--magazine .article-block__btn,
html.wcag-contrast .block-download .icon-download,
html.wcag-contrast .block-themes__link,
html.wcag-contrast .blocks-list-item__arrow,
html.wcag-contrast .breadcrumbs__crumb,
html.wcag-contrast .breadcrumbs__icon,
html.wcag-contrast .club-wizard__item-content>a,
html.wcag-contrast .content-quote__author,
html.wcag-contrast .foot-sitemap__link,
/* De footer heeft twee families die op elkaar lijken: `foot-*` (de vaste
   footer) en `footer-*` (het blok "Handige links", dat alleen verschijnt als de
   redactie er links in zet). Die tweede werd hier overgeslagen — 2,85:1, op
   elke pagina waar het blok staat. */
html.wcag-contrast .footer-sitemap__link,
/* Let op: `:not(.btn)`. Zonder die uitzondering kreeg ook de knop "Aanmelden
   voor onze nieuwsbrief" deze verdiepte blauwtint — blauwe tekst op een oranje
   vlak, onleesbaar én lelijk. Een knop hoort hier bij de accenten: het oranje
   blijft, de tekst wordt bijna zwart (#16233B, 5,38:1). Automatische
   contrastcontrole zag dit niet, omdat het oranje uit een ::before komt en
   axe de achtergrond van een pseudo-element niet kan bepalen. */
html.wcag-contrast .footer-about a:not(.btn),
html.wcag-contrast .hero-content__backlink,
html.wcag-contrast .list-link__arrow,
html.wcag-contrast .list-menu__subpointer,
html.wcag-contrast .list-submenu__item--mobile,
/* Niet de knop "Volgende" als die blauw is: die krijgt verderop een blauw vlak
   met witte tekst. Beide regels samen gaven donker op donkerblauw. */
html.wcag-contrast .pagination a[rel=next]:not(.btn--blue),
html.wcag-contrast .pagination a[rel=next]:not(.btn--blue):hover,
html.wcag-contrast .pagination a[rel=prev]:not(.btn--blue),
html.wcag-contrast .pagination a[rel=prev]:not(.btn--blue):hover,
html.wcag-contrast .pagination li.disabled span,
html.wcag-contrast .pagination li.disabled span:hover,
html.wcag-contrast .questions__group-name,
html.wcag-contrast .questions__link svg,
html.wcag-contrast .related-news__link:hover,
html.wcag-contrast .related-news__link:hover .related-news__link-icon,
html.wcag-contrast .stats-details__total,
html.wcag-contrast .tpl-question-detail .block-themes__link,
html.wcag-contrast .wizard-map__list-item .icon-arrow-right {
    color: var(--ct-blauw);
}

/* Tekst in fel oranje -> verdiept #B84A00 (5,23:1 op wit, 4,69:1 op een
   licht getint vlak). Zie de toelichting bij het blauw hierboven. */
html.wcag-contrast .article-block--update .article-block__categories-item,
html.wcag-contrast .banner .btn:focus,
html.wcag-contrast .banner .btn:hover,
html.wcag-contrast .blocks-list-item__label,
html.wcag-contrast .blocks-list__title,
html.wcag-contrast .btn--load svg,
html.wcag-contrast .btn--outline,
html.wcag-contrast .btn.login-button:focus,
html.wcag-contrast .club-wizard__item-progress,
html.wcag-contrast .content ol a:not(.btn),
html.wcag-contrast .content p a:not(.btn),
html.wcag-contrast .content ul a:not(.btn),
html.wcag-contrast .content>ol li:before,
html.wcag-contrast .content>ul li:before,
html.wcag-contrast .content>ul.list-checked li:before,
html.wcag-contrast .filter h5,
html.wcag-contrast .filter .filter__label,
html.wcag-contrast .links-list__close-button,
html.wcag-contrast .links-list__title,
html.wcag-contrast .list-menu__item.active a,
html.wcag-contrast .list-submenu__link.is-active,
html.wcag-contrast .list-submenu__link:focus,
html.wcag-contrast .list-submenu__link:hover,
html.wcag-contrast .nav-search__input:focus+button .icon-search,
html.wcag-contrast .page-nav__options .btn--outline:hover,
html.wcag-contrast .panel-competition__btn:focus,
html.wcag-contrast .panel-competition__btn:hover,
html.wcag-contrast .panel-competition__category,
html.wcag-contrast .popup--side .popup__inner h4,
html.wcag-contrast .popup-wizard__description h4,
html.wcag-contrast .questions__category,
html.wcag-contrast .related-news__link-icon,
html.wcag-contrast .sidebar,
html.wcag-contrast .stats-bar__count--women,
html.wcag-contrast th {
    color: var(--ct-oranje);
}

/* De shop heeft nog twee eigen kleuren in zijn <style>-blok, in weer een
   andere oranjetint (#ff6710): de prijs van een afgeprijsd product (2,91:1 op
   wit) en het label op de productfoto (wit op oranje, 2,92:1). De prijs krijgt
   de verdiepte tint, het label houdt zijn oranje met donkere tekst — dezelfde
   verdeling als elders in format B. Alleen zichtbaar op smalle schermen; op
   desktop staan die prijzen er niet. */
html.wcag-contrast .list-product .price ins { color: var(--ct-oranje); }
html.wcag-contrast .list-product .label { color: var(--ct-donker); }

/* De categoriebalk van de shop krijgt in shop/index.blade.php een eigen
   <style> mee: cyaan vlak met witte tekst = 2,85:1. Het vlak wordt hier
   donkerblauw; de witte tekst haalt dan 8,9:1. De selector is zwaarder dan die
   in de blade, dus de volgorde van laden doet er niet toe. */
html.wcag-contrast .shop-page nav.nav-quicklink { background: #0B42A8; }

/* De "terug"-link staat in de hero, dus op een donkere foto of een donkerblauw
   vlak — niet op wit. Daar hoort de verdiepte tint juist niet: gemeten 1,97:1.
   Wit haalt het ruim. */
html.wcag-contrast .hero-content__backlink { color: #fff; }
html.wcag-contrast .hero-content__backlink svg { fill: currentColor; }

/* Redactionele tekst met een eigen kleur in het style-attribuut. Op /contact
   staat "groot oranje spandoek" als <span style="color: #ff6600"> — 2,93:1.
   Zulke inline kleuren winnen van elke gewone regel, vandaar !important. De
   selector kijkt naar het BEGIN van het attribuut, zodat een oranje áchtergrond
   (background-color) niet per ongeluk ook zijn tekstkleur verliest. */
/* Welke waarden er in de database staan, is geteld: tien tinten halen op wit
   de norm niet. Ze krijgen hieronder per kleurfamilie een diepere variant. Wit
   blijft ongemoeid: dat staat op gekleurde vlakken en is daar juist goed.
   De selector kijkt naar het begin van het attribuut, of naar "; color:" — zo
   gaat een oranje ACHTERGROND niet per ongeluk mee. */

/* Oranje: #ff6600 (2,94:1), #ff6700 (2,92:1), #ff6b00 (2,86:1), #ff9900 (2,14:1) */
html.wcag-contrast [style^="color: #ff66" i],
html.wcag-contrast [style^="color:#ff66" i],
html.wcag-contrast [style^="color: #ff67" i],
html.wcag-contrast [style^="color:#ff67" i],
html.wcag-contrast [style^="color: #ff6b" i],
html.wcag-contrast [style^="color:#ff6b" i],
html.wcag-contrast [style^="color: #ff99" i],
html.wcag-contrast [style^="color:#ff99" i],
html.wcag-contrast [style^="color: rgb(255, 102, 0)" i],
html.wcag-contrast [style^="color: rgb(255, 103, 0)" i],
html.wcag-contrast [style^="color: rgb(255, 107, 0)" i],
html.wcag-contrast [style^="color: rgb(255, 153, 0)" i],
html.wcag-contrast [style*="; color: #ff66" i],
html.wcag-contrast [style*="; color: #ff67" i],
html.wcag-contrast [style*="; color: #ff6b" i],
html.wcag-contrast [style*="; color: #ff99" i] { color: var(--ct-oranje) !important; }

/* Een link in lopende tekst mag niet alleen aan zijn kleur te herkennen zijn
   (WCAG 1.4.1). De redactie zet zulke links met de hand op een kleur; na het
   verdiepen hierboven lijken ze te veel op de tekst eromheen. Daarom een
   onderstreping — dat is de gangbare manier en verandert niets aan de opmaak
   van de knoppen elders. */
html.wcag-contrast a[style^="color" i],
html.wcag-contrast a[style*="; color" i] { text-decoration: underline !important; }

/* Rood: #ff0000 haalt 4,0:1 — net te weinig. #B00000 haalt 7,38:1. */
html.wcag-contrast [style^="color: #ff0000" i],
html.wcag-contrast [style^="color:#ff0000" i],
html.wcag-contrast [style^="color: red" i],
html.wcag-contrast [style^="color: rgb(255, 0, 0)" i],
html.wcag-contrast [style*="; color: #ff0000" i],
html.wcag-contrast [style*="; color: red" i] { color: #B00000 !important; }

/* Groen: #1ea004 haalt 3,45:1. #116600 haalt 7,18:1. */
html.wcag-contrast [style^="color: #1ea004" i],
html.wcag-contrast [style^="color:#1ea004" i],
html.wcag-contrast [style^="color: rgb(30, 160, 4)" i],
html.wcag-contrast [style*="; color: #1ea004" i] { color: #116600 !important; }

/* Lichtblauw uit een ingesloten bericht: #3897f0 haalt 3,06:1. */
html.wcag-contrast [style^="color: #3897f0" i],
html.wcag-contrast [style^="color:#3897f0" i],
html.wcag-contrast [style*="; color: #3897f0" i] { color: var(--ct-blauw) !important; }

/* Lichtgrijs: #c9c8cd haalt 1,66:1 — vrijwel onleesbaar. */
html.wcag-contrast [style^="color: #c9c8cd" i],
html.wcag-contrast [style^="color:#c9c8cd" i],
html.wcag-contrast [style*="; color: #c9c8cd" i] { color: #595959 !important; }

/* De drie tekstkleuren van format B op één plek. `?aaa=1` zet ze een stap
   dieper: dan haalt élke normale tekst ook de AAA-eis van 7:1, die verder
   nergens verplicht is. Zo is het verschil te bekijken zonder de code te
   veranderen. */
html.wcag-contrast {
    --ct-donker: #000000;   /* op oranje 7,19:1 · op cyaan 7,34:1 */
    /* Blauw en oranje staan een stap dieper dan de eerste AAA-keuze
       (#005E85 en #933C00). Die haalden 7:1 op wit, maar niet op de lichte
       tinten die de redactie in content gebruikt: 6,42 en 6,53 op het
       perzikvlak #FFF0E6 — gemeten in de clubzijbalk en de productentabel. */
    --ct-blauw:  #00567A;   /* wit 8,04 · perzik 7,22 · mint 7,37 */
    --ct-oranje: #873700;   /* wit 8,15 · perzik 7,32 · mint 7,47 */
    --ct-licht:  #CFF0FF;   /* op donkerblauw 7,44:1 */
}

/* De AA-variant blijft opvraagbaar met ?aaa=0, om te kunnen vergelijken.
   Die waarden voldoen aan de norm waarop getoetst wordt (4,5:1); het team
   koos op 9 september voor de diepere AAA-tinten omdat die strakker ogen. */
html.wcag-contrast.wcag-aa {
    --ct-donker: #16233B;   /* op oranje 5,38:1 · op cyaan 5,49:1 */
    --ct-blauw:  #00719F;   /* op wit 5,44:1 */
    --ct-oranje: #B84A00;   /* op wit 5,23:1 */
    --ct-licht:  #7FD4FF;   /* op donkerblauw 5,41:1 */
}

/* FORMAT B (keuze van het KNWU-team, 09-09-2026) — dit is het format van de
   contrastmodus; buiten deze modus blijft de site volledig origineel.

   De regel is: grote vlakken die tekst dragen worden donkerblauw met witte
   tekst (8,9:1). Kleine gekleurde vlakken — knoppen, datumblokjes, de
   attentiebalk — houden hun eigen kleur exact en krijgen donkere tekst
   (var(--ct-donker): 5,38:1 op oranje, 5,49:1 op cyaan). Zo verandert er geen enkele
   kleurwaarde uit de huisstijl; alleen de toepassing wisselt. In het oude
   format A bleven ook de grote vlakken fel. */

/* Grote vlakken -> donkerblauw met witte tekst */
html.wcag-contrast .hero-right { background-color: #0B42A8; }
html.wcag-contrast .block-themes--large { background-color: #0B42A8; }
html.wcag-contrast .block-themes--large .block-themes__title,
html.wcag-contrast .block-themes--large .block-themes__link { color: #fff; }
html.wcag-contrast .stats-details__info { background-color: #0B42A8; color: #fff; }

/* Knoppen en attentievlakken: kleur blijft, tekst wordt donker */
html.wcag-contrast .btn { color: var(--ct-donker); }
html.wcag-contrast .btn svg { fill: currentColor; }

/* De pijlen van de club-/albumcarrousel staan allebei op een oranje vlak, maar
   het thema geeft alleen de VORIGE-pijl `color:#fff` mee. Met `fill:currentColor`
   werd die dus wit op oranje (2,92:1) terwijl de volgende-pijl donker was
   (5,38:1) — twee pijlen naast elkaar in verschillende kleuren. Beide donker,
   ook bij aanwijzen, want daar legt het thema opnieuw wit op. */
html.wcag-contrast .club-wizard__nav .btn,
html.wcag-contrast .club-wizard__nav .btn svg,
html.wcag-contrast .club-wizard__nav .btn:hover,
html.wcag-contrast .club-wizard__nav .btn:hover svg,
html.wcag-contrast .club-wizard__nav-prev svg,
html.wcag-contrast .club-wizard__nav-prev:hover svg { color: var(--ct-donker); fill: currentColor; }

/* Niet elke knop is oranje. Drie varianten hebben een donkerblauwe vulling
   (`:before` = #0b42a8) en daar hoort de tekst juist wít te zijn: donker op
   donkerblauw is 1,6:1 — dat was het zwarte pijltje op het blauwe vlak bij de
   nieuwskaarten. Bij het aanwijzen schuift er een oranje laag overheen
   (`:after`), en dán klopt de donkere tekst wél; vandaar de hover-regel. */
html.wcag-contrast .btn--blue,
html.wcag-contrast .article-block--news .btn,
html.wcag-contrast .hero-left__btn { color: #fff; }
html.wcag-contrast .btn--blue svg,
html.wcag-contrast .article-block--news .btn svg,
html.wcag-contrast .hero-left__btn svg { fill: #fff; }
html.wcag-contrast .article-block--news .btn:hover,
html.wcag-contrast .article-block--news .btn:focus { color: var(--ct-donker); }
html.wcag-contrast .article-block--news .btn:hover svg,
html.wcag-contrast .article-block--news .btn:focus svg { fill: var(--ct-donker); }
html.wcag-contrast .page-alert--orange { color: var(--ct-donker); }
html.wcag-contrast .banner--club h3,
html.wcag-contrast .banner--club .btn:not(.btn--blue) { color: var(--ct-donker); }
html.wcag-contrast .block-themes__loader-btn,
html.wcag-contrast .tpl-disciplines .hero__btn { color: var(--ct-donker); }

/* De hero-knoppen: de rechter stond op cyaan, maar dat vlak is nu donkerblauw.
   Cyaan op donkerblauw haalt 3,11:1 — genoeg voor een UI-component, maar dan
   zou de knop nauwelijks opvallen. Hij krijgt daarom het oranje dat ook het
   datumblokje in 'Komende wedstrijden' draagt (3,05:1 op het paneel, met
   donkere tekst 5,38:1). De linker knop stond al op donkerblauw. */
html.wcag-contrast .hero__btn.hero-right__btn:before { background-color: #FF6700; }
html.wcag-contrast .hero__btn.hero-right__btn { color: var(--ct-donker); }
html.wcag-contrast .hero__btn.hero-right__btn svg { fill: currentColor; }
html.wcag-contrast .hero__btn.hero-left__btn { color: #fff; }
html.wcag-contrast .hero__btn.hero-left__btn svg { fill: #fff; }

/* 'Komende wedstrijden': het blok waarmee format B is voorgelegd. */
html.wcag-contrast .content-competitions { background-color: #0B42A8; color: #fff; }
html.wcag-contrast .content-competitions a,
html.wcag-contrast .list-competitions__link { color: #fff; }
html.wcag-contrast .content-competitions .h3,
html.wcag-contrast .content-competitions h3 { color: #fff; }
html.wcag-contrast .list-competitions__link strong { color: var(--ct-licht); }
html.wcag-contrast .list-competitions__item-date { background-color: #FF6700; color: var(--ct-donker); }

/* Het datumblokje van 'Komende wedstrijden' staat op 12px in gewicht 100 — de
   dunste snede van DIN. De kleur voldoet (5,38:1) en WCAG kent geen minimale
   tekstgrootte, dus dit is formeel geen fout. Leesbaar is het niet, en in een
   modus die "hoog contrast" heet hoort dun-en-klein niet thuis: hier 14px in
   gewicht 600. De standaardweergave houdt de oorspronkelijke opmaak. */
html.wcag-contrast .list-competitions__item-date,
html.wcag-contrast .list-competitions__item-date span { font-size: 14px; font-weight: 600; }

/* Grijze lopende tekst in de footer staat op #636363: 6,01:1 op wit. Dat haalt
   de AA-eis (4,5) ruim, maar niet de AAA-eis van 7:1. In een modus die "hoog
   contrast" heet, mag dat wel: #595959 zit op precies 7,0:1. De standaard-
   weergave houdt het huisstijlgrijs. */
html.wcag-contrast .footer-about__text,
html.wcag-contrast .social-text,
html.wcag-contrast .foot-sitemap__text { color: #595959; }

/* Drie vlakken die uit een ::after komen en witte tekst dragen. Ze vielen
   buiten elke eerdere regel omdat we naar ::before keken — de vulling van
   knoppen zit dáár — terwijl deze drie hun kleur uit ::after halen. Cyaan met
   wit is 2,86:1; donkerblauw met wit is 8,9:1.

   Het categorielabel op een nieuwskaart blijft ongemoeid: dat heeft een licht
   perzikvlak met donkerblauwe tekst en haalt 7,99:1. */
html.wcag-contrast .article-block--magazine .article-block__categories-item:after,
html.wcag-contrast .pagination .active .btn:after,
html.wcag-contrast .block-agenda:after { background-color: #0B42A8; }

/* Dezelfde twee vlakken, maar dan leesbaar voor scanners. Eye-Able en axe
   lezen alleen de achtergrond van het element zelf, niet die van ::after, en
   melden daarom "wit op wit, 1:1 — handmatig controleren". Het element krijgt
   dezelfde kleur, maar alleen binnen zijn tekstvak (content-box). Dat vak ligt
   ruim binnen de schuine ::after-vorm (scheefstand ±2–4 px, opvulling 15–25 px),
   dus er verandert niets zichtbaars. */
html.wcag-contrast .article-block--magazine .article-block__categories-item,
html.wcag-contrast .pagination .active .btn {
    background-color: #0B42A8;
    background-clip: content-box;
}

/* Zoekveld in de kop. Uitgeklapt: placeholder lichtgrijs (#C1C1C1) op wit,
   1,8:1. Ingeklapt: tekstkleur wit op wit, wat scanners als 1:1 melden; het
   veld is dan leeg en de placeholder blijft bewust onzichtbaar. */
html.wcag-contrast .nav-search__input { color: #0B42A8; }
html.wcag-contrast .nav-search__input:focus::placeholder { color: #595959; opacity: 1; }
html.wcag-contrast .nav-search__input:focus::-webkit-input-placeholder { color: #595959; }

/* Nog drie knoppen met hun vulling in ::before, die scanners dus niet zien:
   - hero-knop 'Ik wil beter worden': zwart op oranje (7,2:1), gelezen als zwart
     op het donkerblauw van de hero (2,36:1);
   - .btn--blue: wit op blauw (8,9:1), gelezen als wit op het oranje van de
     banner (2,92:1) of op wit (1:1);
   Zelfde aanpak als hierboven: kleur op het element, beperkt tot de content-box,
   die binnen de schuine vulling valt (opvulling 25 px, scheefstand ≤ 5 px). */
html.wcag-contrast .hero__btn.hero-right__btn { background-color: #FF6700; background-clip: content-box; }
html.wcag-contrast .btn.btn--blue { background-color: #0B42A8; background-clip: content-box; }

/* De knop "Inschrijven" onder het nieuwsbriefveld is wit op oranje: 2,91:1. Die
   kwam met de nieuwe footer van productie mee en viel buiten de kleurregels.
   Volgens dezelfde lijn als de andere kleine oranje vlakken houdt hij zijn eigen
   kleur en krijgt hij donkere tekst (5,38:1 op #FF6700). */
html.wcag-contrast .footer-newsletter__submit,
html.wcag-contrast .footer-newsletter__submit:hover,
html.wcag-contrast .footer-newsletter__submit:focus { color: #16233B; }
html.wcag-contrast .footer-newsletter__submit svg { fill: currentColor; }

/* Het filter boven de zoekresultaten staat op het donkerblauwe vlak van de
   zoekbalk. De verdiepte blauwtint hierboven is bedoeld voor tekst op wit en
   gaf daar donker op donker (1,1:1). Op dat vlak hoort de actieve keuze wit te
   zijn, net als de andere keuzes; het vet houdt hem herkenbaar. */
html.wcag-contrast .search-results__filter-item,
html.wcag-contrast .search-results__filter-item:hover,
html.wcag-contrast .search-results__filter-item:focus,
html.wcag-contrast .search-results__filter-item.is-active { color: #fff; }
html.wcag-contrast .search-results__filter-item.is-active { font-weight: 700; }

/* Agendablok op de homepage: één groot schuin vlak (::after, 1920 px breed).
   Alleen de kop krijgt de kleur zelf, zo breed als de tekst, zodat hij niet
   buiten de schuine rand uitsteekt. */
html.wcag-contrast .block-agenda > h3,
html.wcag-contrast .block-agenda > h2 { background-color: #0B42A8; width: fit-content; }

/* Blauwe knop in een banner: de hoverregel voor bannerknoppen (oranje tekst)
   raakte ook deze, en dan staat er donkeroranje op blauw. Wit houden. */
html.wcag-contrast .banner .btn.btn--blue:hover,
html.wcag-contrast .banner .btn.btn--blue:focus { color: #fff; }
html.wcag-contrast .banner .btn.btn--blue:hover svg,
html.wcag-contrast .banner .btn.btn--blue:focus svg { fill: #fff; }

/* Het pijltje ↳ voor een gerelateerde link staat in het blok "gerelateerde
   links" op een licht mintvlak (#EAF8F5). Daar haalt de verdiepte oranje 6,67:1
   — genoeg voor AA, net niet voor de AAA-eis van 7:1 die deze modus aanhoudt.
   Als accentteken hoort het bij de donkere familie. */
html.wcag-contrast .related-news__link-icon { color: var(--ct-donker); }

/* De sport-hero (/mountainbiken, /veldrijden, …) is anders opgebouwd dan die
   van de homepage: niet twee helften, maar één element `.hero--sport` met
   cyaan als BASISKLEUR, een foto erover en een donkerblauwe diagonaal. De
   regel voor `.hero-right` hierboven raakte hem dus niet — het rechterdeel
   bleef fel cyaan.

   Belangrijker: een scanner kan een foto niet lezen en meet witte tekst op de
   hero daarom tegen die basiskleur. Cyaan met wit is 2,86:1, en zo stonden de
   titel, het wizardvenster en "Ik zoek een club" allemaal als fout in het
   rapport, op elke sportpagina. Donkerblauw als basis maakt dat 8,9:1 én
   haalt het felle cyaan uit het zicht, net als op de homepage. */
html.wcag-contrast .hero.hero--sport { background-color: #0B42A8; }

/* Het kleine witte label in het wizardvenster ("Mijn niveau", "Mijn sport")
   staat wél echt op de foto — over een witte helm of een lichte trui zakt dat
   weg. Een eigen vlak garandeert het contrast, ongeacht welke foto erachter
   staat. */
html.wcag-contrast .demarrator-wizard__filter-title {
    background-color: #0B42A8;
    color: #fff;
    padding: 4px 10px;
    display: inline-block;
}

/* Tegel-titels op labelvlak */
html.wcag-contrast .block-themes__item--with-image .block-themes__item-title {
    background-color: #0B42A8;
    color: #fff;
    display: inline-block;
    padding: 2px 12px;
}

/* Skip-links: onzichtbaar tot toetsenbord-focus, dan prominent linksboven.
   Eerste Tab = "Direct naar de inhoud", tweede = "Hoog contrast". */
.skip-links { position: absolute; top: 0; left: 0; z-index: 100000; }
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    white-space: nowrap;
    background: #0B42A8;
    color: #fff;
    font: 600 16px -apple-system, "Segoe UI", sans-serif;
    padding: 12px 22px;
    border: 0;
    cursor: pointer;
    text-decoration: none;
}
.skip-link:focus {
    position: fixed;
    left: 0;
    top: 0;
    outline: 3px solid #FF6700;
    outline-offset: -3px;
}

/* Nieuwskaart-titels zijn voor de koppenhiërarchie van <h2> naar <h3> gegaan.
   De .article-block__title-class regelt zelf alleen kleur+marge en leunde op de
   element-stijl; herstel de oorspronkelijke h2-look (rechtop, geen kapitalen,
   dun gewicht) zodat het uiterlijk gelijk is aan de live site. */
h3.article-block__title {
    font-style: normal;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 100;
}
/* Uitzonderingen die bewust wél schreef/italic waren, behouden hun eigen stijl */
.article-block--profile.article-block--large h3.article-block__title {
    font-weight: 600;
    font-style: italic;
    letter-spacing: 6px;
    text-transform: uppercase;
}
.article-block--magazine h3.article-block__title {
    font-family: "Lora", Georgia;
    font-weight: 600;
}

/* Balk op de test-/ontwikkelomgeving (staat er nooit op live: de blade rendert
   hem alleen op guifiontwikkelt.nl en localhost). Wit op KNWU-donkerblauw =
   8,9:1, dus de melding zelf voldoet ook gewoon aan de norm. */
/* De header van de site is `position: fixed; top: 0`, dus een balk in de
   gewone stroom verdwijnt eronder. Daarom: de balk zelf vast bovenaan, en
   header én inhoud een balkhoogte omlaag. Die hoogte wordt gemeten en niet
   geraden — op een smal scherm breekt de tekst over meer regels en werd de
   balk 126px hoog, ruim over een vaste maat heen. Zie `--ct-balk` in de
   layout. */
.ct-heeft-testbalk { padding-top: var(--ct-balk, 36px); }
.ct-heeft-testbalk .page-head { top: var(--ct-balk, 36px); }

.ct-testbalk {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100000;
    background: #0B42A8;
    color: #fff;
    font: 400 13px/1.5 -apple-system, "Segoe UI", Arial, sans-serif;
    padding: 8px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: baseline;
}
.ct-testbalk strong { text-transform: uppercase; letter-spacing: 1px; }
/* Geen opacity: 85% dekking maakte van 8,9:1 een 6,89:1 — nog altijd ruim
   boven de AA-eis, maar onder de AAA-grens van 7:1, en een controletool meldt
   dat terecht. Doorzichtigheid is hier louter versiering. */
.ct-testbalk__tijd { color: #E8EEF9; }
.ct-testbalk a { color: #fff; text-decoration: underline; margin-left: auto; }
.ct-testbalk a:focus { outline: 3px solid #FF6700; outline-offset: 2px; }

/* Filterlabels (magazine en wedstrijdkalender). Dit waren <h5>-koppen die
   niet aan hun keuzeveld gekoppeld waren; het zijn nu echte <label>-elementen.
   Het thema stylede het ELEMENT (`.filter h5`), dus die opmaak staat hier
   opnieuw — waarden overgenomen uit de gemeten stijl van de oude kop, zodat er
   in de standaardweergave niets verandert. */
.filter .filter__label {
    display: block;
    color: #ff6700;
    font-family: "DIN", Arial;
    font-size: 12px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 3px;
    text-transform: uppercase;
    line-height: 13.2px;
    margin: 9.6px 0;
}

/* Het omhullende <label class="select-wrapper"> is een <span> geworden (een
   label zonder tekst om het veld heen gaf een tweede, lege naambron). Een span
   is standaard inline; de pijl van de keuzelijst hangt aan een absoluut
   gepositioneerd pseudo-element en heeft een blok met positie nodig. */
.filter span.select-wrapper { display: block; position: relative; }

/* Citaatblok: regelhoogte 1,25 → 1,5 (WCAG 1.4.8, AAA). Onder de contrastmodus,
   net als de andere leesbaarheidsaanpassingen: de standaardweergave houdt de
   strakke typografie van het ontwerp. */
html.wcag-contrast .content-quote p.content-quote__text { line-height: 1.5; }

/* Het wizardveld op /beter-worden/* zat in een omhullend <label> zonder tekst,
   naast het zichtbare <label for>: twee labels op één veld. De omhulling is in
   het sjabloon een <span> geworden. Het thema styelt op de klasse, maar een
   span is standaard inline; de pijl hangt aan een absoluut gepositioneerd
   pseudo-element en heeft een blok met positie nodig. Maat gemeten op de oude
   versie: block, relative. */
.demarrator-wizard__filter span.select-wrapper { display: block; position: relative; }

/* Koppen die een niveau hoger zijn gezet om sprongen in de kopvolgorde te
   voorkomen (h3 → h2, h4 → h3). De klassen .h3/.h4 spiegelen de basisstijl van
   die koppen, maar niet wat de context er per blok aan veranderde. Die waarden
   staan hieronder, gemeten op de oude opmaak (dev vóór de wijziging; de twee
   shopkoppen op live). Zo blijft het uiterlijk exact gelijk. */
.content-title h2.h3        { letter-spacing: 3px; }
.banner-info h2.h3          { margin-bottom: 0; }
.banner h2.h3,
.image_text_col_content h2.h3,
h2.block-mainsponsor__title { font-style: italic; letter-spacing: 3px; }
.banner h2.h3 { color: #fff; font-size: 20px; letter-spacing: 5px; text-transform: uppercase; }
@media (min-width: 48em) { .banner h2.h3 { font-size: 30px; letter-spacing: 6px; } }
html.wcag-contrast .banner--club h2.h3 { color: var(--ct-donker); }
h2.album__title,
h2.roadmap__kop { font-style: italic; letter-spacing: 3px; }
h2.block-selection__title { font-weight: 600; }
.list-product .info h3.h4 {
    font-family: "DIN", Arial;
    font-size: 18px;
    font-weight: 100;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    color: #000;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 19.8px;
}
.service-right .item h3.h4 {
    font-family: "DIN", Arial;
    font-size: 24px;
    font-weight: 600;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    color: #002978;
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 26.4px;
}

/* Formuliervelden: het thema zette `input[placeholder] { color: #C1C1C1 }`.
   Die regel raakt niet alleen de grijze hint, maar de tekst die de bezoeker
   intypt — 1,8:1 op wit, op elk formulier van de site. De ingevulde tekst is nu
   donker; de hint blijft lichter maar haalt 7:1. Het zoekveld in de blauwe kop
   houdt zijn witte hint, die regel is specifieker. */
input[placeholder],
textarea[placeholder] {
    color: #1A1A1A;
}

.hero-search__input[placeholder] {
    color: #1A1A1A;
}

.footer-newsletter__input[placeholder] {
    color: #0B42A8;
}

input::placeholder,
textarea::placeholder {
    color: #595959;
    opacity: 1;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #595959;
    opacity: 1;
}

/* Kaarten in overzichten komen met een fade-in binnen (`.article-block` start op
   opacity 0). Halverwege die animatie is de tekst half doorzichtig: ons blauw
   haalt dan 5,6:1 in plaats van 8,9:1. Een scanner die op dat moment meet, ziet
   een contrastfout die er in rust niet is. In de contrastmodus staat de
   animatie daarom uit — daar gaat het om leesbaarheid, niet om effect. */
html.wcag-contrast .article-block {
    opacity: 1;
    transform: none;
    animation: none;
}

/* En voor wie in het systeem heeft aangegeven weinig beweging te willen, staan
   de binnenkomende animaties overal uit (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .article-block {
        opacity: 1;
        transform: none;
    }
}