/* Radiologie Harelbeke — gedeelde stijl
   Layout: gecentreerde praktijkkop zoals het briefpapier, inhoud in één kolom,
   onderaan op elke pagina de drie vaste blokken (bellen · afspraak · dringend). */
:root{
  --blue:#0432FF;          /* praktijkblauw uit het ontwerp */
  --blue-ink:#0326c4;
  --blue-wash:#eef1ff;
  --bg:#ffffff;
  --fg:#16204a;
  --muted:#4a5378;
  --line:#c9d0ee;
  --on-blue:#ffffff;
  --font-display:"hypatia-sans-pro","Hypatia Sans Pro","Hypatia Sans Pro Light","Source Sans 3","Helvetica Neue",Arial,sans-serif;
  --font-body:var(--font-display);
  --w-light:300; --w-strong:600;
  --step-0:1.0625rem; --step-1:1.25rem; --step-2:1.6rem; --step-3:clamp(1.9rem,4.6vw,2.9rem); --step-4:clamp(2.3rem,7vw,4.2rem);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --blue:#7b93ff; --blue-ink:#9fb0ff; --blue-wash:#141c3d; --bg:#0b1024; --fg:#e8ecff; --muted:#a9b2d6; --line:#2a3566; --on-blue:#0b1024; color-scheme:dark}}
:root[data-theme="dark"]{
  --blue:#7b93ff; --blue-ink:#9fb0ff; --blue-wash:#141c3d; --bg:#0b1024; --fg:#e8ecff; --muted:#a9b2d6; --line:#2a3566; --on-blue:#0b1024; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-weight:var(--w-light);font-size:var(--step-0);line-height:1.6;
  display:flex;flex-direction:column;min-height:100vh}
a{color:var(--blue)}
a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:62rem;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* Navigatie */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:1rem;padding-block:.65rem;flex-wrap:wrap}
.brand{font-family:var(--font-display);font-weight:var(--w-light);letter-spacing:.06em;text-transform:uppercase;font-size:.9rem;color:var(--blue);text-decoration:none;white-space:nowrap}
.nav{display:flex;gap:.25rem;flex-wrap:wrap;margin-left:auto}
.nav a{font-weight:var(--w-light);font-size:.95rem;color:var(--blue);text-decoration:none;padding:.4rem .7rem;border-radius:999px}
.nav a:hover{background:var(--blue-wash);color:var(--blue)}
.nav a[aria-current="page"]{background:var(--blue);color:var(--on-blue)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-display);font-weight:var(--w-light);
  background:var(--blue);color:var(--on-blue);text-decoration:none;border-radius:999px;padding:.55rem 1.1rem;font-size:.95rem;white-space:nowrap}
.btn:hover{background:var(--blue-ink)}
@media (max-width:720px){
  .topbar .wrap{gap:.5rem}
  .nav{order:3;width:100%;margin-left:0;justify-content:space-between;gap:.1rem}
  .nav a{padding:.35rem .5rem;font-size:.88rem}
  .topbar .btn{margin-left:auto;padding:.45rem .9rem;font-size:.88rem}
}

/* Praktijkkop */
.masthead{text-align:center;padding-block:clamp(2.5rem,7vw,4.5rem) clamp(1.5rem,4vw,2.5rem)}
.masthead h1{font-family:var(--font-display);color:var(--blue);margin:0;font-weight:var(--w-light);letter-spacing:.08em;text-transform:uppercase;line-height:1.1;text-wrap:balance}
.masthead .doctor{font-family:var(--font-display);color:var(--blue);margin:.35rem 0 0;font-weight:var(--w-light);line-height:1.2}
.home .masthead h1{font-size:var(--step-4)}
.home .masthead .doctor{font-size:var(--step-3)}
.sub .masthead h1{font-size:var(--step-2)}
.sub .masthead .doctor{font-size:var(--step-1)}
.services{list-style:none;padding:0;margin:1.6rem 0 0;display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem 2.2rem;
  font-family:var(--font-display);font-size:var(--step-1);color:var(--blue);font-weight:var(--w-light)}
.claims{margin:1rem 0 0;color:var(--blue);font-size:var(--step-1);line-height:1.5}
.claims p{margin:.15rem 0}
.claims strong{font-weight:700}
/* Homepage: naam, onderzoeken en vermeldingen links en rechts even breed */
.lockup{display:inline-grid;justify-items:stretch;max-width:100%}
.lockup .services{justify-content:space-between;gap:.5rem 1.5rem}
.lockup .claims p{text-align:justify;text-align-last:justify}
@media (max-width:720px){
  .lockup{display:block}
  .lockup .services{justify-content:center}
  .lockup .claims p{text-align:center;text-align-last:center}
}

/* Inhoud */
main{flex:1}
.content{max-width:44rem;margin-inline:auto;padding-bottom:2.5rem}
.content h2{font-family:var(--font-display);font-weight:var(--w-light);font-size:var(--step-2);color:var(--blue);margin:0 0 1rem;text-transform:uppercase;letter-spacing:.06em;text-align:center}
.reminder{border:2px solid var(--blue);border-radius:12px;padding:1.1rem 1.3rem;margin-bottom:1.6rem}
.reminder .label{display:block;font-family:var(--font-display);font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;margin-bottom:.35rem}
.reminder ul{margin:0;padding-left:1.1rem;font-weight:700}
.prep{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.prep li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.25rem 1.5rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.prep .exam{font-weight:600}
.prep .what{color:var(--blue);font-weight:700}
@media (max-width:560px){.prep li{grid-template-columns:minmax(0,1fr)}}
.facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.facts li{padding:.85rem 0;border-bottom:1px solid var(--line)}
.facts .k{font-weight:700;color:var(--blue)}
.lead{text-align:center;font-size:var(--step-1);margin:0 0 1.4rem}
.address{text-align:center;font-size:var(--step-1);line-height:1.5;margin:0 0 .5rem}
.address a{font-weight:700;text-decoration:none}
.bus{text-align:center;color:var(--blue);font-weight:600;margin:0 0 1.5rem}
.map{border:1px solid var(--line);border-radius:12px;overflow:hidden;aspect-ratio:16/10;max-width:100%;background:var(--blue-wash)}
.map iframe{display:block;width:100%;height:100%;border:0}
.maplink{text-align:center;margin:.75rem 0 0;font-size:.95rem}

.portals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1.6rem}
.portal{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;text-align:center;text-decoration:none;
  border:2px solid var(--blue);border-radius:12px;padding:1rem;color:var(--blue);font-family:var(--font-display);font-weight:var(--w-strong);font-size:var(--step-1);transition:background .15s,color .15s}
.portal small{font-family:var(--font-body);font-weight:var(--w-light);font-size:.85rem;color:var(--muted)}
.portal:hover{background:var(--blue);color:var(--on-blue)}
.portal:hover small{color:var(--on-blue)}
@media (max-width:560px){.portals{grid-template-columns:minmax(0,1fr)}}

/* De drie vaste blokken */
.actions{padding-block:1rem 3rem}
.actions .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.75rem,3vw,2.5rem);align-items:stretch}
.box{border:1.5px solid var(--fg);padding:1.1rem 1rem;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:.35rem;
  color:var(--blue);font-size:.9rem;line-height:1.35;text-transform:uppercase;letter-spacing:.04em;min-width:0}
.box p{margin:0}
.box .call{margin-top:.4rem;font-weight:700;text-transform:none;letter-spacing:0;font-size:1rem}
.box .call a{text-decoration:none;font-variant-numeric:tabular-nums}
.box.cta{background:var(--blue);border-color:var(--blue);color:var(--on-blue);text-decoration:none;font-family:var(--font-display);
  font-size:clamp(1.25rem,2.6vw,1.75rem);font-weight:var(--w-light);letter-spacing:.06em;line-height:1.2;transition:background .15s}
.box.cta:hover{background:var(--blue-ink)}
.box.cta small{display:block;font-family:var(--font-body);font-size:.8rem;font-weight:var(--w-light);letter-spacing:.02em;text-transform:none;opacity:.9;margin-top:.35rem}
@media (max-width:720px){
  .actions .grid{grid-template-columns:minmax(0,1fr)}
  .box.cta{order:-1;padding-block:1.4rem}
}

footer{border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;padding-block:1.2rem}
footer a{color:inherit}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}