/* Rijschool Keerlus, voorbeeldsite van joepa (deze rijschool bestaat niet).
   Eigen stijl, los van de joepa-kleuren en van de andere voorbeeldsites.
   Letters: Epilogue (koppen, in gewone zinsvorm) en Karla (tekst en cijfers;
   open nul, dus bedragen en tijden blijven leesbaar), zelf gehost onder de SIL
   Open Font License (zie fonts/).
   Twee mensen lezen deze site: een leerling van zeventien op zijn telefoon en
   een ouder die wil weten waar hij op moet rekenen. Vandaar veel wit, grote
   cijfers en een rustige kleur.
   Vormtaal: de streeplijn van de rijstrook loopt langs de stappen en langs de
   dorpen, hoeken van 10 px, geen schaduwen behalve onder de plakkende kop.
   Contrast (WCAG, berekend): inkt #1a222b op grond #faf9f6 15,3:1 en op vlak
   #eceff3 13,9:1; inkt-zacht #4b5563 op grond 7,2:1 en op vlak 6,6:1; koers
   #1d4c96 op grond 7,9:1 en op vlak 7,2:1, wit erop 8,3:1; koers-diep #173e7c
   wit erop 10,4:1; berm #2f6b46 op grond 6,0:1, wit erop 6,3:1; grond op nacht
   #141d27 16,2:1 en lucht #b7d0f2 op nacht 10,79:1.
   Focusring: koers op grond 7,89:1 en op vlak 7,21:1; op de donkere vlakken
   grond op nacht 16,15:1 (eis voor een focusring is 3:1). */
@font-face { font-family: "Epilogue"; src: url("fonts/epilogue.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Karla"; src: url("fonts/karla.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --grond: #faf9f6;
  --vlak: #eceff3;
  --nacht: #141d27;
  --wit: #ffffff;
  --inkt: #1a222b;
  --inkt-zacht: #4b5563;
  --koers: #1d4c96;
  --koers-diep: #173e7c;
  --berm: #2f6b46;
  --lucht: #b7d0f2;
  --lijn: #dbe0e6;
  --maat: 1.0625rem;
  --kop-hoog: 4.5rem;
  --balk-hoog: 4.5rem;
  --breed: 70rem;
}

*, *::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(--grond);
  color: var(--inkt);
  font-family: "Karla", 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: "Epilogue", "Karla", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.1rem); margin: 0 0 0.6rem; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin: 0 0 0.6rem; }
h3 { font-size: 1.2rem; font-weight: 600; margin: 0 0 0.25rem; }
p { margin: 0 0 1rem; }

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

.skiplink {
  position: absolute; left: 0.5rem; top: 0.5rem; z-index: 60;
  transform: translateY(-200%);
  background: var(--koers-diep); color: var(--wit);
  padding: 0.7rem 1rem; text-decoration: none; font-weight: 700; border-radius: 6px;
}
.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(--lucht); }

/* Kop */
.site-kop { position: sticky; top: 0; z-index: 50; background: var(--grond); box-shadow: 0 1px 0 var(--lijn), 0 6px 18px rgb(20 29 39 / 0.06); }
.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.1rem; height: 2.1rem; flex: none; color: var(--koers); }
.site-kop__woord { display: flex; flex-direction: column; line-height: 1.1; }
.site-kop__naam { font-family: "Epilogue", sans-serif; font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; }
.site-kop__sub { font-size: 0.72rem; letter-spacing: 0.12em; 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: 600; font-size: 0.97rem; padding: 0.4rem 0; border-bottom: 3px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--koers); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--koers); }
.site-kop__proef { white-space: nowrap; }

/* Knoppen */
.knop {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.6rem 1.3rem;
  font-family: "Epilogue", sans-serif; font-weight: 600; font-size: 1.02rem;
  border: 2px solid var(--koers-diep); border-radius: 10px;
  background: var(--koers-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(--koers-diep); border-color: var(--koers-diep); color: var(--wit); }
.knop--lijn { background: transparent; color: var(--koers-diep); }
.knop--lijn:hover { background: var(--koers-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(--lucht); border-color: var(--lucht); color: var(--nacht); }
.tekstknop { background: none; border: 0; padding: 0; font: inherit; color: var(--koers); cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.tekstknop:hover { color: var(--koers-diep); }
.tekstlink { font-weight: 700; 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); }
.blok--nacht h2, .blok--nacht h3 { color: var(--grond); }
.blok--nacht a { color: var(--lucht); }
.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.18em; text-transform: uppercase; color: var(--koers); font-weight: 700; margin: 0 0 0.6rem; }
.hero__tekst p { font-size: 1.12rem; 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; }

/* Streeplijn van de rijstrook, langs de stappen en langs de dorpen */
.strook { position: relative; list-style: none; margin: 0; padding: 0 0 0 2.6rem; display: grid; gap: 1.5rem; }
.strook::before {
  content: ""; position: absolute; left: 0.95rem; top: 0.6rem; bottom: 0.6rem; width: 4px; border-radius: 2px;
  background: repeating-linear-gradient(to bottom, var(--koers) 0 14px, transparent 14px 26px);
}
.strook > li { position: relative; }
.strook > li::before {
  content: ""; position: absolute; left: -2.05rem; top: 0.45rem;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--grond); border: 4px solid var(--koers);
}
.blok--vlak .strook > li::before { background: var(--vlak); }
.stap h3 { margin-bottom: 0.15rem; }
.stap p { margin: 0; }
.dorp { display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem; align-items: baseline; }
.dorp__naam { font-weight: 700; }
.dorp__wanneer { color: var(--inkt-zacht); }

/* Pakketten als tabel */
.pakketten { width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
.pakketten caption { text-align: left; color: var(--inkt-zacht); padding-bottom: 0.6rem; }
.pakketten th, .pakketten td { text-align: left; padding: 0.8rem 0.9rem 0.8rem 0; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.pakketten thead th { font-family: "Epilogue", sans-serif; font-size: 1rem; letter-spacing: 0.02em; color: var(--inkt-zacht); border-bottom: 2px solid var(--inkt); }
.pakketten__naam { font-weight: 700; white-space: nowrap; }
.pakketten__lessen { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pakketten__prijs { font-family: "Epilogue", sans-serif; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.3rem; white-space: nowrap; }

/* Automaat naast schakel */
.kolommen { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.kolom { background: var(--wit); border: 1px solid var(--lijn); border-radius: 10px; padding: 1.25rem 1.25rem 1.4rem; }
.blok--vlak .kolom { background: var(--grond); }
.kolom h3 { font-size: 1.35rem; }
.kolom p:last-child { margin-bottom: 0; }

/* Is er plek */
.plek { background: var(--wit); border: 1px solid var(--lijn); border-left: 6px solid var(--berm); border-radius: 10px; padding: 1.1rem 1.25rem; max-width: 34rem; }
.plek p { margin: 0; }
.plek__kop { display: flex; align-items: center; gap: 0.6rem; font-family: "Epilogue", sans-serif; font-weight: 700; font-size: 1.1rem; margin-bottom: 0.3rem; }
.plek__stip { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--berm); flex: none; }

/* Week en lijstjes */
.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; }
.punten { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.punten li { padding-left: 1.7rem; position: relative; }
.punten li::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 0.85rem; height: 4px; border-radius: 2px; background: var(--koers); }
.punten + p, .week + p { margin-top: 1rem; }

/* 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: 10px; }

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

/* Voet */
.site-voet { background: var(--nacht); color: var(--grond); padding: 2.5rem 1rem 3rem; }
.site-voet__inner { max-width: var(--breed); margin: 0 auto; display: grid; gap: 1rem; }
.site-voet__naam { font-family: "Epilogue", sans-serif; font-weight: 700; font-size: 1.25rem; margin: 0; }
.site-voet p { margin: 0; }
.site-voet .tekstknop, .site-voet a { color: var(--lucht); }
.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(20 29 39 / 0.55); }
.melding__kop { font-family: "Epilogue", sans-serif; font-weight: 700; font-size: 1.3rem; margin: 0 0 0.5rem; }
.melding__sluit { margin-top: 1rem; }

@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; }
  .kolommen { grid-template-columns: 1fr 1fr; }
  .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: 10px;
    background: var(--grond); color: var(--inkt);
    font-family: "Epilogue", sans-serif; 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__proef { display: none; }
}

/* 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(--grond); border-top: 1px solid var(--lijn); box-shadow: 0 -6px 18px rgb(20 29 39 / 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; }
  .pakketten thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pakketten tr { display: grid; grid-template-columns: 1fr auto; gap: 0 0.75rem; padding: 0.8rem 0; border-bottom: 1px solid var(--lijn); }
  .pakketten th, .pakketten td { border: 0; padding: 0; }
  .pakketten__naam { grid-column: 1; }
  .pakketten__prijs { grid-column: 2; grid-row: 1; text-align: right; }
  .pakketten__lessen, .pakketten__wat { grid-column: 1 / -1; }
  .pakketten__lessen { color: var(--inkt-zacht); }
}

@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) {
  .strook { padding-left: 2.2rem; }
  .strook::before { left: 0.75rem; }
  .strook > li::before { left: -1.85rem; width: 0.9rem; height: 0.9rem; border-width: 3px; }
  .week__dag { grid-template-columns: 1fr; gap: 0; }
}

/* 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: 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, .pakketten__naam, .week__naam, .dorp__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. */
.accent { font-style: normal; color: var(--koers); }
.blok--nacht .accent { color: var(--lucht); }