/* Evo, publieke site. Kleuren zijn dezelfde tokens als de app (frontend/src/app/globals.css). */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --nacht: #1d0b47;
  --nacht-2: #2a1163;
  --brand-deep: #4c1d95;
  --primary: #6d28d9;
  --mint: #14b8a6;
  --mint-licht: #5eead4;
  --papier: #ffffff;
  --achtergrond: #f8f7fb;
  --vlak: #f1ecfd;
  --tekst: #17151f;
  --gedempt: #5a566c;
  --lijn: #e6e3ee;
  --link: #6d28d9;
  --rood: #991b1b;
  --rood-zacht: #fee2e2;
  --oranje: #9a3412;
  --oranje-zacht: #ffedd5;
  --groen: #166534;
  --groen-zacht: #dcfce7;
  --invullen-bg: #fde047;
  --invullen-tekst: #422006;
  --kop: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --lees: "Source Serif 4", Georgia, serif;
  --rand: clamp(1rem, 5vw, 4.5rem);
  --radius: 0.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #17141f;
    --achtergrond: #0f0d16;
    --vlak: #1b1530;
    --tekst: #ecebf3;
    --gedempt: #a3a0b6;
    --lijn: #2a2538;
    --link: #c4b5fd;
  }
}

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

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

body {
  margin: 0;
  background: var(--achtergrond);
  color: var(--tekst);
  font-family: var(--lees);
  font-size: 1.125rem;
  line-height: 1.6;
}

h1, h2, h3, .merk, .bovenregel, .winkel, .bak-naam, .voet-merk, nav, th, dt, .prijs {
  font-family: var(--kop);
}

h1, h2, h3 { line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }

a { color: var(--link); text-underline-offset: 0.18em; }

:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; border-radius: 4px; }

[id] { scroll-margin-top: 1.5rem; }

mark.invullen {
  background: var(--invullen-bg);
  color: var(--invullen-tekst);
  padding: 0 0.3em;
  border-radius: 4px;
  font-family: var(--kop);
  font-size: 0.82em;
  font-weight: 700;
}

.naar-inhoud {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--papier);
  color: var(--tekst);
  border-radius: var(--radius);
}
.naar-inhoud:focus { top: 0.75rem; }

/* ---------- balk ---------- */
.balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 1.1rem var(--rand);
  background: var(--nacht);
  color: #fff;
}
.merk {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.balk nav { display: flex; gap: 1.4rem; font-size: 0.95rem; font-weight: 600; }
.balk nav a { color: #ddd6fe; text-decoration: none; }
.balk nav a:hover { color: #fff; text-decoration: underline; }

/* ---------- held ---------- */
.held {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(2.5rem, 6vw, 5.5rem) var(--rand) clamp(3rem, 7vw, 6.5rem);
  background:
    radial-gradient(38rem 26rem at 88% 8%, rgb(20 184 166 / 0.2), transparent 70%),
    linear-gradient(170deg, var(--nacht) 0%, var(--nacht-2) 100%);
  color: #fff;
}
.bovenregel {
  margin: 0 0 1rem;
  color: var(--mint-licht);
  font-size: 0.95rem;
  font-weight: 700;
}
h1 { margin: 0; font-size: clamp(2.45rem, 5.4vw, 4.35rem); font-weight: 800; }
.inleiding { max-width: 34rem; margin: 1.5rem 0 2rem; color: #e4defa; font-size: clamp(1.15rem, 1.8vw, 1.32rem); }

.winkels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.winkel {
  display: flex;
  flex-direction: column;
  min-width: 10.5rem;
  padding: 0.6rem 1rem;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 0.06);
  color: #fff;
  text-decoration: none;
}
.winkel--live { background: var(--mint); border-color: var(--mint); color: #042f2e; }
.winkel--live .winkel-status { color: #042f2e; }
.winkel-status { color: #ddd6fe; font-size: 0.74rem; font-weight: 600; }
.winkel-naam { font-size: 1.05rem; font-weight: 700; }

/* De postkamer: drie stapels, de brieven vallen bij het laden op hun plek. */
.postkamer { display: grid; gap: 1rem; }
.bak {
  padding: 0.75rem 0.75rem 0.85rem;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 1rem;
  background: rgb(255 255 255 / 0.05);
}
.bak:nth-child(2) { margin-left: clamp(0rem, 3vw, 2.5rem); }
.bak:nth-child(3) { margin-left: clamp(0rem, 6vw, 5rem); }
.bak-naam {
  display: inline-block;
  margin: 0 0 0.6rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}
.bak--rood .bak-naam { background: var(--rood-zacht); color: var(--rood); }
.bak--oranje .bak-naam { background: var(--oranje-zacht); color: var(--oranje); }
.bak--groen .bak-naam { background: var(--groen-zacht); color: var(--groen); }
.brief {
  position: relative;
  display: grid;
  gap: 0.1rem;
  padding: 0.75rem 2.2rem 0.8rem 1rem;
  border-radius: 0.6rem;
  background: #fff;
  color: #17151f;
  box-shadow: 0 10px 26px rgb(10 3 32 / 0.34);
  font-size: 1rem;
  line-height: 1.35;
  animation: landen 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.1) both;
}
.brief b { font-family: var(--kop); font-size: 0.98rem; font-weight: 700; }
.brief span { color: #5a566c; }
.brief::after {
  content: "";
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--mint);
}
.bak:nth-child(1) .brief { animation-delay: 0.15s; }
.bak:nth-child(2) .brief { animation-delay: 0.4s; }
.bak:nth-child(3) .brief { animation-delay: 0.65s; }

@keyframes landen {
  from { opacity: 0; transform: translateY(-1.6rem) rotate(-2.5deg); }
  to { opacity: 1; transform: none; }
}

/* ---------- secties ---------- */
.sectie { padding: clamp(3rem, 7vw, 6rem) var(--rand); }
.sectie h2 { margin: 0 0 2rem; font-size: clamp(1.85rem, 3.4vw, 2.75rem); font-weight: 800; }
.sectie h3 { margin: 0 0 0.45rem; font-size: 1.2rem; font-weight: 700; }
.sectie p { margin: 0; }
.sectie-intro { max-width: 36rem; margin: -1.1rem 0 2rem !important; color: var(--gedempt); }
.sectie--vlak { background: var(--vlak); }

/* De mintlijn loopt langs de vier stappen, net als een mail door de sorteerstraat. */
.route {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: stap;
}
.route li { position: relative; padding-top: 3.4rem; counter-increment: stap; }
.route li::before {
  content: counter(stap);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--mint);
  color: #042f2e;
  font-family: var(--kop);
  font-weight: 800;
}
.route li::after {
  content: "";
  position: absolute;
  top: 1.05rem;
  left: 0;
  right: -2rem;
  height: 3px;
  background: var(--mint);
}
.route li:last-child::after { right: 0; }
.route p { color: var(--gedempt); }

.onderdelen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 3.5rem; max-width: 62rem; }
.onderdelen article { padding-left: 1.1rem; border-left: 3px solid var(--primary); }
.onderdelen p { color: var(--gedempt); }

.sectie--donker { background: var(--nacht); color: #fff; }
.sectie--donker a { color: var(--mint-licht); }
.vertrouwen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 5rem);
}
.vertrouwen h2 { margin-bottom: 1rem; }
.vertrouwen p { color: #e4defa; }
.vertrouwen ul { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.vertrouwen li { position: relative; padding-left: 1.5rem; }
.vertrouwen li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--mint);
}

.prijzen { display: grid; grid-template-columns: repeat(2, minmax(0, 24rem)); gap: 1.5rem; }
.prijzen article {
  padding: 1.75rem;
  border: 1px solid var(--lijn);
  border-radius: 1rem;
  background: var(--papier);
}
.prijzen .prijs { font-size: 2.3rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.prijs small { color: var(--gedempt); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.prijzen .prijs-jaar { color: var(--gedempt); }
.prijzen ul { margin: 1rem 0 0; padding-left: 1.15rem; }

.slot {
  padding: clamp(3rem, 6vw, 5rem) var(--rand);
  background: linear-gradient(170deg, var(--nacht-2), var(--nacht));
  color: #fff;
}
.slot h2 { margin: 0 0 0.75rem; font-size: clamp(1.85rem, 3.4vw, 2.75rem); font-weight: 800; }
.slot p { max-width: 38rem; margin: 0 0 1.5rem; color: #e4defa; }
.slot a { color: var(--mint-licht); }

/* ---------- juridische pagina's ---------- */
.titelband {
  padding: clamp(2rem, 5vw, 4rem) var(--rand) clamp(2.25rem, 5vw, 4rem);
  background: linear-gradient(170deg, var(--nacht) 0%, var(--nacht-2) 100%);
  color: #fff;
}
.titelband h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.titelband p { max-width: 44rem; margin: 0.9rem 0 0; color: #e4defa; }
.titelband a { color: var(--mint-licht); }

.document {
  display: grid;
  grid-template-columns: 17rem minmax(0, 46rem);
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(2rem, 5vw, 4rem) var(--rand) clamp(3rem, 6vw, 5rem);
}
.inhoudsopgave { position: sticky; top: 1.25rem; align-self: start; max-height: calc(100vh - 2.5rem); overflow-y: auto; font-size: 0.9rem; }
.inhoudsopgave h2 { margin: 0 0 0.6rem; font-size: 0.95rem; }
.inhoudsopgave ol { margin: 0; padding-left: 1.45rem; }
.inhoudsopgave li { margin-bottom: 0.3rem; }
.inhoudsopgave a { color: var(--gedempt); text-decoration: none; }
.inhoudsopgave a:hover { color: var(--link); text-decoration: underline; }

.tekst { min-width: 0; }
.tekst section + section { margin-top: 2.75rem; }
.tekst h2 { margin: 0 0 0.8rem; font-size: 1.65rem; font-weight: 800; }
.tekst h3 { margin: 1.75rem 0 0.5rem; font-size: 1.15rem; font-weight: 700; }
.tekst p { margin: 0 0 1rem; }
.tekst ul, .tekst ol { margin: 0 0 1rem; padding-left: 1.35rem; }
.tekst li { margin-bottom: 0.4rem; }
.tekst code { font-size: 0.85em; overflow-wrap: anywhere; }

.artikelen { counter-reset: artikel; }
.artikelen > section > h2 { counter-increment: artikel; }
.artikelen > section > h2::before { content: counter(artikel) ". "; color: var(--primary); }

.tabel { margin: 0 0 1.25rem; overflow-x: auto; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--papier); }
table { width: 100%; border-collapse: collapse; font-size: 0.98rem; line-height: 1.45; }
th, td { padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--lijn); text-align: left; vertical-align: top; }
tbody tr:last-child > * { border-bottom: 0; }
thead th { background: var(--vlak); font-size: 0.85rem; font-weight: 700; }
tbody th { font-size: 0.92rem; font-weight: 600; }
.tabel table { min-width: 34rem; }

.kader { margin: 0 0 1rem; padding: 1.1rem 1.25rem; border-left: 4px solid var(--mint); border-radius: 0 var(--radius) var(--radius) 0; background: var(--vlak); }
.kader p:last-child { margin-bottom: 0; }

.stappen { margin: 0 0 1.25rem; }
.stappen dt { margin-top: 0.8rem; font-weight: 700; }
.stappen dd { margin: 0.1rem 0 0; }

/* ---------- voet ---------- */
.voet {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem clamp(2rem, 5vw, 4rem);
  padding: 2.5rem var(--rand);
  background: var(--nacht);
  color: #e4defa;
  font-size: 0.98rem;
}
.voet p { margin: 0 0 0.4rem; }
.voet-merk { color: #fff; font-size: 1.15rem; font-weight: 800; }
.voet a { color: #fff; }
.voet nav { display: grid; align-content: start; gap: 0.3rem; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- smal ---------- */
@media (max-width: 1040px) {
  .route { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route li:nth-child(2)::after { right: 0; }
  .document { grid-template-columns: minmax(0, 1fr); }
  .inhoudsopgave { position: static; max-height: none; padding: 1rem 1.25rem; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--papier); }
}

@media (max-width: 760px) {
  .held, .vertrouwen, .onderdelen, .prijzen, .voet { grid-template-columns: minmax(0, 1fr); }
  .route { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .route li { padding: 0 0 0 3.25rem; }
  .route li::after { top: 0; bottom: -1.5rem; left: 1.03rem; right: auto; width: 3px; height: auto; }
  .route li:nth-child(2)::after { right: auto; }
  .route li:last-child::after { bottom: 0; }
  .winkels { display: grid; grid-template-columns: minmax(0, 1fr); }
  .winkel { min-width: 0; }
  .bak:nth-child(n) { margin-left: 0; }
  .balk nav { gap: 1rem; font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .brief { animation: none; }
}

@media print {
  .balk, .inhoudsopgave, .naar-inhoud { display: none; }
  .document { display: block; }
  .titelband { background: none; color: #000; }
  .titelband p { color: #000; }
}