/* ─────────────────────────────────────────────────────────────
   HappiMeds - Basis
   Reset, design tokens in :root, body, links, focus, .skiplink, .wrap en de
   kop-typografie (kicker, title, lede).

   Let op: de volgorde van de <link>-tags in de HTML is de cascade. Een regel
   uit 6-responsive.css overschrijft een regel uit 3-secties.css omdat dat
   bestand later geladen wordt, niet omdat hij specifieker is. Verplaats dus
   geen regels tussen bestanden zonder te controleren wat er verderop staat.
   ───────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
   HappiMeds site theme · v2 "Goed geregeld"
   Calm, premium healthcare. Navy = trust, blue = care accents,
   yellow/orange = sparse highlights, grey = quiet surfaces.
   Motif: the medication route: dashed lines, nodes, capsule marks.
   ───────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
   Lettertypen, sinds 29-08-2026 van onze eigen server.

   Stonden hiervoor bij Google Fonts. Dat kostte per pagina twee externe
   verbindingen en stuurde het IP-adres van elke bezoeker naar Google; voor
   een zorgpartij een verwerking die niets oplevert. De bestanden staan nu in
   assets/fonts/ en Google Fonts is uit de privacyverklaring verdwenen.

   WELKE GEWICHTEN. Nagemeten met getComputedStyle over alle acht pagina's,
   inclusief ::before en ::after: Jakarta gebruikt 400, 500, 600, 700 en 800,
   Plex Mono 400 en 500. Alle zeven zijn dus echt in gebruik; er viel niets te
   schrappen. Let op de pseudo-elementen: Plex Mono 500 staat uitsluitend in
   de teller "Stap 01 / 05" (4-blokken.css) en in de stapnummers op de
   modulepagina. Een meting die alleen naar echte elementen kijkt, mist die en
   concludeert ten onrechte dat 500 weg kan.

   WAT ER NIET IS. De CSS vraagt op enkele plekken Plex Mono 600, 700 en 800
   en Jakarta 900 (dat laatste ontstaat waar een <b> in een kop van 800 staat:
   font-weight: bolder maakt daar 900 van). Die gezichten bestonden ook in de
   Google-versie niet en werden door de browser nagebootst. Dat blijft zo, dus
   de weergave verandert niet. Wil je dat oplossen, dan is dat een aparte
   keuze: extra bestanden, of die regels naar een bestaand gewicht brengen.

   ALLEEN DE LATIN-SUBSET. De site gebruikt 102 unieke tekens. Daarvan vallen
   er drie buiten de latin-subset: → (U+2192), ✓ (U+2713) en ─ (U+2500). Die
   zitten ook niet in latin-ext, dus die vielen al terug op een systeemfont en
   blijven dat doen. De ë en de ï zitten in Latin-1 en dus gewoon in latin.
   Daarmee zijn het drie bestanden in plaats van veertien, samen 57 KB.

   EEN VARIABEL BESTAND VOOR JAKARTA. Google leverde voor elk gewicht hetzelfde
   variabele font (200 tot 800 in één bestand); de vijf kopieën van 27 KB
   verschilden geen byte. Sinds 2026-09-02 staat er één bestand met
   font-weight: 400 800, zodat de browser hem één keer ophaalt en de as zelf
   instelt. De preload in elke pagina wijst naar datzelfde bestand.

   De unicode-range hieronder is die van Google en hoort bij deze bestanden.
   Staat er ooit een teken op de site dat erbuiten valt, dan pakt de browser
   voor dat ene teken de volgende font in de stack. Geen tofu, geen fout.

   font-display: swap toont direct de terugvalfont en wisselt zodra het
   webfont binnen is. Liever een korte wissel dan onzichtbare tekst.

   Beide families staan onder de SIL Open Font License 1.1, die zelf hosten
   uitdrukkelijk toestaat. Zie assets/fonts/OFL.txt.
   ───────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/plus-jakarta-sans.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* De terugvalstapels. Hier stond alleen sans-serif, wat op Windows Arial
   oplevert en op Android Roboto: bruikbaar, maar de sprong is groter dan
   nodig. Deze stapels zetten er eerst de systeemfont van het apparaat voor,
   die qua breedte dichter bij Jakarta ligt, zodat de wissel minder opvalt.
   --mono gebruik je in plaats van var(--font-mono). */
:root {
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

/* Het hidden-attribuut moet altijd winnen. De browser geeft [hidden] zelf al
   display:none, maar dat is een standaardstijl en die verliest van elke regel
   die wij hier schrijven: .c-cols{display:grid} liet het verborgen
   contactformulier gewoon staan naast de bedanktekst. Het attribuut stond dan
   wel in de DOM, er veranderde alleen niets op het scherm. Met !important
   sluiten we dat af voor de hele site; zet iets zichtbaar door het attribuut
   te verwijderen, niet door hier een display overheen te zetten. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
/* Stond eerder in het SDK-blok en gold daardoor maar op een pagina. Hoort hier:
   wie minder beweging vraagt, wil ook op de andere vier geen zachte scroll. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:root {
  /* brand */
  --blue: #429EBD;
  --blue-text: #27718A;
  --navy: #053F5C;
  --navy-2: #0A4D6E;
  --orange: #F27F0C;
  --orange-ink: #A85405;
  --yellow: #F7AD19;
  --yellow-press: #EE9E06;
  --grey: #E0E1DD;

  /* derived, calm neutrals */
  --paper: #F7F8F5;
  --tint: #EDF4F7;
  --tint-deep: #DFECF2;
  --ink: #0E3348;
  --body-c: #4E6673;
  --muted: #586B78;
  --line: #E3E5E0;
  --line-blue: #D5E3EA;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-soft: 0 1px 2px rgba(5,63,92,.05), 0 14px 34px -16px rgba(5,63,92,.18);
  --shadow-hover: 0 2px 4px rgba(5,63,92,.06), 0 24px 44px -18px rgba(5,63,92,.24);
  --rail-blue: #ABCBD9;
  --rail-blue-2: #CBDFE9;
  --panel-blue: #EAF5F9;
  --amber-tint: #FDF3DC;
  --amber-ink: #8A5D06;
  --cream-ink: #6B4B12;
  --dots: radial-gradient(rgba(5,63,92,.06) 1.1px, transparent 1.4px);
  --dots-dark: radial-gradient(rgba(255,255,255,.07) 1.1px, transparent 1.4px);
  /* Lijn- en puntkleuren die eerst als losse hexwaarden in de CSS stonden (2026-09-03). */
  --amber-dot: #E3A81C;        /* scheidingspuntjes en lijstpuntjes */
  --amber-line: #F2D9A4;       /* rand van de amber tagpil */
  --line-rail: #BFD9E4;        /* gestippelde rail tussen stappen */
  --line-blue-mid: #AFCEDC;    /* scheidingsrand in de herorijen op mobiel */
  --line-blue-soft: #B7D8E5;
  /* Kickers, labels en de focusring op navy panelen. */
  --blue-on-dark: #93CBDE;

  /* Oudere namen die nog in gebruik zijn. --teal-deep is de blauwe tekstkleur
     van de modulepagina en de functietitels op Over ons; --amber is de gele
     knopkleur onder zijn oude naam. Ongebruikte aliassen zijn op 2026-09-02
     verwijderd; nieuwe code gebruikt --blue-text, --yellow en --tint. */
  --teal-deep: #2A7893;
  --amber: #F7AD19;
}
body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--navy); color: white; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: #A9C6D3; border-radius: 3px; }
html { scrollbar-color: #A9C6D3 transparent; scrollbar-width: thin; }
/* Tekstcursor en keuzerondjes in de huisstijl in plaats van het browserblauw/-zwart. */
input, textarea { caret-color: var(--navy); }
input[type="radio"], input[type="checkbox"] { accent-color: var(--blue); }
img { max-width: 100%; }
a { color: var(--blue-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--navy); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
/* Alleen op navy vlakken; de footer is wit en houdt de gewone ring (2026-09-03, was 1,77:1). */
section.dark :focus-visible, .cta-card :focus-visible { outline-color: var(--blue-on-dark); }
/* Kopregel als eigen blok: houdt text-wrap: balance werkend waar anders een
   harde regelbreuk zou staan. Zie de Two-Block Headline Rule in DESIGN.md. */
.kop-l { display: block; }
/* Alleen voor schermlezers: kop of label die visueel niets toevoegt. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skiplink { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--navy); color: #fff; padding: 12px 22px; border-radius: 0 0 12px 0; font-size: 14.5px; font-weight: 700; text-decoration: none; }
/* Alleen focus haalt de link in beeld. */
.skiplink:focus { left: 0; }
/* De kleur staat los, en :hover moet er expliciet bij. Zonder die regel wint de
   globale a:hover (0,1,1) van .skiplink (0,1,0) en wordt de tekst navy op navy:
   contrast 1,0:1, dus onzichtbaar precies voor de toetsenbordgebruiker voor wie
   deze link bestaat. */
.skiplink, .skiplink:focus, .skiplink:hover { color: #fff; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }

/* Kicker: two-tone capsule marker, the HappiMeds signature */
.kicker {
  font-size: 13px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  color: var(--blue-text);
  display: inline-flex; align-items: center; gap: 10px;
}
.kicker::before {
  content: ""; width: 21px; height: 9px; border-radius: 100px; display: block;
  background: linear-gradient(90deg, var(--navy) 50%, var(--blue) 50%);
}
.title {
  font-size: clamp(26px, 3.1vw, 40px); font-weight: 800; letter-spacing: -0.025em;
  line-height: 1.12; margin-top: 14px; color: var(--navy); text-wrap: balance;
}
.lede { font-size: 19px; color: var(--body-c); max-width: 600px; margin-top: 16px; text-wrap: pretty; }
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }
.center .kicker::before { margin-right: 0; }