/* Zelf-gehoste fonts (SIL OFL 1.1; licenties in /fonts/). Alleen latin-subset en de gebruikte gewichten. */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/geist-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/geist-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/geist-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/geist-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/instrument-serif-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/instrument-serif-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }

/* ═══════════════════════════════════════════════════════════════
   ARENA-SKIN (opt-in) — alleen geladen als een pagina <Base skin="arena"> gebruikt.
   Legacy-pagina's laden dit bestand NIET. Alle regels staan onder html[data-skin="arena"],
   zodat niets de bestaande (legacy) tokens of regels raakt. Zie docs/ARENA-SKIN.md.
   PR 1: alleen tokens + basis + reveal-utilities; geen componentontwerpen.
   ═══════════════════════════════════════════════════════════════ */
html[data-skin="arena"] {
  /* kleuren (uit arena-source/src/app/globals.css) */
  --arena-ink: #0d120f;
  --arena-ink-soft: #2a312c;
  --arena-cream: #f6f2ea;
  --arena-paper: #fbf9f4;
  --arena-sand: #e8e0cf;
  --arena-forest: #0c2219;
  --arena-moss: #18402f;
  --arena-brand: #22c55e;
  --arena-brand-dark: #16a34a;
  --arena-lime: #c4f5a8;
  --arena-amber: #f2a74b;
  --arena-sun: #ffd28a;
  /* lettertypen: in PR 1 bewust nog de bestaande fonts (geen visuele wijziging); Geist/Instrument Serif volgen in een latere PR */
  --arena-font-sans: var(--font-body);
  --arena-font-display: var(--font-head);
  /* beweging */
  --arena-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --arena-reveal-dur: .7s;
}

html[data-skin="arena"] body {
  background: var(--arena-paper);
  color: var(--arena-ink);
}
html[data-skin="arena"] ::selection {
  background: var(--arena-lime);
  color: var(--arena-ink);
}

/* Reveal-utility: <el data-reveal> wordt zichtbaar zodra arena-reveal.js .is-in zet.
   Zonder JS of met reduced-motion blijft alles gewoon zichtbaar. */
html[data-skin="arena"].arena-js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--arena-reveal-dur) var(--arena-ease), transform var(--arena-reveal-dur) var(--arena-ease);
}
html[data-skin="arena"].arena-js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="arena"].arena-js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PR 2 — HEADER + FOOTER (dual skin). Alleen CSS; markup, ids, classes en scripts van
   Nav.astro / Footer.astro zijn ongewijzigd. Alles onder html[data-skin="arena"].
   ═══════════════════════════════════════════════════════════════ */

/* ── focus (toegankelijkheid): duidelijke ring op licht vlak ── */
html[data-skin="arena"] .nav-link:focus-visible,
html[data-skin="arena"] .icon-btn:focus-visible,
html[data-skin="arena"] .header-cta:focus-visible,
html[data-skin="arena"] .hamburger:focus-visible,
html[data-skin="arena"] .nav-panel-link:focus-visible,
html[data-skin="arena"] .a11y-btn:focus-visible,
html[data-skin="arena"] .mob-link:focus-visible,
html[data-skin="arena"] .mob-item:focus-visible,
html[data-skin="arena"] .mob-section-title:focus-visible,
html[data-skin="arena"] .mob-plan-btn:focus-visible,
html[data-skin="arena"] .brand:focus-visible,
html[data-skin="arena"] .search-hint:focus-visible,
html[data-skin="arena"] .search-close:focus-visible,
html[data-skin="arena"] .search-result-item:focus-visible {
  outline: 2px solid var(--arena-moss);
  outline-offset: 2px;
}
html[data-skin="arena"] .skip-link { background: var(--arena-ink); color: #fff; }
html[data-skin="arena"] .skip-link:focus { outline: 3px solid var(--arena-brand); }

/* ── HEADER: licht, zwevend, glas ── */
html[data-skin="arena"] .header-inner {
  background: rgba(251, 249, 244, .78);
  backdrop-filter: saturate(1.6) blur(18px);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  border: 1px solid rgba(13, 18, 15, .06);
  border-radius: 18px;
  box-shadow: 0 8px 30px -12px rgba(13, 18, 15, .18);
}
html[data-skin="arena"] .site-header.scrolled .header-inner {
  background: rgba(251, 249, 244, .92);
  box-shadow: 0 12px 34px -12px rgba(13, 18, 15, .24);
}
html[data-skin="arena"] .brand-dot { background: var(--arena-brand); }
html[data-skin="arena"] .brand-name { color: var(--arena-ink); letter-spacing: -.01em; }
html[data-skin="arena"] .brand-tld { color: var(--arena-moss); }

html[data-skin="arena"] .nav-link { color: var(--arena-ink-soft); position: relative; }
html[data-skin="arena"] .nav-link:hover { color: var(--arena-ink); background: rgba(13, 18, 15, .05); }
html[data-skin="arena"] .nav-link::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--arena-ease); pointer-events: none;
}
html[data-skin="arena"] .nav-link:hover::after,
html[data-skin="arena"] .nav-link:focus-visible::after { transform: scaleX(1); }
html[data-skin="arena"] .nav-caret { opacity: .55; }

/* dropdown + tekstgroottepaneel */
html[data-skin="arena"] .nav-panel,
html[data-skin="arena"] .a11y-panel {
  background: var(--arena-paper);
  border: 1px solid rgba(13, 18, 15, .07);
  box-shadow: 0 18px 44px -16px rgba(13, 18, 15, .28);
}
html[data-skin="arena"] .nav-panel-link { color: var(--arena-ink-soft); }
html[data-skin="arena"] .nav-panel-link:hover { background: rgba(13, 18, 15, .05); color: var(--arena-ink); }
html[data-skin="arena"] .a11y-panel-lbl,
html[data-skin="arena"] .mob-a11y-lbl { color: rgba(42, 49, 44, .72); }
html[data-skin="arena"] .a11y-btn { background: var(--arena-cream); border-color: var(--arena-sand); color: var(--arena-ink-soft); }
html[data-skin="arena"] .a11y-btn:hover { border-color: var(--arena-moss); color: var(--arena-moss); }

/* knoppen */
html[data-skin="arena"] .icon-btn,
html[data-skin="arena"] .hamburger {
  border-color: rgba(13, 18, 15, .1); color: var(--arena-ink-soft); background: rgba(13, 18, 15, .03);
}
html[data-skin="arena"] .icon-btn:hover,
html[data-skin="arena"] .hamburger:hover { border-color: rgba(13, 18, 15, .22); color: var(--arena-ink); background: rgba(13, 18, 15, .06); }
html[data-skin="arena"] .header-cta {
  background: var(--arena-brand); color: var(--arena-ink);
  box-shadow: 0 6px 24px -6px rgba(34, 197, 94, .6);
}
html[data-skin="arena"] .header-cta:hover { background: var(--arena-lime); color: var(--arena-ink); }

/* ── MOBIEL MENU (bottom sheet) ── */
html[data-skin="arena"] .mob-backdrop { background: rgba(13, 18, 15, .45); }
html[data-skin="arena"] .mobile-nav {
  background: var(--arena-paper);
  box-shadow: 0 -16px 48px -12px rgba(13, 18, 15, .35);
}
html[data-skin="arena"] .mob-handle { background: rgba(13, 18, 15, .22); }
html[data-skin="arena"] .mob-plan-btn { background: var(--arena-ink); color: #fff; }
html[data-skin="arena"] .mob-plan-btn:hover { background: var(--arena-moss); }
html[data-skin="arena"] .mob-link,
html[data-skin="arena"] .mob-section-title { color: var(--arena-ink); border-bottom-color: var(--arena-sand); }
html[data-skin="arena"] .mob-section { border-bottom-color: var(--arena-sand); }
html[data-skin="arena"] .mob-chevron { color: rgba(42, 49, 44, .65); }
html[data-skin="arena"] .mob-item { color: var(--arena-ink-soft); }
html[data-skin="arena"] .mob-item:hover { color: var(--arena-moss); }

/* ── ZOEKOVERLAY ── */
html[data-skin="arena"] .search-overlay { background: rgba(13, 18, 15, .4); }
html[data-skin="arena"] .search-panel {
  background: var(--arena-paper); border: 1px solid rgba(13, 18, 15, .08);
  box-shadow: 0 28px 72px -20px rgba(13, 18, 15, .4);
}
html[data-skin="arena"] .search-input-wrap { background: #fff; border-color: var(--arena-sand); }
html[data-skin="arena"] .search-input-wrap:focus-within { border-color: var(--arena-moss); }
html[data-skin="arena"] .search-input { color: var(--arena-ink); }
html[data-skin="arena"] .search-input::placeholder { color: rgba(42, 49, 44, .6); }
html[data-skin="arena"] .search-close { color: rgba(42, 49, 44, .7); }
html[data-skin="arena"] .search-close:hover { color: var(--arena-ink); }
html[data-skin="arena"] .search-hint { background: var(--arena-cream); border-color: var(--arena-sand); color: var(--arena-ink-soft); }
html[data-skin="arena"] .search-hint:hover,
html[data-skin="arena"] .search-hint.active { border-color: var(--arena-moss); color: var(--arena-moss); }
html[data-skin="arena"] .search-result-item { background: #fff; border-color: var(--arena-sand); color: var(--arena-ink-soft); }
html[data-skin="arena"] .search-result-item:hover,
html[data-skin="arena"] .search-result-item.active { border-color: var(--arena-moss); color: var(--arena-moss); background: #f3f8ef; }
html[data-skin="arena"] .search-empty { color: rgba(42, 49, 44, .72); }

/* ── FOOTER: Arena-footer (donkergroen) + vertrouwensbalk (behouden) ── */
html[data-skin="arena"] .ft-trust-bar { background: var(--arena-cream); border-color: var(--arena-sand); }
html[data-skin="arena"] .ft-ti strong { color: var(--arena-ink); }
html[data-skin="arena"] .ft-ti span { color: rgba(42, 49, 44, .72); }
html[data-skin="arena"] .ft-ti-sep { background: var(--arena-sand); }

html[data-skin="arena"] body > footer {
  background: var(--arena-forest); border-top: 0; color: rgba(255, 255, 255, .7);
}
html[data-skin="arena"] .footer-brand-logo { color: #fff; }
html[data-skin="arena"] .footer-brand-logo .dot { background: var(--arena-brand); }
html[data-skin="arena"] .footer-brand p { color: rgba(255, 255, 255, .68); }
html[data-skin="arena"] .footer-col .ft-title { color: rgba(255, 255, 255, .62); border-bottom-color: rgba(255, 255, 255, .12); }
html[data-skin="arena"] .footer-col a { color: rgba(255, 255, 255, .75); }
html[data-skin="arena"] .footer-col a:hover { color: var(--arena-lime); }
/* De cookieknop is een <button>, geen <a>; geef hem dezelfde leesbare footerkleur. */
html[data-skin="arena"] body > footer .footer-settings { color: rgba(255, 255, 255, .75); }
html[data-skin="arena"] body > footer .footer-settings:hover,
html[data-skin="arena"] body > footer .footer-settings:focus-visible { color: var(--arena-lime); }
html[data-skin="arena"] .footer-bottom { border-top-color: rgba(255, 255, 255, .12); }
html[data-skin="arena"] .footer-bottom p { color: rgba(255, 255, 255, .62); }
html[data-skin="arena"] .footer-bottom a { color: var(--arena-lime) !important; }
html[data-skin="arena"] body > footer a:focus-visible { outline: 2px solid var(--arena-lime); outline-offset: 2px; border-radius: 4px; }

/* cookiebalk + terug-naar-boven */
html[data-skin="arena"] .cookie-banner { background: var(--arena-paper); border: 1px solid var(--arena-sand); box-shadow: 0 18px 44px -16px rgba(13, 18, 15, .35); }
html[data-skin="arena"] .cookie-text .cookie-title { color: var(--arena-ink); }
html[data-skin="arena"] .cookie-text p { color: rgba(42, 49, 44, .82); }
html[data-skin="arena"] .cookie-text a { color: var(--arena-moss); }
html[data-skin="arena"] .cookie-accept { background: var(--arena-ink); color: #fff; }
html[data-skin="arena"] .cookie-accept:hover { background: var(--arena-moss); }
html[data-skin="arena"] .cookie-minimal { background: #fff; color: var(--arena-ink); border-color: var(--arena-sand); }
html[data-skin="arena"] .cookie-minimal:hover { border-color: var(--arena-moss); color: var(--arena-moss); }
html[data-skin="arena"] .cookie-accept:focus-visible,
html[data-skin="arena"] .cookie-minimal:focus-visible,
html[data-skin="arena"] .scroll-top:focus-visible { outline: 2px solid var(--arena-moss); outline-offset: 2px; }
html[data-skin="arena"] .scroll-top { background: var(--arena-paper); border-color: var(--arena-sand); color: var(--arena-ink-soft); }
html[data-skin="arena"] .scroll-top:hover { border-color: var(--arena-moss); color: var(--arena-moss); }

@media (prefers-reduced-motion: reduce) {
  html[data-skin="arena"] .nav-link::after { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   PR 3 — GEDEELDE FUNCTIONELE BLOKKEN (dual skin). Alleen CSS; markup, classes, ids, data-attributen
   en scripts van de componenten zijn ongewijzigd. Alles onder html[data-skin="arena"].
   ═══════════════════════════════════════════════════════════════ */

/* ── TOKEN-BRIDGE ──
   Legacy-componenten lezen --bg/--surface/--text/--accent …  Onder de skin krijgen die lichte waarden,
   zodat alle gedeelde blokken (calculators, infoblokken, tabellen) meekleuren zonder eigen regels.
   --accent wordt hier een donkerder groen (≥ 4.5:1 als tekst op papier/crème); groene knoppen krijgen
   hieronder expliciet de Arena-merkkleur. Legacy-pagina's laden dit bestand niet. */
html[data-skin="arena"] {
  --bg: var(--arena-paper); --bg2: var(--arena-cream); --bg3: #efe9dc;
  --surface: #ffffff; --surface2: #faf7f0;
  --border: var(--arena-sand); --border2: #d6ccb4;
  --text: var(--arena-ink); --text2: var(--arena-ink-soft); --muted: #5b655e;
  --accent: #166534; --accent-h: #14532d; --on-accent: #ffffff;
  --accent-dim: rgba(34, 197, 94, .10); --accent-glow: rgba(34, 197, 94, .22);
  --shadow: 0 20px 60px rgba(13, 18, 15, .14); --shadow-sm: 0 2px 8px rgba(13, 18, 15, .10); --shadow-md: 0 8px 24px rgba(13, 18, 15, .12);
}

/* ── PRIMAIRE CTA-KNOPPEN: Arena-merkgroen met donkere tekst ── */
html[data-skin="arena"] .solvari-trigger,
html[data-skin="arena"] .icta-btn,
html[data-skin="arena"] .cw-cta,
html[data-skin="arena"] .tool-cta-btns a:not(.secondary) {
  background: var(--arena-brand); color: var(--arena-ink);
  box-shadow: 0 8px 26px -8px rgba(34, 197, 94, .6);
}
html[data-skin="arena"] .solvari-trigger:hover,
html[data-skin="arena"] .icta-btn:hover,
html[data-skin="arena"] .cw-cta:hover,
html[data-skin="arena"] .cw-cta:focus-visible,
html[data-skin="arena"] .tool-cta-btns a:not(.secondary):hover { background: var(--arena-lime); color: var(--arena-ink); }
html[data-skin="arena"] .solvari-trigger:focus-visible,
html[data-skin="arena"] .slimster-trigger:focus-visible,
html[data-skin="arena"] .icta-btn:focus-visible,
html[data-skin="arena"] .cw-cta:focus-visible,
html[data-skin="arena"] .cw-reset:focus-visible,
html[data-skin="arena"] .rm-btn-link:focus-visible,
html[data-skin="arena"] .tool-cta-btns a:focus-visible { outline: 2px solid var(--arena-lime); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(13, 18, 15, .55); }
html[data-skin="arena"] .tool-cta-btns a.secondary { background: #fff; color: var(--arena-moss); border-color: var(--arena-moss); }
html[data-skin="arena"] .tool-cta-btns a.secondary:hover { background: var(--arena-cream); }

/* ── SOLVARI- en SLIMSTER-offerteblokken: Arena-forestkaart (zoals de afsluitende CTA) ── */
html[data-skin="arena"] .solvari-block,
html[data-skin="arena"] .slimster-block {
  background: linear-gradient(135deg, var(--arena-forest), var(--arena-moss));
  border: 1px solid rgba(196, 245, 168, .22);
  border-radius: 22px;
  box-shadow: 0 24px 60px -30px rgba(12, 34, 25, .6);
}
html[data-skin="arena"] .solvari-block::before,
html[data-skin="arena"] .slimster-block::before { background: radial-gradient(circle, rgba(196, 245, 168, .14), transparent 70%); }
html[data-skin="arena"] .solvari-tag { color: var(--arena-lime); background: rgba(196, 245, 168, .12); border-color: rgba(196, 245, 168, .35); }
html[data-skin="arena"] .slimster-tag { color: #bae6fd; background: rgba(125, 211, 252, .12); border-color: rgba(125, 211, 252, .38); }
html[data-skin="arena"] .solvari-head > p,
html[data-skin="arena"] .slimster-head > p { color: rgba(255, 255, 255, .8); }
html[data-skin="arena"] .solvari-note,
html[data-skin="arena"] .slimster-note { color: rgba(255, 255, 255, .68); }
html[data-skin="arena"] .solvari-partnerlink,
html[data-skin="arena"] .slimster-partnerlink { color: rgba(255, 255, 255, .72); }
html[data-skin="arena"] .solvari-partnerlink a,
html[data-skin="arena"] .slimster-partnerlink a { color: var(--arena-lime); }
html[data-skin="arena"] .solvari-partnerlink a:hover,
html[data-skin="arena"] .slimster-partnerlink a:hover { color: #fff; }
html[data-skin="arena"] .slimster-trigger { background: #38bdf8; color: var(--arena-ink); box-shadow: 0 8px 26px -8px rgba(56, 189, 248, .6); }
html[data-skin="arena"] .slimster-trigger:hover { background: #7dd3fc; color: var(--arena-ink); }
html[data-skin="arena"] .solvari-frame-outer,
html[data-skin="arena"] .slimster-frame-outer { background: rgba(255, 255, 255, .1); box-shadow: 0 8px 32px rgba(0, 0, 0, .3); }

/* ── INLINE CTA (Mijn Huis) ── */
html[data-skin="arena"] .inline-cta {
  background: #fff; border: 1px solid var(--arena-sand); border-left: 4px solid var(--arena-brand);
  border-radius: 20px; box-shadow: 0 18px 44px -28px rgba(12, 34, 25, .35);
}
html[data-skin="arena"] .icta-title { color: var(--arena-ink); }
html[data-skin="arena"] .icta-sub { color: var(--arena-ink-soft); }
html[data-skin="arena"] .icta-list li { color: var(--arena-moss); }
html[data-skin="arena"] .icta-trust { color: #5b655e; }

/* ── CALCULATOR-WIDGET + rekenmodel-calculators (rm-*) ── */
html[data-skin="arena"] .calc-widget {
  background: #fff; border: 1px solid var(--arena-sand); border-radius: 22px;
  box-shadow: 0 18px 44px -28px rgba(12, 34, 25, .3);
}
html[data-skin="arena"] .cw-header { border-bottom-color: var(--arena-sand); }
html[data-skin="arena"] .cw-slider,
html[data-skin="arena"] input[type="range"] { accent-color: var(--arena-brand-dark); }
html[data-skin="arena"] .cw-result { background: var(--arena-cream); }
html[data-skin="arena"] .calc-widget .cw-result-item--loss .cw-result-val { color: #92400e; }
html[data-skin="arena"] .calc-widget .cw-result-item--bad .cw-result-val { color: #b91c1c; }
html[data-skin="arena"] .cw-tip { color: #7c2d12; background: #fff7ed; border-color: #fdba74; }
html[data-skin="arena"] .cw-footer { border-top-color: var(--arena-sand); }
html[data-skin="arena"] .rm-card { background: #fff; border-color: var(--arena-sand); border-radius: 20px; }
html[data-skin="arena"] .cw-ingebed .rm-card { background: none; }
html[data-skin="arena"] .rm-input,
html[data-skin="arena"] .rm-assump input { background: var(--arena-paper); border-color: var(--arena-sand); color: var(--arena-ink); }
html[data-skin="arena"] .rm-input:focus { outline: 2px solid var(--arena-moss); border-color: var(--arena-moss); }
html[data-skin="arena"] .rm-input[aria-invalid="true"],
html[data-skin="arena"] .rm-assump input[aria-invalid="true"] { border-color: #b91c1c; background: #fef2f2; }
html[data-skin="arena"] .rm-scen { background: var(--arena-paper); border-color: var(--arena-sand); border-radius: 16px; }
html[data-skin="arena"] .rm-big { color: var(--arena-moss); }
html[data-skin="arena"] .rm-warn { background: #fff7ed; border-color: #fdba74; color: #431407; }
html[data-skin="arena"] .rm-example { color: #92400e; border-color: #d97706; }
html[data-skin="arena"] .rm-note { border-color: #cfc4a8; }
html[data-skin="arena"] .rm-preview-banner { background: #eef2ff; border-color: #a5b4fc; color: #1e1b4b; }
html[data-skin="arena"] .rm-btn-link,
html[data-skin="arena"] .cw-reset { color: var(--arena-moss); }
html[data-skin="arena"] .rm-assump { border-color: var(--arena-sand); }

/* ── GEDEELDE INFOBLOKKEN (global.css): leespauze, infobox, tipbox, quick-facts, tool-cta ── */
html[data-skin="arena"] .leespauze { background: var(--arena-cream); border-color: var(--arena-sand); border-radius: 22px; }
html[data-skin="arena"] .infobox { background: #f1f8ec; border-color: #b9dba4; border-radius: 18px; }
html[data-skin="arena"] .tipbox { background: #fff; border-color: var(--arena-sand); border-left-color: var(--arena-brand); border-radius: 0 18px 18px 0; }
html[data-skin="arena"] .qf-item { background: #fff; border-color: var(--arena-sand); border-radius: 18px; }
html[data-skin="arena"] .qf-val { color: var(--arena-moss); }
html[data-skin="arena"] .tool-cta { background: linear-gradient(135deg, #f1f8ec, var(--arena-cream)); border: 1px solid #b9dba4; border-radius: 24px; }
html[data-skin="arena"] .article-img-break { border-color: var(--arena-sand); border-radius: 22px; }
html[data-skin="arena"] .article-img-break figcaption { background: #fff; }

/* ═══════════════════════════════════════════════════════════════
   PR 4 — pagina-infrastructuur voor skin-pagina's
   ═══════════════════════════════════════════════════════════════ */
/* global.css zet overflow-x:hidden op html/body, wat position:sticky van de header breekt.
   'clip' voorkomt horizontaal scrollen zonder scroll-container te maken. */
html[data-skin="arena"],
html[data-skin="arena"] body { overflow-x: clip; }

/* Header transparant over een hero (<Base skin="arena" headerOverlay>), tot de pagina scrolt (> 40px, bestaande .scrolled-logica in Nav.astro) */
html[data-skin="arena"][data-header="overlay"] .site-header:not(.scrolled) .header-inner {
  background: transparent; border-color: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-skin="arena"][data-header="overlay"] .site-header:not(.scrolled) .brand-name { color: #fff; }
html[data-skin="arena"][data-header="overlay"] .site-header:not(.scrolled) .brand-tld { color: var(--arena-lime); }
html[data-skin="arena"][data-header="overlay"] .site-header:not(.scrolled) .nav-link { color: rgba(255, 255, 255, .9); }
html[data-skin="arena"][data-header="overlay"] .site-header:not(.scrolled) .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .12); }
html[data-skin="arena"][data-header="overlay"] .site-header:not(.scrolled) .icon-btn,
html[data-skin="arena"][data-header="overlay"] .site-header:not(.scrolled) .hamburger { color: #fff; border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .08); }
html[data-skin="arena"][data-header="overlay"] .site-header:not(.scrolled) .icon-btn:hover,
html[data-skin="arena"][data-header="overlay"] .site-header:not(.scrolled) .hamburger:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .55); }
html[data-skin="arena"][data-header="overlay"] .site-header:not(.scrolled) .brand:focus-visible,
html[data-skin="arena"][data-header="overlay"] .site-header:not(.scrolled) .nav-link:focus-visible,
html[data-skin="arena"][data-header="overlay"] .site-header:not(.scrolled) .icon-btn:focus-visible,
html[data-skin="arena"][data-header="overlay"] .site-header:not(.scrolled) .hamburger:focus-visible,
html[data-skin="arena"][data-header="overlay"] .site-header:not(.scrolled) .header-cta:focus-visible { outline-color: var(--arena-lime); }

/* ═══════════════════════════════════════════════════════════════
   PR 4 — fidelity-pass header/footer: maten en samenstelling van arena-source/src/components/site-header.tsx
   en site-footer.tsx. Functionaliteit (dropdowns, zoeken, tekstgrootte, menu) en markup blijven ongewijzigd.
   ═══════════════════════════════════════════════════════════════ */
html[data-skin="arena"] .site-header { padding: 12px 12px 0; }
html[data-skin="arena"] .site-header.scrolled { padding: 12px 12px 0; }
html[data-skin="arena"] .header-inner {
  max-width: 1280px; height: 58px; padding: 0 16px; gap: 16px; border-radius: 16px;
  transition: background .5s var(--arena-ease), box-shadow .5s var(--arena-ease), border-color .5s var(--arena-ease);
}
html[data-skin="arena"] .site-header.scrolled .header-inner { height: 58px; }
/* merk: Arena-logo (32px) + naam 15px semibold */
html[data-skin="arena"] .brand { gap: 10px; }
html[data-skin="arena"] .brand-dot {
  width: 32px; height: 32px; border-radius: 9px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='9' fill='%230d120f'/><path d='M16 6.5 27 15.5h-3.4V26h-5.2v-5.4h-4.8V26H8.4V15.5H5Z' fill='%2322c55e'/><circle cx='23.2' cy='10.4' r='2.6' fill='%23ffd28a'/></svg>") center / 100% 100% no-repeat;
}
html[data-skin="arena"] .brand-name { font-size: 15px; font-weight: 600; letter-spacing: -.025em; }
html[data-skin="arena"] .nav-link { font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 9999px; }
html[data-skin="arena"] .nav-link::after { bottom: 5px; }
html[data-skin="arena"] .icon-btn,
html[data-skin="arena"] .hamburger { width: 40px; height: 40px; }
html[data-skin="arena"] .header-cta { padding: 8px 16px; font-size: 14px; font-weight: 600; border-radius: 9999px; }
html[data-skin="arena"][data-header="overlay"] .site-header:not(.scrolled) .icon-btn,
html[data-skin="arena"][data-header="overlay"] .site-header:not(.scrolled) .hamburger { border-color: transparent; background: rgba(255, 255, 255, .1); }
@media (min-width: 640px) { html[data-skin="arena"] .site-header, html[data-skin="arena"] .site-header.scrolled { padding: 12px 20px 0; } html[data-skin="arena"] .header-inner { padding: 0 20px; } }

/* footer: één donkergroen vlak (vertrouwensbalk erin opgenomen), Arena-kolommen en -typografie */
html[data-skin="arena"] .ft-trust-bar { background: var(--arena-forest); border-top: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); padding: 10px 0; }
html[data-skin="arena"] .ft-ti strong { color: rgba(255, 255, 255, .85); }
html[data-skin="arena"] .ft-ti span { color: rgba(255, 255, 255, .62); }
html[data-skin="arena"] .ft-ti-sep { background: rgba(255, 255, 255, .12); }
html[data-skin="arena"] body > footer { padding: 48px 24px 24px; }
html[data-skin="arena"] body > footer .wrap { max-width: 1280px; padding: 0; }
html[data-skin="arena"] body > footer .footer-grid { gap: 32px 24px; }
@media (min-width: 900px) { html[data-skin="arena"] body > footer .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
html[data-skin="arena"] .footer-brand-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: -.025em; }
html[data-skin="arena"] .footer-brand-logo .dot {
  width: 32px; height: 32px; border-radius: 9px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='9' fill='%230d120f'/><path d='M16 6.5 27 15.5h-3.4V26h-5.2v-5.4h-4.8V26H8.4V15.5H5Z' fill='%2322c55e'/><circle cx='23.2' cy='10.4' r='2.6' fill='%23ffd28a'/></svg>") center / 100% 100% no-repeat;
}
html[data-skin="arena"] .footer-brand p { font-size: .875rem; line-height: 1.625; max-width: 20rem; margin-top: 12px; }
html[data-skin="arena"] .footer-col .ft-title { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; border-bottom: 0; padding-bottom: 0; margin-bottom: 12px; font-family: var(--font-body); }
html[data-skin="arena"] .footer-col a { font-size: .875rem; line-height: 1.5; padding: 0; margin-bottom: 10px; display: block; }
html[data-skin="arena"] .footer-bottom { margin-top: 40px; padding-top: 16px; font-size: 11px; }
html[data-skin="arena"] .footer-bottom p { font-size: 11px; }

/* ── typografie voor alle skin-pagina's: Geist + Instrument Serif (Arena) ── */
html[data-skin="arena"] {
  --font-head: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --arena-serif: 'Instrument Serif', ui-serif, Georgia, serif;
  --arena-paper2: #FAF8F3;
  scroll-behavior: smooth;
}
html[data-skin="arena"] body { font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; }
@media (prefers-reduced-motion: reduce) { html[data-skin="arena"] { scroll-behavior: auto; } }


/* header-overlay: de header is vast (fixed) boven een hero, zoals in Arena (homepage + hubs) */
html[data-skin="arena"][data-header="overlay"] .site-header { position: fixed; left: 0; right: 0; top: 0; }

/* PR 7: tool-CTA in artikelinhoud — template-regels (.apx-content …) zetten er witte tekst op groen; Arena = inkt op groen (contrast ≥ 4,5:1) */
html[data-skin="arena"] .tool-cta .tool-cta-btns a:not(.secondary),
html[data-skin="arena"] .tool-cta .tool-cta-btns a:not(.secondary):hover { color: var(--arena-ink); }

/* PR 7: contrast-herstel voor bestaande inline/scoped kleuren in standaard-artikelpagina's (alleen presentatie) */
html[data-skin="arena"] .table-wrap th[style*="on-accent"] { color: var(--arena-ink) !important; }
html[data-skin="arena"] .bol-logo { color: #0b4fb3; }
html[data-skin="arena"] .prod-btn.prod-btn { color: #fff; }
html[data-skin="arena"] [style*="color:#ef4444"] { color: #b91c1c !important; }
html[data-skin="arena"] .install-btn.install-btn { color: #fff; }
html[data-skin="arena"] .table-wrap td[style*="color:#"] { color: var(--arena-ink) !important; }

/* visueel verborgen tekst voor schermlezers (o.a. lege tabelkoppen) */
html[data-skin="arena"] .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; }

/* Arena mobiele footer: override de desktopspacing (ook op 320/375/390px).
   Houd de desktop-footer onveranderd en toon alle links zonder zijwaarts scrollen. */
@media (max-width: 680px) {
  html[data-skin="arena"] .ft-trust-bar { padding: 8px 0; }
  html[data-skin="arena"] body > footer { padding: 24px 18px 18px; }
  html[data-skin="arena"] body > footer .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
    margin-bottom: 18px;
  }
  html[data-skin="arena"] body > footer .footer-brand { grid-column: 1 / -1; }
  html[data-skin="arena"] body > footer .footer-brand-logo { margin-bottom: 4px; }
  html[data-skin="arena"] body > footer .footer-brand p {
    max-width: 28rem;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.45;
  }
  html[data-skin="arena"] body > footer .footer-col { min-width: 0; }
  html[data-skin="arena"] body > footer .footer-col .ft-title { margin-bottom: 6px; padding-bottom: 0; }
  html[data-skin="arena"] body > footer .footer-col a,
  html[data-skin="arena"] body > footer .footer-col .footer-settings {
    display: block;
    min-width: 0;
    margin: 0;
    padding: 6px 0;
    min-height: 32px;
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: break-word;
  }
  html[data-skin="arena"] body > footer .footer-col:last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
    align-content: start;
  }
  html[data-skin="arena"] body > footer .footer-col:last-child .ft-title { grid-column: 1 / -1; }
  html[data-skin="arena"] body > footer .footer-bottom {
    margin-top: 0;
    padding-top: 12px;
    gap: 4px;
  }
  html[data-skin="arena"] body > footer .footer-bottom p {
    font-size: 10.5px;
    line-height: 1.45;
    overflow-wrap: break-word;
  }
}