/* ---------------------------------------------------------------------------
   Wmovergoeding.nl: leesbaarheid gaat hier vóór vormgeving.

   De lezer is doorgaans 70+ of een mantelzorger. Daarom: basisgrootte 19px,
   ruime regelafstand, inkt op wit met contrast ruim boven WCAG AA, en geen
   bijschriften onder de 16px. Lopende tekst in Atkinson Hyperlegible (ontworpen
   voor slechtzienden), koppen en bedragen in Source Serif: het is een gids die
   uit officiële stukken citeert, en zo mag hij ook lezen.

   Het ene opvallende element: de markeerstift. Bedragen die tellen, staan geel
   gemarkeerd, ook in de letterlijke citaten. Al het andere blijft rustig.
--------------------------------------------------------------------------- */

@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/atkinson-400.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/atkinson-400i.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/atkinson-700.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(fonts/sourceserif4-var.woff2) format("woff2"); }

:root {
  --inkt:      #1b2733;   /* blauwgrijze inkt, 14:1 op wit */
  --inkt-2:    #44515e;   /* secundair, 7.6:1, nooit kleiner dan 17px */
  --papier:    #ffffff;
  --vlak:      #eef3f5;   /* koel lichtgrijs voor citaten en panelen */
  --rand:      #c6d2d8;
  --merk:      #12575c;   /* petrol: logo, koppen-accent, voet */
  --merk-donker: #0c3f43;
  --accent:    #0f5f8f;   /* links en knoppen: 6.6:1 op wit */
  --accent-zacht: #e6f0f6;
  --stift:     #f7d774;   /* markeerstift voor bedragen */
  --waarschuw: #7a4a00;
  --waarschuw-vlak: #fff6e0;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Atkinson Hyperlegible", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --breed: 1080px;
  --tekst: 46rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font: 19px/1.65 var(--sans);
  overflow-wrap: break-word;
}

a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3 { font-family: var(--serif); color: var(--inkt); font-weight: 650; overflow-wrap: break-word; }

/* vangrail tegen horizontale scroll (zie ook de grid- en flexregels: altijd minmax(0, 1fr) en min-width: 0) */
img, svg, video, iframe, table { max-width: 100%; }
input, select, textarea, button { max-width: 100%; min-width: 0; }
pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
h1 { font-size: clamp(31px, 4.6vw, 44px); line-height: 1.15; margin: 30px 0 14px; letter-spacing: -0.01em; }
h2 { font-size: 27px; line-height: 1.25; margin: 46px 0 12px; }
h3 { font-size: 21px; line-height: 1.3; margin: 26px 0 6px; }
p  { margin: 0 0 14px; }
ul { padding-left: 1.2em; }
li { margin-bottom: 6px; }

/* bedragen die tellen */
mark, .stift {
  background: linear-gradient(transparent 12%, var(--stift) 12%, var(--stift) 88%, transparent 88%);
  color: inherit; padding: 0 0.18em; margin: 0 -0.05em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.leadzin { font-size: 22px; line-height: 1.55; color: var(--inkt); max-width: var(--tekst); }

/* ------------------------------------------------------------------ kop */

.kop-band { border-bottom: 1px solid var(--rand); background: var(--papier); }
.kop {
  max-width: var(--breed); margin: 0 auto; padding: 14px 20px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px;
}
.merk { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--merk); min-width: 0; }
.merk svg { width: 46px; height: 46px; flex: none; }
.merk-naam { font-family: var(--serif); font-size: 25px; font-weight: 700; letter-spacing: -0.01em; color: var(--merk); line-height: 1.1; }
.merk-naam span { font-weight: 500; color: var(--inkt-2); }
.merk-sub { display: block; font-family: var(--sans); font-size: 16px; font-weight: 400; color: var(--inkt-2); letter-spacing: 0; }
.kop nav { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 18px; }
.kop nav a { color: var(--inkt); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.kop nav a:hover, .kop nav a[aria-current="page"] { border-bottom-color: var(--merk); }
.kop nav .kort { display: none; }

/* Leespagina's: één gecentreerde tekstkolom. De startpagina gebruikt de volle breedte. */
main { max-width: calc(var(--tekst) + 40px); margin: 0 auto; padding: 4px 20px 70px; }
main.breed-blad { max-width: var(--breed); }
main.breed-blad > * { max-width: var(--tekst); }
main.breed-blad > .gemeenten, main.breed-blad > .opening, main.breed-blad > .uitleg { max-width: none; }

/* ------------------------------------------------------------------ startpagina */

.opening {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 34px 56px;
  align-items: start; padding: 20px 0 8px;
}
.opening h1 { margin-top: 18px; }
.zoek { margin: 26px 0 8px; }
.zoek label { display: block; font-weight: 700; font-size: 20px; margin-bottom: 8px; }
.zoek input {
  width: 100%; font: inherit; font-size: 22px; padding: 15px 18px;
  border: 2px solid var(--merk); border-radius: 6px; background: #fff; color: var(--inkt);
}
.zoek input::placeholder { color: #6b7783; }
.zoek input:focus { outline: 4px solid var(--stift); outline-offset: 0; }
.teller { font-size: 17px; color: var(--inkt-2); margin: 10px 0 0; }

.verschil { border-top: 4px solid var(--merk); padding-top: 18px; margin-top: 22px; }
.verschil h2 { font-size: 22px; margin: 0 0 6px; }
.verschil p { font-size: 18px; color: var(--inkt-2); }
.verschil table { width: 100%; border-collapse: collapse; font-size: 19px; margin: 6px 0 12px; }
.verschil td { padding: 9px 0; border-bottom: 1px solid var(--rand); }
.verschil td:first-child { overflow-wrap: anywhere; }
.verschil td:last-child { text-align: right; font-family: var(--serif); font-weight: 650; font-size: 21px; white-space: nowrap; }
.verschil a { color: var(--inkt); }

.uitleg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; margin: 44px 0 10px; max-width: none; }
.uitleg h2 { font-size: 21px; margin: 0 0 6px; }
.uitleg p { font-size: 18px; margin: 0; }

/* ------------------------------------------------------------------ gemeentelijst A-Z */

.gemeenten { margin-top: 50px; border-top: 1px solid var(--rand); padding-top: 4px; }
.gemeenten > h2 { margin-top: 30px; }
.abc { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 6px; padding: 0; list-style: none; }
.abc li { margin: 0; }
.abc a { display: inline-block; min-width: 40px; padding: 6px 0; text-align: center; font-family: var(--serif); font-weight: 650; font-size: 20px; text-decoration: none; border: 1px solid var(--rand); border-radius: 4px; color: var(--merk); }
.abc a:hover { background: var(--vlak); }
.letter { font-family: var(--serif); font-size: 30px; color: var(--merk); margin: 30px 0 4px; padding-bottom: 4px; border-bottom: 2px solid var(--merk); }
.lijst { list-style: none; padding: 0; margin: 0; columns: 2 380px; column-gap: 56px; }
.lijst li { break-inside: avoid; margin: 0; }
.lijst a {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 16px;
  padding: 10px 2px; border-bottom: 1px solid var(--rand); text-decoration: none; color: var(--inkt);
}
.lijst a:hover .naam { text-decoration: underline; }
.lijst .naam { font-weight: 700; color: var(--accent); min-width: 0; }
.lijst .grens { font-size: 17px; color: var(--inkt-2); white-space: nowrap; text-align: right; margin-left: auto; }
.lijst .grens b { font-family: var(--serif); font-size: 19px; font-weight: 650; color: var(--inkt); }
.legenda { font-size: 17px; color: var(--inkt-2); margin-top: 6px; }

/* ------------------------------------------------------------------ waarschuwing */

.letop {
  border-left: 6px solid var(--waarschuw);
  background: var(--waarschuw-vlak);
  padding: 16px 22px;
  margin: 26px 0;
}
.letop h2 { margin: 0 0 6px; font-family: var(--sans); font-size: 19px; font-weight: 700; color: var(--waarschuw); }
.letop p  { font-size: 17px; margin-bottom: 8px; }
.letop p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ gemeentepagina */

.kruimels { font-size: 17px; color: var(--inkt-2); margin: 22px 0 0; }
.kruimels a { color: var(--accent); }

.gecontroleerd { font-size: 17px; color: var(--inkt-2); margin-top: -4px; }

/* het antwoord in één oogopslag: een overzicht zoals op een besluit */
.kern { margin: 26px 0 8px; border: 2px solid var(--merk); border-radius: 6px; padding: 6px 22px 10px; background: #fff; }
.kern > h2 { font-size: 21px; margin: 12px 0 4px; color: var(--merk); }
.kern dl { margin: 0; }
.kern-item { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; border-top: 1px solid var(--rand); }
.kern-item:first-child { border-top: 0; }
.kern-item dt { font-size: 18px; color: var(--inkt-2); }
.kern-item dd { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.45; }
.kern-item dd .bedrag { font-family: var(--serif); font-size: 26px; font-weight: 700; }
.kern-item dd small { display: block; font-size: 17px; font-weight: 400; color: var(--inkt-2); margin-top: 2px; }

/* inhoudsopgave van een lange gemeentepagina */
.inhoud { margin: 28px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.inhoud li { margin: 0; }
.inhoud a { display: inline-block; padding: 6px 14px; border: 1px solid var(--rand); border-radius: 999px; font-size: 17px; text-decoration: none; color: var(--inkt); background: var(--vlak); }
.inhoud a:hover { border-color: var(--merk); }

/* letterlijke tekst uit de regels: als een uitsnede uit het document */
.artikel { margin: 18px 0 22px; }
.artikel h3 { margin-bottom: 6px; }
.artikel blockquote {
  margin: 0; padding: 14px 20px;
  background: var(--vlak); border-left: 4px solid var(--merk);
  font-family: var(--serif); font-size: 19px; line-height: 1.6; color: var(--inkt);
  white-space: pre-line;
}
.bron { font-size: 17px; color: var(--inkt-2); margin-top: 6px; }

/* afgewezen of zelf kiezen */
.zelf {
  border-top: 4px solid var(--accent); background: var(--accent-zacht);
  padding: 20px 24px 10px; margin: 40px 0;
}
.zelf h2 { margin-top: 0; font-size: 24px; }

.knop {
  display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
  padding: 13px 22px; border-radius: 6px; font-size: 19px; font-weight: 700; line-height: 1.3;
}
.knop:hover { background: #0b4a70; color: #fff; }

/* ------------------------------------------------------------------ voet */

.voet { background: var(--merk-donker); color: #e9f1f2; margin-top: 30px; }
.voet-in { max-width: var(--breed); margin: 0 auto; padding: 34px 20px 40px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px 56px; }
.voet p { font-size: 17px; margin: 0 0 10px; max-width: 40rem; }
.voet strong { color: #fff; }
.voet a { color: #fff; }
.voet ul { list-style: none; padding: 0; margin: 0; font-size: 18px; }
.voet li { margin: 0 0 8px; }
.voet .merk-naam { color: #fff; }
.voet .merk-naam span { color: #b9cfd1; }

/* ------------------------------------------------------------------ klein scherm */

@media (max-width: 820px) {
  .opening { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .uitleg { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .voet-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  body { font-size: 18px; }
  main, .kop { padding-left: 16px; padding-right: 16px; }
  .merk svg { width: 40px; height: 40px; }
  .merk-naam { font-size: 22px; }
  .merk-sub { display: none; }
  .kop { gap: 6px; }
  .kop nav { width: 100%; justify-content: space-between; gap: 0 12px; font-size: 16px; }
  .kop nav .lang { display: none; }
  .kop nav .kort { display: inline; }
  .leadzin { font-size: 20px; }
  .zoek input { font-size: 20px; }
  .kern { padding: 4px 16px 8px; }
  .kern-item { grid-template-columns: minmax(0, 1fr); }
  .lijst { columns: 1; }
  .artikel blockquote { padding: 12px 14px; font-size: 18px; }
  .voet-in { padding: 28px 16px 34px; }
}

@media print {
  .kop nav, .zoek, .abc, .inhoud, .voet ul { display: none; }
  .voet { background: none; color: var(--inkt); }
  .voet strong, .voet a { color: var(--inkt); }
  mark, .stift { background: none; font-weight: 700; }
}

/* ------------------------------------------------------------------ statistieken */
/* Eén reeks per grafiek, dus één kleur (petrol). Elke grafiek is een tabel met een staaf erin:
   de waarde staat er altijd als tekst naast, kleur draagt nooit alleen de betekenis. */

main.breed-blad > .twee, main.breed-blad > .stat-blok { max-width: var(--tekst); }
main.breed-blad > .twee.breed { max-width: none; }
.twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 56px; }
.stat-blok { margin-top: 10px; }

.grafiek { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 12px 0 8px; font-size: 18px; }
.grafiek-prov thead .getal, .grafiek-prov td.getal { width: 9.5em; }
.prov-n { display: none; font-size: 16px; color: var(--inkt-2); }
.grafiek caption { text-align: left; font-size: 17px; color: var(--inkt-2); padding-bottom: 6px; }
.grafiek thead th { font-size: 16px; font-weight: 400; color: var(--inkt-2); text-align: left; padding: 0 0 4px; border-bottom: 1px solid var(--rand); }
.grafiek tbody th { text-align: left; font-weight: 400; padding: 8px 14px 8px 0; width: 38%; vertical-align: middle; border-bottom: 1px solid #e3eaee; }
.grafiek td { padding: 8px 0; border-bottom: 1px solid #e3eaee; vertical-align: middle; }
.grafiek .getal, .grafiek thead .getal { text-align: right; white-space: nowrap; padding-left: 12px; font-size: 17px; color: var(--inkt-2); }
.staaf-cel { display: grid; grid-template-columns: minmax(0, 1fr) 6.2em; align-items: center; gap: 12px; }
.staaf-baan { display: block; min-width: 0; }
.staaf { display: block; height: 14px; background: var(--merk); border-radius: 0 4px 4px 0; max-width: 100%; }
.staaf-waarde { font-family: var(--serif); font-weight: 650; white-space: nowrap; text-align: right; }
.staaf-waarde.leeg { font-family: var(--sans); font-weight: 400; color: var(--inkt-2); }
.tabel-schuif { max-width: 100%; }

@media (max-width: 820px) {
  .twee { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .grafiek tbody th { width: 44%; font-size: 17px; }
  .grafiek thead th:first-child { width: 44%; }
  .grafiek-prov thead .getal, .grafiek-prov td.getal { display: none; }
  .prov-n { display: block; }
  .staaf-cel { grid-template-columns: minmax(0, 1fr) 5.6em; gap: 8px; }
}
@media print {
  .staaf { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ------------------------------------------------------------------ offerteformulier */

.offerte { border: 2px solid var(--merk); border-radius: 6px; background: #fff; padding: 20px 24px 22px; margin: 40px 0; }
.offerte > h2, .offerte > h1 { margin-top: 0; color: var(--merk); }
.offerte-form fieldset { border: 0; padding: 0; margin: 22px 0 0; min-width: 0; }
.offerte-form legend { font-size: 20px; font-weight: 700; padding: 0; margin-bottom: 8px; }
.keuzes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 8px; }
.keuze { display: flex; gap: 12px; align-items: flex-start; font-size: 18px; line-height: 1.4; cursor: pointer;
         border: 1px solid var(--rand); border-radius: 6px; padding: 12px 14px; background: var(--papier); }
.keuze:hover { border-color: var(--accent); }
.keuze:has(input:checked) { border-color: var(--merk); background: var(--vlak); box-shadow: inset 0 0 0 1px var(--merk); }
.keuze input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--merk); }
.keuze span { min-width: 0; }
.velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin-top: 8px; }
.veld { margin-top: 18px; min-width: 0; }
.veld label { display: block; font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.veld .optie { font-weight: 400; color: var(--inkt-2); }
.veld input, .veld textarea {
  display: block; width: 100%; font: inherit; font-size: 19px; color: var(--inkt);
  border: 2px solid #8a9aa3; border-radius: 6px; padding: 11px 12px; background: #fff;
}
.veld input:focus, .veld textarea:focus, .keuze input:focus-visible { outline: 3px solid var(--stift); outline-offset: 1px; border-color: var(--merk); }
.veld input[aria-invalid="true"] { border-color: #a32020; }
.hulp { font-size: 17px; color: var(--inkt-2); margin: 8px 0 0; }
.veld-fout, .form-fout { color: #a32020; font-weight: 700; font-size: 17px; margin: 0 0 6px; }
.form-fout { background: #fdecec; border-left: 4px solid #a32020; padding: 10px 14px; }
.toestemming { margin: 22px 0 18px; }
.toestemming .keuze { background: var(--vlak); }
.toestemming.fout .keuze { border-color: #a32020; }
.offerte-form .knop { border: 0; cursor: pointer; font-family: inherit; }
.weg { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bedankt { max-width: var(--tekst); }
@media (max-width: 640px) {
  .offerte { padding: 16px 16px 18px; margin-left: -4px; margin-right: -4px; }
  .velden { grid-template-columns: minmax(0, 1fr); }
  .offerte-form .knop { width: 100%; text-align: center; }
}

/* ------------------------------------------------------------------ in gewone woorden (bovenaan gemeentepagina) */

.simpel { margin: 22px 0 8px; border: 2px solid var(--merk); border-radius: 6px; background: #fff; padding: 6px 24px 20px; }
.simpel > h2 { font-size: 23px; margin: 14px 0 6px; color: var(--merk); }
.simpel-lijst { list-style: none; padding: 0; margin: 0; }
.simpel-lijst li { font-size: 19px; line-height: 1.55; padding: 14px 0; border-top: 1px solid var(--rand); }
.simpel-lijst li:first-child { border-top: 0; }
.simpel-lijst strong { display: block; font-size: 20px; margin-bottom: 2px; }
.simpel-lijst .lees { display: inline-block; font-size: 17px; margin-left: 2px; white-space: nowrap; }
.simpel-bron { border-top: 1px solid var(--rand); padding-top: 18px; }
.simpel-bron p { font-size: 17px; color: var(--inkt-2); margin: 10px 0 0; }
.simpel + .offerte { margin-top: 24px; }
@media (max-width: 640px) {
  .simpel { padding: 4px 16px 16px; margin-left: -4px; margin-right: -4px; }
  .simpel-bron .knop { display: block; text-align: center; }
  .simpel-lijst .lees { white-space: normal; }
}
.snel { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 10px 0 0; font-size: 18px; font-weight: 700; }
.simpel-lijst .ook { display: block; margin-top: 6px; }