/* ─────────────────────────────────────────────────────────────
   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 zeven bestanden in plaats van veertien, samen 176 KB.

   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;
  font-display: swap;
  src: url('../assets/fonts/plus-jakarta-sans-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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/plus-jakarta-sans-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;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/plus-jakarta-sans-600.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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/plus-jakarta-sans-700.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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/plus-jakarta-sans-800.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; }
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);

  /* legacy aliases (inline styles in pages reference these) */
  --teal: #429EBD;
  --teal-deep: #2A7893;
  --teal-dark: #2A7893;
  --teal-ink: #053F5C;
  --teal-light: #EDF4F7;
  --amber: #F7AD19;
  --amber-dark: #B0740A;
  --gray: #4E6673;
  --gray-light: #586B78;
}
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; }
img { max-width: 100%; }
a { color: var(--blue-text); }
a:hover { color: var(--navy); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
section.dark :focus-visible, footer :focus-visible, .cta-card :focus-visible { outline-color: #93CBDE; }
.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; }