/* =========================================================================
   LOKALE FONTS (self-hosted, woff2, gesubset naar Latijn) — geen Google Fonts.
   Alleen de gebruikte gewichten: Chewy 400 · Staatliches 400 · Noto 400/600/700 + italic.
   Paden zijn relatief t.o.v. dit bestand (assets/css/ -> ../fonts/).
   ========================================================================= */
@font-face { font-family: 'Chewy';       font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Chewy/Chewy-Regular.woff2') format('woff2') }
@font-face { font-family: 'Staatliches';  font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Staatliches/Staatliches-Regular.woff2') format('woff2') }
@font-face { font-family: 'Noto Sans';    font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/NotoSans/NotoSans-Regular.woff2') format('woff2') }
@font-face { font-family: 'Noto Sans';    font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/NotoSans/NotoSans-SemiBold.woff2') format('woff2') }
@font-face { font-family: 'Noto Sans';    font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/NotoSans/NotoSans-Bold.woff2') format('woff2') }
@font-face { font-family: 'Noto Sans';    font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/NotoSans/NotoSans-Italic.woff2') format('woff2') }
@font-face { font-family: 'Noto Sans';    font-style: italic; font-weight: 700; font-display: swap; src: url('../fonts/NotoSans/NotoSans-BoldItalic.woff2') format('woff2') }

/* =========================================================================
   DUTCHIES · DESIGN TOKENS + RESET + BASIS
   Eén bron voor het hele thema. Wijzig hier een waarde -> overal door.
   Geladen op ELKE pagina. Component-CSS staat in components.css.
   ========================================================================= */

:root, .editor-styles-wrapper {
  /* ── Kleuren ── */
  --ink:           #1A1A1A;
  --bg:            #fff;
  --grey-light:    #F4F3F0;
  --grey-bg:       #F7F6F3;
  --grey-soft:     #9A968E;
  --grey-section:  #6E6E6E;
  --black-section: #1A1A1A;
  --line:          #E2E0DA;  /* dé lijnkleur: randen, dividers, onderstrepingen */
  --whatsapp:      #25D366;
  --whatsapp-dark: #1EA856;
  --amber:         #E8A23C;
  --ink-soft:      #555;     /* zachte bodytekst (intro's, excerpts, beschrijvingen) */
  --ink-body:      #2A2A2A;  /* donkere leestekst (prose, accordion-body, toc, takeaways, about) */

  /* Accent-pastels (callouts) */
  --c-coral: #FFE3D8;
  --c-teal:  #D9EFEC;
  --c-amber: #FBEAD0;
  --c-lila:  #E9E3F5;
  --c-mint:  #DDF0E2;

  /* Randen bij de pastels (zelfde tint, één stap dieper) */
  --c-coral-border: #f6cbb9;
  --c-amber-border: #f0d8a8;
  --c-mint-border:  #c4e6cd;

  /* ── Typografie ──
     Chewy:      uitsluitend h1 en hero-titels
     Staatliches: h2–h4, labels, knoppen, caps
     Noto Sans:  body, prose, UI */
  --chewy: 'Chewy', 'Trebuchet MS', sans-serif;
  --staat: 'Staatliches', 'Arial Narrow', sans-serif;
  --body:  'Noto Sans', -apple-system, 'Segoe UI', sans-serif;

  /* ── Vorm ──
     --r      standaard card-radius
     --r-sm   kleine elementen (badges, knoppen in cards)
     --r-pill uitsluitend WhatsApp-knoppen en chips */
  --r:      12px;
  --r-sm:   8px;
  --r-pill: 999px;
  --sh:     0 1px 2px rgba(0,0,0,.03), 0 2px 4px rgba(0,0,0,.03);

  /* ── Layout ──
     --px  horizontale padding (vergroot op breder scherm)
     --cw  content-breedte; standaard smal (artikel / land / pagina)
     Brede pagina's (home, landengids) zetten .is-wide op body -> 980px */
  --px: 20px;
  --cw: 720px;
}

@media (min-width: 600px) { :root { --px: 24px } }

body.is-wide { --cw: 980px }

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent }

a, button, summary, input,
.place-chip, .whatsapp-button, .subgroup { outline: none }

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
.whatsapp-button:focus-visible { outline: 2px solid var(--grey-soft); outline-offset: 3px; border-radius: 4px }

html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; interpolate-size: allow-keywords }
/* Bewegingsgevoelige bezoekers: geen smooth-scroll (JS-scrolls schakelen mee, zie toc.js). */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }

body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 15.5px; line-height: 1.6; overflow-x: hidden; font-synthesis-weight: none }

a   { color: inherit; text-decoration: none }
img { max-width: 100%; display: block }

/* ── Layout-helpers ── */
.container        { max-width: var(--cw); margin: 0 auto; padding: 0 var(--px) }
.container-narrow { max-width: 720px;     margin: 0 auto; padding: 0 var(--px) }

/* ── Basis koppen ──
   Chewy uitsluitend in h1; Staatliches voor h2–h4 */
h1 { font-family: var(--chewy); font-weight: 400; line-height: 1.1 }
h2, h3, h4      { font-family: var(--staat);  font-weight: 400; letter-spacing: .02em }