/* ==========================================================================
   De Nieuwe Gids — één stylesheet
   Versie 1.0 · 11 augustus 2026

   Zelfstandig: dit bestand heeft geen ander stylesheet nodig. De waarden komen
   uit het Broadsheet-ontwerpsysteem waarin de pagina's zijn ontworpen, met de
   afwijkingen die we onderweg hebben vastgesteld (zie SPEC.md, "Beslissingen").

   Laadorde: dng.css volstaat. Voor beheerpagina's zet je class="admin" op de
   buitenste container; de dichtere maten staan onderaan dit bestand.
   ========================================================================== */

:root {
  /* --- Kleur: rol -------------------------------------------------------- */
  --color-page: #e8e6e3;        /* achtergrond van het platform */
  --color-paper: #ffffff;       /* vlak waarop content staat */
  --color-text: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  /* Accent: stap 700 van de blauwe ramp. Niet 500 — zie SPEC.md. */
  --color-accent: #006786;      /* 6.0:1 op page, 5.7:1 op paper */
  --color-accent-ink: #004961;  /* accenttekst op getinte vlakken, 8.7:1 */
  --color-accent-hover: #004961;
  --color-accent-active: #0a303e;

  /* --- Kleur: ramps ----------------------------------------------------- */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;   /* ondergeschikte tekst, 5.9:1 op paper */
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #e9f8ff;
  --color-accent-200: #cbeeff;
  --color-accent-300: #99e0ff;
  --color-accent-500: #38a6cf;
  --color-accent-700: #006786;
  --color-accent-800: #004961;
  --color-accent-900: #0a303e;

  /* --- Type ------------------------------------------------------------- */
  --font-serif: 'Newsreader', Georgia, serif;              /* koppen, citaten, getallen */
  --font-ui: 'Schibsted Grotesk', system-ui, sans-serif;   /* interface, data, knoppen */

  --fs-display: 96px;   /* alleen 404 */
  --fs-1: 44px;
  --fs-2: 34px;
  --fs-3: 28px;
  --fs-4: 23px;
  --fs-5: 20px;
  --fs-6: 17px;
  --fs-lead: 16.5px;
  --fs-body: 16px;
  --fs-sm: 15px;
  --fs-xs: 14px;
  --fs-2xs: 13px;
  --fs-3xs: 12.5px;

  /* --- Ruimte (publieke site) ------------------------------------------ */
  --s-1: 8px;  --s-2: 12px; --s-3: 16px; --s-4: 20px; --s-5: 26px;
  --s-6: 34px; --s-7: 44px; --s-8: 56px; --s-9: 72px; --s-10: 96px;

  /* --- Maten ----------------------------------------------------------- */
  --ctrl: 48px;         /* knop of veld: publiek raakvlak */
  --ctrl-nav: 40px;     /* de knop in de navigatiebalk */
  --ctrl-icon: 44px;
  --measure: 68ch;      /* leesmaat lopende tekst */
  --page-max: 1180px;
  --shadow-sm: 0 1px 2px color-mix(in srgb, #201e1d 8%, transparent),
               0 2px 8px color-mix(in srgb, #201e1d 5%, transparent);
}

/* ==== Basis =============================================================== */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--color-page); color: var(--color-text);
  font-family: var(--font-ui); font-size: var(--fs-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .serif { font-family: var(--font-serif); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
p { margin: 0 0 var(--s-3); text-wrap: pretty; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-active); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: var(--color-accent-200); }
[hidden] { display: none !important; }

/* ==== Paginaraamwerk ===================================================== */
.paper { background: var(--color-paper); box-shadow: var(--shadow-sm); }
.shell { max-width: var(--page-max); margin: 0 auto; padding: var(--s-6) var(--s-7) var(--s-8); }
.measure { max-width: var(--measure); }

.nav { display: flex; justify-content: space-between; align-items: center;
       padding-bottom: var(--s-3); border-bottom: 1px solid var(--color-divider); }
.nav-brand { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-5); letter-spacing: -.01em; }
.nav-links { display: flex; gap: var(--s-5); align-items: center; font-size: var(--fs-xs); }
.nav-links a { color: var(--color-neutral-700); display: inline-flex; align-items: center; min-height: 32px; }
.nav-links a[aria-current] { color: var(--color-text); font-weight: 600; }
.nav .btn { min-height: var(--ctrl-nav); font-size: var(--fs-xs); }

.footer { margin-top: var(--s-9); padding-top: var(--s-3);
          border-top: 1px solid var(--color-divider);
          font-size: var(--fs-2xs); color: var(--color-neutral-700);
          display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-5); }
.footer nav { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.footer a { color: var(--color-neutral-700); }

/* Sectiekop: dun label boven een streep. Vervangt kaders en scheidingslijnen. */
.kicker { border-top: 1px solid var(--color-text); padding-top: 10px;
          font-size: var(--fs-2xs); font-weight: 600; color: var(--color-neutral-700); }

/* ==== Type-onderdelen ==================================================== */
.display { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-display);
           line-height: .9; letter-spacing: -.04em; color: var(--color-neutral-300); }
.t1 { font-size: var(--fs-1); }
.t2 { font-size: var(--fs-2); }
.t3 { font-size: var(--fs-3); }
.t4 { font-size: var(--fs-4); }
.lead { font-size: var(--fs-lead); line-height: 1.65; }
.meta { font-size: var(--fs-2xs); color: var(--color-neutral-700); }
.num { font-variant-numeric: tabular-nums; }

/* ==== Knoppen ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
  font-family: var(--font-ui); font-size: var(--fs-sm); min-height: var(--ctrl);
  padding: 0 18px; border: 1px solid transparent; border-radius: 2px;
  background: none; cursor: pointer; text-decoration: none;
}
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; font-weight: 600; }
.btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: #fff; text-decoration: none; }
.btn-primary:active { background: var(--color-accent-active); border-color: var(--color-accent-active); }
.btn-secondary { border-color: var(--color-text); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-neutral-200); text-decoration: none; }
.btn-ghost { color: var(--color-accent); padding: 0 10px; }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); text-decoration: none; }
.btn-icon { min-width: var(--ctrl-icon); min-height: var(--ctrl-icon); padding: 0; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: default; }

/* Knop met regel eronder — het CTA-patroon van de hele site. */
.cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.cta-note { font-size: var(--fs-2xs); color: var(--color-neutral-700); }

/* ==== Labels ============================================================= */
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2xs);
       padding: 3px 9px; border: 1px solid transparent; border-radius: 2px; }
.tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-900); }
.tag-outline { border-color: var(--color-accent); color: var(--color-accent); }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-ink); }

/* ==== Formulier ========================================================== */
.field { display: flex; flex-direction: column; }
.field > label { font-size: var(--fs-xs); font-weight: 600; margin-bottom: 6px; }
.input {
  font-family: var(--font-ui); font-size: var(--fs-body); min-height: var(--ctrl);
  padding: 0 12px; background: var(--color-paper);
  border: 1px solid var(--color-neutral-400); border-radius: 2px; color: var(--color-text);
}
textarea.input { padding: 10px 12px; line-height: 1.5; resize: vertical; }
.input::placeholder { color: var(--color-neutral-600); }
.hint { font-size: var(--fs-2xs); color: var(--color-neutral-700); margin-top: 6px; }

/* Fout: dikkere rand + tekst met icoon. Nooit alleen kleur. */
.input[aria-invalid="true"] { border-color: var(--color-text); border-width: 2px; }
.err { display: flex; gap: var(--s-1); align-items: flex-start;
       font-size: var(--fs-xs); font-weight: 600; margin-top: 7px; }
.err-mark, .ok-mark { flex: none; width: 18px; height: 18px; border-radius: 50%;
       font-size: 12px; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.err-mark { background: var(--color-text); color: var(--color-paper); }
.ok-mark { background: var(--color-accent); color: #fff; }

/* Samenvatting boven het formulier, met sprongen naar de velden. */
.alert { border-left: 3px solid var(--color-text); background: var(--color-neutral-100);
         padding: var(--s-2) var(--s-4); }
.alert-title { font-size: var(--fs-sm); font-weight: 600; margin-bottom: 6px; }

/* ==== Lijsten en opsommingen ============================================= */
/* Vierkant blokje in accent, geen bolletje en geen nummer. */
.bullets { display: flex; flex-direction: column; gap: var(--s-4); }
.bullet { display: grid; grid-template-columns: 10px 1fr; gap: 14px; align-items: start; }
.bullet::before { content: ""; width: 10px; height: 10px; background: var(--color-accent); margin-top: 7px; }
.bullet-title { font-size: var(--fs-body); font-weight: 600; margin-bottom: 4px; }
.bullet-body { font-size: 15.5px; line-height: 1.6; color: var(--color-neutral-700); }

/* Zoekresultaat: rij met regel eronder, geen kaart. */
.row { padding: var(--s-4) 0; border-bottom: 1px solid var(--color-divider); }
.row-title { font-family: var(--font-serif); font-size: var(--fs-4); font-weight: 600; line-height: 1.2; }
.row-meta { font-size: var(--fs-2xs); color: var(--color-neutral-700); margin-top: 4px; }

/* ==== Lege staat en meldingen ============================================ */
.empty { padding: 48px 0 var(--s-1); max-width: 56ch; }
.noticebar { border-top: 2px solid var(--color-text); background: var(--color-neutral-100);
             padding: var(--s-4) var(--s-7); display: grid; grid-template-columns: 1fr auto;
             gap: var(--s-7); align-items: center; }

/* ==== Inhoudsopgave (voorwaarden) ======================================== */
.toc { position: sticky; top: var(--s-5); }
.toc a { display: block; padding: 5px 0; font-size: var(--fs-xs); line-height: 1.35; color: var(--color-neutral-700); }
.toc a:hover { color: var(--color-accent); }
.doc { max-width: var(--measure); display: flex; flex-direction: column; gap: var(--s-6); }
.doc h2 { font-size: var(--fs-4); margin: 0 0 14px; scroll-margin-top: var(--s-5); }
.doc ol.sub { margin: 0 0 var(--s-3); padding-left: 26px; display: flex; flex-direction: column; gap: var(--s-2); }
.doc ol.sub > li, .doc p, .doc dd { font-size: var(--fs-body); line-height: 1.68; color: var(--color-neutral-900); }
.doc dt { font-size: var(--fs-body); font-weight: 600; margin-top: var(--s-2); }
.doc dd { margin: 2px 0 0; }

/* ==== Mobiel ============================================================= */
@media (max-width: 560px) {
  :root {
    --fs-1: 31px; --fs-2: 26px; --fs-3: 22px; --fs-4: 21px; --fs-5: 18px;
    --fs-display: 68px;
  }
  .shell { padding: var(--s-4) var(--s-4) var(--s-6); }
  .nav { padding-bottom: 14px; }
  .nav-links { display: none; }             /* menu achter de icoonknop */
  .footer { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .footer nav a { min-height: var(--ctrl-icon); align-items: center; display: inline-flex; }
  .noticebar { grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-3) var(--s-4) var(--s-4); }
  .noticebar .btn { width: 100%; }
}

/* ==== Afdrukken (voorwaarden, profielen) ================================= */
@media print {
  body { background: #fff; }
  .nav-links, .btn, .toc, .noticebar { display: none !important; }
  .paper { box-shadow: none; }
  .doc h2 { break-after: avoid; }
  .doc ol.sub > li { break-inside: avoid; }
}

/* ==========================================================================
   Beheer (Admin) — dezelfde tokens, dichter gezet.
   Zet class="admin" op de buitenste container van een beheerpagina.
   ========================================================================== */
.admin {
  --a-row: 38px;      /* rijhoogte in lijsten: muis, geen vinger */
  --a-ctrl: 34px;     /* knop of veld in de werkbalk */
  --a-pad: 12px;
  --a-text: 14px;
  --a-small: 12.5px;
  font-family: var(--font-ui); font-size: var(--a-text);
}
.admin .btn { min-height: var(--a-ctrl); font-size: 13.5px; padding: 0 12px; }
.admin .input { min-height: var(--a-ctrl); font-size: 13.5px; }
.admin--mobiel .btn, .admin--mobiel .input { min-height: var(--ctrl-icon); font-size: var(--fs-body); }

.admin .sidebar { background: var(--color-neutral-100); border-right: 1px solid var(--color-divider); }
.admin .sidebar a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-1);
  padding: 0 var(--s-3); min-height: var(--a-ctrl); font-size: 13.5px;
  color: var(--color-neutral-700); border-left: 3px solid transparent; }
.admin .sidebar a[aria-current] { color: var(--color-text); font-weight: 600;
  background: var(--color-paper); border-left-color: var(--color-accent); }

/* Rijlijnen zijn hier functioneel: ze houden duizend rijen leesbaar waar
   witruimte dat niet meer doet. Op de publieke site blijven ze weg. */
.admin table.a { width: 100%; border-collapse: collapse; font-size: var(--a-text); }
.admin table.a th { text-align: left; font-weight: 600; font-size: var(--a-small);
  color: var(--color-neutral-700); padding: 0 var(--a-pad) 7px;
  border-bottom: 1px solid var(--color-text); white-space: nowrap; }
.admin table.a td { padding: 0 var(--a-pad); height: var(--a-row);
  border-bottom: 1px solid var(--color-divider); vertical-align: middle; }
.admin table.a tbody tr:hover td { background: var(--color-neutral-100); }
.admin table.a td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Statuslabel: één vorm; verschil in gewicht en rand, niet in kleur alleen. */
.admin .st { display: inline-flex; align-items: center; gap: 6px; font-size: var(--a-small);
  font-weight: 600; padding: 2px 8px; border: 1px solid var(--color-neutral-300); white-space: nowrap; }
.admin .st--wacht { border-color: var(--color-text); }
.admin .st--live { border-color: var(--color-accent); color: var(--color-accent-ink); }
.admin .st--pauze { color: var(--color-neutral-700); }

/* Kerncijfer op het overzicht. */
.admin .stat { padding: 14px 18px 16px; background: var(--color-paper); }
.admin .stat-label { font-size: var(--a-small); font-weight: 600; color: var(--color-neutral-700); }
.admin .stat-value { font-family: var(--font-serif); font-weight: 600; font-size: 44px;
  line-height: 1; letter-spacing: -.03em; margin: var(--s-1) 0 0; font-variant-numeric: tabular-nums; }
.admin .stat-note { font-size: var(--a-small); color: var(--color-neutral-700); margin-top: 6px; }

/* ==== Segmented control en kaart ========================================= */
.seg { display: inline-flex; border: 1px solid var(--color-neutral-400); border-radius: 2px; overflow: hidden; }
.seg-opt { position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--ctrl-icon); padding: 0 14px; font-size: var(--fs-xs); cursor: pointer;
  color: var(--color-neutral-700); border-right: 1px solid var(--color-neutral-400); }
.seg-opt:last-child { border-right: 0; }
.seg-opt:has(:checked) { background: var(--color-accent); color: #fff; font-weight: 600; }
.seg-opt:hover:not(:has(:checked)) { background: var(--color-neutral-200); }

/* Kaart: alleen voor losse, afgebakende items (een listing) — nooit als lay-out. */
.card { background: var(--color-paper); border: 1px solid var(--color-divider);
  border-radius: 2px; padding: var(--s-4); }
.card-kicker { font-size: var(--fs-2xs); font-weight: 600; color: var(--color-accent); }
.card-title { font-family: var(--font-serif); font-size: var(--fs-5); font-weight: 600; margin: 4px 0 6px; }
.card-body { font-size: var(--fs-sm); line-height: 1.6; color: var(--color-neutral-900); }
.card-meta { font-size: var(--fs-2xs); color: var(--color-neutral-700); margin-top: var(--s-2); }