/* Praktijk Olsthoorn - 1:1 opbouw van het ontwerp van de vormgever.
   Coordinatenstelsel: 1 rem = 1 ontwerp-pixel (1754 px = paginabreedte).
   Alles schaalt daardoor exact mee met de vensterbreedte. */

:root {
  --design-w: 1754;
  /* Boven ~1300 px zakt de tekst onder de vouw, omdat de hero 49% van de
     paginabreedte is. Daarom een maximum; de zijkanten vullen zich met de
     randkleur van het ontwerp zelf, zodat het schermvullend blijft ogen. */
  --max-w: 1200px;
}

html {
  /* 1rem == 1 ontwerp-pixel */
  font-size: calc(min(100vw, var(--max-w)) / var(--design-w));
  -webkit-text-size-adjust: 100%;
}

@font-face {
  font-family: "Minion Pro";
  src: url("../fonts/MinionPro-Regular.woff2?v=c62af74f") format("woff2"),
       url("../fonts/MinionPro-Regular.otf?v=fe9c236a") format("opentype");
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: "Minion Pro";
  src: url("../fonts/MinionPro-Bold.woff2?v=7fd485d2") format("woff2"),
       url("../fonts/MinionPro-Bold.otf?v=c3b734d6") format("opentype");
  font-weight: 700; font-style: normal; font-display: block;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* De zijkanten naast de pagina zijn wit (keuze van de ontwerper). De
     ruimte ONDER de pagina krijgt de kleur van de onderste beeldrij; die
     staat op <html>, zodat de afsluitende balk doorloopt tot onder in het
     venster. Zie ZIJKANTEN in _bron/build.py om dit te wisselen. */
  background-color: #ffffff;
  font-family: "Minion Pro", "Minion", Georgia, "Times New Roman", serif;
  color: #fff;
  display: flex;
  justify-content: center;
}

.page {
  position: relative;
  width: calc(var(--design-w) * 1rem);
  height: calc(var(--ph) * 1rem);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
}

.p1 { background-image: url("../img/p1.webp?v=25ef5aaf"); }
.p2 { background-image: url("../img/p2.webp?v=07b213e9"); }
.p3 { background-image: url("../img/p3.webp?v=d10cc078"); }
.p4 { background-image: url("../img/p4.webp?v=420b50e0"); }
.p5 { background-image: url("../img/p5.webp?v=d66f6908"); }
.p6 { background-image: url("../img/p6.webp?v=db88e74d"); }
.p7 { background-image: url("../img/p7.webp?v=993306bc"); }


/* tekstregels: exact op de coordinaten uit de InDesign-PDF */
.tx {
  position: absolute;
  margin: 0;
  white-space: pre;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
}
.tx.b, .tx b { font-weight: 700; }
.tx i { font-style: italic; }

/* Links dragen geen onderstreping: uitdrukkelijk verzoek van de ontwerper,
   zodat de tekst leest zoals in de PDF. Alleen toetsenbordfocus is zichtbaar. */
.lnk { color: inherit; text-decoration: none; }
.lnk:focus-visible { outline: 2px solid rgba(255,255,255,.85); outline-offset: 2px; }

/* navigatie: klikbare items exact over de balk uit het ontwerp */
.nav {
  position: absolute;
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 25rem;
  line-height: 1;
  white-space: pre;
  /* het kader is de woord-bbox uit de PDF; padding vergroot alleen het klikvlak */
  padding: 10rem 12rem;
  margin: -10rem -12rem;
  transition: opacity .15s ease;
}
.nav:hover { opacity: .68; }
.nav:focus-visible { outline: 2rem solid rgba(255,255,255,.8); outline-offset: 2rem; }

@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }

/* ---------------------------------------------------------------- mobiel ---
   Onder 780 px is de meegeschaalde menubalk te klein om aan te tikken.
   Daarom een uitklapmenu in de kleuren van het ontwerp zelf:
   #3c4031 is de donkere contentband, #7a7e63 de olijf van de menubalk. */

.menuknop { display: none; }

/* dekt de actieve-pagina-markering af zodra de menulabels verborgen zijn */
.pijlmasker { display: none; position: absolute; background-size: 100% 100%; }

@media (max-width: 780px) {
  /* De meegeschaalde menubalk is hier maar een paar pixels hoog en niet meer
     aan te tikken; navigeren gaat via de hamburger. De labels dus weg, anders
     staan er twee menu's tegelijk in beeld. De balk zelf zit in het
     paginabeeld en blijft als scheiding staan. */
  .nav { display: none; }
  .pijlmasker { display: block; }

  .menuknop {
    position: fixed; top: 12px; right: 12px; z-index: 20;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; width: 46px; height: 46px; padding: 0;
    background: rgba(60, 64, 49, .88);
    border: 1px solid rgba(122, 126, 99, .9);
    border-radius: 3px; cursor: pointer;
  }
  .menuknop span {
    display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .menuknop[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menuknop[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menuknop[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .menuknop:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

  .menupaneel {
    position: fixed; top: 0; left: 0; right: 0; z-index: 19;
    display: flex; flex-direction: column;
    padding: 70px 0 14px;
    background: rgba(60, 64, 49, .97);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
    font-size: 19px;
  }
  .menupaneel a {
    color: #fff; text-decoration: none;
    padding: 15px 22px; line-height: 1.2;
    border-top: 1px solid rgba(122, 126, 99, .55);
  }
  .menupaneel a:first-child { border-top: 0; }
  .menupaneel a[aria-current="page"] { background: rgba(255, 255, 255, .10); }
  .menupaneel a:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
}

.menupaneel[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) { .menuknop span { transition: none; } }