/* 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 {
/* FormRenderer — generieke formulierlayout.
 * Afstanden zijn variabelen zodat sites hun maatvoering kunnen aanpassen zonder
 * de markup of de frameworkstructuur te overschrijven. */

form[data-component="form"] {
  display: grid;
  gap: var(--form-row-gap, 1.1rem);
}

form[data-component="form"] > .form-field {
  margin-bottom: 0;
}

.form-row {
  display: grid;
  gap: var(--form-field-gap, 1rem);
  margin-bottom: 0;
}

.form-row > * { min-width: 0; }

@container form-col (max-width: 480px) {
  .form-row { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr !important; }
}

.form-row > .form-field { margin-bottom: 0; }

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--form-field-gap, .35rem);
  margin-bottom: 0;
}

/* reCAPTCHA — de CMS-keuze "tonen als".
 *
 * Google injecteert z'n badge zelf, vast in de hoek van het scherm en buiten het formulier, dus
 * een afstammeling-selector komt er niet bij. Vandaar `:has()` op de markering die
 * `ReCaptchaField` op z'n wrapper zet: staat er op deze pagina een captcha die verborgen moet
 * worden, dan verdwijnt de badge — waar Google 'm ook neerzet.
 *
 * `visibility` en niet `display`: Google's script meet de badge op en klaagt in de console bij
 * `display:none`. Verbergen mag alleen mét de vermelding ernaast, en die rendert het veld er
 * onlosmakelijk bij; hier staat dus alleen de helft die CSS kan doen. */
:root:has([data-recaptcha-badge="hidden"]) .grecaptcha-badge {
  visibility: hidden;
}

/* De vermelding zelf: kleine, rustige tekst onder het formulier. */
.grecaptcha-notice {
  display: block;
  margin-top: var(--form-field-gap, .35rem);
  font-size: var(--form-notice-size, .78rem);
  line-height: 1.45;
  color: var(--form-notice-color, var(--muted, #6b7280));
}
.grecaptcha-notice a { color: inherit; }
}