/* Schoolwegwijzer brand layer v4.
   Loaded on every public page AFTER the page's own inline <style> (inserted by tools/brand/apply_brand.py),
   so it can re-map the shared legacy tokens (--ink, --green, --paper ...) to the v4 palette and restyle the
   shared header/logo/buttons/footer without touching page structure or JavaScript hooks.
   Rules:
   - No page-specific layout here (the homepage has its own styles in index.html).
   - Semantic practice colours are left alone on purpose: --coral/--coral2 (wrong answer on the toets pages),
     --red/--red2/--good/--blue (app.html). --green/--green2 stay clearly green because they mark correct answers.
   - Small terracotta text uses --sw-terracotta-text (#A34C32), never #DF896C (contrast). */

/* Nunito, self-hosted (SIL OFL 1.1, see fonts/OFL.txt): no request to Google, matching privacy.html. */
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/brand/fonts/nunito-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/brand/fonts/nunito-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/brand/fonts/nunito-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:'Nunito';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/brand/fonts/nunito-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}

:root{
  /* v4 authoritative tokens (from the brand kit styles/tokens.css) */
  --sw-green:#27584D; --sw-green-deep:#16483D; --sw-ink:#153D35;
  --sw-terracotta:#DF896C; --sw-terracotta-text:#A34C32;
  --sw-ochre:#E6B552; --sw-cream:#F4E8D6; --sw-paper:#FFFCF7;
  --sw-sand:#D4CBAE; --sw-sage:#A7BDAC;
  --sw-radius-sm:12px; --sw-radius-md:20px; --sw-radius-lg:28px;
  --sw-shadow:0 14px 38px rgba(24,62,50,.09);
  --sw-max-width:1200px;
  --sw-font:'Nunito','Trebuchet MS',system-ui,sans-serif;
  --sw-focus:#BE6B44;

  /* legacy tokens used by all existing pages, re-mapped to v4 */
  --ink:var(--sw-ink);
  --muted:#4C645C;
  --paper:var(--sw-paper);
  --soft:#F7F2E9;
  --line:rgba(21,61,53,.13);
  --green:var(--sw-green);
  --green2:#DDEBE1;
  --amber:var(--sw-ochre);
  --shadow:0 14px 38px rgba(24,62,50,.09),0 0 0 1px rgba(21,61,53,.07);
}

body{font-family:var(--sw-font);background:var(--sw-paper);color:var(--sw-ink)}
/* Inter was tuned with very tight tracking; Nunito needs less */
h1{letter-spacing:-.03em}
h2{letter-spacing:-.025em}
h3{letter-spacing:-.015em}
/* Arabic script: negative tracking breaks the joined letters and tight line-height makes lines collide */
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,:lang(ar) h1,:lang(ar) h2,:lang(ar) h3{letter-spacing:0;line-height:1.35}

a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--sw-focus);outline-offset:3px;border-radius:6px}

/* ---------- header ---------- */
.nav{background:rgba(255,252,247,.94)}
.nav .brand{gap:0;flex:0 1 auto;min-width:0;line-height:0}
.brand-logo{display:block;height:38px;width:auto;max-width:min(232px,56vw);overflow:visible}
.nav .links a{color:var(--sw-ink)}
.nav .links a:hover{color:var(--sw-terracotta-text)}
.login-link{color:var(--sw-ink)}
.lang summary{color:var(--sw-ink)}
.lang-menu{right:auto;inset-inline-end:0}
.kicker{color:var(--sw-terracotta-text)}

/* one header width on every page (content containers differ per page: 760-1200px) */
.nav>.container{width:min(var(--sw-max-width),calc(100% - 36px))}
/* login + language menu: on the homepage, the translated pages and (since v4) every Dutch subpage */
.nav-right{display:flex;align-items:center;gap:10px}
.login-link{font-size:14px;font-weight:800;padding:0 4px;white-space:nowrap}
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 13px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:13px;font-weight:900}
.lang summary::-webkit-details-marker{display:none}
.lang summary:after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.lang[open] summary:after{transform:rotate(225deg) translateY(-2px)}
.lang-menu{position:absolute;top:calc(100% + 6px);background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:6px;min-width:170px;display:grid;z-index:30}
.lang-menu a{padding:10px 12px;border-radius:10px;font-size:14px;font-weight:700}
.lang-menu a:hover{background:var(--soft)}
.lang-menu a[aria-current]{color:var(--sw-terracotta-text)}
.nav .links{font-weight:800}
@media(max-width:1100px){
  .nav .links{gap:16px;font-size:14px}
  .nav-right .btn-primary{display:none}
}
@media(max-width:900px){.nav .links{display:none}}

/* buttons used on the public pages (app.html uses .btn.primary, which follows --green) */
.btn-primary{background:var(--sw-green-deep);color:#fff;box-shadow:0 10px 24px rgba(22,72,61,.20)}
.btn-primary:hover{background:var(--sw-green)}

/* ---------- mobile menu (added by sw-nav.js; pages without that script keep their old behaviour) ---------- */
.sw-menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;border:0;border-radius:12px;background:transparent;color:var(--sw-ink);cursor:pointer;padding:0}
.sw-menu-btn:hover{background:var(--soft)}
.sw-burger,.sw-burger:before,.sw-burger:after{display:block;width:22px;height:2.5px;border-radius:2px;background:currentColor;transition:transform .18s ease,opacity .18s ease}
.sw-burger{position:relative}
.sw-burger:before,.sw-burger:after{content:"";position:absolute;left:0}
.sw-burger:before{top:-7px}.sw-burger:after{top:7px}
.nav.sw-open .sw-burger{background:transparent}
.nav.sw-open .sw-burger:before{transform:translateY(7px) rotate(45deg)}
.nav.sw-open .sw-burger:after{transform:translateY(-7px) rotate(-45deg)}
.links .sw-menu-only{display:none}
@media(max-width:900px){
  .nav .sw-menu-btn{display:inline-flex}
  .nav.sw-open .links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px 18px 16px;background:var(--sw-paper);border-bottom:1px solid var(--line);box-shadow:0 16px 24px rgba(21,61,53,.08)}
  .nav.sw-open .links a{display:flex;align-items:center;min-height:48px;padding:0 6px;font-size:16px;border-bottom:1px solid var(--line)}
  .nav.sw-open .links a:last-child{border-bottom:0}
  .nav.sw-open .links .sw-menu-only{display:flex;gap:8px}
}
@media(max-width:560px){
  .brand-logo{height:30px}
  .nav-right .login-link{display:none}
  .nav-right{gap:6px}
}

/* ---------- hard-coded legacy colours that the token re-map cannot reach ---------- */
/* WhatsApp tip bar: .share (generated pages) and .share-whatsapp (inline style on the NL practice pages) */
.share,.share-whatsapp{background:#F6F1E7!important;border-color:rgba(21,61,53,.12)!important}
.share a,.share-whatsapp a{color:var(--sw-green-deep)!important;text-decoration:underline;text-underline-offset:3px}
/* PDF sign-up box injected by /assets/gratis-pdf.js (its <style> is added at runtime, after this file: hence the extra specificity) */
html body .gpdf{background:#F6F1E7;border-color:rgba(21,61,53,.12)}
html body .gpdf .gpdf-k{color:var(--sw-terracotta-text)}
html body .gpdf p,html body .gpdf label.gpdf-ok{color:#3E564E}
html body .gpdf button,html body .gpdf .gpdf-klaar a{background:var(--sw-green-deep)}
html body .gpdf button:hover{background:var(--sw-green)}
html body .gpdf label.gpdf-ok a{color:var(--sw-green-deep)}
html body .gpdf label.gpdf-ok input{accent-color:var(--sw-green-deep)}
/* small labels that used the old bright green as text colour */
.tldr h3,.tldr ul,.highlight p,.badge,.chip,.truth strong,.phase-label{color:var(--sw-green-deep)}

/* ---------- footer ---------- */
.footer{background:var(--sw-green-deep);color:#DCE8E2;margin-top:24px;padding:30px 0 34px}
.footer-inner{border-top:0;padding-top:0;justify-content:flex-start;align-items:center;gap:10px 28px}
.footer a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer a:hover{color:var(--sw-cream)}
/* logo on its own row: full-width box, artwork drawn at the start edge */
.footer .footer-logo{display:block;flex:0 0 100%;width:100%;height:30px;object-fit:contain;object-position:0 50%;margin-bottom:4px}
[dir="rtl"] .footer .footer-logo{object-position:100% 50%}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}