/* ICTEvers — groot, rustig, duidelijk. Delfts blauw + gele belknop. */

/* Lettertype: Atkinson Hyperlegible (Braille Institute, SIL OFL — zie fonts/OFL.txt). Lokaal, dus geen verzoeken naar Google. */
@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: normal; font-weight: 700; font-display: swap; src: url("fonts/atkinson-700.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/atkinson-400-italic.woff2") format("woff2"); }

:root {
  --paper: #F6F8FB;
  --white: #FFFFFF;
  --ink: #14243B;
  --muted: #3E4F66;
  --delft: #1C4A93;
  --delft-dark: #133568;
  --tile: #E3EBF6;
  --line: #BFCDE2;
  --sun: #F5C443;
  --sun-dark: #E0AC22;

  --base: 1.25rem;          /* 20px */
  --radius: 10px;
  color-scheme: light;
}

html.large { font-size: 118%; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Atkinson Hyperlegible", Verdana, "Segoe UI", sans-serif;
  font-size: var(--base);
  line-height: 1.6;
}

.wrap { max-width: 72rem; margin: 0 auto; padding-inline: 1.25rem; }
.narrow { max-width: 48rem; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -.01em; max-width: 18ch; }
h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--delft-dark); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; max-width: 62ch; }

a { color: var(--delft); text-underline-offset: .18em; }
a:hover { color: var(--delft-dark); }

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

.skip { position: absolute; left: -999px; top: .5rem; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 20; }
.skip:focus { left: 1rem; }

/* ---------- Header ---------- */
.top {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: var(--white);
  border-bottom: 2px solid var(--tile);
}
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .75rem; flex-wrap: wrap; }
.logo { font-size: 1.7rem; font-weight: 700; text-decoration: none; color: var(--ink); letter-spacing: -.01em; }
.logo span { color: var(--delft); }
.top-actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

.textsize {
  font: inherit; font-size: 1rem;
  background: var(--white); color: var(--delft);
  border: 2px solid var(--line); border-radius: var(--radius);
  padding: .45rem .9rem; cursor: pointer;
}
.textsize:hover { border-color: var(--delft); }

.nav { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; padding-block: 0 .7rem; font-size: 1.05rem; }
.nav a { color: var(--muted); text-decoration: none; padding-block: .2rem; }
.nav a:hover { color: var(--delft); text-decoration: underline; }

/* ---------- Belknop ---------- */
.call {
  display: inline-flex; flex-direction: column;
  background: var(--sun); color: var(--ink);
  text-decoration: none; font-weight: 700;
  border-radius: var(--radius);
  border-bottom: 5px solid var(--sun-dark);
}
.call:hover { background: #F8CF5E; color: var(--ink); }
.call:active { transform: translateY(2px); border-bottom-width: 3px; }
.call-small { padding: .5rem 1rem; font-size: 1.05rem; }
.call-big { padding: 1rem 1.6rem 1.1rem; margin-block: .5rem 1rem; }
.call-label { font-size: 1.05rem; font-weight: 400; }
.call-number { font-size: clamp(2rem, 5vw, 2.8rem); letter-spacing: .02em; line-height: 1.1; }

/* ---------- Secties ---------- */
main > section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.band { background: var(--white); border-block: 2px solid var(--tile); }
.intro { font-size: 1.15rem; color: var(--muted); margin-bottom: 2rem; }

/* Hero */
.hero { background: var(--tile); }
.hero-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; align-items: center; }
.lead { font-size: 1.3rem; max-width: 40ch; }
.hours { font-size: 1.05rem; color: var(--muted); }

.promises {
  list-style: none; margin: 0; padding: 1.75rem;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--radius);
}
.promises li { padding: .8rem 0; border-bottom: 1px solid var(--tile); }
.promises li:last-child { border-bottom: 0; }
.promises strong { display: block; color: var(--delft-dark); font-size: 1.3rem; }

/* Hulp */
.help-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 3.5rem; }
.help-grid h3 { color: var(--delft); padding-bottom: .4rem; border-bottom: 3px solid var(--tile); }
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { position: relative; padding: .35rem 0 .35rem 2rem; }
.checks li::before {
  content: ""; position: absolute; left: .1rem; top: .75rem;
  width: .9rem; height: .5rem;
  border-left: 3px solid var(--delft); border-bottom: 3px solid var(--delft);
  transform: rotate(-45deg);
}

/* Prijs */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 3.5rem; }
.mode { background: var(--white); border: 2px solid var(--line); border-radius: var(--radius); padding: 1.75rem; }
.mode h3 { color: var(--delft-dark); font-size: 1.5rem; margin-bottom: .3rem; }
.mode:first-child { border-color: var(--delft); box-shadow: inset 0 6px 0 var(--delft); }
.mode-sub { font-size: 1.05rem; color: var(--muted); }
.mode .rates { margin-bottom: 1rem; }
.price-grid h3 { color: var(--delft-dark); font-size: 1.5rem; }
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
.rates { margin: 0 0 1.5rem; }
.rates div { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 2px solid var(--tile); flex-wrap: wrap; }
.rates dt { color: var(--muted); }
.rates dd { margin: 0; font-weight: 700; }
.rates div:first-child dd { font-size: 1.6rem; color: var(--delft-dark); }
.note { font-size: 1.05rem; color: var(--muted); }

.receipt {
  margin: 0;
  background: var(--white);
  padding: 1.75rem 1.75rem 2rem;
  border: 2px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 1px 0 var(--line), 6px 8px 0 var(--tile);
  transform: rotate(.6deg);
  font-size: 1.05rem;
}
.receipt figcaption { font-weight: 700; font-size: 1.2rem; color: var(--delft-dark); margin-bottom: .6rem; }
.receipt-case { font-style: italic; color: var(--muted); padding-bottom: 1rem; border-bottom: 2px dashed var(--line); }
.receipt table { width: 100%; border-collapse: collapse; }
.receipt td { padding: .45rem 0; vertical-align: top; }
.receipt td:last-child { text-align: right; white-space: nowrap; padding-left: 1rem; font-variant-numeric: tabular-nums; }
.receipt .sub td { border-top: 1px solid var(--line); padding-top: .8rem; font-weight: 700; }
.receipt tfoot td { border-top: 3px double var(--ink); padding-top: .8rem; font-weight: 700; font-size: 1.4rem; }

/* Stappen — echte volgorde, dus genummerd */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.steps li { counter-increment: step; position: relative; padding-top: 4rem; }
.steps li::before {
  content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--delft); color: #fff; font-weight: 700; font-size: 1.4rem;
}
.steps li:not(:last-child)::after {
  content: ""; position: absolute; top: 1.5rem; left: 3.5rem; right: -1.5rem;
  border-top: 3px dotted var(--line);
}
.steps p { font-size: 1.1rem; }

/* Over mij */
.about-grid { display: grid; grid-template-columns: minmax(12rem, 20rem) 1fr; gap: 3rem; align-items: start; }
.photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: var(--radius); }
.about-grid:not(:has(.photo)) { grid-template-columns: 1fr; }

/* Veiligheid */
.safety { background: var(--delft-dark); color: #fff; }
.safety h2 { color: #fff; max-width: 24ch; }
.safety a { color: var(--sun); }
.safety-list { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2.5rem; }
.safety-list li { padding: 1rem 0 1rem 1.2rem; border-left: 4px solid var(--sun); }
.safety strong { color: var(--sun); }

/* Vragen */
details { border-bottom: 2px solid var(--tile); }
summary {
  cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.2rem;
  padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  font-size: 1.8rem; color: var(--delft); line-height: 1;
}
details[open] summary::after { content: "−"; }
summary:hover { color: var(--delft); }
details p { padding-bottom: .5rem; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.contact-list { margin: 0; }
.contact-list div { padding: .8rem 0; border-bottom: 2px solid var(--tile); }
.contact-list dt { color: var(--muted); font-size: 1rem; }
.contact-list dd { margin: 0; font-size: 1.3rem; font-weight: 700; }

/* Footer */
.foot { background: var(--ink); color: #DCE4F0; padding-block: 2rem calc(2rem + env(safe-area-inset-bottom, 0px)); font-size: 1rem; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; }
.foot p { margin: 0; }
.foot a { color: #fff; margin-right: 1rem; }

/* ---------- Smallere schermen ---------- */
@media (max-width: 60rem) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps li::after { display: none; }
}
@media (max-width: 48rem) {
  :root { --base: 1.15rem; }
  .hero-grid, .modes, .price-grid, .about-grid, .contact-grid, .help-grid, .safety-list { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .receipt { transform: none; }
  .photo { max-width: 16rem; }
  .textsize { display: none; }
  .nav { display: none; }
}