/* ------------------------------------------------------------------
   huisartsen duinrand — online booking (afspraak.huisartsenduinrand.be)
   Tokens, fonts and buttons follow huisartsenduinrand.be (site.css); scripts/sync-assets.sh checks the colours.
   Most patients are older: running text 17px, nothing under 15px, text colours at 7:1, big targets.
------------------------------------------------------------------ */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/newsreader-latin-wght.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/nunito-sans-latin-wght.woff2') format('woff2');
}
/* Metric-matched fallbacks (ratios from huisartsenduinrand.be): no layout shift when the web fonts arrive. */
@font-face {
  font-family: 'Nunito Sans Fallback';
  font-weight: 100 549;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica');
  size-adjust: 101.01%;
  ascent-override: 100.09%;
  descent-override: 34.95%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Nunito Sans Fallback';
  font-weight: 550 900;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Bold');
  size-adjust: 96.39%;
  ascent-override: 104.89%;
  descent-override: 36.62%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Newsreader Fallback';
  src: local('Times New Roman'), local('TimesNewRomanPSMT'), local('Liberation Serif'), local('Times');
  size-adjust: 106.38%;
  ascent-override: 69.09%;
  descent-override: 24.91%;
  line-gap-override: 0%;
}

:root {
  --shell: #FBF9F4;
  --sand: #F1E8D8;
  --rose: #EEE4E5;
  --foam: #E1F2F3;
  --sky: #A5DCE1;
  --sea: #28aeb5;
  --deep: #17747a;
  --deep2: #0e5459;
  --ink: #163436;
  --muted: #3A5356;
  --line: rgba(23, 116, 122, .16);
  --brand-bordeaux: #6B2A35;
  --accent: var(--brand-bordeaux);
  --accent-ink: #FAF7F7;
  --focus: var(--ink);
  --error: #9b1c2c;  /* 7.4:1 on shell */
  --ok: #1d6b3a;
  --serif: 'Newsreader', 'Newsreader Fallback', Georgia, serif;
  --sans: 'Nunito Sans', 'Nunito Sans Fallback', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--shell);
  font: 400 1.0625rem/1.65 var(--sans);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; padding-block: 1.5rem 3rem; }
a { color: var(--deep2); text-underline-offset: .15em; }
a:hover { color: var(--ink); }
img { max-width: 100%; display: block; height: auto; }
picture { display: contents; }
h1, h2 { font-family: var(--serif); font-weight: 500; color: var(--deep); line-height: 1.2; }
h1 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.375rem); margin: .25rem 0 1rem; }
h2 { font-size: 1.375rem; margin: 1.5rem 0 .5rem; }
p { margin: 0 0 1rem; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 1rem; top: -4rem; background: var(--ink); color: #fff; padding: .5rem 1rem; border-radius: 8px; z-index: 30; }
.skip-link:focus { top: 1rem; }
.muted { color: var(--muted); }
/* Side margins as on huisartsenduinrand.be: 24px, 16px only on small phones (below). */
.wrap { width: 100%; max-width: 46rem; margin-inline: auto; padding-inline: 24px; }
.icon { width: 1.1em; height: 1.1em; flex: none; }

/* ---------------------------------------------------------------- header / footer */
/* Header, language switch and call button as on huisartsenduinrand.be (site.css .site-header, .lang-switch, .phone-btn). */
.top { background: var(--shell); border-bottom: 1px solid var(--line); }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 14px; }
.brand { display: block; flex: none; line-height: 0; }
/* The wave hangs into the margin, so the D's stem lines up with the text below (stem edge at 16.9 of 61.25,
   logo.php). 42px is 155px wide, above the logo's 150px minimum. */
.brand-lockup { --logo-h: 42px; display: block; height: var(--logo-h); width: auto; margin-left: calc(var(--logo-h) * -.276); }
.top-tools { display: flex; align-items: center; gap: 10px; }
.lang-switch { display: flex; gap: 4px; padding: 3px; background: var(--foam); border-radius: 999px; flex: none; }
.lang-switch a {
  display: flex; align-items: center; min-height: 38px; padding: 6px 14px; border: 2px solid transparent;
  border-radius: 999px; font: 700 .9375rem/1.25 var(--sans); color: var(--ink); text-decoration: none;
}
.lang-switch a:hover { background: rgba(255, 255, 255, .7); }
.lang-switch a[aria-current="true"] { background: var(--deep2); color: #fff; }
/* "Bel" on phones, the number from 35em; the number stays in the link's name for screen readers. */
.call {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px;
  border: 2px solid transparent; border-radius: 8px; background: var(--deep2); color: #fff;
  font: 700 1.0625rem/1.25 var(--sans); text-decoration: none;
}
.call:hover { color: #fff; background: var(--ink); }
.call-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Phones: no room for both languages next to the logo (the site moves them into its menu), so only the other one. */
@media (max-width: 34.99em) {
  .lang-switch a[aria-current="true"] { display: none; }
}
.foot { background: var(--deep2); color: #fff; padding-block: 1.5rem; font-size: .9375rem; --focus: #fff; }
.foot a { color: #fff; }
.foot p { margin: 0 0 .5rem; }
.urgent { font-weight: 700; }

/* ---------------------------------------------------------------- steps */
.steps ol { list-style: none; display: flex; gap: .25rem; margin: 0 0 1rem; padding: 0; flex-wrap: wrap; align-items: center; font-size: .9375rem; }
.steps li { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--muted); padding: 0 .7rem 0 .25rem; border-radius: 999px; }
.steps .num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--line); font-weight: 700; line-height: 1; }
/* Nunito Sans has more room above its glyphs than below, so centred line boxes look low: trim to the cap height. */
.steps .num > span, .steps .step-name { display: block; line-height: 1; text-box: trim-both cap alphabetic; }
.steps .done .num { background: var(--foam); border-color: var(--foam); color: var(--deep2); }
.steps .current { background: var(--foam); color: var(--ink); font-weight: 700; }
.steps .current .num { background: var(--deep); border-color: var(--deep); color: #fff; }
/* Done steps lead back to their page: a full 44px target, underlined like any link. */
.steps li:has(.step-link) { padding: 0; }
.step-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .7rem 0 .25rem; border-radius: 999px; color: var(--deep2); text-decoration: none; }
.step-link .step-name { text-decoration: underline; text-underline-offset: 4px; }
.step-link:hover { background: var(--foam); color: var(--ink); }

/* ---------------------------------------------------------------- buttons, panels */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px;
  border: 2px solid transparent; border-radius: 9px; font: 700 1.0625rem/1.25 var(--sans); text-decoration: none; cursor: pointer;
}
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { color: var(--accent-ink); filter: brightness(1.08); }
.btn-accent[aria-busy="true"] { filter: saturate(.6); cursor: progress; }
.btn-ghost { background: transparent; color: var(--deep2); border-color: var(--deep2); }
.btn-ghost:hover { background: var(--foam); }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.small-title { font-size: 1.125rem; margin-top: 0; }
.callout { background: var(--foam); border-radius: 12px; padding: 1rem 1.25rem; }

/* Running text (the privacy statement), styled like the main site's text blocks: muted text, round dots for bullets. */
.prose p, .prose li { color: var(--muted); }
.prose h2 { margin-top: 2.25rem; }
.prose ul { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .625rem; }
.prose li { display: flex; gap: .75rem; line-height: 1.6; }
/* Long addresses (gegevensbeschermingsautoriteit.be) break instead of widening the page on phones. */
.prose a { overflow-wrap: anywhere; }
.prose li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--deep); margin-top: .6em; }
.callout.error { background: var(--rose); color: var(--error); border-left: 5px solid var(--error); }
.back { display: inline-flex; gap: .4rem; min-height: 44px; align-items: center; font-weight: 700; }
.summary { margin: 0 0 1rem; display: grid; gap: .25rem; }
.summary div { display: flex; gap: .75rem; flex-wrap: wrap; }
.summary dt { color: var(--muted); min-width: 4.5rem; }
.summary dd { margin: 0; font-weight: 700; }

/* ---------------------------------------------------------------- notice gate (overlay until acknowledged) */
.gate {
  position: fixed; inset: 0; z-index: 20; background: rgba(22, 52, 54, .55); display: flex;
  align-items: flex-start; justify-content: center; overflow-y: auto; padding: 1rem;
}
.gate-card {
  background: var(--shell); border-radius: 14px; max-width: 40rem; width: 100%; margin-block: 1rem auto;
  padding: 1.5rem; box-shadow: 0 18px 48px rgba(0, 0, 0, .25); border-top: 6px solid var(--accent);
}
.gate-card h1 { margin-top: 0; }
.notice { border-top: 1px solid var(--line); padding-top: .75rem; margin-bottom: 1rem; }
.notice h2 { margin-top: 0; font-size: 1.25rem; }
.behind-gate { filter: blur(2px); }
dialog.gate-dialog { border: 0; padding: 0; background: transparent; max-width: 40rem; width: calc(100% - 2rem); }
dialog.gate-dialog::backdrop { background: rgba(22, 52, 54, .55); }
dialog.gate-dialog .gate-card { margin: 0; }

/* ---------------------------------------------------------------- calendar */
.cal { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1rem; }
.cal-head { display: grid; grid-template-columns: 3rem 1fr 3rem; align-items: center; margin-bottom: .5rem; }
.cal-title { margin: 0; text-align: center; font-size: 1.375rem; }
.cal-title::first-letter { text-transform: uppercase; }
.cal-nav {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; text-decoration: none;
  font-size: 1.375rem; font-weight: 700;
}
a.cal-nav:hover { background: var(--foam); }
.cal-grid { width: 100%; border-collapse: separate; border-spacing: .25rem; table-layout: fixed; }
.cal-grid th { font-weight: 700; color: var(--muted); font-size: .9375rem; padding-bottom: .25rem; }
.cal-grid abbr { text-decoration: none; }
.cal-grid td { padding: 0; text-align: center; }
.day {
  display: grid; place-items: center; aspect-ratio: 1; min-height: 44px; border-radius: 10px; color: #56676a;
  font-variant-numeric: tabular-nums;
}
.day.free {
  color: var(--deep2); background: var(--foam); border: 2px solid var(--deep); font-weight: 700; text-decoration: none;
  font-size: 1.125rem;
}
.day.free:hover { background: var(--deep); color: #fff; }
/* Today: a dot under the number, not a frame or underline, so it never reads as a selection or as free. */
.day.today { position: relative; }
.day.today::after {
  content: ""; position: absolute; left: 50%; bottom: 12%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: currentColor;
}
.day.free.today:hover::after { background: #fff; }
.legend { margin: .5rem 0 0; font-size: .9375rem; }
/* "Bel de praktijk" under the calendar: its own tile, not glued to the calendar. */
.cal + .callout { margin: 1.25rem 0 1.5rem; padding: 1.25rem 1.5rem; }

/* ---------------------------------------------------------------- choices: type, doctor, time */
.choices, .doctors, .times { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .75rem; }
.choice, .doctor-card {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: #fff; border: 2px solid var(--line);
  border-radius: 14px; text-decoration: none; color: var(--ink); min-height: 64px;
}
.choice:hover, .doctor-card:hover { border-color: var(--deep); background: var(--foam); color: var(--ink); }
.choice-title, .doctor-name { font-weight: 700; font-size: 1.1875rem; color: var(--deep2); display: block; }
.choice-arrow { margin-left: auto; font-size: 1.5rem; color: var(--deep); }
.doctor-text { display: grid; }
.portrait { flex: none; width: 96px; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--foam); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait-placeholder { width: 100%; height: 100%; display: grid; place-items: center; }
.portrait-placeholder svg { width: 62%; fill: var(--deep); stroke: var(--deep); opacity: .35; }
.group-title { font-size: 1.125rem; margin: 1rem 0 .5rem; }
.times { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }
.time {
  display: grid; place-items: center; min-height: 52px; border-radius: 10px; background: #fff; border: 2px solid var(--deep);
  color: var(--deep2); font-weight: 700; font-size: 1.125rem; text-decoration: none; font-variant-numeric: tabular-nums;
}
.time:hover { background: var(--deep); color: #fff; }
/* "Geen voorkeur": every time says with whom. */
.times.with-doctor { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.with-doctor .time { padding: .4rem .75rem; text-align: center; line-height: 1.3; }
.time-doctor { display: block; font-weight: 400; font-size: .9375rem; }

/* ---------------------------------------------------------------- form */
.form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: .25rem; }
.field label { font-weight: 700; }
.hint { color: var(--muted); font-size: .9375rem; margin: 0; }
.field input, .field textarea {
  font: inherit; color: var(--ink); background: #fff; border: 2px solid #6d8486; border-radius: 9px; padding: .7rem .8rem;
  min-height: 48px; width: 100%;
}
.field input:focus, .field textarea:focus { border-color: var(--deep); }
.has-error input, .has-error textarea { border-color: var(--error); border-width: 3px; }
.field-error { color: var(--error); font-weight: 700; margin: 0; }
.error-summary { border: 3px solid var(--error); border-radius: 12px; padding: 1rem 1.25rem; background: #fff; margin-bottom: 1.5rem; }
.error-summary h2 { margin-top: 0; color: var(--error); font-size: 1.25rem; }
.error-summary ul { margin: 0; padding-left: 1.25rem; }
.error-summary a { color: var(--error); font-weight: 700; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0; }

/* ---------------------------------------------------------------- thank you */

@media (min-width: 35em) {
  main { padding-block: 2rem 4rem; }
  .call { padding-inline: 16px; }
  .call-full { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .call-short { display: none; }
  .portrait { width: 120px; }
  .gate { align-items: center; }
}
@media (min-width: 47.5em) {
  .brand-lockup { --logo-h: 54px; }
}
/* Small phones, as on huisartsenduinrand.be: 16px margins, and the logo no longer hangs into them. */
@media (max-width: 23.75em) {
  .wrap { padding-inline: 16px; }
  .top-inner, .top-tools { gap: 8px; }
  .brand-lockup { margin-left: 0; }
  .lang-switch a { padding-inline: 10px; }
  .call { padding-inline: 10px; }
  .call-short { display: none; }
  .cal { padding: .5rem; }
  .cal-grid { border-spacing: .15rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}
@media print {
  .top-tools, .steps, .foot, .back, .btn { display: none !important; }
}

[tabindex="-1"]:focus { outline: none; }