/* Kapsalon, voorbeeldsite van joepa (deze salon bestaat niet).
   Eigen stijl, los van de joepa-kleuren en van de andere voorbeeldsites.
   Letters: Petrona (koppen; een warme serif met een smalle romp en een eigen
   ritme, die een salon karakter geeft zonder chic te worden; Fraunces,
   Instrument Serif en DM Serif staan op de vermeden-lijst van de spec) en
   Manrope (tekst; warm en rond, leest prettig in korte regels), zelf gehost
   onder de SIL Open Font License (zie fonts/).
   Wie hier leest wil drie dingen: kan ik bij jullie terecht, wat kost het, en
   hoe ziet het eruit. Vandaar prijzen vooraan, tijden die kloppen en beeld uit
   de salon zelf.
   Vormtaal: de spiegelwand is de hoofdvorm. Elke behandeling staat in een kaart
   met een ronde bovenkant, zoals de spiegels boven de stoelen. Verder rechte
   hoeken van 4 px, dunne lijnen en geen schaduwen behalve onder de plakkende
   kop.
   Contrast (WCAG, berekend): inkt #221d22 op grond #faf6f2 15,42:1 en op vlak
   #f0e8e1 13,68:1; inkt-zacht #55494f 7,96:1 en 7,07:1; pruim #6d2f48 9,08:1 en
   8,06:1, wit erop 9,77:1; pruim-diep #552136 wit erop 12,67:1; mos #4a5b47
   6,78:1 en 6,02:1; grond op nacht #1d181b 16,29:1 en licht #e9b9c6 op nacht
   10,19:1. Focusring: pruim op grond 9,08:1 en op vlak 8,06:1, op nacht licht
   10,19:1, in de skiplink grond op pruim-diep 11,79:1 (eis is 3:1). */
@font-face { font-family: "Petrona"; src: url("fonts/petrona.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --grond: #faf6f2;
  --vlak: #f0e8e1;
  --nacht: #1d181b;
  --wit: #ffffff;
  --inkt: #221d22;
  --inkt-zacht: #55494f;
  --pruim: #6d2f48;
  --pruim-diep: #552136;
  --mos: #4a5b47;
  --licht: #e9b9c6;
  --lijn: #e4d8d0;
  --maat: 1.0625rem;
  --kop-hoog: 4.5rem;
  --balk-hoog: 4.5rem;
  --breed: 68rem;
}

*, *::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: "Manrope", 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: "Petrona", Georgia, serif;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  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(--pruim); text-underline-offset: 0.2em; }
a:hover { color: var(--pruim-diep); }
:focus-visible { outline: 3px solid var(--pruim); outline-offset: 3px; }
/* Op het donkere vlak haalt pruim maar 1,8: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(--pruim-diep); color: var(--wit);
  padding: 0.7rem 1rem; text-decoration: none; font-weight: 600; border-radius: 4px;
}
.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; min-height: 2.75rem; color: var(--inkt); text-decoration: none; }
.logo__merk { width: 2rem; height: 2rem; flex: none; color: var(--pruim); }
.site-kop__woord { display: flex; flex-direction: column; line-height: 1.15; }
.site-kop__naam { font-family: "Petrona", Georgia, serif; font-weight: 600; font-size: 1.35rem; }
.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 { white-space: nowrap; 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(--pruim); }
.site-kop__afspraak { white-space: nowrap; }

/* Knoppen: rechte hoeken, zodat de ronde spiegelkaarten het enige ronde zijn */
.knop {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.6rem 1.4rem;
  font-family: "Manrope", sans-serif; font-weight: 700; font-size: 1rem;
  border: 2px solid var(--pruim-diep); border-radius: 4px;
  background: var(--pruim-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(--pruim-diep); border-color: var(--pruim-diep); color: var(--wit); }
.knop--lijn { background: transparent; color: var(--pruim-diep); }
.knop--lijn:hover { background: var(--pruim-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(--pruim); cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.tekstknop:hover { color: var(--pruim-diep); }
.tekstlink { font-weight: 700; display: inline-flex; align-items: center; min-height: 2.75rem; }

/* 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(--pruim); font-weight: 700; 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; }
/* De kopfoto krijgt dezelfde boog als de spiegels boven de stoelen. */
.hero__beeld img { display: block; width: 100%; height: auto; border-radius: 12rem 12rem 4px 4px; }

/* De spiegelwand: behandelingen als kaarten met een ronde bovenkant */
.spiegels { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.spiegel {
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: 8rem 8rem 4px 4px;
  padding: 2.4rem 1.3rem 1.3rem; text-align: center;
  /* De kaarten zijn even hoog en de prijs staat onderaan, zodat de vier
     bedragen op een lijn staan ook als een naam over twee regels loopt. */
  display: flex; flex-direction: column;
}
.blok--vlak .spiegel { background: var(--grond); }
.spiegel h3 { margin-bottom: 0.35rem; }
.spiegel__duur { display: block; color: var(--inkt-zacht); font-size: 1rem; }
.spiegel__prijs { display: block; margin-top: auto; padding-top: 0.8rem; font-family: "Petrona", Georgia, serif; font-weight: 600; font-size: 1.5rem; font-variant-numeric: tabular-nums; color: var(--pruim); }
.spiegel p { margin: 0.6rem 0 0; color: var(--inkt-zacht); font-size: 1rem; }
.spiegel .spiegel__prijs + p { margin-top: 0.4rem; }

/* Behandelingen: naam met uitleg eronder. De boogkaart is voor korte, te
   scannen dingen zoals een prijs; een alinea hoort daar niet in. */
.diensten { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.dienst { border-top: 2px solid var(--inkt); padding-top: 0.9rem; }
.dienst h3 { margin-bottom: 0.3rem; }
.dienst p { margin: 0; color: var(--inkt-zacht); }

/* Prijslijst als tabel, op de prijzenpagina */
.tarieven { width: 100%; border-collapse: collapse; margin: 0 0 1rem; max-width: 46rem; }
.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: "Petrona", Georgia, serif; font-size: 1rem; font-weight: 600; color: var(--inkt-zacht); border-bottom: 2px solid var(--inkt); }
.tarieven thead th:last-child, .tarieven__prijs { text-align: right; }
.tarieven__naam { font-weight: 700; }
.tarieven__duur { color: var(--inkt-zacht); white-space: nowrap; }
.tarieven__prijs { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.15rem; white-space: nowrap; }
.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: 44rem; }
.punten li { padding-left: 1.7rem; position: relative; }
.punten li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.7rem; height: 0.7rem; border-radius: 50% 50% 0 0; background: var(--pruim); }
.blok__inner > p { max-width: 44rem; }
.punten + p, .week + p, .spiegels + p, .tarieven + 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.6rem 1fr; gap: 1rem; align-items: start; }
.stap::before {
  content: counter(stap);
  font-family: "Petrona", Georgia, serif; font-weight: 600; font-size: 1.2rem;
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  border: 2px solid var(--pruim); border-radius: 50% 50% 4px 4px; color: var(--pruim);
}
.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: 700; }
.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: 700; }
.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: 4px; }

/* 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: "Petrona", Georgia, 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: 4px; padding: 1.5rem; max-width: 30rem; background: var(--grond); color: var(--inkt); }
.melding::backdrop { background: rgb(29 24 27 / 0.55); }
.melding__kop { font-family: "Petrona", Georgia, serif; font-weight: 600; font-size: 1.25rem; margin: 0 0 0.5rem; }
.melding__sluit { margin-top: 1rem; }

.accent { font-style: normal; color: var(--pruim); }
.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; }
  .spiegels { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .diensten { grid-template-columns: 1fr 1fr; gap: 1.6rem 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; }
  .spiegels { grid-template-columns: repeat(4, 1fr); }
}

/* Onder 52em: menu achter een knop. Vier menulinks plus de knop Afspraak
   hebben op een regel ongeveer 800 px nodig; gemeten valt de nav nergens
   boven 832 px op twee regels ([[joepa-menu-omslagpunten]]). */
@media (max-width: 51.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: 4px;
    background: var(--grond); color: var(--inkt); font-weight: 700; 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(29 24 27 / 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__duur, .tarieven__erbij { grid-column: 1 / -1; }
  .hero__beeld img { border-radius: 8rem 8rem 4px 4px; }
}

@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) {
  /* Op 320 px stak "Wassen, knippen en föhnen" vier pixels buiten de ronding. */
  .spiegel { padding-left: 2rem; padding-right: 2rem; border-radius: 6rem 6rem 4px 4px; }
  .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; }
  .hero__tekst { min-width: 0; }
  .hero__kicker { overflow-wrap: anywhere; }
  .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; }
}