/* Zaal Toon — laag 1: tokens en basistypografie.
   Overgezet uit output/live/stijl.css (element 0.10/0.11).
   ⚠ De CSS is één bestand op twee plaatsen (plan.md): wijzig je hier iets,
   pas het dan ook aan in output/live/stijl.css, en omgekeerd. */

  :root {
    --creme:      #FFF6E9;
    --creme-op:   #FFFDF8;
    --zand:       #EADFCB;
    --inkt:       #1E1A16;
    --rood:       #E03E1A;
    --rood-op:    #B22F11;
    --geel:       #FFC53D;
    --groen:      #1B7F63;
    --perzik:     #FFD8BE;

    --kolom: 74rem;
    --radius: 22px;
    --pil: 99px;
  }

  * { box-sizing: border-box; }

  /* Zacht scrollen naar een anker. De sticky kop is 78 px hoog, dus elk doel krijgt
     marge mee zodat de titel niet onder de balk verdwijnt. */
  html { scroll-behavior: smooth; }
  [id] { scroll-margin-top: 6.5rem; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    margin: 0;
    background: var(--creme);
    color: var(--inkt);
    font-family: "Manrope", -apple-system, "Segoe UI", sans-serif;
    font-size: 17px;
    line-height: 28px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, .display, .cijfer {
    font-family: "Archivo Black", Impact, sans-serif;
    font-weight: 400;
    margin: 0;
    text-wrap: balance;
  }

  /* De displayrol uit het brandbook, maar op maat van deze compositie.
     Het brandbook zet Display op 88 en H1 op 46. Op 88 overstemt de titel de
     rest van de hero, op 46 draagt hij te weinig. Dit zit ertussen, op 60. */
  .display {
    font-size: clamp(2.35rem, 1.45rem + 3.4vw, 4.375rem);
    line-height: .98;
    letter-spacing: -.035em;
    text-wrap: balance;
  }
  h1 { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 2.875rem); line-height: 1; letter-spacing: -.03em; }
  h2 {
    font-family: "Manrope", sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 1.2rem + 1.1vw, 1.875rem);
    line-height: 2.25rem;
    letter-spacing: -.01em;
  }
  h3 { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 1.25rem; line-height: 1.6rem; }

  p { margin: 0 0 1.25rem; max-width: 62ch; }
  /* ---------- Leesbreedte ----------
     Thomas op 03-09: "teksten nooit over de volledige breedte zetten" en "hero max op 650 px".

     ⚠ WAAROM DIT MISGING, ZODAT HET NIET TERUGKOMT. `.lead` had zelf geen max-width en erfde
     dus `p { max-width: 62ch }`. Maar `ch` schaalt mee met de lettergrootte van het element
     zelf, en een lead is 21 px in plaats van 17. Daardoor werd 62ch hier veel breder dan bij
     de leestekst. Bovenop dat erfde ik er 34 inline `max-width: NNch` overheen gezet, verspreid
     over tien pagina's, alsof 54ch een absolute maat was. Die leads liepen zo tot 815 px.

     Nu één regel in pixels, want dit is een leesmaat en geen typografische verhouding. 650 px
     geeft bij deze lettergrootte rond de 55 tekens per regel, netjes binnen de 45 tot 75 die
     leesbaar blijft. GEBRUIK HIER GEEN `ch`. */
  .lead { font-size: 1.3125rem; line-height: 2rem; font-weight: 500; max-width: 650px; }

  /* Toongroen haalt 4,60 op creme, maar op perzik zakt het naar 3,71.
     Alleen op perzik dus een diepere tint, zodat de creme-secties niet wijzigen. */
  .sectie--perzik .overline { color: #166B56; }

  .overline {
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--groen);
    margin: 0 0 .875rem;
  }

  a { color: var(--rood-op); text-underline-offset: 3px; }
  a:focus-visible, button:focus-visible {
    outline: 3px solid var(--groen);
    outline-offset: 3px;
    border-radius: 4px;
  }

  /* ---------- Beeldveld-placeholder ----------
     Toont zolang een ACF-beeldveld leeg is (mb_zaaltoon_beeld()). Zonder eigen
     hoogte valt een lege <div> terug tot 0px en oogt de sectie kapot in plaats
     van "hier komt nog een foto". Vaste minimumhoogte i.p.v. een intrinsieke
     beeldverhouding per context — ponytail: verdwijnt toch zodra er een echte
     foto staat, dus geen aparte maat per plek nodig. */
  .zaaltoon-beeld-placeholder {
    display: block;
    width: 100%;
    min-height: 220px;
    margin-bottom: 2.5rem;
    background: var(--zand);
    border-radius: var(--radius);
  }