/* De gedeelde onderlaag van de templatebibliotheek
 * ---------------------------------------------------------------------------
 * Elk template linkt dit bestand vóór zijn eigen stylesheet. Hier staat alleen
 * wat in elk skelet identiek is en waar niets aan te ontwerpen valt: de reset,
 * de standaardwaarden die uit de tokens komen, de sprong-naar-inhoud-link, de
 * focusring en de onthulling bij scroll.
 *
 * Wat hier NIET in hoort: iets over opbouw. Geen rasters, geen secties, geen
 * koppen, geen kaarten. Zodra twee templates dezelfde compositie delen zijn het
 * geen twee templates meer, en dan is dit bestand de plek waar dat begon.
 *
 * Dezelfde regel als in elke template-stylesheet: geen enkele kleur, geen enkel
 * lettertype, geen enkele losse maat. Alles komt uit `tokens.css`.
 * `test/template.test.js` dwingt dat ook op dit bestand af.
 */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--inkt);
  font-family: var(--letter-tekst);
  font-size: var(--tekst-tekst);
  line-height: var(--regel-tekst);
  /* Meerdere templates laten beeld tot voorbij de rand doorlopen. Dat mag nooit
     een horizontale schuifbalk opleveren; Controleer blokkeert daarop. */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--letter-kop);
  line-height: var(--regel-kop);
  letter-spacing: var(--spatie-kop);
  margin: 0;
  text-wrap: balance;
  /* Een lange bedrijfsnaam mag de compositie nooit breken. Op de displaymaat is
     "Loodgietersbedrijf" op een telefoon van 390 breed één woord dat niet past,
     en dat levert een horizontale schuifbalk op waar Controleer op blokkeert.
     `anywhere` en niet `break-word`: alleen de eerste telt mee in de
     min-content-breedte, en dat is precies de maat waarop een rasterkolom
     buiten het scherm groeit. */
  overflow-wrap: anywhere;
}

p, figure, blockquote, dl, dd { margin: 0; }

ul, ol { margin: 0; padding: 0; }

img {
  display: block;
  max-width: 100%;
  height: auto;
  background: var(--vlak);
}

address { font-style: normal; }

table { border-collapse: collapse; }

a {
  color: var(--accent);
  text-decoration-thickness: from-font;
  text-underline-offset: 0.2em;
}

/* Eén zichtbare focusring voor de hele bibliotheek. Een template mag hem
   verplaatsen, niet weghalen. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: calc(var(--lijndikte) * 2) solid var(--accent);
  outline-offset: calc(var(--eenheid) / 2);
}

/* De sprong naar de inhoud. Buiten beeld tot hij focus krijgt, nooit
   `display: none`: dan slaat de toetsenbordgebruiker hem over. */
.overslaan {
  position: absolute;
  left: calc(var(--eenheid) * 2);
  top: calc(var(--eenheid) * -10);
  z-index: 20;
  padding: var(--eenheid) calc(var(--eenheid) * 2);
  background: var(--accent-vlak);
  color: var(--op-accent);
  border-radius: var(--radius);
  text-decoration: none;
  transition: top 150ms ease;
}
.overslaan:focus { top: calc(var(--eenheid) * 2); }

/* Alleen voor schermlezers: een kop die de structuur compleet maakt zonder in
   de compositie te gaan staan. */
.enkel-voorlezen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Onthulling bij scroll, aangestuurd door `kenmerken.js`.
 *
 * Geschaald op `html.js` en nooit op `[data-onthul]` alleen: zonder JavaScript
 * hoort alles gewoon zichtbaar te zijn. Dat is de regel uit KENMERKEN.md, en
 * het is ook waarom hier geen enkele inhoud achter beweging verdwijnt. */
html.js [data-onthul]:not(.is-onthuld) {
  opacity: 0;
  transform: translateY(calc(var(--eenheid) * 3));
}
[data-onthul].is-onthuld {
  opacity: 1;
  transform: none;
  transition: opacity 500ms ease, transform 500ms ease;
}

/* Minder beweging: alles wat beweegt staat stil, en niets verdwijnt. Dit is ook
   de toestand waarin Controleer de pagina fotografeert en het contrast meet. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-onthul]:not(.is-onthuld) { opacity: 1; transform: none; }
  [data-onthul].is-onthuld { transition: none; }
  .overslaan { transition: none; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* Het logo van de zaak zelf, naast hun naam in de kopbalk.
 *
 * Gezet door de invulmotor (`zetLogoInKop` in server/templateFill.js) en niet
 * door een template, want elk template heeft die kopbalk al - alleen onder een
 * andere klassenaam. Daarom staat deze regel hier in de gedeelde basis en niet
 * tien keer in styles.css.
 *
 * De maat hangt aan `em` en dus aan de typografie van het template waar hij in
 * staat: een strakke rasterbalk krijgt hem klein, een royale kroon groter,
 * zonder dat hier iets per template geregeld hoeft te worden. De begrenzing is
 * er niet voor de schoonheid maar voor de overloopcontrole: een geoogst logo is
 * regelmatig een PNG van vijftienhonderd pixels breed, en zonder plafond duwt
 * dat de hele balk het scherm af. `object-fit` houdt daarbij de verhouding
 * heel, zodat een liggend woordmerk niet in een vierkant geperst wordt. */
.merk-beeld {
  height: 1.6em;
  width: auto;
  max-width: 14ch;
  object-fit: contain;
  vertical-align: -0.3em;
  margin-right: 0.5em;
}