/* ICT-Health — één stylesheet, geen build, geen framework. */

:root {
  --bg: #fdfdfb;
  --fg: #1c1c1a;
  --muted: #5d5d57;
  --line: #ddddd6;
  --accent: #1a5e63;
  --accent-soft: #e6f1f1;
  --warn-bg: #fdf3e3;
  --warn-line: #d9a441;
  --ok: #1f7a4d;
  --err: #a32b2b;
  --code-bg: #f2f2ec;
  --schema-open: #6f8faf;
  --schema-geheim: #1a5e63;
  --schema-rand: #2b3a4a;
  --radius: 6px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16171a;
    --fg: #e6e6e1;
    --muted: #9a9a92;
    --line: #32343a;
    --accent: #5fb8bd;
    --accent-soft: #1b2b2c;
    --warn-bg: #2e2415;
    --warn-line: #9a7429;
    --ok: #57c48c;
    --err: #e8797a;
    --code-bg: #1e2024;
    --schema-open: #4a6a8a;
    --schema-geheim: #2a7f84;
    --schema-rand: #c9ced6;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; }

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: #fff; padding: .6rem 1rem;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 10; }

/* Kop en navigatie */

.site-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.site-header .wrap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding-block: 1rem; flex-wrap: wrap;
}
.brand { text-decoration: none; color: inherit; }
.brand strong { font-size: 1.15rem; letter-spacing: .01em; }
.brand span { display: block; color: var(--muted); font-size: .85rem; }

.langs a {
  color: var(--muted); text-decoration: none; font-size: .8rem;
  padding: .15rem .4rem; border-radius: 3px; letter-spacing: .04em;
}
.langs a[aria-current] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.layout { display: grid; grid-template-columns: 250px 1fr; gap: 3rem; padding-block: 2.5rem; }
@media (max-width: 820px) { .layout { grid-template-columns: 1fr; gap: 1.5rem; } }

.sidebar ol { list-style: none; margin: 0; padding: 0; }
.sidebar li { margin-bottom: .2rem; }
/* Subhoofdstukken springen in en staan iets kleiner; de lijn links maakt de
   groep zichtbaar zonder een tweede <ol> nodig te hebben. */
.sidebar li.sub { margin-left: .75rem; border-left: 1px solid var(--line); }
.sidebar li.sub a { font-size: .87rem; padding-left: 2.6rem; }
.sidebar a {
  display: block; padding: .4rem .6rem .4rem 2.4rem; position: relative;
  color: var(--fg); text-decoration: none; border-radius: var(--radius);
  font-size: .92rem; line-height: 1.35;
}
.sidebar .nr {
  position: absolute; left: .6rem; color: var(--muted);
  font-variant-numeric: tabular-nums; font-size: .8rem;
}
.sidebar li.sub .nr { left: .7rem; }
.sidebar a:hover { background: var(--accent-soft); }
.sidebar a[aria-current] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* Tekst */

main { min-width: 0; }
h1 { font-size: 1.9rem; line-height: 1.2; margin: 0 0 1rem; }
h2 { font-size: 1.3rem; margin: 2.5rem 0 .75rem; }
h3 { font-size: 1.05rem; margin: 1.75rem 0 .5rem; }
p, li { max-width: 68ch; }
a { color: var(--accent); }

.lead { font-size: 1.1rem; color: var(--muted); }

code, kbd { font-family: var(--mono); font-size: .88em; background: var(--code-bg); padding: .1em .35em; border-radius: 3px; }
pre { background: var(--code-bg); padding: 1rem; border-radius: var(--radius); overflow-x: auto; }
pre code { background: none; padding: 0; }

table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .92rem; }
th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; }

.notice {
  border-left: 3px solid var(--warn-line); background: var(--warn-bg);
  padding: .8rem 1rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.5rem 0;
}
.notice-translate { font-size: .9rem; }

/* Demo-widgets */

.demo {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem; margin: 1.75rem 0; background: var(--code-bg);
}
.demo > h3 { margin-top: 0; display: flex; align-items: center; gap: .5rem; }
.demo .privacy { font-size: .82rem; color: var(--muted); margin-top: -.4rem; }

.demo label { display: block; font-size: .85rem; font-weight: 600; margin: .9rem 0 .25rem; }
.demo input[type=text], .demo input[type=password], .demo textarea, .demo select {
  width: 100%; padding: .5rem .6rem; font-family: var(--mono); font-size: .88rem;
  border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--fg);
}
.demo textarea { min-height: 5.5rem; resize: vertical; }
.demo .row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
.demo .row > * { flex: 1 1 12rem; }

.demo button {
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  background: var(--accent); color: #fff; border: 0;
  padding: .5rem 1rem; border-radius: 4px; margin: .9rem .4rem 0 0;
}
.demo button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.demo button:disabled { opacity: .5; cursor: not-allowed; }

.out {
  font-family: var(--mono); font-size: .82rem; white-space: pre-wrap;
  word-break: break-all; background: var(--bg); border: 1px solid var(--line);
  border-radius: 4px; padding: .7rem; margin-top: .5rem; min-height: 2.5rem;
}
.out:empty { display: none; }
.out.ok { border-color: var(--ok); }
.out.err { border-color: var(--err); color: var(--err); }

.pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .9rem; }
.pager .next { margin-left: auto; text-align: right; }

.site-footer { border-top: 1px solid var(--line); margin-top: 3rem; padding-block: 1.5rem; color: var(--muted); font-size: .85rem; }
.site-footer a { color: var(--muted); }

.footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}

/* Vaste merkkleuren, zoals op context en eetadvies — bewust NIET var(--bg)/
   var(--line): dit is een badge met een eigen huisstijl, geen element dat met
   de paginathema meekleurt. Anders wordt de linkerpadding te krap (het icoon
   kruist dan de afgeronde rand) en wordt "Powered by" (fill="black" in de
   SVG) onleesbaar zodra de paginaomgeving donker is. */
.hermes-badge {
  display: inline-flex; align-items: center;
  border: 1px solid rgba(252, 211, 77, .8); border-radius: 999px;
  background: rgba(255, 255, 255, .9); padding: .25rem .75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  flex-shrink: 0;
}
.hermes-badge-svg { height: 1.5rem; width: auto; display: block; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.kopbeeld { margin: 0 0 2rem; }
/* Schema's in de tekst: inline SVG uit src/Schema.php, labels uit het contentbestand. */
.schema { margin: 1rem 0 1.5rem; }
.schema-svg { display: block; width: 100%; height: auto; }
.schema-svg text { font-family: inherit; }
.schema-svg .stuk { stroke: var(--schema-rand); stroke-width: 2; }
.schema-svg .stuk-open, .schema-svg .stuk-controle { fill: var(--schema-open); }
.schema-svg .stuk-geheim { fill: var(--schema-geheim); }
.schema-svg .stuk-label { fill: #fff; font-size: 30px; font-weight: 600; }
.schema-svg .stuk-onder { fill: var(--fg); font-size: 24px; }
.kopbeeld img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); border: 1px solid var(--line);
}
@media (prefers-color-scheme: dark) {
  /* De illustraties hebben een warm papieren fond; iets dempen in donkere modus. */
  .kopbeeld img { filter: brightness(.88) saturate(.95); }
}

/* eID-pagina's
 *
 * Deze pagina's renderen buiten templates/layout.php en hadden hun opmaak in
 * style="…"-attributen staan. Dat werkte niet: de CSP kent geen
 * 'unsafe-inline' voor style-src, dus de browser gooide ze weg zonder
 * foutmelding. Vandaar klassen.
 */

.eid-page { padding-block: 2.5rem; }
.eid-redirect { padding-block: 3rem; }
.eid-foto { max-width: 200px; border-radius: var(--radius); }
.eid-terug { margin-top: 2rem; }

/* Vingerafdrukken zijn 64 tekens zonder spatie: zonder word-break duwen ze de
 * tabel op een telefoon buiten het scherm. */
.fingerprint {
  font-family: var(--mono); font-size: .78rem; word-break: break-all;
}

/* Voor lezers van vijftien
 *
 * Elk woord dat een lezer misschien niet kent, wordt uitgelegd vóór het
 * gebruikt wordt — in een kader dat eruitspringt maar niet schreeuwt. En
 * elke demo begint met genummerde stappen, want "probeer het zelf" zonder
 * te zeggen wát je moet proberen, is een lege uitnodiging.
 */

.woorden {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: .9rem 1.1rem; margin: 1.5rem 0; background: var(--accent-soft);
  font-size: .95rem;
}

/* Kader rond een groep formules. Losse formules in de lopende tekst houden
   gewoon .formule; dit is voor het geval waarin ze samen één geheel vormen. */
.formules {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.2rem; margin: 1.5rem 0; background: var(--accent-soft);
}
.formules .formule { margin: 0; }
.formules .formule + .formule { margin-top: .6rem; }
.woorden > p:first-child { margin-top: 0; font-weight: 600; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.woorden dl { margin: 0; }
.woorden dt { font-weight: 600; margin-top: .6rem; }
.woorden dt:first-of-type { margin-top: 0; }
.woorden dd { margin: .15rem 0 0; max-width: 68ch; }

.stappen { counter-reset: stap; list-style: none; padding: 0; margin: .5rem 0 1rem; }
.stappen li {
  counter-increment: stap; position: relative; padding-left: 2.4rem; margin: .55rem 0;
}
.stappen li::before {
  content: counter(stap); position: absolute; left: 0; top: .05rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-weight: 700; font-size: .85rem;
}

.wiskunde {
  margin: 2.5rem 0 0; padding: 1.1rem 1.25rem; border-radius: var(--radius);
  background: var(--warn-bg); border: 1px solid var(--warn-line);
}
.wiskunde > h3 { margin: 0 0 .5rem; font-size: 1rem; }
.wiskunde > h3::before { content: "∑ "; color: var(--warn-line); }

/* De grafiek van de elliptische kromme */

.kromme-canvas {
  display: block; width: 100%; max-width: 560px; aspect-ratio: 1 / 1;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  cursor: crosshair; touch-action: none; margin: .75rem 0;
}
.kromme-status { font-size: .9rem; color: var(--muted); min-height: 1.4em; margin: .25rem 0 0; }
.kromme-status strong { color: var(--fg); }

/* Formules leesbaar houden zonder externe bibliotheek */
.formule { font-family: "Cambria Math", "STIX Two Math", Georgia, serif; font-size: 1.2em; font-style: italic; }
.formule sup { font-style: normal; font-size: .7em; }

/* Geheime post
 *
 * De sleutelkaart is het tastbare stuk van de site: iets dat je print en in je
 * portefeuille steekt, naast je eID. Op het scherm een kaartje; op papier
 * blijft alleen dat kaartje over.
 */

.sleutelkaart {
  max-width: 24rem; margin: 1.5rem 0; padding: 1.1rem 1.3rem;
  border: 2px solid var(--accent); border-radius: 12px; background: var(--bg);
  break-inside: avoid;
}
.sleutelkaart h3 { margin: 0 0 .2rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.sleutelkaart-naam { margin: 0 0 .8rem; font-size: 1.5rem; font-weight: 700; }
.sleutelkaart-label { margin: .7rem 0 .15rem; font-size: .75rem; color: var(--muted); }
.sleutelkaart-code { margin: 0; font-family: var(--mono); font-size: .72rem; word-break: break-all; line-height: 1.45; }

.vrienden { list-style: none; padding: 0; margin: .5rem 0 0; }
.vrienden li { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.vrienden code { font-size: .78rem; }
.vrienden button { margin: 0; padding: .25rem .6rem; font-size: .8rem; }

/* Een link die er als knop uitziet: de WhatsApp-deelknop is een echte link
 * (wa.me), en dat hoort hij te blijven — hij opent een andere app. */
.demo a.knop {
  display: inline-block; font-size: .9rem; font-weight: 600; text-decoration: none;
  background: var(--accent); color: #fff; padding: .5rem 1rem; border-radius: 4px; margin: .9rem .4rem 0 0;
}
.demo a.knop::before { content: "💬 "; }

.demo details { margin-top: 1.25rem; }
.demo summary { cursor: pointer; font-size: .9rem; color: var(--accent); }
.demo input[type=checkbox] { margin-right: .4rem; }
.demo .privacy label { display: inline; font-weight: 400; font-size: inherit; margin: 0; }
#gp-geheim.out { user-select: all; }

@media print {
  /* Alleen de sleutelkaart. Alles wat op de pagina staat en geen kaart is, weg. */
  body.print-sleutelkaart .site-header,
  body.print-sleutelkaart .sidebar,
  body.print-sleutelkaart .site-footer,
  body.print-sleutelkaart .pager,
  body.print-sleutelkaart .skip,
  body.print-sleutelkaart main > :not(#gp-kaart-print) { display: none !important; }
  body.print-sleutelkaart .layout { display: block; padding: 0; }
  body.print-sleutelkaart .sleutelkaart { border-color: #000; color: #000; background: #fff; }
  body.print-sleutelkaart .sleutelkaart h3, body.print-sleutelkaart .sleutelkaart-label { color: #000; }
}