/* base.css — Components use only semantic variables, never bare hex codes. */

/* === Fonts ================================================================ */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/inter-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/inter-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/inter-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/barlow-condensed-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/barlow-condensed-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/barlow-condensed-700.woff2') format('woff2');
}

/* === Design tokens ======================================================== */

:root {
    /* Brand constants */
    --blauw:        #0A3D91;
    --blauw-donker: #062A66;
    --blauw-licht:  #EAF1FB;
    --oranje:       #F5600A;
    --wit:          #FFFFFF;

    /* Semantic variables — light mode */
    --achtergrond: #FFFFFF;
    --vlak:        #FFFFFF;
    --vlak-zacht:  #EAF1FB;
    --tekst:       #12233F;
    --tekst-zacht: #5B6B84;
    --kop:         #062A66;
    --blauw-ui:    #0A3D91;
    --lijn:        #DCE5F2;

    /* Statuskleuren — o.a. rooktest (skip/neutraal hergebruikt --vlak-zacht/--tekst-zacht) */
    --succes-vlak:  #E3F5E7;
    --succes-tekst: #146C2E;
    --fout-vlak:    #FBE7E7;
    --fout-tekst:   #A0221D;

    /* Beheer — werkgebied wijkt bewust af van --achtergrond/--vlak-zacht (iets
       kouder grijsblauw), en de zijbalk is altijd donker, ook in lichte modus. */
    --werkvlak:           #F3F6FB;
    --zijbalk-achtergrond: #062A66;
    --zijbalk-tekst:      #A9BEE0;

    /* Publieke footer — zelfde idee als de zijbalk: altijd donker, ongeacht
       modus. Bewust GEEN dark-mode override hieronder: de footer is in beide
       thema's een donkerblauwe band, net zoals de wedstrijdkaart (zie
       --kaart-licht-* verderop) in beide thema's licht blijft. */
    --footer-vlak:  var(--blauw-donker);
    --footer-tekst: #A9BEE0;
    --footer-lijn:  rgba(255, 255, 255, 0.12);

    /* Rechtenniveaus — chips/tags op de autorisatieschermen (vier niveaus:
       geen/lezen/schrijven/volledig; "vol" hergebruikt de succeskleur). */
    --recht-geen-vlak:      #EEF1F6;
    --recht-geen-tekst:     var(--tekst-zacht);
    --recht-lezen-vlak:     #E8F0FD;
    --recht-lezen-tekst:    var(--blauw);
    --recht-schrijven-vlak: #C9DBFB;
    --recht-schrijven-tekst: var(--blauw-donker);
    --recht-vol-vlak:       var(--succes-vlak);
    --recht-vol-tekst:      var(--succes-tekst);
    --uitzondering-vlak:    #FDF1E7;
    --uitzondering-tekst:   var(--oranje);

    /* Layout */
    --radius: 14px;
    --max:    1120px;

    /* Typography stacks */
    --display: "Barlow Condensed", ui-sans-serif, sans-serif;
    --body:    "Inter", ui-sans-serif, sans-serif;

    /* Accent — the orange brand color, for fills, borders, the focus ring,
       icons and large display headings. --accent-tekst/--accent-op-donker
       are WCAG AA (4.5:1) tints of --accent for use as TEXT color on the
       backgrounds named below — --accent itself does not reliably clear
       4.5:1 on any of them (see private/bin/check-contrast.php, kept around
       for the later accessibility check). */
    --accent:           #F5600A;
    --accent-tekst:     #C94F08; /* on --achtergrond/--vlak (#FFFFFF in light) — 4.56:1 */
    --accent-op-donker: #F8965D; /* on --blauw-donker/--blauw — 6.21:1 / 4.55:1 */

    /* Shadow — replaces ad hoc rgba() box-shadow values (see base.css's own
       "never bare hex codes" rule at the top of this file). */
    --schaduw-kaart:    0 2px 8px rgba(4, 20, 50, 0.08);
    --schaduw-menu:     0 12px 28px rgba(4, 20, 50, 0.12);
    --schaduw-zwevend:  0 20px 45px rgba(4, 20, 50, 0.18);

    /* Space — rem scale for margin/padding/gap. */
    --ruimte-1: 0.25rem;
    --ruimte-2: 0.5rem;
    --ruimte-3: 1rem;
    --ruimte-4: 1.5rem;
    --ruimte-5: 2.5rem;
    --ruimte-6: 4rem;

    /* Radius — additions alongside the existing --radius (14px). */
    --radius-klein: 8px;
    --radius-rond:  999px;

    /* Z-index scale. */
    --z-header:  50;
    --z-menu:    60;
    --z-overlay: 70;

    /* Hero overlay — gradient over the hero background/photo, on top of
       --blauw-donker. Always dark blue regardless of theme, same reasoning
       as the footer and the match card: the hero itself is always dark. */
    --hero-overlay-van:  rgba(6, 42, 102, 0.15);
    --hero-overlay-naar: rgba(6, 42, 102, 0.85);
    /* 0.4 haalde bij het lichtste punt van het hero-verloop maar 2,90:1 tegen
       de UI-componentnorm van 3:1 (zie de toegankelijkheidscontrole) — 0.55
       haalt daar 4,16:1, en 5,12:1 tegen --blauw-donker. */
    --hero-rand:         rgba(255, 255, 255, 0.55);
    /* Same light-on-dark-navy text as --footer-tekst (7.27:1 on --blauw-donker,
       see the contrast check in that portion's commit) — aliased under a
       general name since "footer" would be confusing to read where this is
       actually used: any always-dark gradient band (hero, cta-band, ...),
       never something that switches with the theme. */
    --tekst-zacht-op-donker: var(--footer-tekst);

    /* --hero-eyebrow gebruikte eerst --accent-op-donker, maar die tint is
       daarvoor te licht: op klein/niet-vet tekst (15px) haalt hij bij het
       lichtste punt van het hero-verloop maar 4.55:1 tegen de AA-norm van
       4.5:1 — een marge van 0,05 die geen enkele zekerheid biedt. Eigen,
       iets donkerdere tint: 5.03:1 tegen --blauw, 6.86:1 tegen
       --blauw-donker (zie de toegankelijkheidscontrole). --accent-op-donker
       zelf blijft ongewijzigd voor de hero-kop (grote tekst, haalt 3:1 ruim
       en de kleurwijziging daar is een aparte, latere opdracht). */
    --eyebrow-op-donker: #F9A371;

    /* Match card — always light, even in dark mode (existing project
       agreement), so it carries its own fixed token set instead of
       following --tekst/--vlak/etc., which do switch with the theme. */
    --kaart-licht-vlak:        #FFFFFF;
    --kaart-licht-tekst:       #12233F;
    --kaart-licht-tekst-zacht: #5B6B84;
    --kaart-licht-lijn:        #DCE5F2;
    --kaart-licht-kop:         #062A66;
}

@media (prefers-color-scheme: dark) {
    :root {
        --achtergrond: #101B2E;
        --vlak:        #1B2A45;
        --vlak-zacht:  #14213A;
        --tekst:       #E9EFFA;
        --tekst-zacht: #A3B3CE;
        --kop:         #DEE9FF;
        --blauw-ui:    #8FB4F7;
        --lijn:        #31435F;

        --succes-vlak:  #123822;
        --succes-tekst: #7FDDA0;
        --fout-vlak:    #3A1616;
        --fout-tekst:   #F0918C;

        --werkvlak:            #0E1930;
        --zijbalk-achtergrond: #04122E;
        --zijbalk-tekst:       #90A6CC;

        --recht-geen-vlak:      var(--vlak-zacht);
        --recht-geen-tekst:     var(--tekst-zacht);
        --recht-lezen-vlak:     #1B2E52;
        --recht-lezen-tekst:    #8FB4F7;
        --recht-schrijven-vlak: #26437A;
        --recht-schrijven-tekst: #C7DBFC;
        --recht-vol-vlak:       var(--succes-vlak);
        --recht-vol-tekst:      var(--succes-tekst);
        --uitzondering-vlak:    #3A2812;
        --uitzondering-tekst:   #FDAE6B;

        /* --accent-tekst on --achtergrond/--vlak in dark mode — 5.45:1 /
           4.53:1. --accent and --accent-op-donker stay fixed (see :root
           above): the backgrounds they are calibrated for (--blauw,
           --blauw-donker) do not change between themes either. */
        --accent-tekst: #F5620C;

        /* Deeper/darker in dark mode: the same rgba() on a dark surface
           needs more opacity to stay visible than it does on a light one. */
        --schaduw-kaart:   0 2px 8px rgba(0, 0, 0, 0.35);
        --schaduw-menu:    0 12px 28px rgba(0, 0, 0, 0.45);
        --schaduw-zwevend: 0 20px 45px rgba(0, 0, 0, 0.55);
    }
}

/* === Reset ================================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* === Body & base typography =============================================== */

body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    font-family: var(--body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--tekst);
    background-color: var(--achtergrond);
    -webkit-font-smoothing: antialiased;
}

/* === Layout =============================================================== */

.container {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: 1.5rem;
}

/* === Headings ============================================================= */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--display);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--kop);
}

h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
h4 { font-size: 1.25rem; }

/* === Links ================================================================ */

a {
    color: var(--blauw-ui);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

a:hover {
    text-decoration: none;
}

/* === Focus ring =========================================================== */

/* Orange focus ring for keyboard navigation; applied globally. */
:focus-visible {
    outline: 3px solid var(--oranje);
    outline-offset: 3px;
    border-radius: 3px;
}

/* === Skip-link ============================================================= */

/* Eerste focusbare element in <body> (layout.php) — buiten beeld tot hij
   focus krijgt, dan zichtbaar linksboven, vóór de sticky header (--z-header
   is 50, dit moet daarboven kunnen liggen). Vaste donkere achtergrond
   (--blauw-donker), niet --oranje: gewone tekst op --oranje haalt maar
   3.20:1 (norm 4.5:1); --wit op --blauw-donker haalt 13.72:1, en de
   standaard oranje focusring blijft daarop met 4.29:1 ruim zichtbaar (zie de
   toegankelijkheidscontrole). */
.skip-link {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-overlay);
    transform: translateY(-100%);
    background: var(--blauw-donker);
    color: var(--wit);
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--radius-klein) 0;
    transition: transform 0.15s;
}

.skip-link:focus-visible {
    transform: translateY(0);
    outline-offset: -3px;
}

/* === Motion preference ==================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* === Knoppen (ook buiten /beheer, o.a. button-blokken) ===================== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 0.625rem 1.125rem;
    border-radius: var(--radius-rond);
    text-decoration: none;
    transition: filter 0.12s;
}

.btn:hover {
    filter: brightness(1.06);
    text-decoration: none;
}

.btn-primair {
    background: var(--blauw);
    color: var(--wit);
}

.btn-stil {
    background: var(--vlak);
    border: 1px solid var(--lijn);
    color: var(--tekst);
}

/* Voor gebruik op een altijd-donkere achtergrond (hero) — vast wit/transparant,
   volgt bewust niet het thema (zie --hero-rand/--kaart-licht-* hierboven). */
.btn-licht {
    background: var(--wit);
    color: var(--blauw);
}

.btn-rand {
    background: transparent;
    border: 2px solid var(--hero-rand);
    color: var(--wit);
}

/* === Publieke iconen (Icons::svg()) ========================================
   Zelfde huisstijlregels als admin.css' svg.ic (24x24, 1.8px lijn, ronde
   uiteinden), maar hier omdat base.css ook zonder admin.css geladen wordt.
   .bal: de oranje bal-accent, uitsluitend in publieke iconen (CLAUDE.md). */

svg.ic {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

svg.ic .bal {
    fill: var(--oranje);
    stroke: none;
}

/* Neutrale vulling (bv. 'ster-vol'): currentColor i.p.v. de vaste oranje
   --bal, voor een gevuld element dat gewoon de icoonkleur volgt. Bestond tot
   nu toe alleen als losse <style> in fluks-iconen-v1.html, nooit als echte
   regel hier — toegevoegd zodat Icons::svg()'s class="dot"-elementen ook
   daadwerkelijk gevuld renderen. */
svg.ic .dot {
    fill: currentColor;
    stroke: none;
}

/* === CMS-blokken (BlockRenderer-uitvoer) =================================== */

.blok-tekst,
.blok-afbeelding,
.blok-kolommen,
.blok-knop {
    margin-block: var(--ruimte-4);
}

.blok-tekst :first-child {
    margin-top: 0;
}

/* 70ch ≈ een leesbare regellengte, ongeacht viewport — binnen een kolom
   (al smaller dan 70ch) heeft dit toch geen effect, dus geen aparte regel
   nodig voor genest tekst in .blok-kolom. */
.blok-tekst {
    max-width: 70ch;
}

/* Consistent verticaal ritme tussen alles binnen een tekstblok: één regel
   voor het algemene geval, met een grotere afstand vóór een kop specifiek
   (een kop hoort bij wat erna komt, niet bij wat ervoor stond) en 0 als die
   kop toevallig het eerste element is. */
.blok-tekst > * + * {
    margin-top: var(--ruimte-3);
}

.blok-tekst > h2,
.blok-tekst > h3 {
    margin-top: var(--ruimte-5);
    margin-bottom: var(--ruimte-2);
}

.blok-tekst > h2:first-child,
.blok-tekst > h3:first-child {
    margin-top: 0;
}

.blok-tekst ul,
.blok-tekst ol {
    padding-left: 1.25rem;
}

.blok-tekst li + li {
    margin-top: 0.375rem;
}

.blok-tekst ul li::marker,
.blok-tekst ol li::marker {
    color: var(--oranje);
}

.blok-tekst blockquote {
    padding-left: 1rem;
    border-left: 3px solid var(--lijn);
    color: var(--tekst-zacht);
    font-style: italic;
}

/* Externe links in lopende tekst herkenbaar maken zonder een extra icoon-
   asset: isAllowedHref() (BlockSanitizer) laat alleen http(s), mailto en
   interne paden door — een interne link begint altijd met '/', dus http(s)
   is hier ondubbelzinnig "verlaat de site". */
.blok-tekst a[href^="http://"]::after,
.blok-tekst a[href^="https://"]::after {
    content: "↗";
    display: inline-block;
    margin-left: 0.15em;
}

.blok-afbeelding img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.blok-afbeelding figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    font-style: italic;
    color: var(--tekst-zacht);
}

/* Drie zichtbaar verschillende breedtes: inline blijft bewust een stuk
   smaller dan de kolom (anders zijn inline en breed bij een grote,
   geüploade foto niet van elkaar te onderscheiden — allebei zouden simpelweg
   de volle kolombreedte vullen), breed vult de kolom, vol breekt uit tot de
   volle viewportbreedte. */
.blok-afbeelding.breedte-inline img {
    max-width: min(100%, 480px);
}

.blok-afbeelding.breedte-breed img {
    width: 100%;
}

.blok-afbeelding.breedte-vol {
    margin-inline: calc(50% - 50vw);
}

.blok-afbeelding.breedte-vol img {
    width: 100%;
    border-radius: 0;
}

.blok-kolommen {
    display: grid;
    gap: 1.5rem;
}

.blok-kolommen.kolommen-1-1 {
    grid-template-columns: 1fr 1fr;
}

.blok-kolommen.kolommen-1-2 {
    grid-template-columns: 1fr 2fr;
}

.blok-kolommen.kolommen-2-1 {
    grid-template-columns: 2fr 1fr;
}

@media (max-width: 699px) {
    .blok-kolommen {
        grid-template-columns: 1fr;
    }
}

/* === Voorbeeldweergave (PagesController::preview()) ========================= */

.voorbeeld-balk {
    background: var(--oranje);
    color: var(--wit);
    text-align: center;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.625rem 1rem;
}

.voorbeeld-balk a {
    color: var(--wit);
    margin-left: 0.75rem;
}

/* === Publieke header & hoofdmenu ============================================
   Mobile-first: op mobiel is het menu een hamburger (verborgen checkbox +
   label, geen JavaScript nodig) die het paneel toont; vanaf 820px staat het
   menu altijd open en horizontaal. De uitklap voor kinderen (tweede niveau)
   gebruikt <details>/<summary>, ook zonder JavaScript. */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--vlak);
    border-bottom: 1px solid var(--lijn);
}

/* Grid i.p.v. flex + order: met flex-order zou de DOM-volgorde (dus ook de
   tab-volgorde) los blijven staan van de zichtbare volgorde — de knop was zo
   op het toetsenbord vóór het hoofdmenu te bereiken, terwijl hij er visueel
   ná stond (zie de toegankelijkheidscontrole). Met grid-area's staat de
   plaatsing per breakpoint los van de brondocumentvolgorde, dus kan die
   volgorde nu wél overal logo -> hoofdmenu -> nav-acties zijn (layout.php) —
   gelijk aan de zichtbare volgorde vanaf 820px (zie de media query
   hieronder), én de menu-toggle/hamburger blijven daar vóór het hoofdmenu
   staan (nodig voor .menu-toggle:checked ~ .hoofdmenu hierboven, en zodat
   het paneel bij het openen niet de hamburger uit de balk duwt). */
.nav-balk {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "logo acties hamburger"
        "menu menu menu";
    align-items: center;
    column-gap: 0.75rem;
    min-height: 64px;
}

.logo {
    grid-area: logo;
    display: flex;
    align-items: center;
}

.logo-beeld {
    display: block;
    height: 52px;
    width: auto;
}

/* logo-fluks-wit.svg is stuk (lege witte rechthoek i.p.v. de logovorm — zie
   het architectuurdocument), dus in dark mode logo-fluks.svg met CSS-filter
   wit maken, net als in admin.css (.merk-logo) en op de inlogpagina. */
@media (prefers-color-scheme: dark) {
    .logo-beeld {
        filter: brightness(0) invert(1);
    }
}

.nav-acties {
    grid-area: acties;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* === Socials (CC: "socials bovenin") =======================================
   Twee keer gerenderd (zie layout.php): --balk voor de desktopbalk naast de
   "Lid worden"-knop, --menu binnen het mobiele uitklapmenu — de mobiele
   header blijft zo compact, in lijn met de wens om de menubalk niet drukker
   te maken dan nodig. Welke van de twee zichtbaar is, regelt alleen CSS. */
.socials-rij {
    display: none;
    list-style: none;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.socials-rij a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-rond);
}

.socials-rij img {
    display: block;
    width: 20px;
    height: 20px;
}

.socials-rij--menu {
    display: flex;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--lijn);
}

/* Checkbox-hack: visueel verborgen maar wel focusbaar/klikbaar via de label. */
.menu-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.hamburger {
    grid-area: hamburger;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0.625rem;
    border-radius: 6px;
    cursor: pointer;
}

.hamburger span {
    width: 22px;
    height: 2px;
    background: var(--kop);
    border-radius: 2px;
}

.menu-toggle:focus-visible + .hamburger {
    outline: 3px solid var(--oranje);
    outline-offset: 2px;
}

.hoofdmenu {
    grid-area: menu;
    display: none;
    padding-block: 0.5rem 1rem;
}

.menu-toggle:checked ~ .hoofdmenu {
    display: block;
}

.hoofdmenu ul {
    list-style: none;
}

.hoofdmenu-lijst > li > a,
.hoofdmenu summary {
    display: block;
    padding: 0.625rem 0.25rem;
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--tekst);
    text-decoration: none;
    cursor: pointer;
}

.hoofdmenu summary {
    list-style: none;
}

.hoofdmenu summary::-webkit-details-marker {
    display: none;
}

.hoofdmenu summary a {
    color: inherit;
    text-decoration: none;
}

.hoofdmenu summary::after {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    margin-left: 0.5em;
    border-right: 1.8px solid var(--tekst-zacht);
    border-bottom: 1.8px solid var(--tekst-zacht);
    transform: rotate(45deg);
    vertical-align: 0.15em;
}

.hoofdmenu details[open] summary::after {
    transform: rotate(-135deg);
}

.hoofdmenu details ul {
    padding-left: 1rem;
    padding-bottom: 0.5rem;
}

.hoofdmenu details ul a {
    display: block;
    padding: 0.5rem 0.25rem;
    color: var(--tekst-zacht);
    text-decoration: none;
    font-weight: 500;
}

.hoofdmenu a.actief {
    color: var(--blauw-ui);
}

@media (min-width: 820px) {
    .menu-toggle,
    .hamburger {
        display: none;
    }

    /* Drie krap-om-de-inhoud kolommen (geen 1fr) plus justify-content, net als
       de mockup's .nav{display:flex;justify-content:space-between} over drie
       blokken — dat spreidt de overgebleven ruimte over de kolommen, in
       plaats van alles aan één kant (acties) te geven zoals grid-template-
       columns: auto auto 1fr deed. Daardoor plakte het hoofdmenu tegen het
       logo aan (zie de correctieronde). */
    .nav-balk {
        grid-template-columns: auto auto auto;
        grid-template-areas: "logo menu acties";
        justify-content: space-between;
    }

    .hoofdmenu {
        display: block;
        padding-block: 0;
    }

    .hoofdmenu-lijst {
        display: flex;
        align-items: center;
        gap: 1.75rem;
    }

    .hoofdmenu-lijst > li {
        position: relative;
    }

    .hoofdmenu-lijst > li > a,
    .hoofdmenu summary {
        padding: 0.5rem 0;
    }

    /* Klikken/toetsenbord is en blijft de manier om uit te klappen (<details>);
       dit is alleen een visuele aanvulling voor de muis, niet de interactie
       zelf — CC-notitie: hover mag nooit de enige manier zijn. */
    .hoofdmenu-lijst > li > a:hover,
    .hoofdmenu summary:hover {
        color: var(--blauw-ui);
    }

    .hoofdmenu details ul {
        position: absolute;
        left: 0;
        top: 100%;
        min-width: 12rem;
        margin-top: 0.5rem;
        padding: 0.5rem;
        background: var(--vlak);
        border: 1px solid var(--lijn);
        border-radius: var(--radius);
        box-shadow: var(--schaduw-menu);
    }

    .hoofdmenu details ul a {
        padding: 0.5rem 0.75rem;
        border-radius: 6px;
    }

    .socials-rij--balk {
        display: flex;
    }

    .socials-rij--menu {
        display: none;
    }
}

/* === Publieke hoofdinhoud & footer ========================================= */

.pagina {
    flex: 1;
    padding-block: 2rem 3rem;
    min-height: 40vh;
}

.pagina h1 {
    margin-bottom: 1.25rem;
}

/* Homepage: .hero moet direct op de header aansluiten (mockup), niet achter
   de gebruikelijke .pagina-topmarge — de bodemmarge (voor wat na de hero
   komt) blijft wel gelden. */
.pagina--home {
    padding-top: 0;
}

.site-footer {
    background: var(--footer-vlak);
    color: var(--footer-tekst);
    padding-block: 3rem 1.5rem;
    margin-top: 3rem;
}

/* Vaste donkere achtergrond in beide thema's (zie --footer-vlak/-tekst
   hierboven), dus ook de linkkleuren liggen hier vast in plaats van de
   thema-wisselende --blauw-ui te volgen — die is op deze achtergrond in
   lichte modus niet leesbaar. */
/* Onderstreept, ook zonder hover: --footer-tekst is hier zowel de tekst- als
   de linkkleur (color:inherit), dus zonder eigen streep is een link niet van
   platte tekst te onderscheiden (WCAG 1.4.1, niet alleen op kleur afgaan) —
   zie de toegankelijkheidscontrole. */
.site-footer a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.site-footer a:hover {
    color: var(--wit);
}

.footer-kolommen {
    display: grid;
    gap: 2rem;
    padding-bottom: 2rem;
}

/* h2, niet h3: deze koptitels volgen soms direct op de <h1> van de pagina
   (bv. de 404-pagina heeft geen andere koppen) — h3 zou dan een niveau
   overslaan (zie de toegankelijkheidscontrole, koppenstructuur). */
.footer-kolom h2 {
    color: var(--wit);
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
}

.footer-kolom ul {
    display: grid;
    gap: 0.5rem;
    list-style: none;
    font-size: 0.9375rem;
}

.footer-onder {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--footer-lijn);
    font-size: 0.8125rem;
}

@media (min-width: 820px) {
    .footer-kolommen {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

/* === Homepage: hero ========================================================= */

.hero {
    position: relative;
    overflow: hidden;
    /* Breekt bewust uit <main class="container pagina"> (layout.php) —
       zelfde truc als .blok-afbeelding.breedte-vol. */
    margin-inline: calc(50% - 50vw);
    padding-block: 3rem 4rem;
    background-color: var(--blauw-donker);
    background-image: linear-gradient(160deg, var(--blauw-donker) 0%, var(--blauw) 70%);
    background-size: cover;
    background-position: center;
    color: var(--wit);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, var(--hero-overlay-van) 0%, var(--hero-overlay-naar) 100%);
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2.25rem;
}

.hero-eyebrow {
    display: inline-block;
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--eyebrow-op-donker);
}

.hero-tekst h1 {
    margin-top: 0.5rem;
    /* Groter dan de standaard h1 (mockup: 40-64px i.p.v. 32-48px) — de hero-
       kop is de blikvanger van de pagina, geen gewone paginatitel. */
    font-size: clamp(2.5rem, 8vw, 4rem);
    color: var(--wit);
}

/* --oranje (#F5600A), niet --accent-op-donker: dit is grote tekst (40-64px,
   vet), norm 3:1 — #F5600A haalt 4,29:1 tegen --blauw-donker en 3,14:1 tegen
   --blauw (lichtste punt van het verloop, worstcase). De eyebrow ernaast
   blijft --eyebrow-op-donker: die is klein (norm 4,5:1) en haalt --oranje
   daar niet (zie de toegankelijkheidscontrole). */
.hero-tekst h1 em {
    font-style: normal;
    color: var(--oranje);
}

.hero-tekst p {
    margin-top: 0.75rem;
    max-width: 42ch;
    color: var(--tekst-zacht-op-donker);
}

.hero-cta {
    margin-top: 1.375rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* === Homepage: wedstrijdkaart-plaatshouder ==================================
   Altijd licht, ook in dark mode (beslislog) — daarom --kaart-licht-*, niet
   de thema-wisselende --tekst/--vlak/etc. Plaatshoudergegevens tot het
   Wedstrijdcentrum bestaat, zie de PHP-commentaar in home.php. */

.matchcard {
    background: var(--kaart-licht-vlak);
    color: var(--kaart-licht-tekst);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--schaduw-zwevend);
}

.matchcard-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kaart-licht-tekst-zacht);
}

.matchcard-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--oranje);
}

.matchcard-matchup {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    margin-block: 1.125rem 0.875rem;
}

.matchcard-team {
    text-align: center;
}

.matchcard-schild {
    width: 3.5rem;
    height: 3.5rem;
    margin-inline: auto;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.25rem;
    background: var(--blauw);
    color: var(--wit);
}

.matchcard-schild--uit {
    background: var(--kaart-licht-lijn);
    color: var(--blauw);
}

.matchcard-naam {
    font-weight: 600;
    font-size: 0.875rem;
}

.matchcard-vs {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.875rem;
    color: var(--kaart-licht-kop);
    text-align: center;
}

.matchcard-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.125rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--kaart-licht-lijn);
    font-size: 0.8125rem;
    color: var(--kaart-licht-tekst-zacht);
}

/* svg.ic, niet .matchcard-ico alleen: svg.ic (element+klasse) is specifieker
   dan een losse klasseselector en won dus altijd van deze afmeting/kleur —
   de matchcard-iconen rendeerden daardoor op 18px in currentColor i.p.v.
   15px in --kaart-licht-tekst-zacht (zie de toegankelijkheidscontrole). */
svg.ic.matchcard-ico {
    width: 15px;
    height: 15px;
    stroke: var(--kaart-licht-tekst-zacht);
    vertical-align: -2px;
    margin-right: 0.3rem;
}

.matchcard-alles {
    display: block;
    margin-top: 0.875rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--blauw);
}

/* === Homepage: snelkoppelingen ============================================== */

.quick {
    display: grid;
    /* Onder elkaar op de smalste telefoons (anders worden drie kolommen te
       krap voor icoon + tekst), drie naast elkaar vanaf 480px — zie de
       media query hieronder. Nooit iets ertussenin (bv. 2+1). */
    grid-template-columns: 1fr;
    gap: 0.625rem;
    /* Half over de hero heen, zoals in de mockup. */
    margin-top: -1.75rem;
    position: relative;
    z-index: 2;
}

/* max-width/centrering hier al mee, niet pas op desktop: anders staan de
   drie kolommen tussen 480-819px breed uitgerekt en links uitgelijnd (zie de
   correctieronde) — de mockup zet beide wisselingen samen bij dezelfde
   breakpoint, wij verschuiven alleen de kolomwissel zelf naar voren (voor
   leesbaarheid op smalle telefoons, eerder al zo gekozen). */
@media (min-width: 480px) {
    .quick {
        grid-template-columns: repeat(3, 1fr);
        max-width: 640px;
        margin-inline: auto;
    }
}

.quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.75rem;
    background: var(--vlak);
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    box-shadow: var(--schaduw-kaart);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--tekst);
    text-decoration: none;
    text-align: center;
    transition: border-color 0.15s;
}

.quick-item:hover {
    border-color: var(--blauw-ui);
}

/* svg.ic, niet .quick-ico alleen — zelfde specificiteitsprobleem als
   svg.ic.matchcard-ico hierboven: zonder de svg.ic-prefix rendeerden deze
   iconen op 18px in currentColor i.p.v. 30px in --blauw-ui. */
svg.ic.quick-ico {
    width: 30px;
    height: 30px;
    stroke: var(--blauw-ui);
}

@media (min-width: 820px) {
    .hero-grid {
        grid-template-columns: 1.15fr 0.85fr;
        align-items: center;
        gap: 3.5rem;
    }
}

/* === Homepage: secties onder de snelkoppelingen (weekplanning, nieuws,
   agenda, cta-band, geld verdienen, sponsors) — allemaal plaatshouders tot
   de bijbehorende module bestaat, zie de PHP-commentaren in home.php. ==== */

.eyebrow {
    display: inline-block;
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blauw-ui);
}

.sectie {
    padding-block: 3rem;
}

/* Volle breedte, net als .hero — zie de PHP-commentaren bij elke sectie die dit gebruikt. */
.sectie--zacht {
    margin-inline: calc(50% - 50vw);
    background: var(--vlak-zacht);
}

.sectie-kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.sectie-kop h2 {
    font-size: clamp(1.5rem, 4vw, 2.125rem);
}

.sectie-kop a {
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* --- Weekplanning & agenda: zelfde "datum-tegel"-lijst voor allebei --- */

.datum-lijst {
    display: grid;
    gap: 0.75rem;
}

.datum-item {
    display: flex;
    align-items: center;
    gap: 1.125rem;
    padding: 0.875rem 1.125rem;
    background: var(--vlak);
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
}

.datum-dag {
    flex: none;
    min-width: 3.5rem;
    text-align: center;
    padding: 0.5rem 0.375rem;
    border-radius: 10px;
    background: var(--blauw);
    color: var(--wit);
    font-family: var(--display);
    line-height: 1.1;
}

.datum-nr {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
}

.datum-mnd {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.datum-info h3 {
    font-size: 1.1875rem;
}

.datum-info p {
    font-size: 0.84375rem;
    color: var(--tekst-zacht);
}

/* --- Nieuws --- */

.news-grid {
    display: grid;
    gap: 1.25rem;
}

.news-card {
    display: block;
    background: var(--vlak);
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.15s;
}

.news-card:hover {
    box-shadow: var(--schaduw-zwevend);
}

.news-thumb {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vlak-zacht);
    color: var(--blauw-ui);
    font-family: var(--display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.875rem;
}

.news-body {
    padding: 1.125rem;
}

.news-datum {
    font-size: 0.8125rem;
    color: var(--tekst-zacht);
    margin-bottom: 0.375rem;
}

.news-card h3 {
    font-size: 1.375rem;
    margin-bottom: 0.5rem;
}

.news-body p {
    font-size: 0.90625rem;
    color: var(--tekst-zacht);
}

.news-lees-meer {
    display: inline-block;
    margin-top: 0.625rem;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--blauw-ui);
}

/* --- Cta-band "lid worden" --- */

.cta-band {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--blauw) 0%, var(--blauw-donker) 100%);
    color: var(--wit);
    border-radius: var(--radius);
    padding: 2.25rem 1.75rem;
    display: grid;
    gap: 1.25rem;
}

.cta-band h2 {
    color: var(--wit);
}

.cta-band p {
    max-width: 52ch;
    color: var(--tekst-zacht-op-donker);
}

/* --- Geld verdienen voor Fluks --- */

.acties-grid {
    display: grid;
    gap: 1rem;
}

.actie-item {
    padding: 1.25rem;
    background: var(--vlak);
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
}

.actie-item h3 {
    font-size: 1.0625rem;
    margin-bottom: 0.375rem;
}

.actie-item p {
    font-size: 0.875rem;
    color: var(--tekst-zacht);
}

/* --- Sponsors --- */

.sponsors-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.sponsor-vlak {
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vlak);
    border: 1px solid var(--lijn);
    border-radius: 10px;
    color: var(--tekst-zacht);
    font-size: 0.8125rem;
    font-weight: 500;
}

@media (min-width: 820px) {
    .datum-lijst {
        grid-template-columns: repeat(2, 1fr);
    }

    .news-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .cta-band {
        grid-template-columns: 1fr auto;
        align-items: center;
        padding: 2.75rem;
    }

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

    .sponsors-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* === 404 ==================================================================== */

.fout-404 {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    text-align: center;
    padding-block: 3rem;
}

.fout-404-code {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(3rem, 12vw, 6rem);
    line-height: 1;
    color: var(--blauw-ui);
}

.fout-404 p {
    max-width: 40ch;
    color: var(--tekst-zacht);
}