/* ==========================================================================
   Eco Sheets — stylesheet
   Kleuren uit het huisstijldocument:
   #161d34 diepnavy · #536588 slate · #314c7a diepblauw · #3b73b9 accentblauw
   #f0f4f6 lichtgrijsblauw · #0b0b0d zwart
   ========================================================================== */

/* Chakra Petch benadert Sol Pro uit het logo-ontwerp. Sol Pro zelf is niet
   vrij te hosten; Chakra Petch staat onder de SIL Open Font License en mag
   commercieel gebruikt worden. Alleen het merkwoord en de labels gebruiken
   dit lettertype — lopende tekst blijft in een systeemfont, wat sneller laadt
   en beter leest. */
@font-face {
  font-family: "Chakra Petch";
  src: url("fonts/chakra-petch-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy:       #161d34;
  --slate:      #536588;
  --deep:       #314c7a;
  --accent:     #3b73b9;
  --accent-dk:  #2c5a94;
  --mist:       #f0f4f6;

  --ink:        #161d34;
  --ink-soft:   #4a5872;
  --ink-faint:  #5d6c86;
  --line:       #dde4ea;
  --line-soft:  #e8edf1;
  --bg:         #ffffff;

  --wrap: 68rem;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(22, 29, 52, .05), 0 10px 30px rgba(22, 29, 52, .07);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
  --font-brand: "Chakra Petch", var(--font);
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* ---------- typografie ---------- */
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.014em; color: var(--navy); }
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem); margin-top: 2.25em; }
h3 { font-size: 1.15rem; margin-top: 1.75em; }
h1 + p.lead { margin-top: 0; }
p, ul, ol { margin: 0 0 1.1rem; }
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: .35rem; }
.lead { font-size: 1.175rem; color: var(--ink-soft); max-width: 46ch; }
.eyebrow {
  display: inline-block; font-family: var(--font-brand); font-size: .8rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 .75rem;
}
strong { font-weight: 650; }
small, .small { font-size: .9rem; color: var(--ink-faint); }

a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-dk); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- header ---------- */
.site-header {
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(1.4) blur(8px);
  position: sticky; top: 0; z-index: 50;
}
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: 4.5rem; flex-wrap: wrap; }

.brand { display: inline-flex; align-items: center; text-decoration: none; min-width: 0; }
.brand img { display: block; height: 2.1rem; width: auto; max-width: 100%; }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  color: var(--ink-soft); text-decoration: none; font-size: .95rem; font-weight: 550;
  padding: .35rem 0; border-bottom: 2px solid transparent; display: block;
}
.site-nav a:hover { color: var(--navy); }
.site-nav a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--accent); }

.header-actions { display: flex; align-items: center; }
.lang-switch {
  font-size: .82rem; font-weight: 600; text-decoration: none; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 999px; padding: .3rem .7rem;
}
.lang-switch:hover { color: var(--navy); border-color: var(--slate); }

.nav-toggle { display: none; }

@media (max-width: 46rem) {
  .site-nav { flex-basis: 100%; margin-left: 0; display: none; }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding-bottom: .75rem; }
  .site-nav a { padding: .65rem 0; border-bottom: 1px solid var(--line-soft); }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--accent); }
  .nav-toggle {
    display: grid; gap: 4px; margin-left: auto; background: none; border: 0;
    padding: .6rem .35rem; cursor: pointer;
  }
  .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px; }
  .header-actions { order: 3; }
  /* logo, menuknop en taalknop moeten samen op één regel passen, ook op een
     scherm van 360px; anders valt de taalknop naar een tweede regel */
  .header-inner { gap: .75rem; min-height: 4rem; }
  .brand img { height: 1.6rem; }
  .lang-switch { font-size: .75rem; padding: .25rem .55rem; }
}

/* ---------- kruimelpad ---------- */
.breadcrumbs { width: min(100% - 2.5rem, var(--wrap)); margin: 1.1rem auto 0; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; font-size: .84rem; color: var(--ink-faint); }
.breadcrumbs li + li::before { content: "/"; margin-right: .45rem; color: var(--line); }
.breadcrumbs a { color: var(--ink-faint); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- secties ---------- */
.section { padding: 3.5rem 0; }
.section-tight { padding: 2.25rem 0; }
.section-alt { background: var(--mist); border-block: 1px solid var(--line-soft); }
.section-deep { background: var(--navy); color: #dbe3ee; }
.section-deep h1, .section-deep h2, .section-deep h3 { color: #fff; }
.section-deep a { color: #a9c6ea; }
.section-deep .lead { color: #b3c0d4; }

/* Leeskolom. Op .wrap blijft de container 68rem breed en gecentreerd; de
   inhoud erbinnen wordt afgekapt op 44rem en lijnt links uit met het logo,
   de kruimels en de footer. Anders zweeft de tekstkolom in het midden en
   loopt hij uit de pas met de rest van de pagina. */
.prose > * { max-width: 44rem; }
.prose h2 { margin-top: 2.5rem; }

/* Op de lichtblauwe achtergrond haalt het accentblauw net geen AA-contrast
   (4.37 : 1). Daar gebruiken links de donkere variant. */
.section-alt a, .note a { color: var(--accent-dk); }
.section-alt a:hover, .note a:hover { color: var(--navy); }

/* ---------- hero ---------- */
.hero { padding: 4rem 0 3rem; }
.hero-grid { display: grid; gap: 2.5rem; grid-template-columns: 1.15fr .85fr; align-items: start; }
@media (max-width: 52rem) { .hero-grid { grid-template-columns: 1fr; gap: 1.75rem; } }
.hero h1 { margin-bottom: .6rem; }

.hero-card {
  background: var(--mist); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow);
}
.hero-card h2 { margin-top: 0; font-size: 1.05rem; }
.hero-card ul { list-style: none; padding: 0; margin: 0; }
.hero-card li { display: flex; gap: .6rem; align-items: baseline; font-size: .95rem; margin-bottom: .55rem; }
.hero-card li::before { content: "—"; color: var(--accent); font-weight: 700; }

/* ---------- knoppen ---------- */
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  font-weight: 600; font-size: .97rem; padding: .72rem 1.3rem; border-radius: 8px;
  border: 1px solid transparent; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dk); color: #fff; }
.btn-ghost { border-color: var(--line); color: var(--navy); background: #fff; }
.btn-ghost:hover { border-color: var(--slate); color: var(--navy); }
.section-deep .btn-primary { background: #fff; color: var(--navy); }
.section-deep .btn-primary:hover { background: var(--mist); color: var(--navy); }
.section-deep .btn-ghost { background: transparent; border-color: rgba(255,255,255,.32); color: #fff; }
.section-deep .btn-ghost:hover { border-color: #fff; color: #fff; }

/* ---------- kaarten ---------- */
.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); list-style: none; padding: 0; margin: 0; }
.card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem;
  background: #fff; margin: 0; display: flex; flex-direction: column;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.card:hover { border-color: var(--slate); box-shadow: var(--shadow); transform: translateY(-2px); }
.card h3 { margin: 0 0 .5rem; font-size: 1.08rem; }
.card h3 a { text-decoration: none; color: var(--navy); }
.card h3 a:hover { color: var(--accent); }
.card p { color: var(--ink-soft); font-size: .95rem; margin-bottom: .9rem; overflow-wrap: break-word; }
.card .card-link { margin-top: auto; font-size: .92rem; font-weight: 600; text-decoration: none; }
.card .card-link::after { content: " \2192"; }

/* ---------- twee kolommen ---------- */
.split { display: grid; gap: 2.5rem; grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 52rem) { .split { grid-template-columns: 1fr; gap: 1.5rem; } }

/* Rasteronderdelen krijgen standaard min-width:auto. Een kolom weigert dan
   smaller te worden dan de breedste inhoud (een tabel, een rij feitenblokken),
   en duwt de hele pagina breder dan het scherm. Op een telefoon zag je dat
   terug als tekst die scheef loopt en horizontaal scrollen. min-width:0 haalt
   die ondergrens weg. */
.split > *, .bio-grid > *, .hero-grid > *, .footer-grid > * { min-width: 0; }
.prose, .prose > * { overflow-wrap: break-word; }

/* ---------- voorbeeldillustraties ---------- */
.showcase { margin: 0; }
.showcase img {
  width: 100%; height: auto; display: block; border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--mist);
}
.showcase figcaption {
  margin-top: .8rem; font-size: .89rem; color: var(--ink-faint); max-width: 44rem;
}

/* ---------- portret ---------- */
.portrait { margin: 0; }
.portrait img {
  width: 100%; height: auto; display: block; border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--mist);
}
.portrait figcaption { margin-top: .7rem; font-size: .88rem; color: var(--ink-faint); }
.bio-grid { display: grid; gap: 2.5rem; grid-template-columns: 20rem 1fr; align-items: start; }
@media (max-width: 52rem) { .bio-grid { grid-template-columns: 1fr; gap: 1.75rem; } .portrait { max-width: 20rem; } }

/* ---------- stappen ---------- */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 1.5rem 0 0; }
.steps li { counter-increment: step; position: relative; padding-left: 3rem; margin-bottom: 1.4rem; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -.1rem;
  width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--mist); color: var(--deep); font-family: var(--font-brand);
  font-weight: 600; font-size: .95rem; border: 1px solid var(--line);
}
.steps h3 { margin: 0 0 .25rem; font-size: 1.02rem; }
.steps p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* ---------- feitenrij ---------- */
/* minmax(min(100%, 12rem), 1fr): de ondergrens zakt vanzelf naar de
   containerbreedte zodra die smaller is dan 12rem. Zo blaast het raster de
   pagina niet op, en blijven de kolommen op normale schermen breed genoeg.
   overflow-wrap is nodig voor een e-mailadres: dat heeft geen spaties, dus
   zonder die regel loopt het over de buurkolom heen. */
.facts { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); list-style: none; padding: 0; margin: 2rem 0 0; }
.facts > * { min-width: 0; }
.facts dd, .facts dd a { overflow-wrap: anywhere; }
.facts-stack { grid-template-columns: 1fr; gap: 1rem; }
@media (max-width: 26rem) { .facts { grid-template-columns: 1fr; gap: 1rem; } }
.facts div { border-left: 3px solid var(--accent); padding-left: .9rem; }
.facts dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); font-weight: 600; font-family: var(--font-brand); }
.facts dd { margin: .2rem 0 0; font-weight: 650; color: var(--navy); }
.section-deep .facts dt { color: #9fb0c8; }
.section-deep .facts dd { color: #fff; }

/* ---------- tabel ---------- */
.table-wrap { overflow-x: auto; margin: 1.5rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { font-weight: 650; background: var(--mist); color: var(--navy); }

/* ---------- FAQ ---------- */
.faq { margin-top: 1.25rem; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius); padding: .1rem 1.1rem;
  margin-bottom: .7rem; background: #fff;
}
.faq summary {
  cursor: pointer; font-weight: 620; padding: .95rem 0; list-style: none; color: var(--navy);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.35rem; font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details[open] summary { border-bottom: 1px solid var(--line-soft); }
.faq details > p, .faq details > ul { margin-top: .9rem; color: var(--ink-soft); font-size: .97rem; }
.faq details > *:last-child { margin-bottom: 1rem; }

/* ---------- notitie ---------- */
.note {
  border-left: 3px solid var(--accent); background: var(--mist);
  padding: 1rem 1.2rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.5rem 0;
}
.note p:last-child { margin-bottom: 0; }

/* ---------- formulier ---------- */
.form-grid { display: grid; gap: 1.1rem; max-width: 34rem; }
label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; color: var(--navy); }
input, textarea, select {
  width: 100%; font: inherit; font-size: 1rem; padding: .65rem .8rem;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
textarea { min-height: 8rem; resize: vertical; }
.field-hint { font-size: .85rem; color: var(--ink-faint); margin: .3rem 0 0; }

/* ---------- CTA-blok ---------- */
.cta-band { text-align: center; }
.cta-band .lead { margin-inline: auto; }
.cta-band .actions { justify-content: center; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line-soft); background: var(--mist); padding: 2.75rem 0 1.75rem; margin-top: 3rem; font-size: .93rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 46rem) { .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; } }
.site-footer h2 { font-family: var(--font-brand); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); margin: 0 0 .7rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .4rem; overflow-wrap: anywhere; }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.footer-brand { display: block; height: 1.7rem; width: auto; margin: 0 0 .6rem; }
.site-footer p { color: var(--ink-soft); margin: 0 0 .4rem; }
.legal { font-size: .85rem; color: var(--ink-faint); }
.copyright { margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-faint); }

/* ---------- kleine schermen ---------- */
@media (max-width: 34rem) {
  .wrap, .breadcrumbs { width: min(100% - 2rem, var(--wrap)); }
  .section { padding: 2.5rem 0; }
  .section-tight { padding: 1.5rem 0; }
  .hero { padding: 2.5rem 0 2rem; }
  h2 { margin-top: 1.9em; }
  .lead { font-size: 1.1rem; }
  .cta-band .actions .btn { width: 100%; justify-content: center; }
}

/* ---------- print ---------- */
@media print {
  .site-header, .site-footer, .breadcrumbs, .actions, .skip-link { display: none; }
  body { font-size: 11pt; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}