/* 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). */

/* Moet een blok zijn, anders doet de tekst-uitlijning uit het CMS niets op een inline `<span>`
   (463: "gecentreerd" aanklikken deed niets). `inline-block` + auto-marges lost dat niet op;
   wil een site een pil-achtergrond i.p.v. volle breedte, dan zet die lokaal een omhulsel om het
   element. */
.eyebrow { display: block; }

/* Zelfde reden als hierboven, voor een subtitel die als `<span>` rendert (LayerMediaAlbums). */
.subtitle { 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); }
}