/* Administratiekantoor, voorbeeldsite van joepa (dit kantoor bestaat niet).
   Nadrukkelijk geen accountantskantoor: die benaming is wettelijk beschermd
   (artikel 41 lid 2 Wet op het accountantsberoep).
   Eigen stijl, los van de joepa-kleuren en van de andere voorbeeldsites.
   Letters: Literata (koppen; een serif met rustige, goed leesbare cijfers) en
   IBM Plex Sans (tekst en tabellen; heldere cijfers die in een kolom netjes
   onder elkaar staan), zelf gehost onder de SIL Open Font License (zie fonts/).
   Wie hier leest is een ondernemer die wil weten wat het kost, wanneer hij wat
   moet aanleveren en wie het doet. Vandaar veel wit, smalle regels en cijfers
   die uitlijnen.
   Vormtaal: de jaarlijn is de hoofdvorm, de vaste momenten van een boekjaar op
   een rij. Verder rechte hoeken van 6 px, dunne lijnen en geen schaduwen
   behalve onder de plakkende kop.
   Contrast (WCAG, berekend): inkt #1c2321 op grond #fbfaf7 15,34:1 en op vlak
   #edefec 13,84:1; inkt-zacht #4d5652 7,27:1 en 6,56:1; peil #1f4b57 9,14:1 en
   8,25:1, wit erop 9,54:1; peil-diep #173a44 wit erop 12,17:1; zegel #8a5a20
   5,65:1 en 5,10:1; grond op nacht #14201f 16,02:1 en licht #a8cdd6 op nacht
   9,85:1. Focusring: peil op grond 9,14:1 en op vlak 8,25:1, op nacht licht
   9,85:1 (eis voor een focusring is 3:1). */
@font-face { font-family: "Literata"; src: url("fonts/literata.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }

:root {
  --grond: #fbfaf7;
  --vlak: #edefec;
  --nacht: #14201f;
  --wit: #ffffff;
  --inkt: #1c2321;
  --inkt-zacht: #4d5652;
  --peil: #1f4b57;
  --peil-diep: #173a44;
  --zegel: #8a5a20;
  --licht: #a8cdd6;
  --lijn: #ddded9;
  --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: "IBM Plex Sans", 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: "Literata", Georgia, serif;
  font-weight: 600;
  line-height: 1.15;
  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(--peil); text-underline-offset: 0.2em; }
a:hover { color: var(--peil-diep); }
:focus-visible { outline: 3px solid var(--peil); outline-offset: 3px; }
/* Op het donkere vlak haalt peil maar 1,75: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(--peil-diep); color: var(--wit);
  padding: 0.7rem 1rem; text-decoration: none; font-weight: 600; 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(--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(--peil); }
.site-kop__woord { display: flex; flex-direction: column; line-height: 1.15; }
.site-kop__naam { font-family: "Literata", Georgia, 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 { 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(--peil); }
.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: "IBM Plex Sans", sans-serif; font-weight: 600; font-size: 1rem;
  border: 2px solid var(--peil-diep); border-radius: 6px;
  background: var(--peil-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(--peil-diep); border-color: var(--peil-diep); color: var(--wit); }
.knop--lijn { background: transparent; color: var(--peil-diep); }
.knop--lijn:hover { background: var(--peil-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(--peil); cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.tekstknop:hover { color: var(--peil-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(--peil); 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: 6px; }

/* De jaarlijn: de vaste momenten van een boekjaar */
.jaarlijn { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; position: relative; }
.jaar { border-top: 3px solid var(--peil); padding-top: 0.7rem; }
.jaar__wanneer { font-family: "Literata", Georgia, serif; font-weight: 600; color: var(--peil); font-size: 1.05rem; margin: 0 0 0.15rem; }
.jaar h3 { margin-bottom: 0.2rem; }
.jaar p { margin: 0; color: var(--inkt-zacht); }

/* Tarieven als tabel */
.tarieven { width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
.tarieven caption { text-align: left; color: var(--inkt-zacht); padding-bottom: 0.6rem; }
.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: "Literata", Georgia, serif; font-size: 1rem; font-weight: 600; color: var(--inkt-zacht); border-bottom: 2px solid var(--inkt); }
.tarieven__naam { font-weight: 600; }
.tarieven__prijs { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.2rem; white-space: nowrap; }
.tarieven__erbij { color: var(--inkt-zacht); font-size: 1rem; }

/* Lijsten en stappen */
/* Diensten: de naam met eronder wat het inhoudt. Een dl zonder stijl zet de
   uitleg standaard ingesprongen en de naam mager; hier staan ze onder elkaar
   met dezelfde lijn als de tarieventabel erboven. */
.kosten { margin: 0; display: grid; gap: 1.25rem; }
.kosten div { border-top: 2px solid var(--inkt); padding-top: 0.8rem; }
.kosten dt { font-family: "Literata", Georgia, serif; font-weight: 600; font-size: 1.15rem; margin-bottom: 0.25rem; }
.kosten dd { margin: 0; color: var(--inkt-zacht); }

.punten { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; max-width: 44rem; }
.blok__inner > p { max-width: 44rem; }
.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(--peil); }
.punten + p, .week + p, .kosten + p, .jaarlijn + 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: "Literata", Georgia, serif; font-weight: 600; font-size: 1.15rem;
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  background: var(--vlak); color: var(--peil-diep); border: 2px solid var(--peil); 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: 6px; }

/* 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: "Literata", 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: 8px; padding: 1.5rem; max-width: 30rem; background: var(--grond); color: var(--inkt); }
.melding::backdrop { background: rgb(20 32 31 / 0.55); }
.melding__kop { font-family: "Literata", 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(--peil); }
.blok--nacht .accent { color: var(--licht); }

@media (min-width: 48em) {
  .kosten { grid-template-columns: 1fr 1fr; gap: 1.25rem 2.5rem; }
  .hero__inner { grid-template-columns: 1fr 20rem; }
  .duo { grid-template-columns: 1fr 1fr; align-items: center; }
  .duo--foto-links .duo__beeld { order: -1; }
  .jaarlijn { grid-template-columns: 1fr 1fr; gap: 1.5rem 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; }
  .jaarlijn { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}

/* Onder 56em: menu achter een knop */
@media (max-width: 63.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: 6px;
    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(20 32 31 / 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, .jaar__wanneer) { 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; }
}