/*
  Stijl voor de tekstpagina's van Samen: privacy en hulp.
  Dezelfde wereld als de landingspagina, maar ingericht om te lezen in plaats
  van om te overtuigen. Twee inkten op papier, harde randen, geen verlopen.
*/

:root {
  --papier: #FBF1E9;
  --papier-2: #F3E3DA;
  --papier-3: #FCE3D6;
  --wijn: #8A3A4E;
  --wijn-diep: #5A2233;
  --terra: #D8663F;
  /* Donkerder terracotta voor kleine tekst, zodat die leesbaar blijft op papier. */
  --terra-tekst: #A8471F;
  --inkt: #3B2B2B;
  --zacht: #7A5C58;
  --vaag: #A5837A;
  --rand: #E7D3C9;

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: "Nunito", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --mono: "Courier Prime", "Courier New", ui-monospace, monospace;

  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
}

/* Papierkorrel, net als op de landingspagina. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

.vel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding-inline: 20px;
}

a { color: var(--wijn); text-underline-offset: 3px; }
:focus-visible { outline: 2.5px solid var(--terra); outline-offset: 3px; }

/* ── Kop ─────────────────────────────────────────────────── */
.kop-balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 22px 14px;
  border-bottom: 2px solid var(--wijn);
}

.merk { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.merk-naam {
  font-family: var(--display);
  font-variation-settings: "SOFT" 45, "WONK" 1;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--wijn);
}
.kop-balk .terug {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--terra);
  text-decoration: none;
}
.kop-balk .terug:hover { text-decoration: underline; }

/* ── Tekst ───────────────────────────────────────────────── */
main { padding-block: clamp(32px, 6vw, 56px) clamp(40px, 7vw, 72px); }

h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }

h1 {
  font-family: var(--display);
  font-variation-settings: "SOFT" 45, "WONK" 1;
  font-weight: 600;
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  line-height: 1.02;
  color: var(--wijn);
}

.datum {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vaag);
  margin-top: 14px;
}

.inleiding {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--inkt);
  margin-top: 22px;
  max-width: 60ch;
}

h2 {
  font-family: var(--display);
  font-variation-settings: "SOFT" 45, "WONK" 1;
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.1;
  color: var(--wijn-diep);
  margin-top: clamp(34px, 5vw, 52px);
  padding-top: 16px;
  border-top: 1px solid var(--rand);
}

h3 {
  font-family: var(--body);
  font-weight: 800;
  font-size: 1rem;
  color: var(--wijn-diep);
  margin-top: 26px;
}

p { margin: 14px 0 0; max-width: 66ch; }

ul { margin: 14px 0 0; padding-left: 0; list-style: none; max-width: 66ch; }
li { padding-left: 22px; position: relative; margin-top: 8px; }
li::before {
  content: "";
  position: absolute;
  left: 2px; top: .72em;
  width: 7px; height: 7px;
  background: var(--terra);
}

strong { font-weight: 800; color: var(--wijn-diep); }

/* Tabel: wie krijgt wat te zien */
.tabel-omhulsel { overflow-x: auto; margin-top: 18px; border: 2px solid var(--wijn); }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .95rem; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--rand); vertical-align: top; }
thead th {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--papier);
  background: var(--wijn);
  border-bottom: 0;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: var(--papier-2); }

/* Aandachtsblok */
.blok {
  border-left: 4px solid var(--terra);
  background: var(--papier-3);
  padding: 16px 20px;
  margin-top: 22px;
}
.blok p { margin: 0; }
.blok p + p { margin-top: 10px; }

/* Contactkaart */
.contact {
  border: 2px solid var(--wijn);
  padding: 22px 24px;
  margin-top: 24px;
  background: var(--papier);
}
.contact dt {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--terra);
  margin-top: 14px;
}
.contact dt:first-child { margin-top: 0; }
.contact dd { margin: 4px 0 0; color: var(--wijn-diep); font-weight: 700; }

/* ── Voet ────────────────────────────────────────────────── */
.voet {
  border-top: 2px solid var(--wijn);
  padding-block: 22px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--vaag);
}
.voet a { color: var(--vaag); }

/* ── Artikelen ───────────────────────────────────────────── */
.kruimel {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--zacht);
  margin: 0 0 18px;
}
.kruimel a { color: var(--terra-tekst); text-decoration: none; }
.kruimel a:hover { text-decoration: underline; }

.inhoudsopgave {
  border: 2px solid var(--wijn);
  background: var(--papier-2);
  padding: 18px 22px 20px;
  margin-top: 28px;
  max-width: 66ch;
}
.inhoudsopgave .label {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--terra-tekst);
  margin: 0;
}
.inhoudsopgave ul { margin-top: 8px; }
.inhoudsopgave li { margin-top: 4px; }

/* Genummerde vragenlijsten: het nummer in de typemachineletter. */
ol.vragen { margin: 14px 0 0; padding-left: 3.1em; max-width: 66ch; }
ol.vragen li { padding-left: 6px; margin-top: 9px; }
ol.vragen li::before { content: none; }
ol.vragen li::marker {
  font-family: var(--mono);
  font-size: .86em;
  color: var(--terra-tekst);
}

.tip {
  font-size: .95rem;
  color: var(--zacht);
}

/* Zachte verwijzing naar de app, onderaan een artikel. */
.cta {
  border: 2px solid var(--wijn);
  background: var(--papier-3);
  padding: 22px 24px 24px;
  margin-top: clamp(38px, 6vw, 56px);
}
.cta-titel {
  font-family: var(--display);
  font-variation-settings: "SOFT" 45, "WONK" 1;
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.12;
  color: var(--wijn);
  margin: 0;
}
.cta p { margin-top: 10px; }
.cta-acties { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

.knop {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body);
  font-weight: 800;
  font-size: .86rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 20px;
  border: 2px solid var(--wijn);
  background: var(--wijn);
  color: var(--papier);
  cursor: pointer;
  transition: transform .12s steps(2);
}
.knop:hover { transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--terra); }
.knop:active { transform: none; box-shadow: none; }
.knop-leeg { background: transparent; color: var(--wijn); }
.knop-leeg:hover { background: var(--papier); }

/* Lees ook: kale lijst met stippellijntjes. */
.lees-ook { margin-top: 18px; }
.lees-ook li { padding-left: 0; margin-top: 0; border-top: 1px solid var(--rand); }
.lees-ook li:last-child { border-bottom: 1px solid var(--rand); }
.lees-ook li::before { content: none; }
.lees-ook a {
  display: block;
  padding: 12px 0;
  font-weight: 700;
  text-decoration: none;
}
.lees-ook a:hover { text-decoration: underline; }
.lees-ook span { display: block; font-weight: 400; color: var(--zacht); font-size: .93rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}