/* Vastpilot — gedeelde design-tokens + component-classes.
   Single source of truth voor kleur, type-scale, radii en knoppen.
   Gelinkt vanuit alle pagina's; vervangt per-pagina inline-drift. */

:root {
  /* Het accent is 365x tekstkleur tegen 57x vlak, dus de tekstrol is leidend.
     #c2551f haalde als tekst maar 3.68 op band; #a5441a haalt 4.94 en was al als
     --vp-accent-dark in dit palet goedgekeurd. Op de knopvlakken wordt witte
     tekst er beter van, niet slechter (4.55 -> 6.10). De hover schuift mee met
     dezelfde lightness-stap die er tussen de oude twee zat. */
  --vp-accent: #a5441a;
  --vp-accent-dark: #883815;
  /* Op een navy vlak werkt het accent de verkeerde kant op: #a5441a haalt daar
     1.89 en zakt dus onder de 3:1 die voor iconen geldt. Op donker moet het
     accent juist lichter. #ff6b35 haalt 4.06 op --vp-ink en bestaat al als
     --brand-cta in het dashboard-palet. */
  --vp-accent-on-dark: #ff6b35;
  --vp-ink: #1e3a5f;
  --vp-paper: #f3f0e9;
  --vp-line: #e1dbce;
  --vp-line-2: #ece7db;
  --vp-line-3: #d9d2c2;
  --vp-line-hover: #cfc7b5;
  --vp-band: #ebe7dc;
  --vp-card: #fbf9f4;
  --vp-ink-strong: #22303b;
  /* Tekstschaal, getoetst op de zwaarste achtergrond (--vp-band #ebe7dc), zodat
     elk token op paper, card en band tegelijk voldoet. Body staat bewust op 7:1
     en niet op de minimale 4.5, zodat er ruimte onder blijft voor --vp-muted en
     een latere tint-wijziging niet meteen een overtreding is. */
  --vp-body: #4e4b45;   /* 7.03 op band, 7.64 paper, 8.26 card */
  --vp-muted: #6a665e;  /* 4.62 op band, 5.02 paper, 5.43 card */
  --vp-muted-2: #a29d91;

  --vp-radius-xs: 6px;
  --vp-radius-btn: 8px;
  --vp-radius-sm: 10px;
  --vp-radius-md: 12px;
  --vp-radius-card: 16px;
  --vp-radius-card-lg: 20px;
  --vp-radius-pill: 100px;
  --vp-shadow-btn: 0 1px 2px rgba(34, 48, 59, .18);

  /* type-scale (headings) */
  --vp-text-h1: clamp(38px, 4.8vw, 68px);  /* V5: paginakop, Figtree 800 */
  --vp-text-title: clamp(31px, 4.4vw, 45px);   /* blog-artikeltitel */
  --vp-text-h2: clamp(34px, 4vw, 52px);       /* V5: sectiekop */
  --vp-text-h2-sm: clamp(30px, 3.6vw, 42px);
  --vp-text-h3: clamp(28px, 3.4vw, 36px);
  --vp-text-h4: clamp(24px, 3vw, 30px);
  --vp-text-h5: clamp(21px, 2.6vw, 25px);
  /* body */
  --vp-text-body: 16.5px;
  --vp-text-caption: 13.5px;
}

/* iOS Safari laat horizontaal rubber-banden op elementen die (mid-animatie)
   buiten het viewport steken, ook zonder echte overflow op desktop-engines.
   clip kapt dat af zonder een scrollcontainer te maken (position:sticky
   blijft werken; overflow-x:hidden zou dat breken). */
html, body { overflow-x: clip; }

/* ---- Typografie V5 (aug 2026, DESIGN-V5.md) ----
   Figtree draagt koppen, body en UI (koppen 800). Newsreader blijft alleen
   op quote-momenten en in de footer. Accenten in koppen blijven upright
   (<em data-accent> kleurt, kantelt niet), dus de browser-cursivering van
   em/i/cite blijft hier expliciet uit. */
em, i, cite, dfn, var, address { font-style: normal; }

/* ---- Papierkorrel ----
   Het krijt stond als een wiskundig vlak kleurveld op de pagina, en dat is
   wat digitaal en gegenereerd aanvoelt. Deze laag legt er een fijne korrel
   overheen zodat het als papier leest.

   Als vaste laag over de viewport, niet als achtergrond op body: de secties
   zetten zelf hun eigen background, dus een body-achtergrond zou overal
   overdekt worden. pointer-events:none houdt de laag buiten elke interactie.

   De ruis is een inline SVG (feTurbulence), dus geen extra request en geen
   bitmap. img-src staat data: toe, zie security-headers.conf. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .02;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23k)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* Bij print heeft de korrel geen functie en kost hij alleen inkt. */
@media print { body::after { display: none; } }

/* ---- Knoppen ---- */
/* base: alleen gedeelde typografie + interactie; GEEN display/box,
   zodat losse .vp-btn one-offs hun eigen layout houden. */
.vp-btn {
  font-family:'Figtree', 'Hanken Grotesk', -apple-system, sans-serif;
  font-weight:600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.8, 0, .5, 1), background .25s ease, box-shadow .25s ease, color .25s ease, border-color .25s ease;
}
.vp-btn:hover { transform: translateY(-2px); }

.vp-btn--primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  line-height: 1; /* pl-canon: knophoogte 46px */
  background: var(--vp-accent);
  color: #fff;
  padding: 15px 28px; /* pl-canon */
  border: none;
  border-radius: var(--vp-radius-btn);
  font-size: 16px;
  box-shadow: var(--vp-shadow-btn);
}
.vp-btn--primary:hover { background: var(--vp-accent-dark); }
/* Dubbele class als specificiteits-anker: pagina-regels als
   `.theme-pilo a { color: var(--pl-ink) }` (0,1,1) wonnen anders van
   `.vp-btn--primary` (0,1,0) en maakten de knoptekst inkt-donker. */
.vp-btn.vp-btn--primary { color: #fff; }

/* kleine variant (nav-CTA) */
.vp-btn--sm {
  padding: 10px 18px;
  border-radius: var(--vp-radius-sm);
  font-size: 14.5px;
  line-height: 1;
}

/* secundaire outline-knop */
.vp-btn--secondary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  line-height: 1;
  background: var(--vp-card);
  color: var(--vp-ink);
  border: 1px solid var(--vp-line);
  padding: 15px 24px;
  border-radius: var(--vp-radius-btn);
  font-size: 16px;
  font-weight:400;
}
.vp-btn--secondary:hover { border-color: var(--vp-line-hover); }

/* ---- Type-scale (hero-koppen) ---- */
.vp-h1 {
  font-family: 'Figtree', 'Hanken Grotesk', -apple-system, sans-serif;
  font-weight: 800;
  font-size: var(--vp-text-h1);
  line-height: 1.02;
  letter-spacing: -.04em;
  color: var(--vp-ink);
  margin: 0;
}
.vp-h2 {
  font-family: 'Figtree', 'Hanken Grotesk', -apple-system, sans-serif;
  font-weight: 800;
  font-size: var(--vp-text-h2);
  line-height: 1.05;
  letter-spacing: -.035em;
  color: var(--vp-ink);
  margin: 0;
}

/* ---- Toetsenbord-focus (pl-canon, site-breed) ---- */
:focus-visible {
  outline: 2px solid var(--vp-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---- Footer (V5, aug 2026): een bron voor alle pagina's ----
   Tot fase 3b stond dit blok byte-identiek in elke paginahead en in
   schil.css; nu staat hij alleen hier. Structuur, links en kleuren zijn
   V4-erfgoed; de typografie volgt DESIGN-V5.md (Figtree, kopjes 700). */
.plx-footer{border-top:1px solid var(--vp-line);max-width:1140px;margin:72px auto 0;padding:56px clamp(24px,5vw,48px) 32px;font-family:'Figtree', 'Hanken Grotesk', -apple-system, sans-serif}
.plx-footer__grid{display:grid;grid-template-columns:1.45fr 1fr 1fr 1fr 1fr;gap:36px clamp(20px,3vw,44px)}
.plx-footer__brandmark{display:inline-flex;align-items:center;gap:11px;font-weight:600;font-size:19px;letter-spacing:-.02em;color:var(--vp-ink)}
.plx-footer__tagline{font-weight:500;font-size:15.5px;line-height:1.55;color:var(--vp-body);margin:14px 0 0;max-width:26ch}
.plx-footer__kop{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--vp-muted);margin-bottom:14px}
.plx-footer nav ul{list-style:none;margin:0;padding:0}
.plx-footer nav li{margin:0 0 9px}
.plx-footer__link{color:var(--vp-ink-strong);text-decoration:none;font-size:14.5px;font-weight:500;line-height:1.5;transition:color .2s}
.plx-footer__link:hover{color:var(--vp-accent)}
.plx-footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--vp-band);margin-top:44px;padding-top:20px;font-size:13px;color:var(--vp-muted)}
@media (max-width:940px){.plx-footer__grid{grid-template-columns:1fr 1fr}.plx-footer__brand{grid-column:1/-1}}
@media (max-width:520px){.plx-footer__grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.plx-footer__link{transition:none}}