/* Fysiotherapiepraktijk, voorbeeldsite van joepa (deze praktijk bestaat niet).
   Eigen stijl, los van de joepa-kleuren en van de andere voorbeeldsites.
   Letters: Bricolage Grotesque (koppen; eigenzinnig en stevig, met een eigen
   a en g) en Hanken Grotesk (tekst; rustig en goed leesbaar), zelf gehost
   onder de SIL Open Font License (zie fonts/).
   Wie hier leest heeft pijn en wil twee dingen weten: helpen jullie hierbij,
   en wat kost het mij. Vandaar warme kleuren, korte regels en een klachtenrek
   waarin je jezelf in één oogopslag terugvindt.
   Vormtaal: het klachtenrek is de hoofdvorm (klachten per lichaamsdeel, als
   kaarten naast elkaar), met een herstelroute in stappen. Hoeken van 10 px en
   een dikke accentstreep boven elk blok.
   Contrast (WCAG, berekend): inkt #23201c op grond #fcfaf6 15,56:1 en op vlak
   #f1ece3 13,78:1; inkt-zacht #55504a 7,65:1 en 6,78:1; riet #8a4a1f 6,54:1 en
   5,79:1, wit erop 6,82:1; riet-diep #6f3a17 wit erop 9,16:1; water #2b6070
   6,69:1 en 5,93:1; grond op nacht #201d19 16,10:1 en licht #f0b992 op nacht
   9,64:1. Focusring: riet op grond 6,54:1 en op vlak 5,79:1, op nacht licht
   9,64:1 (eis voor een focusring is 3:1). */
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 500 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }

:root {
  --grond: #fcfaf6;
  --vlak: #f1ece3;
  --nacht: #201d19;
  --wit: #ffffff;
  --inkt: #23201c;
  --inkt-zacht: #55504a;
  --riet: #8a4a1f;
  --riet-diep: #6f3a17;
  --water: #2b6070;
  --licht: #f0b992;
  --lijn: #e2dccf;
  --maat: 1.0625rem;
  --kop-hoog: 4.5rem;
  --balk-hoog: 4.5rem;
  --breed: 70rem;
}

*, *::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: "Hanken Grotesk", 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: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); 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(--riet); text-underline-offset: 0.2em; }
a:hover { color: var(--riet-diep); }
:focus-visible { outline: 3px solid var(--riet); outline-offset: 3px; }
/* Op het donkere vlak haalt riet maar 2,46: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(--riet-diep); color: var(--wit);
  padding: 0.7rem 1rem; text-decoration: none; font-weight: 600; border-radius: 10px;
}
.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(--riet); }
.site-kop__woord { display: flex; flex-direction: column; line-height: 1.15; }
.site-kop__naam { font-family: "Bricolage Grotesque", 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(--riet); }
.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: "Hanken Grotesk", sans-serif; font-weight: 600; font-size: 1rem;
  border: 2px solid var(--riet-diep); border-radius: 10px;
  background: var(--riet-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(--riet-diep); border-color: var(--riet-diep); color: var(--wit); }
.knop--lijn { background: transparent; color: var(--riet-diep); }
.knop--lijn:hover { background: var(--riet-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(--riet); cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.tekstknop:hover { color: var(--riet-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(--riet); 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: 10px; }

/* Het klachtenrek: waar we bij helpen, per lichaamsdeel */
.klachten { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.klacht { background: var(--wit); border: 1px solid var(--lijn); border-top: 5px solid var(--riet); border-radius: 10px; padding: 1rem 1.1rem 1.2rem; }
.blok--vlak .klacht { background: var(--grond); }
.klacht h3 { margin-bottom: 0.4rem; }
.klacht ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; }
.klacht li { color: var(--inkt-zacht); }

/* Tarieven als tabel */
.tarieven { width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
/* Het bijschrift herhaalde de kop erboven; voor een schermlezer blijft het
   staan, voor het oog niet. */
.tarieven caption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tarieven th, .tarieven td { text-align: left; padding: 0.8rem 0.9rem 0.8rem 0; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.tarieven thead th { font-family: "Bricolage Grotesque", sans-serif; font-size: 1rem; font-weight: 700; color: var(--inkt-zacht); border-bottom: 2px solid var(--inkt); }
.tarieven__naam { font-weight: 700; }
.tarieven__prijs { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.2rem; white-space: nowrap; text-align: right; }
.tarieven thead th:last-child { text-align: right; }
.tarieven__erbij { color: var(--inkt-zacht); font-size: 1rem; font-weight: 400; }

/* 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(--riet); }
.punten + p, .week + 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: "Bricolage Grotesque", 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(--riet-diep); border: 2px solid var(--riet); 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: 10px; }

/* 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: "Bricolage Grotesque", 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: 12px; padding: 1.5rem; max-width: 30rem; background: var(--grond); color: var(--inkt); }
.melding::backdrop { background: rgb(32 29 25 / 0.55); }
.melding__kop { font-family: "Bricolage Grotesque", 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(--riet); }
.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; }
  .klachten { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .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; }
  .klachten { grid-template-columns: repeat(3, 1fr); }
}

/* 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: 10px;
    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(32 29 25 / 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; }
  .tarieven thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tarieven tr { display: grid; grid-template-columns: 1fr auto; gap: 0 0.75rem; padding: 0.8rem 0; border-bottom: 1px solid var(--lijn); }
  .tarieven th, .tarieven td { border: 0; padding: 0; }
  .tarieven__naam { grid-column: 1; }
  .tarieven__prijs { grid-column: 2; grid-row: 1; text-align: right; }
  .tarieven__wat, .tarieven__erbij { grid-column: 1 / -1; }
}

@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, .site-kop__naam, .tarieven__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; }
}