/* 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 {
/* Labels binnen het veld: het label hoort onzichtbaar te zijn maar wél voorleesbaar.
 *
 * De instelling staat als `data-label-position="inside"` op het formulier; de CSS volgt die
 * setting in plaats van een eigen utility-class te verzinnen. Tot 06-08-2026 zette de renderer
 * wel een `sr-only`-class op het label, maar die was NERGENS gedefinieerd — het label bleef dus
 * gewoon staan terwijl de instelling zei dat 'ie weg moest. Een class die niets doet is erger
 * dan geen class: wie 'm ziet, gelooft dat het geregeld is.
 *
 * Geen `display:none` en geen `visibility:hidden`: die halen het label ook bij een schermlezer
 * weg, en dan heeft een veld met alleen een placeholder helemaal geen toegankelijke naam meer.
 * Dit is de standaard visually-hidden-techniek: uit beeld, wél in de toegankelijkheidsboom.
 *
 * Geen `!important`. De attribuut-selector heeft genoeg gewicht, en de properties hieronder
 * botsen niet met de kleur/font die het CMS-design op datzelfde label zet — die overlappen niet.
 */
form[data-label-position="inside"] .form-field__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
}