/* PubliQio — site.css (P2: design-tokens, self-hosted fonts, icoon-regels) */
/* R1: geen externe runtime-verwijzingen — fonts self-hosted (woff2), geen Google-CDN. */

/* ── Self-hosted fonts: Fraunces (display) + Schibsted Grotesk (body) — woff2, font-display:swap ── */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/fraunces-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/fraunces-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url('/assets/fonts/fraunces-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url('/assets/fonts/fraunces-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/schibsted-grotesk-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/schibsted-grotesk-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fraunces-fallback';src:local('Georgia'),local('Liberation Serif');size-adjust:94.33%;ascent-override:103.68%;descent-override:27.03%;line-gap-override:0%;}
@font-face{font-family:'Schibsted-fallback';src:local('Arial'),local('Liberation Sans');size-adjust:101.48%;ascent-override:96.27%;descent-override:25.42%;line-gap-override:0%;}

/* ── Design-tokens — dark = default/fallback (P2 vastgesteld; L1 light-laag) ──
   Semantiek: teal-familie = interactie, goud-familie = bewijs/nummering.
   *-ink-varianten dragen TEKST/RAND op licht fond (WCAG >=4.5:1 tekst, >=3:1 UI);
   origineel teal/goud blijft voor VLAKKEN/KNOPPEN/decoratieve accenten.
   In dark geldt *-ink == basis, dus dark rendert byte-identiek aan vóór L1. */
:root{
  --navy:#0D1B2A;--panel:#13253A;--panel-2:#0F2033;--border:#24384E;
  --teal:#02C39A;--teal-ink:#02C39A;--teal-dim:rgba(2,195,154,.13);
  --gold:#F2C94C;--gold-ink:#F2C94C;--gold-dim:rgba(242,201,76,.10);
  --text:#E9EEF4;--dim:#90A3BB;--white:#fff;
  --on-teal:#0D1B2A;                 /* tekst op teal-vlak — donker in BEIDE modi */
  --error:#ff9c9c;--error-ink:#ff9c9c;
  --frame-texture:rgba(144,163,187,.09);
  --shadow:none;                     /* elevatie alleen in light nodig */
  --shadow-modal:0 16px 48px rgba(0,0,0,.5); /* modal-paneel elevatie (L3) */
  --btn-edge:0 0 #0000;              /* transparante knop-rand-ring; light zet teal-ink */
  --font-body:'Schibsted Grotesk','Schibsted-fallback',system-ui,-apple-system,sans-serif;
  --font-display:'Fraunces','Fraunces-fallback',Georgia,serif;
}
/* Light-tokenset — twee triggers, identieke waarden (MOETEN synchroon blijven):
   (a) systeemvoorkeur licht, tenzij gebruiker dark forceert  -> werkt ZONDER JS;
   (b) expliciete toggle  html[data-theme="light"]. */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --navy:#F6F8FA;--panel:#FFFFFF;--panel-2:#EDF1F6;--border:#D5DCE6;
    --teal-ink:#077254;--teal-dim:rgba(2,195,154,.14);
    --gold-ink:#7A5E10;--gold-dim:rgba(242,201,76,.18);
    --text:#0D1B2A;--dim:#51617A;
    --error:#D14343;--error-ink:#C0271F;
    --frame-texture:rgba(13,27,42,.05);
    --shadow:0 1px 2px rgba(13,27,42,.06),0 2px 8px rgba(13,27,42,.06);
    --shadow-modal:0 20px 60px rgba(13,27,42,.25);
    --btn-edge:0 0 0 1px var(--teal-ink);
  }
}
:root[data-theme="light"]{
  --navy:#F6F8FA;--panel:#FFFFFF;--panel-2:#EDF1F6;--border:#D5DCE6;
  --teal-ink:#077254;--teal-dim:rgba(2,195,154,.14);
  --gold-ink:#7A5E10;--gold-dim:rgba(242,201,76,.18);
  --text:#0D1B2A;--dim:#51617A;
  --error:#D14343;--error-ink:#C0271F;
  --frame-texture:rgba(13,27,42,.05);
  --shadow:0 1px 2px rgba(13,27,42,.06),0 2px 8px rgba(13,27,42,.06);
  --shadow-modal:0 20px 60px rgba(13,27,42,.25);
  --btn-edge:0 0 0 1px var(--teal-ink);
}

/* Regels:
   - teal(-familie) = interactie (links, primaire knop, actieve staat, merk-Q)
   - goud(-familie) = bewijs/nummering
   - nooit teal en goud in één element
   - tekst/rand op licht fond -> --teal-ink/--gold-ink (WCAG); vlak/knop/decoratief -> --teal/--goud
   - Fraunces alleen h1/h2/blockquote, nooit <1.3rem
   - focus zichtbaar: outline 2px teal-ink, offset 2px
   - prefers-reduced-motion gerespecteerd */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--navy);color:var(--text);font-family:var(--font-body);
font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}

/* Display-font: uitsluitend h1/h2/blockquote (elk >=1.3rem, nooit kleiner) */
h1,h2,blockquote{font-family:var(--font-display);font-weight:600;line-height:1.15;margin:0 0 .5em;}
h1{font-size:clamp(2rem,5vw,3.25rem);letter-spacing:-.01em;}
h2{font-size:clamp(1.5rem,3vw,2.25rem);letter-spacing:-.005em;}
blockquote{font-size:1.4rem;font-style:italic;border-left:3px solid var(--gold);padding-left:1rem;margin:1.5rem 0;}
h3,h4,h5,h6{font-family:var(--font-body);font-weight:700;line-height:1.25;margin:0 0 .5em;}

/* teal = interactie (tekst/rand -> ink op licht; vlak/knop -> teal) */
a{color:var(--teal-ink);text-decoration:none;}
a:hover{text-decoration:underline;}
.btn-primary{background:var(--teal);color:var(--on-teal);border:0;border-radius:8px;padding:.7rem 1.3rem;font:inherit;font-weight:600;cursor:pointer;box-shadow:var(--btn-edge);}
.btn-primary:hover{background:#03d9ab;}
.is-active{color:var(--teal-ink);}
.brand-q{color:var(--teal-ink);}
.chip-interactie{display:inline-block;background:var(--teal-dim);color:var(--teal-ink);border:1px solid var(--teal-ink);border-radius:999px;padding:.2rem .7rem;font-size:.8rem;}

/* goud = bewijs/nummering (nooit samen met teal in één element; tekst/rand -> ink op licht) */
.proof,.numbering{color:var(--gold-ink);}
.chip-bewijs{display:inline-block;background:var(--gold-dim);color:var(--gold-ink);border:1px solid var(--gold-ink);border-radius:999px;padding:.2rem .7rem;font-size:.8rem;}

/* panelen */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;}
.panel-2{background:var(--panel-2);border:1px solid var(--border);border-radius:12px;}

/* iconen: currentColor, 24x24, stroke 1.5 */
.icon{width:24px;height:24px;stroke-width:1.5;}

/* focus zichtbaar (teal-ink: >=3:1 focus-indicator op licht fond) */
:focus-visible{outline:2px solid var(--teal-ink);outline-offset:2px;}

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

/* ============================================================
   Shared page patterns — consolidated from page-scoped <style>
   blocks (P5c). Transport only: no selector or value changed.
   ============================================================ */

/* == layout primitives == */
.container{max-width:1140px;margin:0 auto;padding:0 1.25rem;}
.kicker{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.14em;
  font-size:.72rem;font-weight:700;color:var(--dim);margin:0 0 1rem;}
.icon{width:24px;height:24px;flex:0 0 auto;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* == masthead + nav == */
.site-head{border-bottom:1px solid var(--border);}
.site-head .container{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1.25rem;
  min-height:64px;padding-top:.7rem;padding-bottom:.7rem;}
.wordmark{font-family:var(--font-display);font-weight:600;font-size:1.4rem;
  color:var(--text);text-decoration:none;letter-spacing:-.01em;}
.wordmark:hover{text-decoration:none;}
.site-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;}
.site-nav a{color:var(--text);font-weight:600;font-size:.92rem;}
.site-nav a:hover{color:var(--teal-ink);text-decoration:none;}
.site-nav a[aria-current="page"]{color:var(--teal-ink);}
.site-head .btn-primary{margin-left:auto;}

/* == theme toggle (JS-geïnjecteerd; enhancement — zónder JS geen knop, CSS regelt systeemvoorkeur) == */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:.4rem;margin-left:.25rem;flex:0 0 auto;
  background:transparent;color:var(--text);border:1px solid var(--border);
  border-radius:8px;cursor:pointer;line-height:0;}
.theme-toggle:hover{color:var(--teal-ink);border-color:var(--teal-ink);}
.theme-toggle .icon{width:20px;height:20px;stroke-width:1.6;}

/* == page hero == */
.page-hero{padding:clamp(2.5rem,7vw,5rem) 0 clamp(1.5rem,4vw,3rem);}
.page-hero h1{max-width:18ch;margin:0 0 1rem;}
.page-hero .lead{max-width:62ch;font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--text);margin:0;}

/* == section rhythm == */
.section{padding:clamp(2.5rem,6vw,4.5rem) 0;border-top:1px solid var(--border);}
.section .intro{max-width:62ch;color:var(--text);font-size:1.05rem;margin:0 0 .5rem;}

/* == footer == */
.site-foot .container{display:flex;flex-wrap:wrap;gap:.6rem 1.25rem;
  align-items:center;justify-content:space-between;}
.site-foot p{margin:0;font-size:.85rem;color:var(--dim);}
.foot-nav{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.25rem;
  font-size:.85rem;}
.foot-nav .foot-copy{color:var(--dim);}

/* == spotlight / guest quote == */
.spotlight-head .icon{color:var(--teal);width:28px;height:28px;}
.spotlight-head .kicker{margin:0;}
.guest-quote{margin:0;background:var(--teal-dim);border:1px solid var(--teal-ink);
  border-left-width:4px;border-radius:12px;padding:1.6rem 1.8rem;}
.guest-quote blockquote{font-family:var(--font-display);font-style:normal;font-weight:500;
  border:0;padding:0;margin:0;font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1.35;
  color:var(--text);}
.guest-quote figcaption{margin-top:.9rem;font-size:.8rem;color:var(--dim);
  font-style:normal;}

/* == legal/privacy doc + prose + draft banner == */
.doc{padding:clamp(2rem,6vw,4rem) 0;}
.draft-banner{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;
  background:var(--gold-dim);border:1px solid var(--gold-ink);border-radius:10px;
  padding:.9rem 1.1rem;margin:0 0 2rem;}
.draft-banner .tag{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--gold-ink);border:1px solid var(--gold-ink);border-radius:999px;padding:.2rem .6rem;}
.draft-banner p{margin:0;color:var(--gold-ink);font-weight:600;font-size:.9rem;}
.prose{max-width:74ch;}
.prose h1{margin:0 0 .5rem;}
.prose .updated{color:var(--dim);font-size:.9rem;margin:0 0 2rem;}
.prose h2{font-size:1.3rem;margin:2.2rem 0 .6rem;max-width:none;}
.prose p{color:var(--text);margin:0 0 1rem;}
.prose ul{margin:.4rem 0 1.2rem;padding-left:1.2rem;}
.prose li{color:var(--text);margin:.35rem 0;}
.prose a{color:var(--teal-ink);}
.prose .muted{color:var(--dim);}

/* ============================================================
   L3b — taalkiezer (verankerde dropdown, HB-patroon) + mobiele hamburger-nav.
   Desktop-dropdown = <details>/<summary> (CSS-first, no-JS native open/dicht);
   lang-dropdown.js = enhancement voor click-outside + Esc.
   Mobiel = checkbox-hamburger (CSS-first) met uitklappaneel.
   ============================================================ */
.lang-dropdown{position:relative;flex:0 0 auto;margin-left:.25rem;}
.lang-dropdown > summary{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;
  padding:.35rem .6rem;background:transparent;color:var(--text);border:1px solid var(--border);
  border-radius:8px;cursor:pointer;font-weight:600;font-size:.85rem;line-height:1;list-style:none;}
.lang-dropdown > summary::-webkit-details-marker{display:none;}
.lang-dropdown > summary::marker{content:"";}
.lang-dropdown > summary:hover{color:var(--teal-ink);border-color:var(--teal-ink);}
.lang-dropdown .lang-code{text-transform:uppercase;letter-spacing:.02em;}
.lang-dropdown .lang-caret{transition:transform .15s ease;}
.lang-dropdown[open] > summary .lang-caret{transform:rotate(180deg);}
.lang-menu{position:absolute;top:calc(100% + .4rem);right:0;z-index:50;min-width:11rem;
  background:var(--panel);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow-modal);padding:.35rem;display:grid;gap:.15rem;}
.lang-menu a{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  min-height:44px;padding:.45rem .7rem;border-radius:8px;color:var(--text);text-decoration:none;
  font-weight:600;font-size:.9rem;border:1px solid transparent;}
.lang-menu a:hover{background:var(--panel-2);color:var(--teal-ink);text-decoration:none;}
.lang-menu a[aria-current="true"]{color:var(--teal-ink);background:var(--teal-dim);border-color:var(--teal-ink);}
.lang-menu a[aria-current="true"]::after{content:"\2713";color:var(--teal-ink);font-weight:700;}

/* hamburger (mobiel) — checkbox verborgen maar focusbaar; label = zichtbaar ☰ */
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.nav-hamburger{display:none;}
@media (max-width:767.98px){
  .site-head .container{flex-wrap:wrap;}
  .wordmark{order:1;}
  .nav-hamburger{display:inline-flex;align-items:center;justify-content:center;order:2;
    min-width:44px;min-height:44px;margin-left:auto;cursor:pointer;color:var(--text);
    border:1px solid var(--border);border-radius:8px;font-size:1.3rem;line-height:1;}
  /* collapsibles standaard verborgen op mobiel; getoond bij :checked */
  .site-nav,.site-head .btn-primary,.lang-dropdown,.theme-toggle{display:none;order:3;}
  /* nav-links + demo-knop = volle breedte in de paneelstroom */
  #nav-toggle:checked ~ .site-nav,
  #nav-toggle:checked ~ .btn-primary{display:flex;width:100%;margin-left:0;}
  #nav-toggle:checked ~ .site-nav{flex-direction:column;gap:.15rem;padding:.75rem 0 .25rem;}
  #nav-toggle:checked ~ .site-nav a{min-height:44px;display:flex;align-items:center;}
  #nav-toggle:checked ~ .btn-primary{justify-content:center;margin:.35rem 0;}
  /* Controls onder de demo-knop: taalknop + theme-toggle, beide GECENTREERD (L3c).
     lang-dropdown = KOLOM-flex zodat de taallijst ONDER de knop in-flow uitklapt
     (geen absolute overlay -> geen clip mogelijk). align-items:center = expliciete
     flex-stretch-fix: summary en lijst houden hun intrinsieke maat i.p.v. te
     stretchen naar volle breedte/hoogte (het rij-flex-artefact van L3b). */
  #nav-toggle:checked ~ .lang-dropdown{display:flex;flex-direction:column;align-items:center;
    width:100%;margin:.25rem 0 0;}
  #nav-toggle:checked ~ .lang-dropdown > summary{align-self:center;width:auto;flex:0 0 auto;}
  #nav-toggle:checked ~ .theme-toggle{display:inline-flex;width:auto;margin:.4rem auto 0;}
  /* mobiel: taalkiezer = in-flow accordeon met HB-KAARTOPMAAK (L3d). Het kaartje
     (panel-bg, afgeronde hoeken, --shadow-modal, volle rijen, LINKS label + ✓ rechts
     op de actieve rij, teal-wash actief) komt integraal uit de basis .lang-menu /
     .lang-menu a-regels — dezelfde HB-kaartstijl, in L1-tokens. Hier alléén:
     position:static (in-flow -> geen overlay, geen clip) + het kaartblok gecentreerd
     ONDER de knop (de kolom-flex-container align-items:center centreert het). Alle 5
     endoniemen altijd volledig zichtbaar. */
  .lang-dropdown[open] .lang-menu{position:static;margin:.4rem 0 0;}
}