/* Laag: framework. De rangorde staat in skeleton/templates/page.php:
 *   @layer framework, site, theme, type, item;
 * Alles wat het framework meestuurt zit in de onderste laag, zodat site-CSS en CMS-opmaak
 * ervan winnen zonder specificiteits-trucs. Binnen deze laag telt specificiteit gewoon, dus
 * de onderlinge verhouding tussen framework-bestanden verandert er niet door.
 *
 * Een bestand dat deze wikkel MIST staat buiten elke laag en wint daarmee van ALLES —
 * ook van het CMS. `tests/Framework/CodeStyle/ModuleCssIsLayeredTest.php` bewaakt dat. */
@layer framework {
/* Basis voor de tekst-klassen die de framework-renderers zélf uitschrijven.

   Alleen wat nodig is om de CMS-opmaak te laten wérken — geen huisstijl. Kleur, gewicht,
   letterafstand en ruimte horen bij de site of bij het designsysteem; wat hier staat is het
   soort regel waarzonder een instelling in het CMS niets doet.

   Laadt altijd, naast `variables.css` (die bewust alleen tokens bevat). */

/* De tagline moet een blok zijn, anders doet de uitlijning uit het CMS niets.

   De renderers schrijven 'm uit als `<span class="tagline ds-tagline">` of
   `<p class="tagline ds-subtitle">`, en het designsysteem zet er de `text-align` op die de
   redacteur bij de subtitle-slot kiest. Op een inline(-block) box centreert die uitlijning
   alleen de TEKST binnen het krap-om-de-letters gepaste doosje; het doosje zelf blijft links.
   Een redacteur klikt dan op "gecentreerd" en er gebeurt niets — precies wat er op 463 gebeurde
   met de tagline "De populaire".

   Waarom niet `inline-block` + `margin-inline:auto`: auto-marges lossen niet op bij een
   inline-niveau-box. In een proef bleef zo'n tagline gewoon links staan (x=8 in een ouder van
   1000px). Wat wél hugt én centreert is `display:block;width:fit-content;margin-inline:auto`,
   maar dat centreert ALTIJD en negeert dus juist de instelling.

   Keerzijde van `block`: een achtergrond op een tagline pakt de volle breedte in plaats van een
   pil te vormen. Wil een site dat wél, dan is een omhulsel om het element de juiste vorm —
   uitlijning op het omhulsel, uiterlijk op het element — en zet die site hier lokaal een
   `width:fit-content` overheen. */
.tagline { display: block; }

/* Alleen opeenvolgende alinea's krijgen standaard tussenruimte. Andere directe
   kinderen van prose, zoals divs, blockquotes en spans, zijn inhoudelijk geen
   automatische alinea's en mogen niet onverwacht verschuiven. */
.prose p + p { margin-top: var(--space-4, 1rem); }

/* Classloze lijsten in CMS-rich-text behouden hun markers en krijgen een leesbare
   inspringing en tussenruimte. Componentlijsten dragen een class en vallen hier niet onder. */
.prose ul:not([class]),
.prose ol:not([class]) {
    margin-block: 1rem;
    padding-inline-start: 1.5em;
    list-style-position: outside;
}

.prose li + li { margin-top: .35em; }

/* Framework-default: een hero-overlaytitel staat op een foto en gebruikt daarom standaard
   de lichte themakleur. De gewone klasse houdt de specificiteit laag, zodat site- of CMS-CSS wint. */
.hero__title--overlay { color: var(--theme-color-7, #fff); }
}