/* =====================================================
   Amsterdam Travel Clinic — modern site stylesheet
   Huisstijl turquoise, layout afgeleid van HapDeMakroon.
   ===================================================== */

/* OpenDyslexic — self-hosted (SIL OFL). url() is relatief t.o.v. dit CSS-bestand,
   dus werkt op elke paginadiepte. */
@font-face {
  font-family: "Open-Dyslexic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("OpenDyslexic"), local("Open-Dyslexic"),
       url("assets/fonts/opendyslexic-400.woff2") format("woff2");
}
@font-face {
  font-family: "Open-Dyslexic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("OpenDyslexic Bold"), local("OpenDyslexic-Bold"),
       url("assets/fonts/opendyslexic-700.woff2") format("woff2");
}

:root {
  /* brand — Amsterdam Travel Clinic (goud, uit het logo)

     Het logo bestaat uit twee kleuren: #d8b74b (goud) en #563418 (donkerbruin).
     Daartussen ligt dit palet: naarmate een tint donkerder wordt schuift hij van
     de goudtoon naar de bruine, precies zoals het logo zelf doet.

     Het logogoud kan géén knopkleur zijn: wit erop haalt 1,95:1, ver onder de
     4,5:1 van WCAG AA. Donkere tekst erop haalt juist 10,79:1. Het goud is dus
     de decoratieve signatuur (--accent) en een diepere tint uit dezelfde reeks
     draagt de knoppen en links.

     Elke waarde is gekozen op het contrast van de turquoise tint die hij
     vervangt, zodat de verhoudingen in het ontwerp gelijk blijven. */
  --brand: #865923;            /* diep goudbrons — primaire actie (wit-op-brand 6.06:1, was 5.98:1) */
  --brand-dark: #6d451d;       /* hover/actief (wit 8.34:1, was 8.40:1) */
  --brand-soft: #f8f4e7;       /* zachte goudtint als vlak (was #e6f7f7) */
  --accent: #d8b74b;           /* het logogoud zelf — decoratieve pop (glow/onderstreping) */
  --gold: #cb9b2f;             /* levendig goud — secundair, dots/iconen (decoratief, geen tekst) */
  --gold-ink: #865923;         /* tekst-veilig goudbrons — WCAG AA op wit, gelijk aan --brand */
  --gold-deep: #754b1f;        /* achtergrond voor de donkere sectie (wit 7.55:1, was 7.53:1) */
  --gold-soft: #f8f4e7;

  /* neutrals */
  --bg: #ffffff;
  --bg-soft: #f7f6f3;          /* warm crème */
  --bg-alt: #f1efe9;
  --ink: #131313;
  --ink-2: #2a2a2a;
  --muted: #5d5d5d;            /* AA op wit (≥4.5:1) en op crème (#f7f6f3) */
  --line: #e8e6e0;
  --focus: #0a58c2;            /* duidelijk zichtbare focus-ring */

  /* dark section */
  /* Warm donker in plaats van het koele turquoise-zwart; even licht als voorheen
     (wit erop 16,98:1 en 15,33:1, was 16,93 en 15,32). */
  --dark: #261a0f;
  --dark-2: #312214;

  /* layout */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --maxw: 1200px;
  --shadow-sm: 0 1px 2px rgba(15,15,15,.04), 0 2px 8px rgba(15,15,15,.04);
  --shadow-md: 0 4px 12px rgba(15,15,15,.06), 0 12px 32px rgba(15,15,15,.06);
  --shadow-lg: 0 24px 60px rgba(15,15,15,.10);

  /* type */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  font-size: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Toegankelijkheid: tekstgrootte (schaalt met html-root) */
html.a11y-text-size-sm { font-size: 87.5%; }
html.a11y-text-size-md { font-size: 100%; }
html.a11y-text-size-lg { font-size: 125%; }
/* Joomla-export: vaste inline font-size (pt/px) overstemt anders de html-root; map naar em t.o.v. omliggende rem */
html.a11y-text-size-sm .legacy-page-content [style*="font-size"] { font-size: 0.875em !important; }
html.a11y-text-size-md .legacy-page-content [style*="font-size"] { font-size: 1em !important; }
html.a11y-text-size-lg .legacy-page-content [style*="font-size"] { font-size: 1.2em !important; }

/* Hoge saturatie (hele pagina) — isolation vermindert WebKit-compositing-randen bij filter op root */
html.a11y-high-saturation {
  filter: saturate(1.45);
  isolation: isolate;
}

/* Toegankelijkheid: extra grote cursor */
html.a11y-large-cursor,
html.a11y-large-cursor body,
html.a11y-large-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='%23111111' stroke='%23ffffff' stroke-width='3.2' stroke-linejoin='round' d='M4 2v42l12-11 8 15 7-3-7-15h20L4 2z'/%3E%3C/svg%3E") 6 4, auto !important;
}
html.a11y-large-cursor :is(input[type='text'], input[type='email'], input[type='tel'], input[type='url'], input[type='search'], input[type='password'], input[type='number'], textarea) {
  cursor: text !important;
}

/* Toegankelijkheid: dyslexie-lettertype */
html.a11y-dyslexia-font {
  --font-sans: "Open-Dyslexic", Arial, sans-serif;
  --font-display: "Open-Dyslexic", Arial, sans-serif;
}
html.a11y-dyslexia-font body {
  letter-spacing: 0.015em;
  word-spacing: 0.04em;
}
html.a11y-dyslexia-font :is(button, input, select, textarea) {
  font-family: var(--font-sans);
}
html.a11y-dyslexia-font .legacy-page-content [style*="font-family"] {
  font-family: var(--font-sans) !important;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--brand); }

/* TOEGANKELIJKHEID — focus, skip link, sr-only */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Op donkere/teal achtergronden een lichte focus-ring */
.section-dark :focus-visible,
.footer :focus-visible,
.mobile-bar-book:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
  outline-color: #ffffff;
  box-shadow: 0 0 0 6px rgba(10,88,194,.55);
}
/* Main krijgt geen ring zelf, alleen kinderen (skip link landingspunt) */
main:focus,
main:focus-visible { outline: none; }

.skip-link {
  position: fixed;
  left: 16px;
  top: -200px;
  z-index: 10000;
  background: var(--ink);
  color: #fff;
  padding: 14px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  /* Geen transform: fixed + transform geeft in WebKit soms een extra compositing-strook bovenaan */
  transition: top .15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 16px;
  color: #fff;
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 .5em;
  color: var(--ink);
  letter-spacing: -0.025em;
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 700; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; }
h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; }
h4 { font-size: 1rem; font-family: var(--font-sans); font-weight: 600; letter-spacing: .02em; }
h5 { font-size: .85rem; font-family: var(--font-sans); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); }

p { margin: 0 0 1em; color: var(--ink-2); }
.muted { color: var(--muted); }
.small { font-size: .9rem; }

/* LAYOUT */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: clamp(64px, 9vw, 120px) 0;
}
.section-alt { background: var(--bg-soft); }
.section-dark {
  background: var(--gold-deep);
  color: #ffffff;
}
.section-dark p { color: #ffffff; }
.section-dark h2,
.section-dark h3,
.section-dark h4 { color: #fff; }

.section-head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-head p { font-size: 1.05rem; }
.section-head-light .section-eyebrow { color: #ffffff; }
.section-head-light .section-eyebrow::before { background: #ffffff; }

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--brand);
  margin-bottom: 14px;
}
.section-eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--brand);
  display: inline-block;
}

/* TOPBAR */
.topbar {
  position: relative;
  z-index: 60;
  background: #f3f1ec;
  border-bottom: 1px solid var(--line);
  font-size: .85rem;
  color: var(--ink-2);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  gap: 16px;
}
.topbar-info { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
}
.topbar-link:hover { color: var(--brand); }
.topbar-hours { color: var(--muted); }

/* Rechterkant van de topbar: uitwijkplek voor 'Afspraak maken' plus de vlaggen.
   Op tussenbreedtes past de knop niet meer op één regel in het menu; script.js
   zet dan body.cta-in-topbar en verhuist hem hierheen. Zie ook .nav-cta-wrap. */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
/* Twee klassen diep: .btn staat verderop in dit bestand en zou met een enkele
   klasse anders winnen met zijn display: inline-flex. */
.topbar-right .topbar-cta {
  display: none;
  padding: 6px 14px;
  font-size: .8rem;
  box-shadow: none;
}
/* Bewust in een min-width query: onder 981px neemt het offcanvas-menu het over
   (en staat 'Afspraak maken' al in de vaste balk onderin), dus daar mag deze
   omwisseling nooit gelden. */
@media (min-width: 981px) {
  body.cta-in-topbar .topbar-cta { display: inline-flex; }
  body.cta-in-topbar .nav-cta-wrap { display: none; }
}

/* Taalkiezer (NL / EN) — vlaggen als SVG */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.lang-switch-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 22px;
  padding: 0;
  border-radius: 4px;
  border: 1.5px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.lang-switch-item[href]:hover {
  border-color: rgba(134,89,35, 0.35);
  box-shadow: 0 2px 8px rgba(15, 15, 15, 0.08);
}
.lang-switch-item[href]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.lang-switch-item.lang-switch-current {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px rgba(15, 15, 15, 0.08);
  cursor: default;
}
/* Taalkeuze en contactgegevens binnen het offcanvas-menu. Op desktop staan die
   in de topbar; deze twee blokken bestaan alleen voor de mobiele weergave. */
.nav-mobile-lang,
.nav-mobile-contact { display: none; }

.lang-flag {
  display: block;
  width: 26px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 0.5px rgba(15, 15, 15, 0.12);
}

/* HEADER */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.header.scrolled {
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
  background: rgba(255,255,255,.95);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 88px;
  gap: 24px;
}

.cta-note {
  margin-top: 10px;
  font-size: .95rem;
  opacity: .85;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--brand);
  line-height: 0;
}
.logo-img {
  display: block;
  width: auto;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.logo-img-full {
  /* ATC_Logo.svg is een breed woordmerk (709x156). Op hoogte sturen zou het
     ~4,5x zo breed maken als hoog; daarom op breedte begrenzen. */
  width: 200px;
  max-width: 100%;
  height: auto;
}
.logo-footer {
  background: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  display: inline-flex;
}
.logo-footer img { width: 190px; max-width: 100%; height: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav a {
  font-size: .95rem;
  font-weight: 500;
  position: relative;
}
.nav a:not(.btn) {
  color: var(--ink-2);
}
.nav a:not(.btn):hover { color: var(--brand); }
.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav a:not(.btn):hover::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 40px; height: 40px;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
  margin: 4px auto;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-sm { padding: 9px 16px; font-size: .85rem; }
.btn-lg { padding: 16px 28px; font-size: 1rem; }

.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 16px rgba(134,89,35,.22);
}
.btn-primary:hover { background: var(--brand-dark); color: #fff; }

.btn-secondary {
  background: var(--ink);
  color: #fff;
}
.btn-secondary:hover { background: #000; color: #fff; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: #8b8779;
}
.btn-ghost:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* HERO */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 8vw, 110px) 0 clamp(64px, 8vw, 120px);
  background:
    radial-gradient(900px 480px at 90% -10%, rgba(194,172,101,.18), transparent 60%),
    radial-gradient(700px 480px at -10% 110%, rgba(134,89,35,.08), transparent 60%),
    linear-gradient(180deg, #fbf9f4 0%, #f7f6f3 100%);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(transparent 31px, rgba(15,15,15,.04) 32px),
    linear-gradient(90deg, transparent 31px, rgba(15,15,15,.04) 32px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%);
  pointer-events: none;
  opacity: .5;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 56px;
  align-items: center;
}
.hero-content { max-width: 720px; }
.hero h1,
.page-sub-title {
  margin-bottom: 18px;
}
.hero h1 .accent,
.page-sub-title .accent {
  color: var(--brand);
  font-weight: 700;
  background-image: linear-gradient(transparent 78%, rgba(216,183,75,.55) 78%, rgba(216,183,75,.55) 96%, transparent 96%);
  background-repeat: no-repeat;
  padding: 0 0.05em;
}
.hero .lead {
  font-size: 1.15rem;
  color: var(--ink-2);
  max-width: 60ch;
}
.hero .lead-tight {
  margin-bottom: 4px;
  font-size: 1.08rem;
  max-width: 65ch;
}
.hero .lead-tight + .lead {
  margin-top: 14px;
}
.hero-guide {
  font-size: .88rem;
  margin: 8px 0 0;
}
.hero-guide a {
  color: var(--gold-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero-guide a:hover {
  color: var(--brand);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 28px 0 14px;
}
.hero-fineprint {
  font-size: .8rem;
  color: var(--muted);
  margin-top: 10px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
.eyebrow .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(194,172,101,.18);
}

/* HERO VISUAL */
.hero-visual {
  position: relative;
  isolation: isolate;
}
.hero-photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-lg);
  background: var(--bg-alt);
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform .8s ease;
}
.hero-visual:hover .hero-photo img { transform: scale(1.05); }
.hero-photo-glow {
  position: absolute;
  inset: -40% -20% auto auto;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(216,183,75,.6), transparent 65%);
  filter: blur(40px);
  z-index: -1;
}
.hero-floating-card,
.page-status-card,
.page-hero-status-panel {
  position: relative;
  /* Vlak, geen verloop: het kaartje oogt rustiger zonder kleurverschuiving. */
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(232,230,224,.92);
  border-radius: 24px;
  padding: 16px 18px;
  box-shadow: 0 24px 56px rgba(48,35,20,.17);
  isolation: isolate;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.hero-floating-card {
  position: absolute;
  left: -22px;
  bottom: 28px;
  min-width: 240px;
  max-width: 78%;
}
/* Ook de gekleurde streep langs de bovenrand is weg. Dat was een verloop van
   drie kleuren over 4px; op het kaartje las dat als een restje in plaats van als
   een accent. Het kaartje leunt nu op zijn rand en schaduw. */
/* De radiale gloed die hier lag is eruit: die legde een warme kleurzweem over
   het kaartje en dat oogde als een vlek in plaats van een accent. De kaartjes
   zijn nu egaal. (--status-glow-x/-y werden door niets gezet; de gloed stond dus
   altijd op dezelfde plek.) */
.hero-floating-card > *,
.page-status-card > *,
.page-hero-status-panel > * {
  position: relative;
  z-index: 1;
}
.hero-floating-card hr,
.page-status-card hr,
.page-hero-status-panel hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 12px 0;
}
.hero-floating-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
  color: var(--ink-2);
  flex-wrap: wrap;
}
.hero-floating-card-row strong { color: var(--ink); }
.hero-floating-card-row .muted { margin-left: auto; }
.pulse {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #2bb673;
  position: relative;
  flex-shrink: 0;
}
.pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(43,182,115,.35);
  animation: pulse 2s ease-out infinite;
}
.pulse.is-closed {
  background: var(--brand);
}
.pulse.is-closed::after {
  background: rgba(134,89,35,.32);
}
@keyframes pulse {
  0% { transform: scale(.6); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
.hero-floating-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  font-weight: 600;
}
.hero-floating-phone {
  margin-left: auto;
  font-weight: 700;
  color: var(--brand);
  font-size: 1rem;
}
.hero-floating-phone:hover { color: var(--brand-dark); }

/* TRUST */
.trust {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.trust-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding: 28px 24px;
}
.trust-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.trust-item strong {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--ink);
}
.trust-item span { color: var(--muted); font-size: .9rem; }

/* INTRO */
.intro {
  display: grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 64px;
  align-items: start;
}
.intro-text p { font-size: 1.02rem; }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-elevated {
  box-shadow: var(--shadow-md);
}

.hours { list-style: none; padding: 0; margin: 0; }
.hours li {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: .95rem;
  border-bottom: 1px dashed var(--line);
}
.hours li:last-child { border-bottom: 0; }
.hours li.muted { color: var(--muted); }
.card hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 18px 0;
}

/* GRIDS */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* SERVICE CARD */
.service { display: flex; flex-direction: column; gap: 10px; }
.service:hover {
  transform: translateY(-3px);
  border-color: rgba(134,89,35,.18);
  box-shadow: var(--shadow-md);
}
.service .icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-soft);
  color: var(--gold-ink);
  margin-bottom: 6px;
}
.service h3 { margin: 0; }

/* HIGHLIGHT */
.highlight {
  position: relative;
  padding: 36px;
  background:
    linear-gradient(180deg, #fff 0%, #fff 100%);
}
.highlight::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(194,172,101,.5), rgba(134,89,35,.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--gold-soft);
  color: var(--gold-ink);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

/* DARK CARDS */
.card-dark {
  background: var(--dark-2);
  border: 1px solid rgba(255,255,255,.07);
  color: #d9d5c8;
  box-shadow: none;
}
.card-dark h3 { color: #fff; }
.card-dark:hover {
  border-color: rgba(216,183,75,.55);
  transform: translateY(-3px);
}

/* PHOTO CARDS (used in teal section) */
.card-photo {
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255,255,255,.6);
  color: var(--ink-2);
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 18px 40px -22px rgba(38,26,15,.45),
    0 4px 12px -8px rgba(38,26,15,.25);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
  position: relative;
}
.card-photo-image {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
}
.card-photo-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(38,26,15,.18) 100%);
  pointer-events: none;
}
.card-photo-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.card-photo:hover .card-photo-image img { transform: scale(1.07); }
.card-photo-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  color: var(--gold-ink);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 6px 11px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(38,26,15,.22);
}
.card-photo-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.card-photo-body {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.card-photo-body h3 {
  color: var(--ink);
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: -.01em;
}
.card-photo-body p {
  color: var(--ink-2);
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
}
.card-photo-link {
  margin-top: auto;
  padding-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: .92rem;
  color: var(--gold-ink);
  align-self: flex-start;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(117,75,31,.35);
}
.card-photo-link:hover {
  text-decoration-color: var(--brand);
}
.card-photo-link svg {
  width: 14px;
  height: 14px;
  transition: transform .2s ease;
}
.card-photo:hover .card-photo-link svg { transform: translateX(3px); }
.card-photo:hover {
  transform: translateY(-6px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 32px 60px -24px rgba(38,26,15,.55),
    0 8px 20px -10px rgba(38,26,15,.30);
}

/* IN BEELD - photo grid op lichte sectie */
.section-tight { padding: clamp(48px, 7vw, 88px) 0; }
.photo-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column;
}
.photo-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.photo-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.photo-card figcaption {
  padding: 22px 24px 26px;
}
.photo-card h3 { margin: 0 0 6px; }
.photo-card p { margin: 0; color: var(--muted); font-size: .95rem; }

/* HIGHLIGHT WITH IMAGE */
.highlight-with-image {
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 38% 1fr;
  align-items: stretch;
}
.highlight-with-image .highlight-image {
  overflow: hidden;
}
.highlight-with-image .highlight-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 240px;
  transition: transform .6s ease;
}
.highlight-with-image:hover .highlight-image img { transform: scale(1.05); }
.highlight-with-image .highlight-body {
  padding: 32px 32px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* CTA SECTION */
.cta-section {
  background:
    radial-gradient(700px 360px at 100% 0%, rgba(194,172,101,.20), transparent 60%),
    linear-gradient(135deg, #fbf9f4 0%, #f1efe9 100%);
}
.cta-grid {
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 56px;
  align-items: center;
}
.cta-buttons { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }

/* CONTACT */
.contact-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: start;
}
.contact-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 32px 0;
}
.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.contact-card::before {
  content: "";
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--gold);
  opacity: 0;
  transition: opacity .2s ease;
}
.contact-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(216,183,75,.55);
}
.contact-card:hover::before { opacity: 1; }

.contact-card-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--gold-soft);
  color: var(--gold-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contact-card-icon svg { width: 22px; height: 22px; }
.contact-card-body { flex: 1; min-width: 0; }
.contact-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.contact-card h3 {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  margin: 0 0 8px;
  font-weight: 700;
  font-family: var(--font-sans);
  letter-spacing: .14em;
}
.contact-card-head h3 { margin: 0; }
.contact-card address { font-style: normal; margin: 0 0 4px; line-height: 1.55; color: var(--ink); font-size: .98rem; }
.contact-card p { margin: 0 0 4px; font-size: .98rem; line-height: 1.55; color: var(--ink); }
.contact-card p strong { color: var(--ink); font-weight: 600; }
.contact-card a { font-weight: 500; color: var(--ink); }
.contact-card a:hover { color: var(--brand); }

.contact-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
.contact-line:last-child { border-bottom: 0; }
.contact-line-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  min-width: 70px;
  font-weight: 600;
}
.contact-line-spoed a { color: var(--brand); font-weight: 600; }

.contact-card-link {
  display: inline-block;
  margin-top: 10px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--gold-ink) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(117,75,31,.4);
}
.contact-card-link:hover {
  color: var(--brand) !important;
  text-decoration-color: var(--brand);
}

.hours-list { list-style: none; padding: 0; margin: 0; }
.hours-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  font-size: .95rem;
  color: var(--ink);
  border-bottom: 1px dashed var(--line);
}
.hours-list li:last-child { border-bottom: 0; }
.hours-list li span:first-child { color: var(--ink-2); }
.hours-list li span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(19,106,58,.12);
  color: #136a3a;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  transition: background .2s ease, color .2s ease;
}
.status-badge.is-closed {
  background: rgba(134,89,35,.10);
  color: var(--brand);
}
.status-badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255,255,255,.0);
}

.route {
  margin-top: 12px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.route-title {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  margin: 0 0 14px;
  font-weight: 700;
}
.route-list { list-style: none; padding: 0; margin: 0; }
.route-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
  font-size: .95rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.route-list li:last-child { border-bottom: 0; }
.route-list li strong { color: var(--ink); font-weight: 600; }
.route-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--gold-soft);
  color: var(--gold-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.route-icon svg { width: 18px; height: 18px; }

.map-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  box-shadow: var(--shadow-md);
  min-height: 460px;
  display: flex;
  flex-direction: column;
}
/* Locatiekaart (Leaflet + Voyager-tegels van CARTO). Verving de OSM-iframe: die
   was korrelig en druk, en had een 'Kaart activeren'-overlay nodig omdat een
   ingesloten kaart de paginascroll kaapt. Leaflet regelt dat zelf met
   scrollWheelZoom, dus de overlay is vervallen. */
.locatiekaart {
  /* Het kaartscript leest deze kleur uit voor de speld. */
  --pin-kleur: var(--brand);
  flex: 1 1 auto;
  width: 100%;
  min-height: 420px;
  background: var(--bg-alt);
}
.locatiekaart-noscript {
  padding: 20px;
  margin: 0;
  color: var(--ink-2);
}
/* De speld is een divIcon; Leaflet geeft die standaard een witte achtergrond. */
.locatie-pin {
  background: transparent;
  border: 0;
}
.locatie-pin__inner {
  display: block;
  filter: drop-shadow(0 2px 3px rgba(15, 15, 15, 0.35));
}
.locatie-map-popup strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 2px;
}
.locatie-map-popup a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 0;
  font-weight: 600;
  color: var(--brand);
}
.locatie-map-popup a svg { flex: 0 0 auto; }
.map-link {
  display: block;
  padding: 12px 16px;
  background: #fff;
  font-weight: 600;
  font-size: .9rem;
  color: var(--brand);
  border-top: 1px solid var(--line);
}

/* FOOTER */
.footer {
  background: #0f1216;
  color: #c5c8cc;
  padding-top: 64px;
  margin-top: 0;
}
.footer-heading {
  color: #fff;
  margin: 0 0 16px;
  font-size: .85rem;
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer address { font-style: normal; }
.footer ul li { padding: 6px 0; font-size: .92rem; }
.footer a { color: #c5c8cc; }
.footer a:hover { color: var(--gold); }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr)) minmax(0, 1.1fr);
  gap: 32px 28px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.logo-footer .logo-text strong { color: #fff; }
.logo-footer .logo-text small { color: #8b9094; }
.footer-about { margin-top: 16px; max-width: 36ch; color: #9aa0a6; font-size: .92rem; }
.footer-bottom {
  padding: 22px 0;
}
.footer-bottom-inner {
  display: block;
  font-size: 0.85rem;
  color: #8b9094;
}
/* UA makes <small> smaller; we want one consistent size for copy + keurmerken + link */
.footer-bottom-inner small {
  font-size: 1em;
  line-height: 1.45;
}
.footer-bottom-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
  min-width: 0;
  width: 100%;
}
.footer-bottom-copy {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}
.footer-bottom-trust {
  margin: 0 0 0 auto;
  text-align: right;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
.footer .footer-credit-link {
  font: inherit;
  line-height: inherit;
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
  vertical-align: baseline;
  white-space: normal;
}
.footer .footer-credit-link:hover,
.footer .footer-credit-link:focus-visible {
  color: var(--gold);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .hero-inner,
  .intro,
  .cta-grid,
  .contact-grid { grid-template-columns: 1fr; }
  .hero-content { max-width: none; }
  .hero .lead { max-width: 65ch; }
  .hero-visual {
    order: 2;
    max-width: none;
    width: 100%;
    margin-top: 8px;
  }
  .hero-photo { aspect-ratio: 16 / 9; }
  .hero-floating-card {
    left: auto;
    right: 22px;
    bottom: 22px;
    max-width: min(360px, calc(100% - 44px));
  }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-inner { grid-template-columns: repeat(2, 1fr); }
  .highlight-with-image { grid-template-columns: 1fr; }
  .highlight-with-image .highlight-image img { min-height: 220px; aspect-ratio: 16 / 9; }
}

@media (max-width: 720px) {
  .container { padding: 0 18px; }
  .section { padding: clamp(48px, 12vw, 80px) 0; }
  .section-tight { padding: clamp(36px, 10vw, 64px) 0; }
  .section-head { margin: 0 auto 36px; }
  .section-head p { font-size: 1rem; }

  .topbar-info { gap: 14px; font-size: .8rem; }

  .header-inner { min-height: 64px; gap: 12px; }

  .grid-2,
  .grid-3,
  .footer-grid { grid-template-columns: 1fr; }

  .hero { padding: clamp(36px, 10vw, 64px) 0 clamp(40px, 10vw, 70px); }
  .hero-photo { aspect-ratio: 4 / 3; }
  .hero h1,
  .page-sub-title { margin-bottom: 14px; }
  .hero .lead { font-size: 1rem; }
  .hero-actions { flex-direction: column; align-items: stretch; margin: 22px 0 12px; }
  .hero-actions .btn { justify-content: center; }
  .hero-floating-card {
    left: 12px;
    right: 12px;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    max-width: none;
    padding: 12px 14px;
  }
  .hero-floating-card hr { margin: 10px 0; }
  .hero-floating-card-row { font-size: .85rem; }

  .eyebrow { padding: 5px 12px 5px 8px; font-size: .75rem; margin-bottom: 16px; }

  .card { padding: 26px; }
  .highlight { padding: 26px; }
  .highlight-with-image .highlight-body { padding: 24px; }
  .highlight-with-image .highlight-image img { min-height: 200px; }

  .service .icon { width: 46px; height: 46px; border-radius: 12px; }
  .service .icon svg { width: 22px; height: 22px; }

  .photo-card figcaption { padding: 18px 20px 22px; }
  .card-photo-body { padding: 20px 22px 24px; }

  .contact-card { padding: 18px 18px; gap: 14px; border-radius: 16px; }
  .contact-card::before { top: 12px; bottom: 12px; }
  .contact-card-icon { width: 40px; height: 40px; border-radius: 11px; }
  .contact-card-icon svg { width: 20px; height: 20px; }
  .contact-card-head { flex-wrap: wrap; gap: 8px; }
  .contact-line { flex-wrap: wrap; gap: 4px 12px; }
  .contact-line-label { min-width: 0; }

  .route { padding: 18px 20px; }
  .route-icon { width: 30px; height: 30px; border-radius: 8px; }

  .map-card { min-height: 320px; }
  .map-card iframe { min-height: 280px; }

  .trust-inner { grid-template-columns: 1fr; gap: 12px; padding: 24px; }

  .cta-buttons { gap: 10px; }

  .footer { padding-top: 48px; }
  .footer-heading { margin-bottom: 12px; }
  .footer-grid { gap: 28px; padding-bottom: 32px; }
  .footer-bottom-trust {
    width: 100%;
    margin-left: 0;
    text-align: right;
  }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }

  .topbar-info { gap: 12px; font-size: .75rem; }
  .topbar-hours { display: none; }
  .topbar-link[href^="mailto"] { display: none; }

  .hero h1,
  .page-sub-title { font-size: clamp(1.75rem, 8vw, 2.4rem); line-height: 1.15; }
  h2 { font-size: clamp(1.5rem, 6.4vw, 2rem); }
  h3 { font-size: 1.15rem; }

  .btn { padding: 12px 18px; font-size: .9rem; }
  .btn-lg { padding: 14px 22px; font-size: .95rem; }

  .badge { font-size: .68rem; padding: 5px 10px; }

  .card { padding: 22px; border-radius: 16px; }
  .highlight { padding: 22px; }
  .highlight-with-image .highlight-body { padding: 22px; }

  .hours-list li { font-size: .9rem; }
  .contact-card-link { font-size: .88rem; }

  .status-badge { font-size: .68rem; padding: 3px 9px; }

  .section-head { margin: 0 auto 28px; }
  .section-eyebrow { font-size: .72rem; }
}

@media (max-width: 360px) {
  .topbar-info { gap: 8px; }
  .eyebrow { font-size: .7rem; }
  .hero h1,
  .page-sub-title { font-size: clamp(1.6rem, 9vw, 2.1rem); }
}

/* MOBIELE ACTIEBALK */
.mobile-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(15,18,22,.10);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  gap: 10px;
}
.mobile-bar-action {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 600;
  text-decoration: none;
  min-height: 56px;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.mobile-bar-action:active { transform: scale(.97); }
.mobile-bar-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mobile-bar-icon svg { width: 19px; height: 19px; }
.mobile-bar-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.mobile-bar-label { font-size: .95rem; font-weight: 700; }
.mobile-bar-sub {
  font-size: .72rem;
  font-weight: 500;
  opacity: .82;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-bar-call {
  background: var(--gold-soft);
  color: var(--gold-ink);
}
.mobile-bar-call .mobile-bar-icon {
  background: var(--gold);
  color: #fff;
}

.mobile-bar-book {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 14px rgba(134,89,35,.28);
  border: 2px solid transparent;
  box-sizing: border-box;
}
.mobile-bar-book .mobile-bar-icon {
  background: rgba(255,255,255,.18);
  color: #fff;
}
/* Tegen globale a:hover (kleur = brand) op rode achtergrond: wit vlak, rode rand, rode tekst */
.mobile-bar-book:hover,
.mobile-bar-book:focus-visible {
  background: #fff;
  color: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 4px 16px rgba(134,89,35, 0.18);
}
.mobile-bar-book:hover .mobile-bar-label,
.mobile-bar-book:hover .mobile-bar-sub,
.mobile-bar-book:focus-visible .mobile-bar-label,
.mobile-bar-book:focus-visible .mobile-bar-sub {
  color: var(--brand);
  opacity: 1;
}
.mobile-bar-book:hover .mobile-bar-icon,
.mobile-bar-book:focus-visible .mobile-bar-icon {
  background: var(--brand);
  color: #fff;
}

@media (max-width: 720px) {
  .mobile-bar { display: flex; }
  body { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
  body.nav-open { overflow: hidden; }
  .header { top: 0; }
  .hero-floating-card { bottom: 12px; }
}

@media (max-width: 380px) {
  .mobile-bar-sub { display: none; }
  .mobile-bar-action { min-height: 52px; }
}

/* small motion respect */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ——— Toegankelijkheid (FAB + paneel) ——— */
.a11y-widget {
  position: fixed;
  right: 16px;
  /* --a11y-lift wordt door script.js gezet zodra de footer in beeld komt: de FAB
     parkeert dan boven de footerrand in plaats van over de footertekst te staan. */
  bottom: calc(16px + var(--a11y-lift, 0px));
  z-index: 10050;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 10px;
  font-family: var(--font-sans);
  pointer-events: none;
}
.a11y-widget > * {
  pointer-events: auto;
}
.a11y-panel {
  width: min(320px, calc(100vw - 32px));
  padding: 16px 18px 14px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.a11y-panel[hidden] {
  display: none !important;
}
.a11y-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.a11y-panel-title {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}
.a11y-panel-head .a11y-panel-title {
  margin: 0;
}
.a11y-panel-reset {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.a11y-panel-reset:hover {
  background: var(--line);
  border-color: #d7d3ca;
}
.a11y-panel-reset:active {
  transform: scale(0.97);
}
.a11y-panel-reset svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.a11y-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.35;
}
.a11y-option input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--brand);
}
.a11y-panel-hint {
  margin: 0 0 12px;
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.45;
}
.a11y-panel-close {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  color: var(--ink);
}
.a11y-panel-close:hover {
  background: var(--line);
}
.a11y-fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid #06357a;
  background: var(--focus);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.a11y-fab:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  background: #0b5ed7;
  border-color: #084298;
}
.a11y-fab[aria-expanded="true"] {
  background: #084298;
  border-color: #062d66;
}
.a11y-fab svg {
  width: 26px;
  height: 26px;
}

.a11y-fieldset {
  border: 0;
  margin: 0 0 16px;
  padding: 0;
  min-width: 0;
}
.a11y-fieldset-textsize {
  margin-bottom: 18px;
}
.a11y-fieldset-legend {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
  padding: 0;
}
.a11y-size-segmented {
  display: flex;
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-soft);
  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.05);
}
.a11y-size-btn {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 8px;
  margin: 0;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  background: transparent;
  border: none;
  border-right: 1px solid var(--line);
  transition: background 0.18s ease, color 0.18s ease;
}
.a11y-size-btn:last-child {
  border-right: 0;
}
.a11y-size-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.a11y-size-btn-text {
  position: relative;
  z-index: 1;
  pointer-events: none;
  line-height: 1.2;
  text-align: center;
}
.a11y-size-btn:hover {
  background: rgba(255, 255, 255, 0.65);
}
.a11y-size-btn:has(.a11y-size-input:checked) {
  background: var(--ink);
  color: #fff;
}
.a11y-size-btn:has(.a11y-size-input:checked):hover {
  background: var(--ink-2);
  color: #fff;
}
.a11y-size-btn:has(.a11y-size-input:focus-visible) {
  z-index: 3;
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}

/* Paneel leesbaar bij voorleesmodus + altijd boven voorlees-randen */
body.a11y-read-mode .a11y-widget {
  z-index: 10060;
}
body.a11y-read-mode .a11y-panel {
  color: var(--ink);
  background: #fff;
  border-color: var(--line);
}
body.a11y-read-mode .a11y-fieldset-legend,
body.a11y-read-mode .a11y-option,
body.a11y-read-mode .a11y-size-btn {
  color: var(--ink);
}
body.a11y-read-mode .a11y-panel-hint {
  color: var(--muted);
}

/* Voorleesblokken binnen toegankelijkheidspaneel */
body.a11y-read-mode #a11yPanel .a11y-read-block {
  outline: none;
  position: relative;
  cursor: pointer;
  transition: background-color 0.15s ease, outline-color 0.15s ease;
}
body.a11y-read-mode #a11yPanel .a11y-read-block::after {
  content: "";
  position: absolute;
  top: -12px;
  right: -12px;
  width: 30px;
  height: 30px;
  opacity: 0;
  pointer-events: none;
  border: 1px solid rgba(10, 10, 10, 0.15);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.92);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M18.5 6a9 9 0 0 1 0 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  transform: translateY(-2px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
body.a11y-read-mode #a11yPanel .a11y-read-block:hover,
body.a11y-read-mode #a11yPanel .a11y-read-block:focus-visible,
body.a11y-read-mode #a11yPanel label.a11y-read-block:focus-within {
  outline: 1px dotted var(--ink);
  outline-offset: 2px;
}
body.a11y-read-mode #a11yPanel .a11y-read-block:hover::after,
body.a11y-read-mode #a11yPanel .a11y-read-block:focus-visible::after,
body.a11y-read-mode #a11yPanel label.a11y-read-block:focus-within::after {
  opacity: 1;
  transform: translateY(0);
}
body.a11y-read-mode #a11yPanel h2.a11y-read-block:hover,
body.a11y-read-mode #a11yPanel legend.a11y-read-block:hover,
body.a11y-read-mode #a11yPanel p.a11y-read-block:hover,
body.a11y-read-mode #a11yPanel h2.a11y-read-block:focus-visible,
body.a11y-read-mode #a11yPanel legend.a11y-read-block:focus-visible,
body.a11y-read-mode #a11yPanel p.a11y-read-block:focus-visible,
body.a11y-read-mode #a11yPanel .a11y-option > span.a11y-read-block:hover {
  border-radius: var(--radius-sm);
  background: rgba(255, 247, 194, 0.85);
}
body.a11y-read-mode #a11yPanel .a11y-option > span.a11y-read-block:focus-visible {
  border-radius: var(--radius-sm);
  background: rgba(255, 247, 194, 0.85);
}
body.a11y-read-mode #a11yPanel .a11y-read-block.a11y-read-flash {
  outline-style: solid;
  outline-width: 3px;
  outline-color: #0a58c2;
}
body.a11y-read-mode #a11yPanel .a11y-read-block.a11y-read-selected {
  outline-style: solid;
  outline-width: 3px;
  outline-color: #084298;
}

/* Klik-voorlezen: markeerbare blokken zonder vaste outline; hover toont geel + speaker-icoon */
body.a11y-read-mode main .a11y-read-block,
body.a11y-read-mode #header .a11y-read-block,
body.a11y-read-mode footer .a11y-read-block {
  outline: none;
  position: relative;
  cursor: pointer;
  transition: background-color .15s ease, outline-color .15s ease;
}
body.a11y-read-mode main .a11y-read-block::after,
body.a11y-read-mode #header .a11y-read-block::after,
body.a11y-read-mode footer .a11y-read-block::after {
  content: "";
  position: absolute;
  top: -12px;
  right: -12px;
  width: 30px;
  height: 30px;
  opacity: 0;
  pointer-events: none;
  border: 1px solid rgba(10, 10, 10, 0.15);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.92);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M18.5 6a9 9 0 0 1 0 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  transform: translateY(-2px);
  transition: opacity .15s ease, transform .15s ease;
}
body.a11y-read-mode main .a11y-read-block:hover,
body.a11y-read-mode #header .a11y-read-block:hover,
body.a11y-read-mode footer .a11y-read-block:hover,
body.a11y-read-mode main .a11y-read-block:focus-visible,
body.a11y-read-mode #header .a11y-read-block:focus-visible,
body.a11y-read-mode footer .a11y-read-block:focus-visible {
  outline: 1px dotted var(--ink);
  outline-offset: 3px;
}
body.a11y-read-mode main .a11y-read-block:hover::after,
body.a11y-read-mode #header .a11y-read-block:hover::after,
body.a11y-read-mode footer .a11y-read-block:hover::after,
body.a11y-read-mode main .a11y-read-block:focus-visible::after,
body.a11y-read-mode #header .a11y-read-block:focus-visible::after,
body.a11y-read-mode footer .a11y-read-block:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}
body.a11y-read-mode main h1.a11y-read-block:hover,
body.a11y-read-mode main h2.a11y-read-block:hover,
body.a11y-read-mode main h3.a11y-read-block:hover,
body.a11y-read-mode main h4.a11y-read-block:hover,
body.a11y-read-mode main h5.a11y-read-block:hover,
body.a11y-read-mode main h6.a11y-read-block:hover,
body.a11y-read-mode main p.a11y-read-block:hover,
body.a11y-read-mode main li.a11y-read-block:hover,
body.a11y-read-mode main th.a11y-read-block:hover,
body.a11y-read-mode main td.a11y-read-block:hover,
body.a11y-read-mode main blockquote.a11y-read-block:hover,
body.a11y-read-mode main .sppb-alert.a11y-read-block:hover,
body.a11y-read-mode main figcaption.a11y-read-block:hover,
body.a11y-read-mode main address.a11y-read-block:hover,
body.a11y-read-mode main .trust-item.a11y-read-block:hover,
body.a11y-read-mode main ul.hours li.a11y-read-block:hover,
body.a11y-read-mode main ul.hours-list li.a11y-read-block:hover,
body.a11y-read-mode main .route-list li.a11y-read-block:hover,
body.a11y-read-mode main .section-eyebrow.a11y-read-block:hover,
body.a11y-read-mode main .contact-line.a11y-read-block:hover,
body.a11y-read-mode main .page-hero-label.a11y-read-block:hover,
body.a11y-read-mode main article.page-hero-row.a11y-read-block:hover,
body.a11y-read-mode main dt.a11y-read-block:hover,
body.a11y-read-mode main dd.a11y-read-block:hover,
body.a11y-read-mode header .nav a.a11y-read-block:not(.btn):hover,
body.a11y-read-mode footer p.a11y-read-block:hover,
body.a11y-read-mode footer h2.a11y-read-block:hover,
body.a11y-read-mode footer h3.a11y-read-block:hover,
body.a11y-read-mode footer h4.a11y-read-block:hover,
body.a11y-read-mode footer address.a11y-read-block:hover,
body.a11y-read-mode footer .contact-list li.a11y-read-block:hover,
body.a11y-read-mode footer small.a11y-read-block:hover,
body.a11y-read-mode footer nav li.a11y-read-block:hover,
body.a11y-read-mode footer nav a.a11y-read-block:hover,
body.a11y-read-mode main h1.a11y-read-block:focus-visible,
body.a11y-read-mode main h2.a11y-read-block:focus-visible,
body.a11y-read-mode main h3.a11y-read-block:focus-visible,
body.a11y-read-mode main h4.a11y-read-block:focus-visible,
body.a11y-read-mode main h5.a11y-read-block:focus-visible,
body.a11y-read-mode main h6.a11y-read-block:focus-visible,
body.a11y-read-mode main p.a11y-read-block:focus-visible,
body.a11y-read-mode main li.a11y-read-block:focus-visible,
body.a11y-read-mode main th.a11y-read-block:focus-visible,
body.a11y-read-mode main td.a11y-read-block:focus-visible,
body.a11y-read-mode main blockquote.a11y-read-block:focus-visible,
body.a11y-read-mode main .sppb-alert.a11y-read-block:focus-visible,
body.a11y-read-mode main figcaption.a11y-read-block:focus-visible,
body.a11y-read-mode main address.a11y-read-block:focus-visible,
body.a11y-read-mode main .trust-item.a11y-read-block:focus-visible,
body.a11y-read-mode main ul.hours li.a11y-read-block:focus-visible,
body.a11y-read-mode main ul.hours-list li.a11y-read-block:focus-visible,
body.a11y-read-mode main .route-list li.a11y-read-block:focus-visible,
body.a11y-read-mode main .section-eyebrow.a11y-read-block:focus-visible,
body.a11y-read-mode main .contact-line.a11y-read-block:focus-visible,
body.a11y-read-mode main .page-hero-label.a11y-read-block:focus-visible,
body.a11y-read-mode main article.page-hero-row.a11y-read-block:focus-visible,
body.a11y-read-mode main dt.a11y-read-block:focus-visible,
body.a11y-read-mode main dd.a11y-read-block:focus-visible,
body.a11y-read-mode header .nav a.a11y-read-block:not(.btn):focus-visible,
body.a11y-read-mode footer p.a11y-read-block:focus-visible,
body.a11y-read-mode footer h2.a11y-read-block:focus-visible,
body.a11y-read-mode footer h3.a11y-read-block:focus-visible,
body.a11y-read-mode footer h4.a11y-read-block:focus-visible,
body.a11y-read-mode footer address.a11y-read-block:focus-visible,
body.a11y-read-mode footer .contact-list li.a11y-read-block:focus-visible,
body.a11y-read-mode footer small.a11y-read-block:focus-visible,
body.a11y-read-mode footer nav li.a11y-read-block:focus-visible,
body.a11y-read-mode footer nav a.a11y-read-block:focus-visible {
  border-radius: var(--radius-sm);
  background: rgba(255, 247, 194, 0.85);
}
body.a11y-read-mode main .legacy-page-content .sppb-addon-text.a11y-read-block:hover,
body.a11y-read-mode main .legacy-page-content .sppb-addon-text.a11y-read-block:focus-visible {
  border-radius: var(--radius-sm);
  background: rgba(255, 247, 194, 0.85);
}
body.a11y-read-mode main :is(button, a.btn, a.sppb-btn, a.card-photo-link).a11y-read-block:hover,
body.a11y-read-mode main :is(button, a.btn, a.sppb-btn, a.card-photo-link).a11y-read-block:focus-visible,
body.a11y-read-mode #header :is(button, a.btn).a11y-read-block:hover,
body.a11y-read-mode #header :is(button, a.btn).a11y-read-block:focus-visible,
body.a11y-read-mode #navToggle.a11y-read-block:hover,
body.a11y-read-mode #navToggle.a11y-read-block:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--ink);
}
body.a11y-read-mode main .a11y-read-block.a11y-read-flash,
body.a11y-read-mode #header .a11y-read-block.a11y-read-flash,
body.a11y-read-mode footer .a11y-read-block.a11y-read-flash {
  outline-style: solid;
  outline-width: 3px;
  outline-color: #0a58c2;
}
body.a11y-read-mode main .a11y-read-block.a11y-read-selected,
body.a11y-read-mode #header .a11y-read-block.a11y-read-selected,
body.a11y-read-mode footer .a11y-read-block.a11y-read-selected {
  outline-style: solid;
  outline-width: 3px;
  outline-color: #084298;
}
body.a11y-read-mode main :is(button, a.btn, a.sppb-btn, a.card-photo-link).a11y-read-block.a11y-read-flash,
body.a11y-read-mode #header :is(button, a.btn).a11y-read-block.a11y-read-flash,
body.a11y-read-mode #navToggle.a11y-read-block.a11y-read-flash {
  outline: none;
  box-shadow: inset 0 0 0 3px #0a58c2;
}
body.a11y-read-mode main :is(button, a.btn, a.sppb-btn, a.card-photo-link).a11y-read-block.a11y-read-selected,
body.a11y-read-mode #header :is(button, a.btn).a11y-read-block.a11y-read-selected,
body.a11y-read-mode #navToggle.a11y-read-block.a11y-read-selected {
  outline: none;
  box-shadow: inset 0 0 0 3px #084298;
}

@media (max-width: 720px) {
  .a11y-widget {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px) + var(--a11y-lift, 0px));
    right: 12px;
  }
}

/* Hoog contrast */
html.high-contrast {
  --ink: #0a0a0a;
  --ink-2: #141414;
  --muted: #2a2a2a;
  --line: #000;
  --bg: #ffffff;
  --bg-soft: #f2f2f2;
  --bg-alt: #e8e8e8;
  /* Goud blijft goud, alleen dieper: wit-op-brand gaat van 6,06:1 naar 7,97:1
     (AAA). Zelfde reeks als in :root, alleen verder doorgetrokken — de tint
     verandert dus niet, alleen de helderheid. */
  --brand: #70481e;            /* 7,97:1 (turquoise variant hier was 7,95:1) */
  --brand-dark: #583619;       /* 10,73:1 (was 10,72:1) */
  --gold: #7b5020;             /* 6,98:1 (was 7,00:1) */
  --gold-ink: #503016;         /* 11,83:1 (was 12,40:1) */
  --gold-soft: #f5f1e5;
  --focus: #0000ee;
}
html.high-contrast body {
  background: #fff !important;
  color: #000 !important;
}
html.high-contrast .header {
  background: #fff !important;
  border-bottom-color: #000 !important;
}
/* Standaard links: zwart, hover donkerrood — geldt niet voor knop-achtige <a> (eigen / site-knopstijl) */
html.high-contrast a:not(
  .btn,
  .nav-cta,
  .page-aside-cta-phone,
  .skip-link,
  .lang-switch-item,
  .logo,
  .mobile-bar-action,
  .mobile-bar-call,
  .mobile-bar-book,
  [class*="sppb-btn"]
) {
  color: #000 !important;
  transition: none !important;
  animation: none !important;
}
html.high-contrast
  a:not(
    .btn,
    .nav-cta,
    .page-aside-cta-phone,
    .skip-link,
    .lang-switch-item,
    .logo,
    .mobile-bar-action,
    .mobile-bar-call,
    .mobile-bar-book,
    [class*="sppb-btn"]
  ):visited {
  color: #000 !important;
}
html.high-contrast
  a:not(
    .btn,
    .nav-cta,
    .page-aside-cta-phone,
    .skip-link,
    .lang-switch-item,
    .logo,
    .mobile-bar-action,
    .mobile-bar-call,
    .mobile-bar-book,
    [class*="sppb-btn"]
  ):hover,
html.high-contrast
  a:not(
    .btn,
    .nav-cta,
    .page-aside-cta-phone,
    .skip-link,
    .lang-switch-item,
    .logo,
    .mobile-bar-action,
    .mobile-bar-call,
    .mobile-bar-book,
    [class*="sppb-btn"]
  ):focus-visible {
  color: #583619 !important;
}
/* Geneste link in knop-look: zelfde kleur als omliggende knop */
html.high-contrast .btn a,
html.high-contrast [class*="sppb-btn"] a,
html.high-contrast button a {
  color: inherit !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: none !important;
}
html.high-contrast .btn a:hover,
html.high-contrast .btn a:focus-visible,
html.high-contrast [class*="sppb-btn"] a:hover,
html.high-contrast [class*="sppb-btn"] a:focus-visible,
html.high-contrast button a:hover,
html.high-contrast button a:focus-visible {
  color: inherit !important;
}
html.high-contrast .btn-primary,
html.high-contrast .btn-primary:visited {
  background: #000 !important;
  color: #fff !important;
  box-shadow: none !important;
  border: 2px solid #000 !important;
}
html.high-contrast .btn-secondary,
html.high-contrast .btn-secondary:visited {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #000 !important;
}
html.high-contrast .btn-primary:hover,
html.high-contrast .btn-primary:focus-visible,
html.high-contrast .btn-secondary:hover,
html.high-contrast .btn-secondary:focus-visible {
  background: #fff !important;
  color: #000 !important;
  border: 2px solid #000 !important;
  box-shadow: none !important;
}
html.high-contrast .btn-ghost,
html.high-contrast .btn-ghost:visited {
  background: #fff !important;
  border-color: #000 !important;
  color: #000 !important;
}
html.high-contrast .btn-ghost:hover,
html.high-contrast .btn-ghost:focus-visible {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}
/* Joomla-CTA (sppb-btn):zelfde contrast als .btn, niet overschrijven door algemene <a> */
html.high-contrast .legacy-page-content a[class*="sppb-btn"],
html.high-contrast .legacy-page-content a[class*="sppb-btn"]:visited {
  background: #000 !important;
  color: #fff !important;
  box-shadow: none !important;
  border: 2px solid #000 !important;
  text-decoration: none !important;
}
html.high-contrast .legacy-page-content a[class*="sppb-btn"]:hover,
html.high-contrast .legacy-page-content a[class*="sppb-btn"]:focus-visible {
  background: #fff !important;
  color: #000 !important;
  border-color: #000 !important;
}
html.high-contrast .section-alt,
html.high-contrast .trust,
html.high-contrast .topbar {
  background: #f0f0f0 !important;
}
html.high-contrast .section-dark,
html.high-contrast .footer {
  background: #000 !important;
  color: #fff !important;
}
html.high-contrast .section-dark a,
html.high-contrast .footer a,
html.high-contrast .section-dark .card-photo-link {
  color: #fff !important;
  text-decoration: underline;
  transition: none !important;
  animation: none !important;
}
html.high-contrast .section-dark a:visited,
html.high-contrast .footer a:visited {
  color: #fff !important;
}
html.high-contrast .section-dark a:hover,
html.high-contrast .section-dark a:focus-visible,
html.high-contrast .footer a:hover,
html.high-contrast .footer a:focus-visible,
html.high-contrast .section-dark .card-photo-link:hover,
html.high-contrast .section-dark .card-photo-link:focus-visible {
  /* donkerrood, op zwarte achtergrond iets lichter voor leesbaarheid */
  color: #d32f2f !important;
}
html.high-contrast .footer .footer-credit-link {
  text-decoration: none !important;
}
html.high-contrast .hero {
  background: #fff !important;
}
html.high-contrast .mobile-bar {
  background: #fff !important;
  border-top-color: #000 !important;
}
html.high-contrast .mobile-bar-call {
  background: #e8e8e8 !important;
  color: #000 !important;
}
html.high-contrast .mobile-bar-book {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #000 !important;
  box-shadow: none !important;
}
html.high-contrast .mobile-bar-book:hover {
  background: #fff !important;
  color: #000 !important;
  border-color: #000 !important;
}
html.high-contrast .mobile-bar-book:hover .mobile-bar-icon {
  background: #000 !important;
  color: #fff !important;
}
html.high-contrast .a11y-panel {
  border: 2px solid #000 !important;
  background: #fff !important;
  color: #000 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}
html.high-contrast .a11y-fab {
  background: #084298;
  border: 2px solid #000;
  color: #fff;
}
html.high-contrast .a11y-fab[aria-expanded="true"] {
  background: #062d66 !important;
  border-color: #000 !important;
  color: #fff !important;
}
html.high-contrast .a11y-panel-title,
html.high-contrast .a11y-fieldset-legend,
html.high-contrast .a11y-option {
  color: #000 !important;
}
html.high-contrast .a11y-size-segmented {
  border: 2px solid #000 !important;
  background: #f2f2f2 !important;
  box-shadow: none !important;
}
html.high-contrast .a11y-size-btn {
  border-color: #000 !important;
  border-right: 1px solid #000 !important;
  background: transparent !important;
}
html.high-contrast .a11y-size-btn:hover {
  background: #e8e8e8 !important;
}
html.high-contrast .a11y-size-btn:has(.a11y-size-input:checked) {
  background: #000 !important;
  color: #fff !important;
}
html.high-contrast .a11y-size-btn:has(.a11y-size-input:checked):hover {
  background: #141414 !important;
  color: #fff !important;
}
html.high-contrast .a11y-size-btn:has(.a11y-size-input:focus-visible) {
  outline: 3px solid #0000cc !important;
  outline-offset: -3px;
}
html.high-contrast .a11y-panel-hint {
  color: #2a2a2a !important;
}
html.high-contrast .a11y-panel-close {
  border: 2px solid #000 !important;
  background: #f2f2f2 !important;
  color: #000 !important;
}
html.high-contrast .a11y-panel-close:hover {
  background: #e0e0e0 !important;
}
html.high-contrast .a11y-option input {
  accent-color: #0000cc;
}

/* Hoog contrast + voorlees: paneel blijft helder */
html.high-contrast body.a11y-read-mode .a11y-panel {
  background: #fff !important;
  color: #000 !important;
  border: 2px solid #000 !important;
}


/* =========================================================
   SUBPAGINA'S — layout, breadcrumb, sidebar, page banner
   ========================================================= */

.page-sub {
  background: var(--bg-soft);
  padding-bottom: clamp(64px, 10vw, 100px);
}

/* Paginabanner met broodkruimel + H1 */
.page-sub-banner {
  background: linear-gradient(135deg, #f7f6f3 0%, #f5f3ed 100%);
  border-bottom: 1px solid var(--line);
  padding: clamp(28px, 4vw, 48px) 0 clamp(20px, 3vw, 36px);
}

/* Zelfde typografie als home hero h1 (globale h1); alleen extra marge onder broodkruimel */
.page-sub-title {
  margin-top: 8px;
}

/* Broodkruimel */
.breadcrumb {
  font-size: 0.82rem;
  color: var(--muted);
}
.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.breadcrumb li {
  display: flex;
  align-items: center;
}
.breadcrumb li + li::before {
  content: "/";
  margin: 0 8px;
  color: var(--line);
}
.breadcrumb a {
  color: var(--gold-ink);
  text-decoration: none;
  font-weight: 500;
}
.breadcrumb a:hover { color: var(--brand); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--muted); font-weight: 400; }

/* Twee-koloms layout: content + sidebar */
.page-sub-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: start;
  padding-top: clamp(28px, 4vw, 48px);
}

.page-sub-content {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: clamp(22px, 3vw, 36px);
}

/* Pagina's met bestaande feature-kaarten hebben al een eigen "vlak":
   zet het extra contentvlak dan uit om dubbele kaarten te voorkomen. */
.page-sub-content:has(.sppb-addon-feature) {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.page-sub-aside {
  position: sticky;
  top: 96px;
}

.page-aside-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-aside-heading {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.page-aside-subheading {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 0 0 2px;
}

.page-aside-cta-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
  padding: 8px 0 4px;
}
.page-aside-cta-phone:hover { color: var(--brand-dark); }

.page-aside-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 4px 0;
}

.page-aside-hours {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.page-aside-hours li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.page-aside-address {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}
.page-aside-address strong { color: var(--ink); }

@media (max-width: 900px) {
  .page-sub-layout {
    grid-template-columns: 1fr;
  }
  .page-sub-aside {
    position: static;
    order: -1;
  }
  .page-aside-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 20px;
    align-items: center;
  }
  .page-aside-heading {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }
  .page-aside-divider,
  .page-aside-subheading,
  .page-aside-hours,
  .page-aside-address { grid-column: 1 / -1; }
}

@media (max-width: 540px) {
  .page-aside-card { display: flex; }
}

/* =========================================================
   ALGEMENE SUBPAGINA HERO
   ========================================================= */

.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 20px;
  align-items: stretch;
  margin-top: 20px;
}

.page-hero-copy {
  padding: 28px 30px;
  border-radius: 24px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(232,230,224,.95);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-hero-lead {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 58ch;
}

.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.page-hero-summary {
  padding: 12px;
  border-radius: 24px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(232,230,224,.95);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.page-status-card {
  margin: 6px 6px 12px;
}

.page-hero-status-panel {
  margin-top: 14px;
  min-width: 0;
  width: 100%;
}

.page-status-card .hero-floating-card-row {
  font-size: .96rem;
}

.page-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 150px);
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 18px;
}

.page-hero-row + .page-hero-row {
  border-top: 1px solid var(--line);
}

.page-hero-row-hours {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

.page-hero-meta {
  min-width: 0;
}

.page-hero-label {
  display: inline-flex;
  margin-bottom: 6px;
  font-size: .73rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  color: var(--muted);
}

.page-hero-meta strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.2;
  color: var(--ink);
}

.page-hero-row p {
  margin: 0;
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.55;
}

/* Op andere subpagina's vervalt de vaste sidebar; de hero bevat al de kerninfo */
.site-page:not(.page-openingstijden) .page-sub-layout {
  grid-template-columns: 1fr;
}

.site-page:not(.page-openingstijden) .page-sub-aside {
  display: none;
}

.site-page:not(.page-openingstijden) .page-sub-content {
  margin-inline: auto;
  max-width: 980px;
}

.site-page:not(.page-openingstijden) .page-sub-content:has(.sppb-addon-feature) {
  max-width: none;
}

.page-route-map {
  margin-top: clamp(24px, 3vw, 36px);
}
/* Scrollwiel: script.js (capture) stuurt scroll naar de pagina; kaart blijft sleepbaar */

@media (max-width: 980px) {
  .page-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .page-hero-copy {
    padding: 24px;
  }
  .page-status-card {
    margin: 0 0 10px;
  }
  .page-hero-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .page-hero-row-hours {
    gap: 12px;
  }
}

/* =========================================================
   OPENINGSTIJDEN — pagina-specifieke layout
   ========================================================= */

.page-openingstijden .page-sub-banner {
  background:
    radial-gradient(700px 260px at 100% 0%, rgba(194,172,101,.20), transparent 60%),
    radial-gradient(560px 220px at 0% 100%, rgba(134,89,35,.08), transparent 58%),
    linear-gradient(180deg, #fbf9f4 0%, #f5f5f2 100%);
}

.page-openingstijden .page-sub-title {
  margin-bottom: 14px;
}

.hours-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 20px;
  align-items: stretch;
  margin-top: 20px;
}

.hours-hero-copy {
  padding: 28px 30px;
  border-radius: 24px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(232,230,224,.95);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hours-hero-lead {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.7;
  max-width: 56ch;
}

.hours-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.hours-hero-summary {
  padding: 12px;
  border-radius: 24px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(232,230,224,.95);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hours-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 150px);
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 18px;
}

.hours-hero-row + .hours-hero-row {
  border-top: 1px solid var(--line);
}

.hours-hero-meta {
  min-width: 0;
}

.hours-hero-label {
  display: inline-flex;
  margin-bottom: 6px;
  font-size: .73rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  color: var(--muted);
}

.hours-hero-meta strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.2;
  color: var(--ink);
}

.hours-hero-row p {
  margin: 0;
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.55;
}

.page-openingstijden .page-sub-layout {
  grid-template-columns: 1fr;
}

.page-openingstijden .page-sub-aside {
  display: none;
}

.page-openingstijden .page-sub-content {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.page-openingstijden .legacy-page-content .sppb-section {
  padding: 0;
}

.page-openingstijden .legacy-page-content .sppb-section + .sppb-section {
  margin-top: 32px;
}

.page-openingstijden .legacy-page-content .sppb-section:first-of-type .sppb-addon-cta {
  padding: 0;
}

.page-openingstijden .legacy-page-content .sppb-section:first-of-type .sppb-column-addons {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 26px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(134,89,35,.96), rgba(109,69,29,.98));
  box-shadow: var(--shadow-lg);
}

.page-openingstijden .legacy-page-content .sppb-section:first-of-type .sppb-btn-info {
  background: #fff;
  color: var(--brand) !important;
  box-shadow: none;
}

.page-openingstijden .legacy-page-content .sppb-section:first-of-type .sppb-btn-info:hover {
  background: #fff5f6;
}

.page-openingstijden .legacy-page-content .sppb-section:first-of-type .sppb-addon-content,
.page-openingstijden .legacy-page-content .sppb-section:first-of-type .sppb-addon-content div {
  color: #fff;
}

.page-openingstijden .legacy-page-content .sppb-section:first-of-type .sppb-addon-text-block {
  margin: 0;
  padding: 0;
}

.page-openingstijden .legacy-page-content .sppb-section:nth-of-type(2) .sppb-row {
  gap: 24px;
}

.page-openingstijden .legacy-page-content .sppb-section:nth-of-type(2) .sppb-col-md-3 {
  grid-column: span 6;
}

.page-openingstijden .legacy-page-content .sppb-section:nth-of-type(2) .sppb-column,
.page-openingstijden .legacy-page-content .sppb-section:nth-of-type(2) .sppb-column-addons {
  height: 100%;
}

.page-openingstijden .legacy-page-content .sppb-section:nth-of-type(2) .sppb-column-addons {
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

/* Verticale ruimte via .sppb-column-addons { gap } op legacy; geen extra margin nodig */

.page-openingstijden .legacy-page-content .sppb-section:nth-of-type(2) .sppb-addon-feature {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.page-openingstijden .legacy-page-content .sppb-section:nth-of-type(2) .sppb-img-container {
  justify-content: flex-start;
  margin-bottom: 14px;
}

.page-openingstijden .legacy-page-content .sppb-section:nth-of-type(2) .sppb-img-container img {
  width: 72px;
  height: 72px;
  border-radius: 18px;
}

.page-openingstijden .legacy-page-content .sppb-section:nth-of-type(2) .sppb-feature-box-title {
  font-size: 1.15rem;
  margin-bottom: 0;
}

.page-openingstijden .legacy-page-content .sppb-section:nth-of-type(2) .sppb-addon-text-block {
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--gold-soft);
}

.page-openingstijden .legacy-page-content .sppb-section:nth-of-type(2) .sppb-addon-text-block strong {
  color: var(--ink);
}

.page-openingstijden .legacy-page-content .sppb-section:last-of-type .sppb-column-addons {
  padding: 28px;
  border-radius: 26px;
  background: linear-gradient(135deg, var(--gold-deep), #4a3214);
  box-shadow: var(--shadow-lg);
}

.page-openingstijden .legacy-page-content .sppb-section:last-of-type .sppb-addon-feature {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.page-openingstijden .legacy-page-content .sppb-section:last-of-type .sppb-feature-box-title,
.page-openingstijden .legacy-page-content .sppb-section:last-of-type .sppb-addon-content,
.page-openingstijden .legacy-page-content .sppb-section:last-of-type .sppb-addon-content div,
.page-openingstijden .legacy-page-content .sppb-section:last-of-type .sppb-addon-content p {
  color: #fff;
}

.page-openingstijden .legacy-page-content .sppb-section:last-of-type a {
  color: #fff;
}

.page-openingstijden .legacy-page-content .sppb-section:last-of-type .sppb-img-container {
  justify-content: flex-start;
}

@media (max-width: 980px) {
  .hours-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .page-openingstijden .legacy-page-content .sppb-section:first-of-type .sppb-column-addons {
    grid-template-columns: 1fr;
  }
  .hours-hero-copy {
    padding: 24px;
  }
  .hours-hero-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* =========================================================
   LEGACY SPPB-CONTENT — Joomla SP Page Builder opmaak
   ========================================================= */

.legacy-page-content { overflow-x: hidden; }
.legacy-page-content .page-content { min-width: 0; }

.legacy-page-content a {
  color: var(--gold-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legacy-page-content a:hover { color: var(--brand); }

/* Sane font-size: override alle inline font-size stijlen */
.legacy-page-content { font-size: 0.95rem; line-height: 1.65; color: var(--ink-2); }
.legacy-page-content h1,
.legacy-page-content h2,
.legacy-page-content h3,
.legacy-page-content h4 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.02em;
}

.legacy-page-content .sppb-addon-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand);
  margin: 4px 0 0;
  letter-spacing: -0.01em;
}
.legacy-page-content .sppb-section:first-child {
  padding-top: 0;
}

/* Minder harde scheidingen; lege secties worden al in de generator verwijderd */
.legacy-page-content .sppb-section {
  padding: 18px 0;
}
.legacy-page-content .sppb-section + .sppb-section { margin-top: 1.25rem; }
.legacy-page-content .sppb-section:last-child { padding-bottom: 0; }
.legacy-page-content .sppb-row-container { padding: 0; }

/* SPPB Bootstrap grid → CSS Grid */
.legacy-page-content .sppb-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px 28px;
  align-items: start;
}
.legacy-page-content [class*="sppb-col-"] { min-width: 0; }
.legacy-page-content .sppb-col-md-12 { grid-column: span 12; }
.legacy-page-content .sppb-col-md-8  { grid-column: span 8; }
.legacy-page-content .sppb-col-md-6  { grid-column: span 6; }
.legacy-page-content .sppb-col-md-4  { grid-column: span 4; }
.legacy-page-content .sppb-col-md-3  { grid-column: span 6; }
.legacy-page-content .sppb-col-sm-12 { grid-column: span 12; }
.legacy-page-content .sppb-col-sm-6  { grid-column: span 6; }
.legacy-page-content .sppb-col-sm-4  { grid-column: span 12; }
.legacy-page-content .sppb-col-sm-3  { grid-column: span 6; }
.legacy-page-content .sppb-row > [class*="sppb-col-"]:only-child { grid-column: 1 / -1; }

@media (max-width: 700px) {
  .legacy-page-content .sppb-row {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .legacy-page-content .sppb-col-md-12,
  .legacy-page-content .sppb-col-md-8,
  .legacy-page-content .sppb-col-sm-12,
  .legacy-page-content .sppb-col-sm-4 { grid-column: span 2; }
  .legacy-page-content .sppb-col-md-6,
  .legacy-page-content .sppb-col-md-4,
  .legacy-page-content .sppb-col-md-3,
  .legacy-page-content .sppb-col-sm-6,
  .legacy-page-content .sppb-col-sm-3 { grid-column: span 1; }
}
@media (max-width: 400px) {
  .legacy-page-content .sppb-row { grid-template-columns: 1fr; }
  .legacy-page-content [class*="sppb-col-"] { grid-column: span 1; }
}

/* Leeg spacer-blok verkleinen */
.legacy-page-content .sppb-empty-space { height: 6px !important; }

/* Column-addons stapelopmaak (meerdere SP Page Builder-blokken onder elkaar in één kolom) */
.legacy-page-content .sppb-column-addons {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.legacy-page-content .page,
.legacy-page-content .layoutArea,
.legacy-page-content .column {
  display: block;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  columns: auto !important;
}

/* ── Feature box (icoon + titel + tekst) ── */
.legacy-page-content .sppb-addon-feature {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 20px 16px;
  text-align: center;
  height: 100%;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.legacy-page-content .sppb-addon-feature:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(194,172,101,0.4);
}
.legacy-page-content .sppb-img-container {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.legacy-page-content .sppb-img-container img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--gold-soft);
  box-shadow: 0 0 0 4px rgba(194,172,101,0.12);
}
.legacy-page-content .sppb-feature-box-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand);
  margin: 6px 0 0;
}
.legacy-page-content .sppb-media-content {
  text-align: left;
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--ink-2);
}

/* ── Tekst-blok ── */
.legacy-page-content .sppb-addon-text-block { padding: 6px 0; }
.legacy-page-content .sppb-addon-content p,
.legacy-page-content .sppb-addon-content div {
  margin-bottom: 0.7em;
  color: var(--ink-2);
  line-height: 1.65;
}
/* Override Joomla inline uitlijning naar links */
.legacy-page-content [style*="text-align: center"],
.legacy-page-content [style*="text-align:center"] { text-align: left !important; }
.legacy-page-content [style*="text-align: justify"],
.legacy-page-content [style*="text-align:justify"] { text-align: left !important; }

/* ── CTA-knop ── */
.legacy-page-content .sppb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none !important;
  transition: background 0.2s ease, transform 0.15s ease;
  white-space: normal;
  text-align: center;
  line-height: 1.35;
  cursor: pointer;
  border: none;
}
.legacy-page-content .sppb-btn:hover { transform: translateY(-1px); }
.legacy-page-content .sppb-btn-lg { padding: 15px 28px; font-size: 1rem; }
.legacy-page-content .sppb-btn-block { width: 100%; }
.legacy-page-content .sppb-btn-info {
  background: var(--brand);
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(134,89,35,.2);
}
.legacy-page-content .sppb-btn-info:hover { background: var(--brand-dark); }

/* Font Awesome: verberg (font niet geladen) */
.legacy-page-content .fa,
.legacy-page-content [class^="fa-"],
.legacy-page-content [class*=" fa-"] { display: none !important; }

/* ── Alert / mededeling ── */
.legacy-page-content .sppb-alert {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  border-left: 4px solid var(--brand);
  color: var(--ink);
  margin: 10px 0;
  font-size: 0.92rem;
}
.legacy-page-content .sppb-alert-dark {
  background: #f3ede8;
  border-left-color: var(--ink-2);
}
.legacy-page-content .sppb-alert p,
.legacy-page-content .sppb-alert div { color: inherit; margin-bottom: 0.4em; }
.legacy-page-content .sppb-alert :last-child { margin-bottom: 0; }

/* ── Afbeeldingen ── */
.legacy-page-content img { max-width: 100%; height: auto; }

/* ── CTA addon container ── */
.legacy-page-content .sppb-addon-cta { padding: 10px 0 4px; }
.legacy-page-content .sppb-addon-cta .text-center,
.legacy-page-content .text-center { text-align: left !important; }

/* ── Clearfix ── */
.legacy-page-content .clearfix::after { content: ""; display: table; clear: both; }

/* =========================================================
   MEGAMENU
   ========================================================= */

.nav-mega { align-items: center; position: relative; }

.nav-mega-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px 16px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav-mega .nav-item {
  list-style: none;
  position: relative;
}
/* Home hoort alleen in het offcanvas-menu thuis; in de desktopbalk is het logo
   de weg terug. Zichtbaar gemaakt in de max-width: 980px-blok hieronder. */
.nav-mega .nav-home { display: none; }
.nav-mega .has-dropdown {
  padding-bottom: 10px;
  margin-bottom: -10px;
}
/* Brede dropdown: positioneer t.o.v. .nav-mega zelf */
.nav-mega .nav-item:has(.nav-dropdown-wide) {
  position: static;
}

.nav-mega .nav-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-2);
  background: none;
  border: 0;
  padding: 8px 4px;
  cursor: pointer;
  font-family: inherit;
}
.nav-mega a.nav-top { text-decoration: none; }
.nav-mega a.nav-top:hover,
.nav-mega .nav-top:hover { color: var(--brand); }
.nav-mega .nav-dd-link::after,
.nav-mega .nav-top::after { display: none !important; }
.nav-mega .nav-top.is-active,
.nav-mega .nav-dd-link.is-active {
  color: var(--brand);
  font-weight: 600;
}

.nav-dd-title {
  margin: 0 0 8px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

/* Reguliere dropdown */
.nav-dropdown {
  display: none;
  position: absolute;
  z-index: 200;
  top: calc(100% - 1px);
  left: 0;
  min-width: 220px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

/* Brede dropdown (Patiënteninformatie) — vult de breedte van .nav-mega */
.nav-dropdown-wide {
  right: 0;
  left: 0;
  width: 100%;
  padding: 20px 24px;
}

.nav-dd-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 20px;
}
.nav-dd-col-group { min-width: 0; }
.nav-dd-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-dd-grid li { margin: 0; padding: 0; }

.nav-dd-link {
  display: block;
  padding: 5px 0;
  font-size: 0.875rem;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.15s ease;
}
.nav-dd-link:hover { color: var(--brand); }

.nav-dd-col { list-style: none; margin: 0; padding: 0; }
.nav-dd-col li { margin: 0; }

.nav-cta-wrap { margin-left: 4px; }
.nav-cta-wrap .nav-cta { white-space: nowrap; }

/* Desktop hover */
@media (min-width: 981px) {
  .nav-mega .has-dropdown:hover > .nav-dropdown,
  .nav-mega .has-dropdown:focus-within > .nav-dropdown {
    display: block;
  }
}

/* Mobiel */
@media (max-width: 980px) {
  .nav-mega .has-dropdown {
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .nav-mega-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-mega .nav-item { border-bottom: 1px solid var(--line); }
  .nav-mega .nav-home { display: block; }
  .nav-mega .nav-item:has(.nav-dropdown-wide) { position: relative; }
  .nav-mega .nav-top {
    width: 100%;
    justify-content: space-between;
    padding: 14px 4px;
  }
  .nav-mega .has-dropdown.is-open > .nav-dropdown {
    display: block;
    position: static;
    width: 100%;
    border: 0;
    box-shadow: none;
    padding: 0 0 12px 8px;
    background: transparent;
    border-radius: 0;
  }
  .nav-dropdown-wide { width: 100%; }
  .nav-dd-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px 12px;
  }
  .nav-cta-wrap { margin-left: 0; padding: 12px 0 8px; }
  .nav-cta-wrap .nav-cta { width: 100%; justify-content: center; }
}

@media (max-width: 500px) {
  .nav-dd-grid { grid-template-columns: 1fr; }
}

/* Echte offcanvas navigatie op tablet en mobiel
   (zonder backdrop-filter op .header: anders is fixed-nav beperkt tot de header-box) */
@media (max-width: 980px) {
  .topbar-info {
    gap: 12px;
    font-size: 0.8rem;
    /* De vlaggen zijn hier naar het offcanvas-menu verhuisd. .topbar-info mag de
       vrijgekomen breedte innemen, zodat de openingstijden rechts kunnen staan. */
    flex: 1;
  }
  .topbar-hours { margin-left: auto; }

  .logo-img-full { width: 170px; }

  .header {
    /* backdrop-filter maakt .header tot containing block → #nav fixed volgt niet de viewport */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.98);
  }
  .header.scrolled { background: #fff; }

  .header-inner {
    min-height: 64px;
    gap: 12px;
  }

  .nav-toggle {
    display: block;
    position: relative;
    z-index: 81;
    /* Even lang als het paneel, zodat de knop meeschuift in plaats van te
       verspringen. Alleen body.nav-open verandert deze transform, dus een
       breekpuntwissel valt hier niets te animeren. */
    transition: transform 0.24s ease;
  }

  /* Open hoort de knop bovenin het offcanvas-paneel, en dat paneel staat vast
     aan de viewport (position: fixed; top: 0). Daarom de knop óók vast aan de
     viewport in plaats van een vaste verschuiving omhoog.

     Met translateY(-37px) ging het mis zodra de bezoeker gescrold had: dat getal
     gaat uit van een zichtbare topbalk (41px) met de header eronder. Is de
     topbalk weggescrold, dan plakt de header op 0 en staat de knop al op 12px —
     37px daarvan af zette hem op -25px, dus boven beeld. Nu klopt de plek in
     beide gevallen, en lijnt hij ook altijd uit met de vlaggenrij. */
  body.nav-open .nav-toggle {
    position: fixed;
    top: 16px;
    right: 16px;
    transform: none;
  }

  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(400px, 100%);
    height: 100dvh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* 23px boven: de vlaggenrij (26px hoog) komt daarmee op hetzelfde midden uit
       als de opengetrokken menuknop (40px hoog vanaf 16px) — beide op 36px. */
    padding: 23px 16px max(20px, env(safe-area-inset-bottom, 0px)) 16px;
    background: #fff;
    border-left: 1px solid var(--line);
    border-bottom: 0;
    box-shadow: var(--shadow-lg);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(100%);
    opacity: 1;
    pointer-events: none;
    z-index: 80;
  }

  /* Bewust niet permanent op .nav: dan animeert ook de sprong van de desktoprij
     naar dit paneel bij het versmallen van het venster, en lijkt het menu even
     open te schieten. script.js zet de klasse alleen tijdens open/dicht. */
  .nav.nav-animating { transition: transform 0.24s ease; }

  .nav.open {
    transform: translateX(0);
    pointer-events: auto;
  }

  /* Taalkeuze staat bovenin het menu; in de topbar zou hij dubbel staan. */
  .topbar-right .lang-switch { display: none; }

  .nav-mobile-lang {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 26px;
    padding-bottom: 16px;
    box-sizing: content-box;
    border-bottom: 1px solid var(--line);
  }
  /* Iets groter dan in de topbar: hier zijn het de enige taalknoppen en is er
     ruimte. De hoogte moet gelijk blijven aan .nav-mobile-lang, anders klopt de
     uitlijning met het kruisje niet meer. */
  .nav-mobile-lang .lang-switch-item {
    width: 38px;
    height: 26px;
  }

  .nav-mobile-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    /* Geen border-top: het laatste menu-item heeft zelf al een onderrand. */
    margin-top: 20px;
    font-size: .95rem;
  }
  .nav-mobile-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-2);
  }
  .nav-mobile-contact-item svg { flex: none; color: var(--brand); }
  a.nav-mobile-contact-item:hover { color: var(--brand); }

  .nav a:not(.btn)::after { display: none; }

  /* Onder .header (z-index 50): anders zit de volledige header-stapel ónder deze laag
     en lijkt het offcanvas binnen #header gedimd/deactief. */
  body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(19, 19, 19, 0.44);
    z-index: 40;
  }

  /* Deze drie liggen normaal bóven het paneel — dat zit in .header en erft
     diens z-index 50. Ze gaan omlaag zolang het paneel in beeld is.

     Bewust .nav-stacked en niet .nav-open: die eerste blijft staan tot het
     paneel is uitgeschoven. Op .nav-open sprongen ze bij het sluiten meteen
     terug omhoog, dwars over het nog wegschuivende paneel heen. */
  body.nav-stacked .topbar {
    position: relative;
    z-index: 50;
  }

  /* .mobile-bar is 60, hoger dan .header(50) — dan ligt de actiebalk óver het offcanvas. */
  body.nav-stacked .mobile-bar {
    z-index: 45;
  }

  /* FAB staat anders boven de dim-laag; bij open menu omlaag */
  body.nav-stacked .a11y-widget {
    z-index: 30;
  }
}

/* =====================================================
   WERELDKAART — reisadvies per land (jsVectorMap, ATC-stijl)
   Interactief: hover (desktop) · tap/zoek (mobiel) · detailpaneel
   ===================================================== */

/* jsVectorMap basis (eigen stylesheet gaf 404 → hier de essentie) */
.jvm-container { touch-action: none; position: relative; overflow: hidden; width: 100%; height: 100%; }
.jvm-container svg { display: block; }
.jvm-tooltip {
  position: absolute; display: none; max-width: 280px;
  border-radius: 14px; z-index: 30; pointer-events: none;
  background: rgba(19,19,19,.95); color: #fff;
  padding: 0; overflow: hidden;
  box-shadow: 0 18px 44px rgba(38,26,15,.34);
  border: 1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font-family: var(--font-sans);
}
.jvm-tooltip.jvm-show, .jvm-tooltip.active { display: block; }
/* Geen muis of smal scherm: hover-tooltip uit — hij voegt niets toe en kan de
   pagina horizontaal oprekken. Tikken opent gewoon het detailpaneel. */
@media (max-width: 900px), (hover: none), (pointer: coarse) {
  .jvm-tooltip, .jvm-tooltip.jvm-show, .jvm-tooltip.active { display: none !important; }
}
.jvm-zoom-btn {
  position: absolute; left: 14px; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px; border: 1px solid var(--line);
  background: rgba(255,255,255,.94); color: var(--ink);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0;
  box-shadow: var(--shadow-sm); transition: background .18s ease, color .18s ease, transform .12s ease;
  z-index: 20; -webkit-user-select: none; user-select: none;
}
.jvm-zoom-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.jvm-zoom-btn:active { transform: scale(.94); }
/* Zoomknoppen linksonder — het detailpaneel houdt bovenin ruimte vrij */
.jvm-zoom-btn.jvm-zoomin { top: auto; bottom: 52px; }
.jvm-zoom-btn.jvm-zoomout { top: auto; bottom: 14px; }

/* Custom tooltip-inhoud (rijke kaart-tooltip) */
.wm-tip { padding: 12px 14px 13px; }
.wm-tip-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -.01em; margin-bottom: 8px; color: #fff; }
.wm-tip-row { display: flex; gap: 8px; font-size: .82rem; line-height: 1.4; padding: 2px 0; }
.wm-tip-row + .wm-tip-row { border-top: 1px solid rgba(255,255,255,.08); margin-top: 2px; padding-top: 6px; }
.wm-tip-k { flex: 0 0 auto; font-weight: 700; min-width: 78px; }
.wm-tip-v { color: rgba(255,255,255,.86); }
.wm-tip-k.is-req { color: #ff8a8a; }
.wm-tip-k.is-rec { color: var(--accent); }
.wm-tip-k.is-opt { color: rgba(255,255,255,.62); }
.wm-tip-hint { margin-top: 9px; font-size: .72rem; color: rgba(255,255,255,.55); display: flex; align-items: center; gap: 5px; }

/* Sectie-layout — kaart over de volle breedte, breder dan de tekstkolom */
.worldmap-section { position: relative; }
.worldmap-section .section-head { margin-bottom: 34px; }
/* 158vh begrenst de breedte op wat qua hoogte past (kaart is ~2,04:1), zodat de
   kaart nooit in de hoogte afgeknepen wordt en er dus geen loze randen opzij
   ontstaan waar het detailpaneel dan naast zou lijken te vallen. */
.worldmap-wide { width: 100%; max-width: min(1560px, 158vh); margin: 0 auto; padding: 0 24px; }
.worldmap-layout { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Zoek + legenda */
.worldmap-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between;
}
.worldmap-search { position: relative; flex: 1 1 280px; min-width: 220px; }
.worldmap-search-field {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 11px 16px; box-shadow: var(--shadow-sm);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.worldmap-search-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(134,89,35,.14); }
.worldmap-search-field svg { flex: 0 0 auto; color: var(--muted); }
.worldmap-search input {
  border: 0; outline: 0; background: transparent; width: 100%;
  font: inherit; font-size: .95rem; color: var(--ink);
}
.worldmap-search input::placeholder { color: var(--muted); }
.worldmap-search-clear {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  padding: 2px; line-height: 0; border-radius: 50%; display: none;
}
.worldmap-search-clear:hover { color: var(--brand); }
.worldmap-search.has-value .worldmap-search-clear { display: inline-flex; }
.worldmap-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 25;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lg); padding: 6px; margin: 0; list-style: none;
  max-height: 320px; overflow-y: auto; display: none;
}
.worldmap-results.is-open { display: block; }
.worldmap-results li { margin: 0; }
.worldmap-result {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 0; background: transparent; border-radius: 10px;
  font: inherit; font-size: .95rem; color: var(--ink-2); text-align: left; cursor: pointer;
}
.worldmap-result:hover, .worldmap-result.is-active { background: var(--brand-soft); color: var(--brand); }
.worldmap-result .flag { font-size: 1.1rem; line-height: 1; }
.worldmap-result-empty { padding: 12px; color: var(--muted); font-size: .9rem; text-align: center; }

/* Schakelaar naast de legenda: kleurt de landen naar het zwaarste advies dat er
   geldt. Standaard uit, want een volle kaart leidt af van het zoekveld.

   Vormgeving naar het iOS-schuifje, maar onderliggend een gewone checkbox: die
   is met tab te bereiken, met spatie te bedienen en wordt door schermlezers als
   schakelaar voorgelezen. Het schuifje zelf staat op aria-hidden. */
.worldmap-tint {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
  font-size: .8rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.worldmap-tint-input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.worldmap-tint-track {
  position: relative;
  flex: none;
  width: 42px; height: 25px;
  border-radius: 999px;
  background: #d8d5cf;
  transition: background .22s ease;
}
.worldmap-tint-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15,15,15,.28);
  transition: transform .22s ease;
}
.worldmap-tint-input:checked + .worldmap-tint-track { background: var(--brand); }
.worldmap-tint-input:checked + .worldmap-tint-track .worldmap-tint-thumb { transform: translateX(17px); }
/* Focus hoort op het schuifje zichtbaar te zijn, niet op de verborgen checkbox. */
.worldmap-tint-input:focus-visible + .worldmap-tint-track {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .worldmap-tint-track,
  .worldmap-tint-thumb { transition: none; }
}

.worldmap-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.worldmap-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--muted); font-weight: 500; }
.worldmap-legend-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.wm-dot-req { background: #cd1727; }
.wm-dot-rec { background: var(--brand); }
.wm-dot-opt { background: #b9b4a8; }

/* Kaartpaneel — vult de volle breedte, verhouding van de wereldkaart zelf.
   De verhouding zit op de stage, niet op het paneel: die is ook het
   positioneringsvlak van het detailpaneel, en beide moeten exact even breed
   zijn. Anders rekent right: 16px tegen een bredere box dan de kaart. */
.worldmap-panel {
  position: relative; width: 100%; height: 100%;
  border-radius: var(--radius-lg); overflow: hidden;
  /* Lichtblauwe oceaan onder het zandkleurige land. De gouden gloed die hier lag
     maakte het geheel zwaar: die accentkleur en de zandtint telden bij elkaar op.
     Zonder gloed en met blauw water staat het land er frisser op. */
  background: linear-gradient(180deg, #eef7fc 0%, #ddeef8 100%);
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
#atc-map { position: absolute; inset: 0; }
.jvm-region { cursor: pointer; transition: fill .18s ease; outline: none; }

/* Detailpaneel — zweeft ín de kaart, links of rechts van het gekozen land.
   De stage is het positioneringsvlak en valt op desktop samen met het kaartvlak;
   op mobiel groeit hij mee en zakt het paneel eronder. */
.worldmap-stage {
  position: relative;
  width: 100%;                      /* expliciet: anders zou aspect-ratio de box
                                       ook in de breedte kunnen laten krimpen,
                                       en klopt right: 16px niet meer */
  aspect-ratio: 900 / 441;          /* verhouding van de wereldkaart zelf */
}
.worldmap-detail {
  position: absolute; z-index: 24; top: 16px;
  width: min(390px, calc(100% - 32px));
  /* overscroll-behavior bewust op auto: eerst scrollt het paneel, en zodra dat
     op zijn eind is (of helemaal niet scrollt) neemt de pagina het over. */
  max-height: calc(100% - 108px); overflow-y: auto; overscroll-behavior: auto;
  background: rgba(255,255,255,.97);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 20px 20px 22px;
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(-6px) scale(.985);
  transition: opacity .2s ease, transform .2s ease;
}
.worldmap-detail[hidden] { display: none; }
.worldmap-detail.is-visible { opacity: 1; transform: none; }
.worldmap-detail.is-left { left: 16px; right: auto; }
.worldmap-detail.is-right { right: 16px; left: auto; }
.wm-detail-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; padding: 0;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  display: grid; place-items: center; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.wm-detail-close:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.wm-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; padding-right: 38px; }
.wm-detail-flag { font-size: 1.8rem; line-height: 1; }
.wm-detail-name { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -.02em; margin: 0; }
.wm-detail-sub { color: var(--muted); font-size: .85rem; margin: 0 0 18px; }
.wm-group { margin-bottom: 16px; }
.wm-group:last-of-type { margin-bottom: 0; }
.wm-group-title { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 9px; }
.wm-group-title .wm-dot { width: 10px; height: 10px; border-radius: 50%; }
.wm-group-req .wm-group-title { color: #b3121f; }
.wm-group-rec .wm-group-title { color: var(--brand); }
.wm-group-opt .wm-group-title { color: #8a8577; }
.wm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vax-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px;
  border-radius: 999px; font-size: .86rem; font-weight: 600; line-height: 1;
  border: 1.5px solid; text-decoration: none; transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.vax-chip[href]:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.vax-chip .vax-arrow { opacity: .5; transition: opacity .18s ease; }
.vax-chip[href]:hover .vax-arrow { opacity: 1; }
.wm-group-req .vax-chip { background: #fdeced; border-color: #f3b9be; color: #a5101c; }
.wm-group-rec .vax-chip { background: var(--brand-soft); border-color: #ded2a9; color: var(--brand); }
.wm-group-opt .vax-chip { background: #f6f5f1; border-color: var(--line); color: #6a6558; }
.wm-none { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .92rem; }
.wm-none svg { color: #2bb673; }
.wm-detail-foot { margin-top: auto; padding-top: 18px; }
.wm-detail-foot .btn { width: 100%; }
.wm-detail-note { font-size: .76rem; color: var(--muted); margin: 10px 0 0; }

/* Disclaimer onder de kaart */
.worldmap-disclaimer {
  margin: 24px auto 0; max-width: 860px; text-align: center; font-size: .82rem; color: var(--muted);
}

/* Responsive: kaart korter, paneel wordt een sheet boven- of onderin de kaart */
@media (max-width: 900px) {
  .worldmap-wide { padding: 0 16px; }
  /* De stage groeit hier mee met kaart + paneel eronder; de verhouding gaat
     terug naar het kaartvak zelf. */
  .worldmap-stage { aspect-ratio: auto; max-height: none; }
  .worldmap-panel { aspect-ratio: 3 / 2; height: auto; }
  /* Op een smal scherm is er geen ruimte naast de kaart: het paneel zakt eronder
     (volledige breedte, geen overlay) en de pagina scrollt ernaartoe.
     relative (niet static) houdt de sluitknop op de kaart zelf. */
  .worldmap-detail,
  .worldmap-detail.is-left,
  .worldmap-detail.is-right {
    position: relative; inset: auto; width: auto; max-height: none; margin-top: 14px;
    opacity: 1; transform: none; background: #fff;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: var(--shadow-md);
    scroll-margin-top: 80px; /* vrij van de sticky header bij scrollIntoView */
  }
}
@media (max-width: 560px) {
  /* Zelfde marge als het adviespaneel hierboven: bij het terugscrollen na het
     sluiten moet de sectiekop vrij van de sticky header blijven. */
  .worldmap-section { scroll-margin-top: 80px; }
  .worldmap-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
  /* In kolomrichting is flex-basis de hóógte — anders wordt het zoekveld 280px hoog */
  .worldmap-search { flex: 0 0 auto; }
  .worldmap-legend { justify-content: center; }
  /* De werkbalk staat hier in kolomrichting met align-items: stretch, dus het
     label loopt over de volle breedte. Zonder dit blijft de inhoud links kleven. */
  .worldmap-tint { justify-content: center; }
  .worldmap-detail { padding: 16px 16px 18px; }
  .wm-detail-name { font-size: 1.2rem; }
}

/* =====================================================
   SUBPAGINA'S — ATC aanvullingen (artikel-typografie + aside overal)
   ===================================================== */
.page-sub-lead { margin: 10px 0 0; font-size: 1.06rem; line-height: 1.7; color: var(--ink-2); max-width: 60ch; }
.page-sub-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--brand); margin-bottom: 10px; }
.page-cat-badge { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }

/* Toon de aside (boek-CTA) op alle subpagina's met .has-aside */
.site-page.has-aside .page-sub-layout { grid-template-columns: 1fr 300px; }
.site-page.has-aside .page-sub-aside { display: block; }
.site-page.has-aside .page-sub-content { margin-inline: 0; }
@media (max-width: 900px) {
  .site-page.has-aside .page-sub-layout { grid-template-columns: 1fr; }
}

/* Artikel-typografie binnen legacy-page-content */
.legacy-page-content { font-size: 1rem; line-height: 1.75; color: var(--ink-2); }
.legacy-page-content > :first-child { margin-top: 0; }
.legacy-page-content h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 1.6em 0 .5em; }
.legacy-page-content h3 { font-size: 1.18rem; margin: 1.4em 0 .4em; }
.legacy-page-content h2:first-of-type { margin-top: .2em; }
.legacy-page-content p { margin: 0 0 1.1em; }
.legacy-page-content ul, .legacy-page-content ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.legacy-page-content li { margin: 0 0 .4em; }
.legacy-page-content li::marker { color: var(--brand); }
.legacy-page-content a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 500; }
.legacy-page-content a:hover { color: var(--brand); }
.legacy-page-content strong { color: var(--ink); }
.legacy-page-content hr { border: 0; border-top: 1px solid var(--line); margin: 1.8em 0; }
.legacy-disclaimer { margin-top: 2em; padding: 16px 18px; background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 12px; font-size: .88rem; color: var(--muted); }

/* Aside boek-CTA */
.page-aside-book { margin-top: 4px; }
.page-aside-book .btn { width: 100%; }
.page-aside-vax { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--gold-ink); font-weight: 600; margin-top: 2px; }
.page-aside-vax svg { color: #2bb673; flex: 0 0 auto; }

/* Gerelateerde reisziekten onderaan */
.related-diseases { margin-top: 30px; }
.related-diseases h2 { font-size: 1.15rem; margin-bottom: 14px; }
.related-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.related-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); font-size: .88rem; font-weight: 600; color: var(--ink-2); transition: border-color .18s, color .18s, transform .12s; }
.related-chip:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }

/* Openingstijden-pagina */
.oh-card { max-width: 560px; margin: 0 0 28px; }
.oh-card .contact-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.oh-card .contact-card-head h2 { margin: 0; font-size: 1.3rem; }
.oh-card .btn { margin-top: 4px; }
.oh-notes h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: .5em; }
.oh-notes p { margin: 0 0 1em; line-height: 1.7; color: var(--ink-2); }
.oh-notes strong { color: var(--ink); }

/* Donkere sectie 'Alles voor een gezonde reis' — hele kaart is één klikbare link */
a.card-photo-as-link { text-decoration: none; color: inherit; }
a.card-photo-as-link:hover { color: inherit; }
.card-photo:hover { transform: translateY(-4px); }
.card-photo:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }