/* Sportschool Kadekracht, voorbeeldsite van joepa (deze sportschool bestaat
   niet). Eigen stijl, los van de joepa-kleuren en van de andere
   voorbeeldsites.
   Letters: Big Shoulders Display (koppen en logo, smal zodat lange woorden als
   ABONNEMENTEN op een regel passen) en Chivo (tekst en cijfers; open nul, dus
   tijden als 06:30 blijven leesbaar), zelf gehost onder de SIL Open Font
   License (zie fonts/).
   Kleuren van de kade: kalk als grond, asfalt voor de kop en het afsluitblok,
   vonk (roest-oranje, de kleur van gestraald staal) als accent en staal
   (blauwgroen) voor het rooster.
   Vormtaal: rechte hoeken van 4 px, dikke lijnen, koppen in kapitalen, het
   weekrooster als raster met subgrid, en een streep in vonk als scheiding.
   Contrast (WCAG, berekend): inkt #191c1f op kalk #f4f2ee 15,3:1 en op
   kalk-diep #e7e3db 13,4:1; inkt-zacht #464c53 op kalk 7,77:1 en op kalk-diep
   6,78:1; vonk #a8420c op kalk 5,44:1 en op kalk-diep 4,76:1 (alleen kopjes,
   links en decoratie); vonk-diep #8f3709 met witte tekst erop 7,7:1; staal
   #2b5262 op kalk 7,6:1 en op kalk-diep 6,6:1, wit erop 8,5:1; kalk op asfalt
   #15181b 15,94:1 en vonk-licht #f0a878 op asfalt 8,98:1.
   Focusring: vonk-diep op kalk 6,91:1 en op kalk-diep 6,04:1; op de donkere
   vlakken kalk op asfalt 15,94:1 (eis voor een focusring is 3:1). */
@font-face { font-family: "Big Shoulders Display"; src: url("fonts/big-shoulders-display.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Chivo"; src: url("fonts/chivo.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }

:root {
  --kalk: #f4f2ee;
  --kalk-diep: #e7e3db;
  --asfalt: #15181b;
  --wit: #ffffff;
  --inkt: #191c1f;
  --inkt-zacht: #464c53;
  --vonk: #a8420c;
  --vonk-diep: #8f3709;
  --vonk-licht: #f0a878;
  --staal: #2b5262;
  --lijn: #d3cec4;
  --maat: 1.0625rem;      /* 17 px bij een standaard browserletter */
  --kop-hoog: 4.5rem;
  --balk-hoog: 4.5rem;
  --breed: 72rem;
}

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

html {
  /* Geen scroll-behavior: smooth. De andere voorbeeldsites hebben het ook niet,
     en het maakt een opname met scrollIntoView onbetrouwbaar. */
  /* Focus valt nooit achter de plakkende kop (WCAG 2.4.11), en niet half
     tegen de onderrand van het venster. */
  scroll-padding-top: 6rem;
  scroll-padding-bottom: 1rem;
}

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

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

h1, h2, h3, .knop, .site-kop__menu {
  font-family: "Big Shoulders Display", "Chivo", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.02;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 7vw, 4.2rem); margin: 0 0 0.5rem; }
h2 { font-size: clamp(2rem, 4.4vw, 2.9rem); margin: 0 0 0.6rem; }
h3 { font-size: 1.45rem; margin: 0 0 0.25rem; letter-spacing: 0.02em; }
p { margin: 0 0 1rem; }

a { color: var(--vonk); text-underline-offset: 0.2em; }
a:hover { color: var(--vonk-diep); }
:focus-visible { outline: 3px solid var(--vonk-diep); outline-offset: 3px; }
/* Op de donkere vlakken haalt vonk-diep maar 2,31:1 tegen asfalt, en de ring
   ligt door de offset helemaal op die achtergrond. Daar dus kalk: 15,94:1. */
.voorbeeldbalk :focus-visible,
.hero :focus-visible,
.blok--asfalt :focus-visible,
.site-voet :focus-visible { outline-color: var(--kalk); }

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

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

/* Kop */
.site-kop {
  position: sticky; top: 0; z-index: 50;
  background: var(--kalk);
  border-bottom: 3px solid var(--asfalt);
}
.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: 2.2rem; height: 2.2rem; flex: none; color: var(--vonk); }
.site-kop__woord { display: flex; flex-direction: column; line-height: 1; }
.site-kop__naam { font-family: "Big Shoulders Display", sans-serif; font-weight: 900; font-size: 1.6rem; text-transform: uppercase; letter-spacing: 0.03em; }
.site-kop__sub { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--inkt-zacht); }
.site-kop__menu { display: none; }
.site-nav { margin-left: auto; display: flex; gap: 1.25rem; align-items: center; }
.site-nav a { color: var(--inkt); text-decoration: none; font-weight: 600; font-size: 0.97rem; padding: 0.4rem 0; border-bottom: 3px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--vonk); color: var(--inkt); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--vonk); }
.site-kop__proef { white-space: nowrap; }

/* Knoppen */
.knop {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.55rem 1.4rem;
  font-size: 1.15rem; letter-spacing: 0.04em;
  border: 3px solid var(--vonk-diep); border-radius: 4px;
  background: var(--vonk-diep); color: var(--wit);
  cursor: pointer; text-decoration: none;
}
.knop:hover { background: var(--asfalt); border-color: var(--asfalt); color: var(--wit); }
.knop--vol { background: var(--vonk-diep); border-color: var(--vonk-diep); color: var(--wit); }
.knop--lijn { background: transparent; color: var(--vonk-diep); }
.knop--lijn:hover { background: var(--vonk-diep); color: var(--wit); }
.knop--licht { background: transparent; border-color: var(--kalk); color: var(--kalk); }
.knop--licht:hover { background: var(--kalk); color: var(--asfalt); border-color: var(--kalk); }
.knop--licht-vol { background: var(--kalk); border-color: var(--kalk); color: var(--asfalt); }
.knop--licht-vol:hover { background: var(--vonk-licht); border-color: var(--vonk-licht); color: var(--asfalt); }
.tekstknop { background: none; border: 0; padding: 0; font: inherit; color: var(--vonk); cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.tekstknop:hover { color: var(--vonk-diep); }
.tekstlink { font-weight: 700; display: inline-block; padding: 0.15rem 0; }

/* Blokken */
.blok { padding: clamp(2.5rem, 6vw, 4.5rem) 1rem; }
.blok--vlak { background: var(--kalk-diep); }
.blok--asfalt { background: var(--asfalt); color: var(--kalk); }
.blok--asfalt h2, .blok--asfalt h3 { color: var(--kalk); }
.blok--asfalt a { color: var(--vonk-licht); }
.blok__inner { max-width: var(--breed); margin: 0 auto; }
.blok__kop { max-width: 42rem; }
.blok__kop p { color: var(--inkt-zacht); font-size: 1.1rem; }
.blok--asfalt .blok__kop p { color: var(--kalk); }

/* Kopvlak met foto */
.hero { background: var(--asfalt); color: var(--kalk); }
.hero__inner {
  max-width: var(--breed); margin: 0 auto;
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 3.5rem) 1rem;
}
.hero__tekst h1 { color: var(--kalk); }
.hero__kicker { font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vonk-licht); margin: 0 0 0.6rem; }
.hero__tekst p { font-size: 1.15rem; max-width: 34rem; }
.hero__knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.hero__beeld { display: block; }
.hero__beeld img { display: block; width: 100%; height: auto; border-radius: 4px; }

/* Rooster: dagen als kolommen, uren eronder */
.rooster { display: grid; gap: 1px; background: var(--lijn); border: 1px solid var(--lijn); border-radius: 4px; overflow: hidden; margin: 0; padding: 0; list-style: none; }
/* Op de telefoon staat elke dag gewoon onder elkaar; pas vanaf 60em worden de
   dagen kolommen die hun rijen delen met het raster (subgrid). */
.rooster__dag { background: var(--kalk); padding: 0; }
.blok--vlak .rooster__dag { background: var(--kalk-diep); }
.rooster__naam { font-family: "Big Shoulders Display", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.15rem; background: var(--staal); color: var(--wit); padding: 0.35rem 0.7rem; margin: 0; }
.rooster__uren { list-style: none; margin: 0; padding: 0.5rem 0.7rem 0.7rem; display: grid; gap: 0.45rem; align-content: start; }
.rooster__uur { display: flex; gap: 0.5rem; align-items: baseline; font-size: 1rem; }
.rooster__tijd { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--vonk); flex: none; }
.rooster__dicht { color: var(--inkt-zacht); font-size: 1rem; padding: 0.5rem 0.7rem 0.7rem; margin: 0; }

/* Lessen uitgelegd */
.lessen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.les { border-top: 3px solid var(--asfalt); padding-top: 0.8rem; }
.les__hoe { color: var(--inkt-zacht); font-size: 1rem; margin: 0; }
.les__hoe strong { color: var(--inkt); }

/* Abonnementen als tabel */
.abos { width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
.abos caption { text-align: left; color: var(--inkt-zacht); padding-bottom: 0.6rem; }
.abos th, .abos td { text-align: left; padding: 0.7rem 0.9rem 0.7rem 0; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.abos thead th { font-family: "Big Shoulders Display", sans-serif; text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.05rem; border-bottom: 3px solid var(--asfalt); }
.abos__naam { font-weight: 700; }
.abos__prijs { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.25rem; white-space: nowrap; }
.abos__opzeg { color: var(--inkt-zacht); font-size: 1rem; }

/* Stappen aan een lijn */
.stappen { list-style: none; counter-reset: stap; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.stap { counter-increment: stap; display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: start; }
.stap::before {
  content: counter(stap);
  font-family: "Big Shoulders Display", sans-serif; font-weight: 800; font-size: 1.5rem;
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  background: var(--vonk-diep); color: var(--wit); border-radius: 4px;
}
.stap h3 { margin-bottom: 0.2rem; }
.stap p { margin: 0; }

/* Openingstijden */
.week { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; 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; }

/* Lijstjes */
.punten { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.punten li { padding-left: 1.6rem; position: relative; }
.punten li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.9rem; height: 3px; background: var(--vonk); }

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

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

/* Afsluitblok */
.actie { display: grid; gap: 1.25rem; }
.actie__knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; }

/* Voet */
.site-voet { background: var(--asfalt); color: var(--kalk); padding: 2.5rem 1rem 3rem; }
.site-voet__inner { max-width: var(--breed); margin: 0 auto; display: grid; gap: 1rem; }
.site-voet__naam { font-family: "Big Shoulders Display", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.4rem; margin: 0; }
.site-voet p { margin: 0; }
.site-voet .tekstknop { color: var(--vonk-licht); }
.site-voet a { color: var(--vonk-licht); }
.site-voet__joepa { color: var(--kalk); font-size: 0.92rem; }

/* Onderbalk op de telefoon */
.onderbalk { display: none; }

/* Melding */
.melding { border: 3px solid var(--asfalt); border-radius: 4px; padding: 1.5rem; max-width: 30rem; background: var(--kalk); color: var(--inkt); }
.melding::backdrop { background: rgb(21 24 27 / 0.6); }
.melding__kop { font-family: "Big Shoulders Display", sans-serif; text-transform: uppercase; font-weight: 800; font-size: 1.5rem; margin: 0 0 0.5rem; }
.melding__sluit { margin-top: 1rem; }

/* Vanaf 48em: twee kolommen en het rooster naast elkaar */
@media (min-width: 48em) {
  .hero__inner { grid-template-columns: 1fr 22rem; }
  .duo { grid-template-columns: 1fr 1fr; align-items: center; }
  .duo--foto-links .duo__beeld { order: -1; }
  .lessen { grid-template-columns: 1fr 1fr; gap: 1.5rem 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; }
  .stappen { grid-template-columns: 1fr 1fr; gap: 1.5rem 2.5rem; }
}

@media (min-width: 60em) {
  .rooster { grid-template-columns: repeat(7, 1fr); grid-auto-rows: min-content 1fr; }
  .rooster__dag { display: grid; grid-template-rows: subgrid; row-gap: 0; grid-row: span 2; }
  .hero__inner { grid-template-columns: 1fr 26rem; }
}

/* Onder 60em: menu achter een knop, rooster onder elkaar */
@media (max-width: 59.9375em) {
  .site-kop__menu {
    display: inline-flex; align-items: center; margin-left: auto;
    min-height: 2.8rem; padding: 0.4rem 0.9rem;
    border: 3px solid var(--asfalt); border-radius: 4px;
    background: var(--kalk); color: var(--inkt); font-size: 1.05rem; cursor: pointer;
  }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; align-items: stretch;
    background: var(--kalk); border-bottom: 3px solid var(--asfalt);
    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__proef { display: none; }
  .rooster { grid-template-columns: 1fr; }
}

/* Onder 48em: de vaste balk onderin met Bel en Proefles */
@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(--kalk); border-top: 3px solid var(--asfalt);
    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: 1.05rem; padding: 0.4rem 0.6rem; }
  .abos thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .abos tr { display: grid; grid-template-columns: 1fr auto; gap: 0 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid var(--lijn); }
  .abos th, .abos td { border: 0; padding: 0; }
  .abos__naam { grid-column: 1; }
  .abos__prijs { grid-column: 2; grid-row: 1; text-align: right; }
  .abos__wat, .abos__opzeg { 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; }
}

/* Grotere browserletter: de kop mag over twee regels en plakt niet meer, en
   Bel en Proefles komen onder elkaar als ze niet naast elkaar passen. */
@media (max-width: 22.4375em) {
  .stap { grid-template-columns: 2.2rem 1fr; gap: 0.75rem; }
  .stap::before { width: 2.2rem; height: 2.2rem; font-size: 1.25rem; }
  .week__dag { grid-template-columns: 1fr; gap: 0; }
}

@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, .rooster__naam, .abos__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; }
}

/* Het accent in een kop: een keer per pagina. Op het donkere vlak moet het
   lichter, anders haalt het geen 4,5:1 (vonk op asfalt is 2,9:1). */
.accent { font-style: normal; color: var(--vonk); }
.hero .accent, .blok--asfalt .accent { color: var(--vonk-licht); }

/* Een zin na een lijstje hoort niet tegen de laatste regel aan te plakken. */
.punten + p, .week + p { margin-top: 1rem; }