/* Publieke marketing-layout — zelfde design-tokens als de app (tokens.css), eigen chrome.
   WCAG 2.2 AAA: skip-link (tokens.css), echte links, 7:1-contrast via tokens, focus-ring globaal. */

.pub-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--ink);
    /* Vangnet voor de project-mobielregel "de pagina zelf scrollt nooit horizontaal". De echte
       oorzaak van de 249px dode swipe-ruimte op mobiel (bevinding 2026-07-22) waren de absolute
       .sr-only-labels in de matrixtabellen (gefixt via position:relative op de tabel-wrappers in
       marketing.css); dit clip blijft staan als defense-in-depth tegen toekomstige uitschieters.
       clip i.p.v. hidden: knipt zonder een extra scroll-container te introduceren, dus de sticky
       header en interne wrapper-scroll blijven ongemoeid. */
    overflow-x: clip;
}

/* ---- Belbalk ----
   Zelfde donkere, al AAA-geverifieerde kleurencombinatie (#1d232a/#b8c0c8, 7,6:1) als de
   admin-sidebar/marketing-donkerbanden — geen nieuwe hardcoded kleur zonder contrastcheck. */
.pub-callbar {
    background: var(--sidebar-bg);
    color: #b8c0c8;
    /* Verkleind van 8px (gebruikersverzoek 2026-07-24 "topbar iets compacter maken in
       hoogte") — de balk draagt geen eigen interactief doel op 44px behalve de telefoonlink,
       die zijn eigen regelhoogte/line-height behoudt, dus minder verticale padding kost geen
       AAA-treffgebied. */
    padding: 6px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    text-align: center;
}

.pub-callbar-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 800;
    font-size: 19px;
    letter-spacing: .2px;
}

.pub-callbar-link:hover,
.pub-callbar-link:focus-visible {
    color: var(--accent-ink-h, var(--accent));
    text-decoration: underline;
}

.pub-callbar-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex: none;
}

.pub-callbar-icon svg { width: 100%; height: 100%; }

.pub-callbar-note {
    font-size: 13.5px;
    color: #b8c0c8;
}

@media (max-width: 640px) {
    .pub-callbar { padding: 5px 14px; }
    .pub-callbar-link { font-size: 16px; }
    .pub-callbar-note { display: none; }
}

/* ---- Header ---- */
.pub-header {
    background: var(--card);
    border-bottom: 1px solid var(--bd3);
    position: sticky;
    top: 0;
    z-index: 40;
}

.pub-header-accentbar {
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-ink-h, var(--accent)) 55%, var(--accent) 100%);
}

.pub-header-inner {
    /* Bewust breder dan de 1200px content-kolom van de rest van de site: de navigatie (8
       items) + accountknoppen hebben op precies 1200px geen ruimte om op één regel te
       passen zonder te overlappen. Verruimd 2026-07-21 (gebruikersverzoek "menu/topbalk/
       footer verbeteren" — de volledige navigatie stond hiervoor pas vanaf 1650px viewport-
       breedte aan, waardoor ook heel gangbare laptopschermen (1440/1536px) altijd het
       hamburgermenu kregen, ook al was er ruimte genoeg als de 1320px-kolombreedte niet in de
       weg had gezeten): 1500px i.p.v. 1320px, samen met de verlaagde hamburger-drempel
       hieronder (was 1650px, nu 1400px) en de iconen die uit de rij-navigatie zijn gehaald
       (zie .pub-nav-icon). Gemeten met de langste ondersteunde taal (Frans) inclusief
       taalknop/thema-schakelaar/accountknoppen: ~1316px nodig bij 1500px-kolombreedte (1460px
       bruikbaar na padding) — ruime marge. */
    max-width: 1500px;
    margin: 0 auto;
    /* Verkleind van 10px (gebruikersverzoek 2026-07-24 "topbar iets compacter maken in
       hoogte") — merk/menu-knop/accountknoppen zitten allemaal al op hun eigen min-height
       (44px resp. .btn's --control-height), dus minder buitenpadding raakt geen treffgebied. */
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
    position: relative;
}

.pub-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
    flex: none;
}

.pub-logo {
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

.pub-brand-name {
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -0.3px;
    background: linear-gradient(90deg, var(--accent-ink) 0%, var(--accent-ink-h) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Checkbox-hack: de checkbox zelf is nooit zichtbaar, alleen zijn :checked-status stuurt de
   nav via CSS (~ combinator). Op desktop blijft de nav sowieso altijd zichtbaar (zie .pub-nav
   hieronder) en de menu-knop verborgen — pas de mobiele media query hierna wijzigt dat.
   Bewust géén `opacity:0` (dat zou ook de :focus-visible-ring van een toetsenbordgebruiker
   onzichtbaar maken, WCAG 2.4.13) — sr-only-achtige clip-verberging houdt het element wel
   focusbaar/zichtbaar-voor-focus, alleen niet visueel aanwezig. De focusring verschijnt in
   plaats daarvan op de zichtbare <label> via :focus-visible hieronder. */
.pub-nav-check {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.pub-nav-check:focus-visible ~ .pub-nav-summary {
    outline: 3px solid var(--focus-ring, var(--accent));
    outline-offset: 2px;
}

.pub-nav-summary {
    display: none;
}

/* Bug gefixt: zonder deze basisregel had ".pub-nav-close" (het "✕ Sluiten"-label) helemaal
   geen display-waarde buiten de mobiele media query om — een <label> is standaard "inline",
   dus het sluitlabel stond altijd zichtbaar in de desktopnavigatie. Alleen onder 900px
   (zie media query) wordt hij weer getoond, en dan alleen als het menu open staat. */
.pub-nav-close {
    display: none;
}

.pub-nav {
    display: flex;
    align-items: center;
    gap: 1px;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

.pub-nav-link {
    color: var(--ink2);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 7px;
    border-radius: 8px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    /* Bug gefixt 2026-07-20 ("Contact zit achter taal"): .pub-nav had min-width:0, waardoor
       de flex-nav bij een net-te-smalle breedte onder zijn intrinsieke (nowrap-)inhoudsbreedte
       werd samengeperst — de losse links zelf hebben geen overflow-afkapping, dus de laatste
       link(s) (Contact) liepen visueel door in het volgende flex-element (de taalknop) i.p.v.
       netjes af te breken naar het hamburgermenu. flex-shrink:0 dwingt elke link af om zijn
       volledige breedte te behouden; in combinatie met de verruimde breakpoint hieronder mag
       de rij nooit meer smaller worden dan wat alle links + accountknoppen samen nodig hebben. */
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Iconen krijgen een eigen accentkleur (AAA-getoetste --accent-ink) i.p.v. de neutrale
   tekstkleur te volgen — geeft de nav kleur zonder dat de tekst zelf accent-gekleurd hoeft
   te zijn (die blijft --ink2/--ink voor consistente leesbaarheid). Puur decoratief
   (aria-hidden op het icoon zelf), dus geen aparte contrast-eis van toepassing.
   is hier verplicht: de <span class="pub-nav-icon"> komt uit Icon()'s MarkupString
   (ruwe HTML-string-interpolatie, geen letterlijke Razor-markup), dus de Razor-compiler zet
   er nooit een scoped-CSS-attribuut op — zonder matcht deze regel dan nooit (zelfde
   bekende valkuil als Leaflet-marker-DOM/InputFile elders in dit project). */
.pub-nav-icon {
    /* Verborgen op de rij-navigatie (desktop) — kost ~160-190px breedte over de hele rij
       zonder functionele meerwaarde (puur decoratief, aria-hidden) en was mede de reden dat
       het hamburgermenu op gangbare laptopbreedtes aanstond. Blijft wél zichtbaar in het
       uitgeklapte mobielmenu (zie @media hieronder, waar de iconen als afgeronde chips
       worden getoond — daar hebben ze wel visuele meerwaarde in een verticale lijst). */
    display: none;
    flex: none;
    color: var(--accent-ink);
}

.pub-nav-link:hover {
    background: var(--pink-badge-bg, var(--bg2));
    /* --pink-badge-ink i.p.v. --accent-ink (heraudit 2026-09-05): 6,52:1 op de badge-tint in
       licht thema; het .pill-accent-paar haalt 8,04:1. */
    color: var(--pink-badge-ink, var(--accent-ink));
}

.pub-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    margin-left: auto;
}

/* De twee subgroepjes (taal+thema / login+registreren) — op desktop/tablet gewoon twee
   naast elkaar staande flex-rijen zonder eigen omlijsting (ziet er identiek uit als voorheen,
   toen dit nog vier platte kinderen van .pub-header-actions waren). Pas de mobiele media
   query hieronder (max-width: 560px) geeft .pub-header-utils een samengevoegde pil-vormgeving. */
.pub-header-utils {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pub-header-auth {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---- Taalkeuzelijst (topbar) ---- */
.pub-lang-menu {
    position: relative;
}

/* <summary> is van zichzelf al focusbaar/toetsenbordbedienbaar (native disclosure-widget) —
   alleen de standaard driehoek-marker en de lijst-opmaak van het element weghalen. */
.pub-lang-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 38px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--bd3);
    background: var(--card);
    color: var(--ink2);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    list-style: none;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.pub-lang-menu-toggle::-webkit-details-marker { display: none; }
.pub-lang-menu-toggle::marker { content: ""; }

.pub-lang-menu-toggle:hover,
.pub-lang-menu[open] > .pub-lang-menu-toggle {
    border-color: var(--accent-ink, var(--accent));
    color: var(--accent-ink, var(--accent));
    background: var(--pink-badge-bg, var(--bg2));
}

/* Vlag-SVG als vaste 18×13-chip (3:2, echte vlagverhouding) met afgeronde hoeken —
   verplicht: de <svg> zelf komt uit LanguageFlagIcons.Svg()'s MarkupString (ruwe
   HTML-interpolatie), dus de Razor-compiler zet er nooit een scoped-CSS-attribuut op
   (zelfde bekende valkuil als .pub-nav-icon hierboven/Leaflet-marker-DOM elders). */
.pub-lang-menu-flag {
    display: inline-flex;
    flex: none;
    width: 18px;
    height: 13px;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--bd3);
}

.pub-lang-menu-flag svg {
    display: block;
    width: 100%;
    height: 100%;
}

.pub-lang-menu-code {
    line-height: 1;
}

/* Op echte telefoons (zelfde drempel als de accountknoppen hieronder) blijft alleen de vlag
   over — de code-tekst is dan overbodig naast de vlag en de knop wordt zo compact genoeg om
   naast de thema-schuifknop + accountknoppen te passen. De knop blijft volledig bedienbaar:
   aria-label op <summary> noemt nog steeds "taal wijzigen", niet alleen de vlag. */
@media (max-width: 560px) {
    .pub-lang-menu-toggle { padding: 0 9px; gap: 3px; }
    .pub-lang-menu-code { display: none; }
}

.pub-lang-menu-link-flag {
    display: inline-flex;
    flex: none;
    width: 18px;
    height: 13px;
    border-radius: 2px;
    overflow: hidden;
    margin-right: 8px;
    box-shadow: 0 0 0 1px var(--bd3);
}

.pub-lang-menu-link-flag svg {
    display: block;
    width: 100%;
    height: 100%;
}

.pub-lang-menu-chevron {
    flex: none;
    transition: transform 0.15s ease;
}

.pub-lang-menu[open] .pub-lang-menu-chevron {
    transform: rotate(180deg);
}

.pub-lang-menu-list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    margin: 0;
    padding: 6px;
    list-style: none;
    min-width: 170px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--bd3);
    border-radius: 12px;
    box-shadow: 0 14px 30px rgba(20, 24, 28, 0.18);
}

.pub-lang-menu-link {
    display: flex;
    align-items: center;
    /* 44px i.p.v. 38px (heraudit 2026-09-05, WCAG 2.5.5): zeven taal-links direct boven
       elkaar, geen omliggende marge die het aanraakdoel compenseert. */
    min-height: 44px;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--ink);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
}

/* --pink-badge-ink i.p.v. --accent-ink (heraudit 2026-09-05): zelfde 7:1-geverifieerde paar
   als .pill-accent; accent-inkt op de badge-tint haalde in licht thema 6,52:1. */
.pub-lang-menu-link:hover {
    background: var(--pink-badge-bg, var(--bg2));
    color: var(--pink-badge-ink, var(--accent-ink, var(--accent)));
}

.pub-lang-menu-link[aria-current="true"] {
    color: var(--pink-badge-ink, var(--accent-ink, var(--accent)));
    background: var(--pink-badge-bg, var(--bg2));
}

/* ---- Thema-toggle (licht/donker): schuifknop-patroon (track + schuivende thumb) ---- */
.pub-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 999px;
    cursor: pointer;
    /* Bug gefixt 2026-07-20 ("overlap, klikken gaat niet goed, elke klik triggert de
       toggle"): deze knop draagt de globale ".hit-target"-class (tokens.css) voor een
       vergrote onzichtbare aanraakzone (::before, inset:-13px -6px), maar had zelf geen
       eigen positioneringscontext. Zonder position:relative hier positioneert dat ::before
       zich t.o.v. de eerstvolgende positioned ancestor — dat is .pub-header-inner
       (position:relative, hierboven) — waardoor de onzichtbare klik-laag bijna de hele
       header-breedte besloeg en alle andere klikken (nav-links, taalknop) onderschepte. */
    position: relative;
}

.pub-theme-track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 48px;
    height: 26px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--chip);
    /* --bd-input i.p.v. --bd3 (heraudit 2026-09-05, WCAG 1.4.11): --bd3 haalde 1,32:1 tegen
       de track; --bd-input 3,6:1. */
    border: 1px solid var(--bd-input, var(--bd3));
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pub-theme-track-icon {
    position: relative;
    z-index: 1;
    flex: none;
    color: var(--ink3, var(--ink2));
    transition: color 0.2s ease;
}

/* Zon-icoon staat (z-index:1) BOVEN de thumb; nu de thumb in licht thema de accentkleur heeft
   (zie .pub-theme-thumb) krijgt het icoon --accent-fg, exact zoals de maan in donker thema
   (heraudit 2026-09-05). */
.pub-theme-track-icon-sun {
    color: var(--accent-fg, #fff);
}

.pub-theme-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    /* var(--accent) i.p.v. wit (heraudit 2026-09-05, WCAG 1.4.11): wit op --chip haalde 1,12:1
       en was alleen door zijn schaduw te onderscheiden — de thumb is de statusindicator. */
    background: var(--accent);
    box-shadow: 0 1px 3px rgba(20, 24, 28, 0.3);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.pub-theme-toggle:hover .pub-theme-track {
    border-color: var(--accent-ink, var(--accent));
}

/* Druk-microinteractie (heraudit 2026-09-05, patroon tokens.css .btn:active): de schakelaar
   miste als enige knop op de publieke/login-pagina's een :active-signaal. In donker thema moet
   de translateX van de thumb behouden blijven, vandaar de gecombineerde variant hieronder.
   Valt automatisch onder de globale prefers-reduced-motion-regel. */
.pub-theme-toggle:active .pub-theme-thumb {
    transform: scale(.9);
}

[data-dark="1"] .pub-theme-toggle:active .pub-theme-thumb {
    transform: translateX(22px) scale(.9);
}

/* Zelfde ":global()"-valkuil als bij het logo hierboven vermeden: kaal attribuutselector-
   voorvoegsel, geen niet-bestaande Blazor-richtlijn. */
[data-dark="1"] .pub-theme-track {
    background: var(--sidebar-bg, #1d232a);
    border-color: #3a434c;
}

[data-dark="1"] .pub-theme-track-icon-sun {
    color: #6b747d;
}

[data-dark="1"] .pub-theme-track-icon-moon {
    color: #ffe9b3;
}

[data-dark="1"] .pub-theme-thumb {
    transform: translateX(22px);
    background: var(--accent);
}

/* ---- Main ---- */
.pub-main {
    flex: 1 1 auto;
    width: 100%;
}

/* ---- Footer ---- */
.pub-footer {
    /* var(--sidebar) bestond niet (het token heet --sidebar-bg) — de fallback-hex werd dus
       altijd stilzwijgend gebruikt, buiten het tokensysteem om (AAA-audit-bevinding). */
    background: var(--sidebar-bg, #232a31);
    color: #d5dae0;
    margin-top: 60px;
}

.pub-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ---- CTA-band (patroon Publiek.dc.html) ---- */
.pub-footer-cta {
    background: linear-gradient(135deg, #38424d 0%, #2c343c 100%);
    border: 1px solid #454f5a;
    border-radius: 16px;
    padding: 26px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.pub-footer-cta-title {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #ffffff;
    margin: 0 0 4px;
}

.pub-footer-cta-body {
    font-size: 15px;
    /* AAA 1.4.6: #dfe4e8 op de gradient #38424d→#2c343c = 7,98:1 aan de lichte kant
       (heraudit 2026-09-05: het eerdere #c3cad2 haalde daar maar 6,18:1). */
    color: #dfe4e8;
    margin: 0;
}

.pub-footer-cta-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pub-footer-cta-demo {
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    /* De rand is de enige afbakening van deze transparante knop → WCAG 1.4.11 (3:1): #4a545f
       haalde 1,33–1,64:1 op de gradient #38424d→#2c343c, #9aa3ac ≥3,3:1 (heraudit 2026-09-05). */
    border: 1.5px solid #9aa3ac;
    border-radius: 9px;
    padding: 10.5px 16px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.pub-footer-cta-demo:hover { border-color: #c0c7ce; }

/* Eén kaart om de hele 4-koloms-grid (gebruikersverzoek 2026-07-22 "kan niet alles in 1
   blok"): was voorheen 4 losse kaarten per kolom (elk eigen rand/achtergrond), maar
   align-items:stretch trok de kortere kolommen dan even hoog als het langste merk-blok,
   met een storend leeg gat onderin als gevolg. Eén omhullende kaart + align-items:start
   laat elke kolom zijn eigen hoogte houden zonder dat dat als een "gat" opvalt. */
.pub-footer-cols {
    display: grid;
    /* Exact 4 kolommen, zoals Publiek.dc.html (`1.4fr repeat(3,1fr)`, was `repeat(4,1fr)` — een
       extra 5e kolom, zie de toelichting in PublicLayout.razor). */
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 18px;
    align-items: start;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 20px 22px;
}

.pub-footer-col {
    min-width: 0;
}

.pub-footer-brand-col {
    border-right: 1px solid rgba(255, 255, 255, 0.09);
    padding-right: 22px;
}

.pub-footer-brand-col .pub-footer-line {
    max-width: 32ch;
}

/* Bedrijfsregistratie + taalwisselaar: compacte regel onder de 4-koloms-grid, boven de
   copyright-balk — zelfde kleine mono-stijl als .pub-footer-credit, geen eigen kolommen (die
   zouden de wireframe's 4-koloms-verhouding verstoren). */
.pub-footer-legal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    flex-wrap: wrap;
    padding-top: 22px;
    border-top: 1px solid #3a434c;
    font-size: 12.5px;
    letter-spacing: 0.3px;
    color: #aeb6be;
}

.pub-footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.pub-footer-brand img { border-radius: 6px; }

.pub-footer-brand-name {
    font-weight: 800;
    font-size: 15.5px;
    letter-spacing: 0.4px;
    color: #ffffff;
}

/* Verfijnd 2026-07-21 (gebruikersverzoek "verder verfijnen"): `repeat(auto-fit,
   minmax(200px,1fr))` liet op tabletbreedtes (~680-900px bruikbare breedte) precies 3 van de
   4 kolommen op de eerste rij passen — de 4e (Juridisch) viel dan wees-achtig alleen op een
   tweede rij, in de eerste (smalle) kolomtrack, met een lege ruimte ernaast tot de volledige
   breedte. Bevestigd met een DOM-meting op 834px: kolom 4 stond op left:20px/width:248px
   terwijl de rij daarnaast tot 834px leeg bleef. Nu een bewuste 2×2-indeling (900px t/m
   560px) — altijd twee volle, gelijke kolommen per rij, nooit een half-lege rij — en pas
   onder 560px (zelfde drempel als de accountknoppen elders in de header) één kolom breed. */
@media (max-width: 900px) {
    .pub-footer-cols { grid-template-columns: repeat(2, 1fr); }
    /* De verticale scheidingslijn hoort alleen bij de 4-koloms-rij (desktop) — in de 2×2- en
       1-koloms-indeling staat er geen kolom meer direct naast de merk-kolom om te scheiden,
       dus de rand bleef daar als een zinloze losse lijn achter (bevinding 2026-07-22). */
    .pub-footer-brand-col {
        border-right: none;
        padding-right: 0;
    }
}

@media (max-width: 560px) {
    .pub-footer-cols { grid-template-columns: 1fr; }
}

.pub-footer-title {
    font-size: 13.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    /* Wit op de donkere footer-achtergrond (#232a31), ruim boven AAA 7:1-contrast. */
    color: #ffffff;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.pub-footer-line {
    margin: 0 0 4px;
    font-size: 15px;
    /* AAA 1.4.6: lichtgrijs op de donkere footer-achtergrond (#232a31), ≥7:1-contrast. */
    color: #c3cad2;
}

.pub-footer-link {
    /* AAA 1.4.6: lichtgrijs op de donkere footer-achtergrond (#232a31), ≥7:1-contrast. */
    color: #d5dae0;
    text-decoration: none;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s ease;
}

/* Wit + onderstreping bij hover — houdt de kaarten rustig in ruststand, blijft duidelijk
   klikbaar zodra iemand erover beweegt/focust (onderstreping vervangt de altijd-aan-variant
   hierboven, die de kaarten drukker maakte dan bedoeld). */
.pub-footer-link:hover,
.pub-footer-link:focus-visible { color: #ffffff; text-decoration: underline; }

/* Witte focus-ring op de donkere footer (zelfde patroon als AdminLayout-chrome), AAA 7:1-contrast. */
.pub-footer a:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

.pub-lang-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
}

.pub-lang-link[aria-current="true"] {
    font-weight: 800;
    text-decoration: none;
}

.pub-footer-credit {
    /* Decoratieve rand op de donkere footer, geen tekst — geen 7:1-contrasteis van toepassing. */
    border-top: 1px solid #3a434c;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 20px 22px;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12.5px;
    letter-spacing: 0.4px;
    /* AAA 1.4.6: lichtgrijs op de donkere footer-achtergrond (#232a31), ≥7:1-contrast. */
    color: #aeb6be;
}

/* Drempel bewust hoger dan de gebruikelijke 900px tablet-breakpoint: de volledige
   desktop-navigatie (8 items, nowrap, "alles op 1 lijn") heeft ~1248px nodig om zonder
   overlap te renderen (gemeten in het NEDERLANDS). Was eerst op 1279px, toen 1439px gezet
   — bleek in de praktijk (scrollbar-breedte, browser-chrome, exacte fontrendering) alsnog te
   overlappen ("Contact zit achter taal"-bug, 2026-07-20). Bug herhaald in het FRANS
   (2026-07-20, gebruiker-screenshot: nav-items overlapten "Se connecter"/"S'inscrire" —
   Franse labels als "Feuille de route"/"Documentation" zijn merkbaar langer dan hun
   Nederlandse equivalenten, dus de op-Nederlands-gemeten 1439px-drempel had voor het Frans
   (en waarschijnlijk ook Duits/Pools/Roemeens) simpelweg te weinig marge. flex-shrink:0 op
   .pub-nav-link (hierboven) betekent dat de rij bij onvoldoende ruimte NIET krimpt maar
   overloopt — met .pub-header-actions' margin-left:auto (dat bij te weinig vrije ruimte naar
   0 klapt) resulteert dat in overlappende in plaats van correct afgekapte content.
   Verlaagd 2026-07-21 (was 1650px — te hoog, gaf zelfs op gangbare laptopbreedtes als
   1440/1536px altijd het hamburgermenu, terwijl daar prima ruimte voor de volledige
   navigatie is): nu 1400px, mogelijk gemaakt door de iconen uit de rij-navigatie te halen
   (.pub-nav-icon, scheelt ~160-190px) en .pub-header-inner's max-width te verruimen
   naar 1500px. Gemeten (JS, scrollWidth-optelling van merk+nav+accountknoppen+gaps) voor
   zowel Nederlands (~1183px) als Frans, de langst gemeten taal (~1316px) — bij 1400px
   viewport-breedte is 1360px bruikbaar (1400 - 2×20px padding), ruim boven het Franse
   minimum. Onder 1400px (kleinere laptops/tablets/telefoons) blijft het hamburgermenu. */
@media (max-width: 1400px) {
    /* flex-wrap terug naar wrap (basisregel zet 'm op nowrap voor de brede desktop-navigatie
       hierboven) — .pub-nav hieronder gebruikt flex-basis:100% om naar een eigen regel te
       klappen zodra het hamburgermenu open staat, dat vereist wrap op de ouder. */
    .pub-header-inner { padding: 6px 12px; gap: 6px; flex-wrap: wrap; }

    /* Merk blijft altijd links; het samengeklapte koptekst-rijtje (merk + menu-knop +
       accountknoppen) blijft op één regel tot @media (max-width: 560px) hieronder — pas
       dáár is er echt te weinig ruimte en wrappen de accountknoppen naar een tweede regel. */
    .pub-brand { flex: 1 1 auto; min-width: 0; }
    .pub-brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Onder 1400px (deze media query) wordt de menu-knop (<label>) zichtbaar; de nav zelf is
       standaard dichtgeklapt (max-height:0, overflow verborgen) en klapt open zodra de
       checkbox aan staat. */
    .pub-nav-summary {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 44px;
        padding: 8px 12px;
        border: 1px solid var(--bd3);
        border-radius: 8px;
        background: var(--card);
        color: var(--ink);
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        order: 2;
    }

    /* Blijft op dezelfde regel als merk + menu-knop (geen flex-basis:100%) — alleen de
       volledige nav (hieronder, order 4) klapt naar een eigen regel. margin-left:auto
       (basisregel) duwt dit blokje tegen de rechterkant aan. */
    .pub-header-actions { order: 3; }

    .pub-nav-check:checked ~ .pub-nav-summary {
        border-color: var(--accent);
        color: var(--accent-ink, var(--accent));
    }

    /* Toetsenbord-only sluitknop bovenin het opengeklapte paneel — voorkomt dat een
       toetsenbordgebruiker het menu alleen kan sluiten door terug te tabben naar de
       menu-knop zelf (de checkbox-hack heeft geen Escape-ondersteuning).
       Vormgeving 2026-07-21 (gebruikersverzoek "uitgeklapt menu mooier maken"): een echte
       pil-knop rechts uitgelijnd i.p.v. kale onderstreepte tekst — sluit aan bij de rest van
       de knoppenvormgeving op de site (.pub-lang-menu-toggle/.btn-secondary). */
    .pub-nav-close {
        display: none;
        align-items: center;
        gap: 6px;
        /* 44px i.p.v. 38px (heraudit 2026-09-05, WCAG 2.5.5-aanraakdoel op telefoons). */
        min-height: 44px;
        font-size: 13.5px;
        font-weight: 700;
        letter-spacing: 0.2px;
        color: var(--ink2);
        cursor: pointer;
        background: var(--card);
        border: 1px solid var(--bd3);
        border-radius: 999px;
        padding: 0 14px;
        margin: 0 0 10px auto;
        width: fit-content;
        transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
    }

    .pub-nav-close:hover,
    .pub-nav-close:focus-visible {
        color: var(--accent-ink, var(--accent));
        border-color: var(--accent-ink, var(--accent));
        background: var(--pink-badge-bg, var(--bg2));
    }

    .pub-nav-check:checked ~ .pub-nav .pub-nav-close {
        display: flex;
    }

    /* Uitgeklapt paneel als een echte kaart (afgeronde hoeken, rand, schaduw) i.p.v. een kale
       lijst plat tegen de pagina-achtergrond — plus een zachte fade/slide-in i.p.v. alleen een
       max-height-sprong, voor een rustiger openklap-gevoel. */
    .pub-nav {
        order: 4;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 3px;
        max-height: 0;
        overflow: hidden;
        margin: 0;
        opacity: 0;
        transform: translateY(-6px);
        border: 1px solid transparent;
        border-radius: 16px;
        transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.2s ease,
            margin-top 0.25s ease, padding 0.25s ease, border-color 0.25s ease;
    }

    .pub-nav-check:checked ~ .pub-nav {
        max-height: 560px;
        margin-top: 10px;
        padding: 10px;
        opacity: 1;
        transform: translateY(0);
        background: var(--card);
        border-color: var(--bd3);
        box-shadow: 0 18px 40px rgba(20, 24, 28, 0.16);
    }

    .pub-nav-link {
        width: 100%;
        padding: 11px 12px;
        font-size: 15px;
        border-radius: 11px;
        gap: 10px;
    }

    /* Dunne scheidslijn tussen de rijen i.p.v. losse regels zonder enige structuur — subtiel,
       verdwijnt vanzelf onder de gekleurde hover-achtergrond van elke rij. */
    .pub-nav-check:checked ~ .pub-nav .pub-nav-link:not(:last-child) {
        border-bottom: 1px solid var(--bd3);
    }

    /* Icoon als eigen afgeronde chip i.p.v. een kaal lijntekening-icoontje los in de rij —
       geeft elk menu-item meteen een duidelijk, herkenbaar visueel ankerpunt. Alleen hier
       (mobielmenu) zichtbaar — de basisregel verbergt het icoon op de desktop-rij-navigatie. */
    .pub-nav-icon {
        display: inline-flex;
        width: 30px;
        height: 30px;
        justify-content: center;
        flex: none;
        background: var(--pink-badge-bg, var(--bg2));
        border-radius: 9px;
        opacity: 1;
        transition: background-color 0.15s ease;
    }

    .pub-nav-link:hover .pub-nav-icon,
    .pub-nav-link:focus-visible .pub-nav-icon {
        background: var(--accent);
        color: #ffffff;
    }
}

/* Pas op echt smalle telefoons (merk + menu-knop + "Inloggen"/"Registreren →" past dan niet
   meer naast elkaar) klappen de accountknoppen naar hun eigen volledige regel — tussen 561px
   en 1279px blijven ze naast merk + menu-knop op de bovenste regel staan (zie hierboven). */
@media (max-width: 560px) {
    /* Eigen, volledig-breedte rij onder merk+menu-knop, met de twee subgroepjes
       (.pub-header-utils/.pub-header-auth) netjes verdeeld over de breedte i.p.v. links
       op elkaar gepropt met een steeds grotere lege staart rechts. Een dunne scheidslijn
       + eigen bovenmarge laat de rij als een samenhangend onderdeel van de header aanvoelen
       i.p.v. een los blokje dat er losjes onder bungelt (gebruikersverzoek 2026-07-21: "1
       geheel van maken"). */
    .pub-header-actions {
        order: 3;
        flex-basis: 100%;
        /* wrap i.p.v. nowrap (gebruikersmelding 2026-08-16, screenshot "Registrer…" rechts
           afgekapt): de taal+thema-pil en de twee auth-knoppen zijn geen van alle krimpbaar
           (flex:none + white-space:nowrap), dus op zeer smalle telefoons (≤360px, en in
           langere talen zoals Duits al eerder) liep de nowrap-rij 35px+ de viewport uit —
           de Registreren-knop werd deels onbereikbaar afgesneden. Met wrap klapt het
           auth-paar dan als geheel naar een eigen regel; op bredere telefoons verandert er
           niets (alles past op één regel, space-between blijft gelden). */
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin-top: 8px;
        padding-top: 10px;
        border-top: 1px solid var(--bd3);
    }

    .pub-header-auth {
        flex: none;
    }

    .pub-header-auth a { white-space: nowrap; }

    /* Taal + thema samengevoegd tot één pil (segmented control) i.p.v. twee losse, los van
       elkaar staande bedieningselementen met toevallige tussenruimte — de taalknop verliest
       hier zijn eigen rand/achtergrond (die neemt de gezamenlijke pil nu over) en krijgt een
       dunne verticale scheidslijn t.o.v. de thema-schakelaar in plaats daarvan. */
    .pub-header-utils {
        gap: 0;
        padding: 3px 4px 3px 10px;
        border: 1px solid var(--bd3);
        border-radius: 999px;
        background: var(--card);
    }

    .pub-header-utils .pub-lang-menu-toggle {
        height: 30px;
        padding: 0 8px 0 0;
        border: none;
        background: transparent;
        position: relative;
    }

    /* Verticale scheidslijn tussen de taalknop en de thema-schakelaar — vervangt de rand die
       de taalknop buiten deze pil normaal zelf draagt. */
    .pub-header-utils .pub-lang-menu-toggle::after {
        content: "";
        display: block;
        width: 1px;
        height: 18px;
        margin-left: 8px;
        background: var(--bd3);
    }

    .pub-header-utils .pub-lang-menu-toggle:hover,
    .pub-header-utils .pub-lang-menu[open] > .pub-lang-menu-toggle {
        background: transparent;
    }

    .pub-header-utils .pub-theme-toggle {
        margin-left: 2px;
    }

    /* Bug gevonden en gefixt 2026-07-21 ("verder verfijnen"): .pub-lang-menu-list is normaal
       gesproken `right:0` t.o.v. de taalknop (opent naar links, past onder de knop op zijn
       gebruikelijke plek rechts in de header). In déze media query staat de taalknop echter
       als EERSTE item aan de LINKERKANT van zijn groepje (justify-content:flex-start via de
       basisregel van .pub-header-utils) — `right:0` liet het paneel dan links van de knop tot
       ver buiten de viewport doorlopen (gemeten: tot 108px voorbij de linkerrand, dus voor een
       deel van het scherm letterlijk onbereikbaar/onzichtbaar). Boven 560px (waar de knop wél
       rechts in de header staat) blijft de standaardregel gewoon gelden. */
    .pub-lang-menu-list {
        left: 0;
        right: auto;
    }
}