/*
 * Opmaak van het beheer: dezelfde huisstijl als de publieke site (tokens en maten uit site/src/styles).
 * Bewust ouderwets geschreven, voor een oude iPad: geen @layer, geen nesting, geen :has(), geen logische
 * eigenschappen met var(), geen flex-gap, media queries met max-width, :focus in plaats van :focus-visible.
 */

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('literata-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('atkinson-hyperlegible-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('atkinson-hyperlegible-latin-700-normal.woff2') format('woff2');
}

:root {
  --kleur-white: #ffffff;
  --kleur-stone: #f4eee6;
  --kleur-peach: #f3dcc8;
  --kleur-green-deep: #1f3d30;
  --kleur-green: #2f5d47;
  --kleur-terracotta: #9a4a28;
  --kleur-ink: #2a211c;
  --kleur-text: #463a33;
  --kleur-muted: #6b5b50;
  --kleur-line: #d9cbb8;
  --kleur-line-soft: #e8dfd3;
  --kleur-border-input: #8a7663;
  --kleur-error: #a3261b;
  --kleur-error-bg: #fbeae7;
  --kleur-green-licht: #d5e2d8;
  --kleur-info-bg: #eaf1ec;

  --font-kop: 'Literata', Georgia, 'Times New Roman', serif;
  --font-tekst: 'Atkinson Hyperlegible', Verdana, 'Trebuchet MS', sans-serif;

  --maat-h1: 44px;
  --maat-h2: 28px;
  --maat-h3: 24px;
  --maat-lead: 22px;
  --maat-body: 20px;
  --maat-meta: 18px;

  --ruimte-zijkant: 48px;
  --ruimte-sectie: 48px;

  --radius-kaart: 20px;
  --radius-knop: 12px;
  --radius-veld: 10px;

  --knop-hoogte: 58px;
}

@media (max-width: 819px) {
  :root {
    --maat-h1: 34px;
    --maat-h2: 24px;
    --maat-h3: 21px;
    --maat-lead: 20px;
    --maat-body: 19px;
    --maat-meta: 18px;

    --ruimte-zijkant: 20px;
    --ruimte-sectie: 32px;

    --radius-kaart: 14px;

    --knop-hoogte: 56px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--kleur-white);
  color: var(--kleur-text);
  font-family: var(--font-tekst);
  font-size: var(--maat-body);
  line-height: 1.6;
  /* Een heel lang woord of e-mailadres breekt af in plaats van de pagina te verbreden. */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--kleur-ink);
  font-family: var(--font-kop);
  font-weight: 600;
}

h1 {
  font-size: var(--maat-h1);
  line-height: 1.12;
  margin-bottom: 24px;
}

h2 {
  font-size: var(--maat-h2);
  line-height: 1.2;
}

p,
ul,
ol,
dl,
dd {
  margin: 0;
}

main p + p,
main p + form,
main form + p {
  margin-top: 20px;
}

a {
  color: var(--kleur-ink);
}

a:hover {
  color: #5c4a3e;
}

/* Zichtbare focus overal: 3 px ink met ruimte eromheen. */
a:focus,
button:focus,
input:focus {
  outline: 3px solid var(--kleur-ink);
  outline-offset: 3px;
}

/* Skiplink: buiten beeld tot hij focus krijgt. */
.overslaan {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 10;
  padding: 12px 20px;
  background: var(--kleur-white);
  font-weight: 700;
}

.overslaan:focus {
  left: 12px;
}

.verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Indeling: één kolom. Formulierpagina's 720 px, de lijst 1200 px (inclusief de zijkanten). */
.kolom {
  width: 100%;
  max-width: calc(720px + 2 * var(--ruimte-zijkant));
  margin: 0 auto;
  padding-left: var(--ruimte-zijkant);
  padding-right: var(--ruimte-zijkant);
}

.breed .kolom {
  max-width: calc(1200px + 2 * var(--ruimte-zijkant));
}

main {
  display: block;
  padding-top: var(--ruimte-sectie);
  padding-bottom: calc(var(--ruimte-sectie) + 24px);
}

/* Kop met woordmerk */
.kop {
  background: var(--kleur-stone);
  border-bottom: 1px solid var(--kleur-line);
}

.kop-binnen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}

.merk {
  margin: 6px 16px 6px 0;
  line-height: 1.2;
}

.merk-naam {
  color: var(--kleur-ink);
  font-family: var(--font-kop);
  font-size: 26px;
  font-weight: 600;
}

.merk-sub {
  display: block;
  color: var(--kleur-muted);
  font-size: 18px;
}

.kop form {
  margin: 0;
}

/* Knoppen en knopachtige links */
.knop {
  display: inline-block;
  min-height: var(--knop-hoogte);
  padding: 13px 28px;
  border: 2px solid transparent;
  border-radius: var(--radius-knop);
  background: transparent;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.knop.primair {
  background: var(--kleur-green);
  border-color: var(--kleur-green);
  color: var(--kleur-white);
}

.knop.primair:hover {
  background: var(--kleur-green-deep);
  border-color: var(--kleur-green-deep);
  color: var(--kleur-white);
}

.knop.secundair {
  background: var(--kleur-white);
  border-color: var(--kleur-border-input);
  color: var(--kleur-ink);
}

.knop.secundair:hover {
  border-color: var(--kleur-ink);
  color: var(--kleur-ink);
}

/* Duidelijk gevaarlijk, maar niet schreeuwerig: rode tekst en rand op wit. */
.knop.gevaar {
  background: var(--kleur-white);
  border-color: var(--kleur-error);
  color: var(--kleur-error);
}

.knop.gevaar:hover {
  background: var(--kleur-error-bg);
  color: var(--kleur-error);
}

/* In de kop: kleiner dan de andere knoppen, maar nog altijd een ruim tapdoel. */
.knop.klein {
  min-height: 48px;
  padding: 8px 20px;
  font-size: 19px;
}

@media (max-width: 819px) {
  main .knop {
    display: block;
    width: 100%;
  }

  .knop {
    font-size: 19px;
  }
}

/* Formulieren */
.veld {
  margin-top: 24px;
}

.veld:first-child {
  margin-top: 0;
}

label {
  display: block;
  margin-bottom: 4px;
  color: var(--kleur-ink);
  font-size: 20px;
  font-weight: 700;
}

.hint {
  margin-bottom: 8px;
  color: var(--kleur-muted);
  font-size: var(--maat-meta);
  line-height: 1.45;
}

input[type='text'],
input[type='email'],
input[type='password'] {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border: 2px solid var(--kleur-border-input);
  border-radius: var(--radius-veld);
  background: var(--kleur-white);
  color: var(--kleur-ink);
  font-family: inherit;
  font-size: 20px;
}

input[aria-invalid='true'] {
  border: 3px solid var(--kleur-error);
}

.veld-fout {
  margin-bottom: 8px;
  color: var(--kleur-error);
  font-size: var(--maat-meta);
  font-weight: 700;
  line-height: 1.45;
}

.uitleg {
  margin-top: 24px;
  color: var(--kleur-muted);
  font-size: var(--maat-meta);
}

form .uitleg + .knop,
form .veld + .knop {
  margin-top: 24px;
}

form > .knop {
  margin-top: 28px;
}

form .uitleg + .knop {
  margin-top: 16px;
}

/* Tekens in meldingen en foutregels: een rondje met een letter, zodat een melding nooit alleen kleur is. */
.teken {
  display: inline-block;
  width: 26px;
  height: 26px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--accent, var(--kleur-error));
  color: var(--kleur-white);
  font-family: var(--font-tekst);
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  vertical-align: 1px;
}

/* Meldingen: info (groen), let op (terracotta), fout (rood) */
.melding {
  margin-top: 24px;
  padding: 18px 20px;
  border-left: 5px solid var(--accent);
  border-radius: var(--radius-knop);
  background: var(--vlak);
  color: var(--kleur-ink);
}

.melding:first-child {
  margin-top: 0;
}

.melding .teken {
  float: left;
  margin-top: 3px;
}

.melding-tekst {
  margin-left: 40px;
}

.melding-tekst p + p {
  margin-top: 10px;
}

.melding.info {
  --accent: var(--kleur-green);
  --vlak: var(--kleur-info-bg);
}

.melding.letop {
  --accent: var(--kleur-terracotta);
  --vlak: var(--kleur-stone);
}

.melding.fout {
  --accent: var(--kleur-error);
  --vlak: var(--kleur-error-bg);
}

/* Foutsamenvatting bovenaan een formulier */
.samenvatting {
  margin-bottom: 28px;
  padding: 18px 20px 18px 24px;
  border: 3px solid var(--kleur-error);
  border-radius: var(--radius-knop);
  background: var(--kleur-error-bg);
}

.samenvatting h2 {
  margin-bottom: 8px;
  color: var(--kleur-error);
  font-size: 22px;
}

.samenvatting ul {
  padding: 0;
  list-style: none;
}

.samenvatting a {
  display: inline-block;
  max-width: 100%;
  padding: 6px 0;
  color: var(--kleur-error);
  font-weight: 700;
}

.samenvatting a:hover {
  color: var(--kleur-ink);
}

/* Welkom: de stappen */
.stappen {
  margin-top: 16px;
  padding-left: 28px;
}

.stappen li {
  padding-left: 6px;
}

.stappen li + li {
  margin-top: 10px;
}

.stappen li::marker {
  color: var(--kleur-terracotta);
  font-weight: 700;
}

.stappen + form {
  margin-top: 36px;
}

.lead {
  font-size: var(--maat-lead);
  line-height: 1.45;
  color: var(--kleur-ink);
}

/* Startpagina: twee grote keuzes onder elkaar */
.acties {
  margin-top: 32px;
  padding: 0;
  list-style: none;
}

.acties li + li {
  margin-top: 16px;
}

.acties a {
  display: block;
  min-height: var(--knop-hoogte);
  padding: 15px 28px;
  border: 2px solid var(--kleur-border-input);
  border-radius: var(--radius-knop);
  background: var(--kleur-white);
  color: var(--kleur-ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.acties li:first-child a {
  border-color: var(--kleur-green);
  background: var(--kleur-green);
  color: var(--kleur-white);
}

.acties li:first-child a:hover {
  border-color: var(--kleur-green-deep);
  background: var(--kleur-green-deep);
}

.acties li + li a:hover {
  border-color: var(--kleur-ink);
}

/* Gegevens van één melding (wisbevestiging) */
.gegevens {
  margin-top: 28px;
  padding: 20px 24px;
  border-radius: var(--radius-kaart);
  background: var(--kleur-stone);
}

.gegevens dt {
  color: var(--kleur-muted);
  font-size: var(--maat-meta);
  font-weight: 700;
}

.gegevens dd + dt {
  margin-top: 14px;
}

/* Wisbevestiging: de veilige keuze staat bovenaan */
.keuze {
  margin-top: 32px;
}

.keuze form {
  margin-top: 16px;
}

.keuze p {
  margin: 0;
}

/* Lijst met meldingen */
.export {
  margin-bottom: 32px;
}

.export .knop {
  margin-top: 20px;
}

.kaarten {
  margin: 0;
}

.melding-kaart {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--kleur-line);
  border-radius: var(--radius-kaart);
  background: var(--kleur-stone);
}

.melding-kaart:first-child {
  margin-top: 0;
}

/* Binnenkort gewist: dikke terracotta rand, en in de kaart staat "Let op:" in tekst. */
.melding-kaart.binnenkort {
  border: 3px solid var(--kleur-terracotta);
  padding: 22px;
  background: var(--kleur-white);
}

.melding-kaart h2 {
  margin-bottom: 12px;
  font-size: var(--maat-h2);
}

label.kies {
  display: block;
  position: relative;
  min-height: 52px;
  margin: 0 0 12px;
  padding: 10px 14px 10px 54px;
  border: 2px solid var(--kleur-line);
  border-radius: var(--radius-veld);
  background: var(--kleur-white);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.35;
  cursor: pointer;
}

label.kies input {
  position: absolute;
  left: 14px;
  top: 10px;
  width: 28px;
  height: 28px;
  margin: 0;
  accent-color: var(--kleur-green);
}

label.kies input:focus {
  outline-offset: 2px;
}

.melding-kaart dl {
  margin-top: 8px;
}

.melding-kaart dt {
  margin-top: 14px;
  color: var(--kleur-muted);
  font-size: var(--maat-meta);
  font-weight: 700;
  line-height: 1.4;
}

.melding-kaart dt:first-child {
  margin-top: 0;
}

.melding-kaart dd {
  min-width: 0;
  color: var(--kleur-ink);
}

dd.bericht {
  white-space: pre-wrap;
}

.leeg {
  color: var(--kleur-muted);
}

/* Telefoon en e-mailadres zijn echte links met een groot tapdoel. */
.melding-kaart dd a {
  display: inline-block;
  max-width: 100%;
  min-height: 44px;
  padding: 8px 0;
  font-weight: 700;
}

.kaart-voet {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--kleur-line);
}

.wist {
  color: var(--kleur-ink);
}

.let-op {
  color: var(--kleur-terracotta);
}

.knop-link {
  display: inline-block;
  min-height: 48px;
  padding: 10px 0;
  font-size: 20px;
  font-weight: 700;
}

.terug {
  margin-top: 40px;
}

/* Bladeren door de lijst: grote knoppen met de paginastand erboven. */
.aantal {
  margin: 0 0 16px;
  font-weight: 700;
}

.bladeren {
  margin: 24px 0;
}

.bladeren-stand {
  margin: 0 0 12px;
  color: var(--kleur-muted);
  font-weight: 700;
}

.bladeren-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.export-onder {
  margin: 32px 0 0;
}

/* Bredere schermen: op de lijst staan label en waarde naast elkaar. */
@media (min-width: 820px) {
  .melding-kaart dl {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: baseline;
  }

  .melding-kaart dt.verborgen + dd {
    grid-column: 1 / -1;
  }

  .melding-kaart dt,
  .melding-kaart dd {
    margin-top: 14px;
  }

  .melding-kaart dt:first-child,
  .melding-kaart dt:first-child + dd {
    margin-top: 0;
  }

  .melding-kaart dt {
    padding-top: 0;
  }

  .export .knop,
  .export-onder .knop,
  .keuze .knop,
  form > .knop {
    min-width: 280px;
  }

}

/* Heel smalle schermen (320 px) */
@media (max-width: 360px) {
  .melding-kaart {
    padding: 18px;
  }

  .melding-kaart.binnenkort {
    padding: 16px;
  }

  .merk-naam {
    font-size: 24px;
  }
}