/* Tandartspraktijk, voorbeeldsite van joepa (deze praktijk bestaat niet).
   Eigen stijl, los van de joepa-kleuren en van de andere voorbeeldsites.
   Letters: Sora (koppen; open en modern zonder kil te worden) en Mulish
   (tekst; rustig en goed leesbaar op kleine maten), zelf gehost onder de SIL
   Open Font License (zie fonts/).
   Wie hier leest is vaak gespannen en zoekt maar drie dingen: kan ik terecht,
   wat gaat er gebeuren en wat kost het. Vandaar zachte kleuren, ronde hoeken
   van 14 px, ruime blokken en korte regels.
   Vormtaal: ronde vormen, een statusregel over nieuwe patiënten, en de eerste
   afspraak als stappen met een open cirkel per stap.
   Contrast (WCAG, berekend): inkt #12211f op grond #fbfdfc 16,28:1 en op vlak
   #e9f2ef 14,58:1; inkt-zacht #46514f 8,06:1 en 7,22:1; den #196a5b 6,32:1 en
   5,66:1, wit erop 6,45:1; den-diep #14564a wit erop 8,54:1; koper #9a5b34
   5,24:1 op grond (op het tweede vlak haalt hij 4,70:1, dus daar niet als
   tekst); grond op nacht #0f1f1c 16,67:1 en licht #9fd9c9 op nacht 10,74:1.
   Focusring: den op grond 6,32:1 en op vlak 5,66:1, op nacht licht 10,74:1
   (eis voor een focusring is 3:1). */
@font-face { font-family: "Sora"; src: url("fonts/sora.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Mulish"; src: url("fonts/mulish.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }

:root {
  --grond: #fbfdfc;
  --vlak: #e9f2ef;
  --nacht: #0f1f1c;
  --wit: #ffffff;
  --inkt: #12211f;
  --inkt-zacht: #46514f;
  --den: #196a5b;
  --den-diep: #14564a;
  --koper: #9a5b34;
  --licht: #9fd9c9;
  --lijn: #d8e3df;
  --maat: 1.0625rem;
  --kop-hoog: 4.5rem;
  --balk-hoog: 4.5rem;
  --breed: 66rem;
}

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

html {
  /* Focus valt nooit achter de plakkende kop (WCAG 2.4.11), en niet half tegen
     de onderrand van het venster. Geen scroll-behavior: smooth, want dat maakt
     de opnames in schiet.mjs onbetrouwbaar. */
  scroll-padding-top: 6rem;
  scroll-padding-bottom: 1rem;
}

body {
  margin: 0;
  background: var(--grond);
  color: var(--inkt);
  font-family: "Mulish", system-ui, sans-serif;
  font-size: var(--maat);
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

p, li, summary, td, th { text-wrap: pretty; }

h1, h2, h3 {
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4.6vw, 2.9rem); margin: 0 0 0.6rem; }
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 0.6rem; }
h3 { font-size: 1.18rem; margin: 0 0 0.25rem; }
p { margin: 0 0 1rem; }

a { color: var(--den); text-underline-offset: 0.2em; }
a:hover { color: var(--den-diep); }
:focus-visible { outline: 3px solid var(--den); outline-offset: 3px; }
/* Op het donkere vlak haalt den maar 2,64:1 tegen nacht; daar dus licht. */
.voorbeeldbalk :focus-visible,
.blok--nacht :focus-visible,
.site-voet :focus-visible { outline-color: var(--licht); }
/* De skiplink ligt over de donkere balk heen maar is er geen kind van, en zijn
   ring valt deels op die balk en deels op de lichte kop eronder. Daarom ligt de
   ring binnen de knop, op het eigen donkere vlak. */
.skiplink:focus-visible { outline-color: var(--grond); outline-offset: -3px; }

.skiplink {
  position: absolute; left: 0.5rem; top: 0.5rem; z-index: 60;
  transform: translateY(-200%);
  background: var(--den-diep); color: var(--wit);
  padding: 0.7rem 1rem; text-decoration: none; font-weight: 600; border-radius: 14px;
}
.skiplink:focus { transform: none; color: var(--wit); }

.voorbeeldbalk { background: var(--nacht); color: var(--grond); font-size: 0.9rem; text-align: center; }
.voorbeeldbalk p { margin: 0; padding: 0.55rem 1rem; }
.voorbeeldbalk a { color: var(--licht); }

/* Kop */
.site-kop { position: sticky; top: 0; z-index: 50; background: var(--grond); box-shadow: 0 1px 0 var(--lijn); }
.site-kop__inner { max-width: var(--breed); margin: 0 auto; min-height: var(--kop-hoog); padding: 0.6rem 1rem; display: flex; align-items: center; gap: 1rem; }
.site-kop__logo { display: flex; align-items: center; gap: 0.6rem; color: var(--inkt); text-decoration: none; }
.logo__merk { width: 2rem; height: 2rem; flex: none; color: var(--den); }
.site-kop__woord { display: flex; flex-direction: column; line-height: 1.15; }
.site-kop__naam { font-family: "Sora", system-ui, sans-serif; font-weight: 600; font-size: 1.3rem; }
.site-kop__sub { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--inkt-zacht); }
.site-kop__menu { display: none; }
.site-nav { margin-left: auto; display: flex; gap: 1.2rem; align-items: center; }
.site-nav a { color: var(--inkt); text-decoration: none; font-weight: 500; font-size: 0.97rem; padding: 0.4rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--den); }
.site-kop__afspraak { white-space: nowrap; }

/* Knoppen */
.knop {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.6rem 1.3rem;
  font-family: "Mulish", sans-serif; font-weight: 600; font-size: 1rem;
  border: 2px solid var(--den-diep); border-radius: 999px;
  background: var(--den-diep); color: var(--wit);
  cursor: pointer; text-decoration: none;
}
.knop:hover { background: var(--nacht); border-color: var(--nacht); color: var(--wit); }
.knop--vol { background: var(--den-diep); border-color: var(--den-diep); color: var(--wit); }
.knop--lijn { background: transparent; color: var(--den-diep); }
.knop--lijn:hover { background: var(--den-diep); color: var(--wit); }
.knop--licht { background: transparent; border-color: var(--grond); color: var(--grond); }
.knop--licht:hover { background: var(--grond); color: var(--nacht); border-color: var(--grond); }
.knop--licht-vol { background: var(--grond); border-color: var(--grond); color: var(--nacht); }
.knop--licht-vol:hover { background: var(--licht); border-color: var(--licht); color: var(--nacht); }
.tekstknop { background: none; border: 0; padding: 0.5rem 0; font: inherit; color: var(--den); cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.tekstknop:hover { color: var(--den-diep); }
.tekstlink { font-weight: 600; display: inline-block; padding: 0.15rem 0; }

/* Blokken */
.blok { padding: clamp(2.5rem, 6vw, 4.25rem) 1rem; }
.blok--vlak { background: var(--vlak); }
.blok--nacht { background: var(--nacht); color: var(--grond); padding-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.blok--nacht h2, .blok--nacht h3 { color: var(--grond); }
.blok--nacht a { color: var(--licht); }
.blok__inner { max-width: var(--breed); margin: 0 auto; }
.blok__kop { max-width: 40rem; }
.blok__kop p { color: var(--inkt-zacht); font-size: 1.08rem; }
.blok--nacht .blok__kop p { color: var(--grond); }

/* Kopvlak */
.hero { background: var(--grond); border-bottom: 1px solid var(--lijn); }
.hero__inner { max-width: var(--breed); margin: 0 auto; display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; padding: clamp(2rem, 5vw, 3.25rem) 1rem; }
.hero__kicker { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--den); font-weight: 600; margin: 0 0 0.6rem; }
.hero__tekst p { font-size: 1.1rem; max-width: 32rem; color: var(--inkt-zacht); }
.hero__knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.4rem; }
.hero__beeld img { display: block; width: 100%; height: auto; border-radius: 14px; }

/* Kan ik terecht: de statusregel over nieuwe patiënten */
.status { background: var(--wit); border: 1px solid var(--lijn); border-left: 6px solid var(--den); border-radius: 14px; padding: 1.1rem 1.25rem; max-width: 34rem; }
.status p { margin: 0; }
.status__kop { display: flex; align-items: start; gap: 0.6rem; font-family: "Sora", sans-serif; font-weight: 600; font-size: 1.1rem; margin-bottom: 0.3rem; }
.status__stip { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--den); flex: none; margin-top: 0.42em; }

/* Behandelingen en kosten: naam met uitleg eronder, geen prijslijst */
.kosten { margin: 0; display: grid; gap: 1.25rem; }
.kosten div { border-top: 2px solid var(--lijn); padding-top: 0.8rem; }
.kosten dt { font-family: "Sora", sans-serif; font-weight: 600; font-size: 1.15rem; margin-bottom: 0.2rem; }
.kosten dd { margin: 0; color: var(--inkt-zacht); }

/* Lijsten en stappen */
.punten { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; max-width: 46rem; }
.blok__inner > p { max-width: 46rem; }
.punten li { padding-left: 1.7rem; position: relative; }
.punten li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.9rem; height: 3px; background: var(--den); }
.punten + p, .week + p, .kosten + p { margin-top: 1rem; }
.stappen { list-style: none; counter-reset: stap; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.stap { counter-increment: stap; display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem; align-items: start; }
.stap::before {
  content: counter(stap);
  font-family: "Sora", system-ui, sans-serif; font-weight: 600; font-size: 1.15rem;
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  background: var(--vlak); color: var(--den-diep); border: 2px solid var(--den); border-radius: 50%;
}
.blok--vlak .stap::before { background: var(--grond); }
.stap p { margin: 0; }

/* Openingstijden */
.week { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; max-width: 26rem; }
.week__dag { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.75rem; padding: 0.35rem 0; border-bottom: 1px solid var(--lijn); }
.week__naam { font-weight: 600; }
.week__tijd { font-variant-numeric: tabular-nums; }

/* Vragen */
.vragen { display: grid; gap: 0.5rem; max-width: 46rem; }
.vraag { border-bottom: 1px solid var(--lijn); }
.vraag summary { cursor: pointer; padding: 0.85rem 0; font-weight: 600; }
.vraag p { margin: 0 0 0.9rem; }

/* Twee kolommen met beeld */
.duo { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
.duo__beeld img { display: block; width: 100%; height: auto; border-radius: 14px; }

/* Afsluitblok en voet */
.actie { display: grid; gap: 1.25rem; }
.actie__knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; }
.site-voet { background: var(--nacht); color: var(--grond); padding: 1.5rem 1rem 3rem;  border-top: 1px solid rgb(255 255 255 / 0.14); }

.site-voet__inner { max-width: var(--breed); margin: 0 auto; display: grid; gap: 1rem; }
.site-voet__naam { font-family: "Sora", system-ui, sans-serif; font-weight: 600; font-size: 1.2rem; margin: 0; }
.site-voet p { margin: 0; }
.site-voet .tekstknop, .site-voet a { color: var(--licht); }
.site-voet__joepa { font-size: 0.92rem; }

.onderbalk { display: none; }

/* Melding */
.melding { border: 1px solid var(--lijn); border-radius: 18px; padding: 1.5rem; max-width: 30rem; background: var(--grond); color: var(--inkt); }
.melding::backdrop { background: rgb(15 31 28 / 0.55); }
.melding__kop { font-family: "Sora", system-ui, sans-serif; font-weight: 600; font-size: 1.25rem; margin: 0 0 0.5rem; }
.melding__sluit { margin-top: 1rem; }

.accent { font-style: normal; color: var(--den); }
.blok--nacht .accent { color: var(--licht); }

@media (min-width: 48em) {
  .hero__inner { grid-template-columns: 1fr 20rem; }
  .duo { grid-template-columns: 1fr 1fr; align-items: center; }
  .duo--foto-links .duo__beeld { order: -1; }
  .kosten { grid-template-columns: 1fr 1fr; gap: 1.25rem 2.5rem; }
  .stappen { grid-template-columns: 1fr 1fr; gap: 1.4rem 2.5rem; }
  .actie { grid-template-columns: 1fr auto; align-items: center; }
  .site-voet__inner { grid-template-columns: 1fr auto; align-items: end; }
  .site-voet__joepa { grid-column: 1 / -1; }
}

@media (min-width: 60em) {
  .hero__inner { grid-template-columns: 1fr 24rem; }
}

/* Onder 56em: menu achter een knop */
@media (max-width: 55.9375em) {
  .site-kop__menu {
    display: inline-flex; align-items: center; margin-left: auto;
    min-height: 2.8rem; padding: 0.4rem 0.9rem;
    border: 2px solid var(--inkt); border-radius: 14px;
    background: var(--grond); color: var(--inkt); font-weight: 600; font-size: 1rem; cursor: pointer;
  }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; align-items: stretch;
    background: var(--grond); border-bottom: 1px solid var(--lijn);
    padding: 0.5rem 1rem 1rem;
  }
  .site-kop--open .site-nav { display: flex; }
  .site-nav a { padding: 0.75rem 0; border-bottom: 1px solid var(--lijn); }
  .site-kop__afspraak { display: none; }
}

/* Onder 48em: de vaste balk onderin met Bel en Afspraak */
@media (max-width: 47.9375em) {
  body { padding-bottom: var(--balk-hoog); }
  html { scroll-padding-bottom: calc(var(--balk-hoog) + 1rem); }
  .onderbalk {
    display: flex; gap: 0.6rem; align-items: center; justify-content: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    background: var(--grond); border-top: 1px solid var(--lijn); box-shadow: 0 -6px 18px rgb(15 31 28 / 0.08);
    padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom));
  }
  .onderbalk .knop { flex: 1 1 0; min-height: 2.9rem; font-size: 1rem; padding: 0.4rem 0.6rem; }
  }

@media (max-width: 34.9375em) {
  .site-kop__sub { display: none; }
  .hero__knoppen .knop, .actie__knoppen .knop { flex: 1 1 100%; }
  .week__dag { grid-template-columns: 6.5rem 1fr; }
}

@media (max-width: 22.4375em) {
  .stap { grid-template-columns: 2rem 1fr; gap: 0.75rem; }
  .stap::before { width: 2rem; height: 2rem; font-size: 1rem; }
  .week__dag { grid-template-columns: 1fr; gap: 0; }
}

/* Grotere browserletter: de kop mag over twee regels en plakt niet meer, en de
   twee knoppen onderin komen onder elkaar als ze niet naast elkaar passen. */
@media (max-width: 19.9375em) {
  html { scroll-padding-top: 1rem; }
  .site-kop { position: relative; }
  .site-kop__inner { flex-wrap: wrap; row-gap: 0.5rem; }
  body { overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 16 6 6; }
  :is(h1, h2, h3, th, dt, .site-kop__naam, .week__naam) { hyphenate-limit-chars: 8 3 3; }
  .onderbalk { flex-direction: column; }
  .onderbalk .knop { width: 100%; }
  body { padding-bottom: calc(var(--balk-hoog) * 1.9); }
  html { scroll-padding-bottom: calc(var(--balk-hoog) * 1.9 + 1rem); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}