/* ==========================================================
   OVER — paginaspecifieke compositie, gedeeld door /over.html en /changelog.html
   ========================================================== */
/* De H1 is hier de kop van de tekst eronder en hoort daar dus dicht op te staan. De 30px
   van compositions.css gaat uit van de tool, waar onder de H1 nog een subtitel en een heel
   scherm volgen; op deze twee pagina's is dat te veel lucht. Op een smal scherm valt de
   ruimte die het (hogere) merk-blok naast de H1 inneemt weg, en wordt het gat vanzelf nog
   kleiner — precies de bedoeling. */
header { padding-bottom: 10px; }
/* Alleen boven en onder: de zijkanten komen uit compositions.css (40px) en op een smal
   scherm uit exceptions.css (20px) — zo houdt main dezelfde contentbox als de kop en de
   voettekst, op elke breedte. Niet de padding-shorthand gebruiken: die zou de 20px van
   exceptions.css overschrijven (over.css laadt daarna). */
main { padding-top: 12px; padding-bottom: 60px; }
/* De inhoud staat als gecentreerde kolom (640px); de H1 in de kop lijnt daar links mee uit
   (zie de @media-regel onderaan). */
.over-inhoud { max-width: 640px; margin: 0 auto; }
.over-tekst p { margin: 0 0 18px; font-size: 16px; color: var(--inkt-zacht); }
.over-tekst p:last-child { margin-bottom: 0; }
/* Changelog: versiekop + categorieën (Added/Changed/Fixed/Removed) + bullets */
.over-tekst h2 { font-family: var(--kop-font); font-weight: 700; font-size: 24px; letter-spacing: -0.01em; margin: 36px 0 6px; }
.over-tekst h2:first-child { margin-top: 0; }
.over-tekst .versie-datum { font-family: "Inter", sans-serif; font-weight: 400; font-size: 16px; color: var(--inkt-vaag); }
.over-tekst h3 { font-family: var(--kop-font); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--inkt-vaag); margin: 20px 0 8px; }
.over-tekst ul { margin: 0 0 8px; padding-left: 20px; }
.over-tekst li { margin: 0 0 6px; font-size: 16px; color: var(--inkt-zacht); }

/* Kop uitlijnen met de inhoudskolom: de H1 (in .kop-titels) begint op de linkerrand van
   .over-inhoud, en het merk hangt er links van op dezelfde afstand als in de tool. De
   kop en main hebben dezelfde contentbox (beide max-width --breedte, gecentreerd), dus
   (100% − 640)/2 is de linkeroffset van de kolom; daar gaan nog de merk-breedte en de
   tussenruimte vanaf, zodat het flex-blok merk+H1 zo opschuift dat de H1 op de kolomrand
   valt en het merk links uitsteekt. De verticale uitlijning (bloem-bovenkant op H1-
   bovenkant) komt onveranderd uit .kop-merk-titel/.merk in compositions.css.
   Pas vanaf 1024px: daaronder is er links te weinig ruimte voor het uitstekende merk —
   dan blijft merk+H1 gewoon links staan (kop en inhoud even niet uitgelijnd). */
@media (min-width: 1024px) {
  header { display: block; }
  .kop-merk-titel { width: fit-content; margin-left: calc((100% - 640px) / 2 - var(--merk-kolom) - var(--kop-gap)); }
}

/* Smal scherm: geen gecentreerde kolom meer, maar de volle contentbox — precies de maat
   die .kop-subs in de tool ook heeft. De H1 begint daar (in de kop) al op de linkerrand
   van diezelfde box, dus kop en inhoud lijnen vanzelf links uit. Zelfde grens als
   exceptions.css, waar de kop op een stapel overgaat. */
@media (max-width: 860px) {
  .over-inhoud { max-width: none; }
  /* Wat lucht boven de H1: hij hangt hier vlak onder het (gecentreerde) merk, en zonder
     deze marge plakken ze aan elkaar. Alleen hier — in de tool zit de tabbalk ertussen. */
  .kop-titels { margin-top: 8px; }
}