/* 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);
}

/* ---- 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;
    padding: 8px 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: 12.5px;
    color: #b8c0c8;
}

@media (max-width: 640px) {
    .pub-callbar { padding: 7px 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;
    padding: 10px 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: 12.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));
    color: 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: 12px;
    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;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--ink);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.pub-lang-menu-link:hover {
    background: var(--pink-badge-bg, var(--bg2));
    color: var(--accent-ink, var(--accent));
}

.pub-lang-menu-link[aria-current="true"] {
    color: 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);
    border: 1px solid 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;
}

.pub-theme-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    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));
}

/* 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: 13px;
    /* AAA 1.4.6: lichtgrijs op #323c46, ≥7:1-contrast. */
    color: #c3cad2;
    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: 13.5px;
    text-decoration: none;
    border: 1.5px solid #4a545f;
    border-radius: 9px;
    padding: 10.5px 16px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

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

.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: stretch;
}

/* Elke kolom als eigen "vak" (kaart) i.p.v. losse tekst direct op de donkere achtergrond —
   gebruikersverzoek 2026-07-20 "mooier, netter, professioneler in vakken". Zelfde
   kaart-taal als de rest van de footer (.pub-footer-cta: subtiele rand + zachte schaduw),
   alleen rustiger van kleur zodat de CTA-band er bovenuit blijft springen. */
.pub-footer-col {
    min-width: 0;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 20px 22px;
}

.pub-footer-brand-col {
    background: rgba(255, 255, 255, 0.05);
    border-top: 2px solid var(--accent);
}

.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: 11.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: 14.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); }
}

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

.pub-footer-title {
    font-size: 12px;
    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: 13.5px;
    /* 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: 11.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: 8px 12px; gap: 8px; 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: 13px;
        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;
        min-height: 38px;
        font-size: 12px;
        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: 13.5px;
        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%;
        flex-wrap: nowrap;
        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;
    }
}