/* Opmaak van de 404-pagina (src/app/not-found.js).

   ── Waarom dit een los bestand in public/ is ────────────────────────────────

   `not-found.js` valt buiten beide worteldeklagen. Een `import "./x.css"`
   werkt daar niet – dat is de reden dat de 404 maanden zonder opmaak
   binnenkwam (commit 1fc100f). De uitweg was toen een `<style>`-blok ín de
   pagina, en dat werkte.

   Op 13 augustus 2026 kon dat niet blijven. De CSP staat sindsdien geen
   `style-src 'unsafe-inline'` meer toe, en een `<style>`-blok in de HTML valt
   daar precies onder. De 404 zou dus opnieuw kaal binnenkomen, alleen langs
   een andere weg.

   Een bestand in `public/` wordt uitgeserveerd als gewone stylesheet op
   `/404.css`, en `style-src 'self'` laat dat door. Het omzeilt bovendien het
   deklaagprobleem helemaal: een `<link>` heeft geen import nodig.

   Let op bij wijzigen: dit bestand doet niet mee aan de CSS-modules en aan
   niets uit globals.css. Alles wat de 404 nodig heeft, staat hier – vandaar de
   herhaalde kleurwaarden onderaan.

   ── De donkere stand ────────────────────────────────────────────────────────

   Die hangt aan `prefers-color-scheme` en niet aan het `data-theme`-attribuut
   dat de rest van de site gebruikt: dat attribuut wordt door een script in de
   deklaag gezet, en juist die deklaag is hier niet. Het voorkeursignaal van
   het besturingssysteem is het enige dat hier zonder javascript aankomt – en
   dat dekt de gevallen die ertoe doen. */

:root {
  --primary: #ae1e1e;
  --ink: #17130f;
  --ink-2: #4b433d;
  --line: #e5ddd3;
  --surface: #ffffff;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #d9b75f;
    --ink: #f4efe9;
    --ink-2: #c8bfb6;
    --line: #2d2722;
    --surface: #14100d;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--surface);
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1 { font-weight: 700; line-height: 1.15; }

/* De uitwegen moeten er als uitweg uitzien. Op de gerenderde pagina stonden
   ze als kale zwarte tekst tussen de rest — precies op het moment dat iemand
   een klikbare weg terug zoekt. */
a { color: var(--primary); text-decoration: none; font-weight: 600; }
a:hover, a:focus-visible { text-decoration: underline; }

/* ── Wat hieronder staat, stond tot 13 augustus 2026 als `style={{…}}` in
      not-found.js. Zelfde reden als hierboven: style-attributen zijn opmaak
      in de HTML en vallen onder dezelfde CSP-richtlijn. ─────────────────── */

.blad {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(3rem, 10vw, 7rem) 1.5rem;
}

.code {
  font: 600 0.85rem/1 var(--font-mono, monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary, #ae1e1e);
  margin: 0 0 0.75rem;
}

.kop {
  margin: 0 0 0.75rem;
  font-size: clamp(1.75rem, 5vw, 2.75rem);
}

.inleiding {
  margin: 0 0 2.5rem;
  font-size: 1.05rem;
  color: var(--ink-2);
}

.taalblok {
  border-top: 1px solid var(--line, rgba(0, 0, 0, 0.12));
  padding: 1.25rem 0;
}

.vertaling {
  margin: 0 0 0.6rem;
  color: var(--ink-2);
}

.uitwegen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0;
}

.voet {
  border-top: 1px solid var(--line, rgba(0, 0, 0, 0.12));
  padding-top: 1.5rem;
  margin-top: 0.5rem;
  color: var(--ink-2);
}

.voet a { font-weight: 600; }

/* De knop op de foutpagina (src/app/global-error.js). Hij staat tussen de
   uitwegen en moet er als link uitzien, niet als formulierknop: het is een
   tweede poging, geen verzending. */
.opnieuw {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
}

.opnieuw:hover,
.opnieuw:focus-visible {
  text-decoration: underline;
}