/*
 * ghv-stijl.css — de globale stijllaag van GEHILVERSUM.
 *
 * Dit bestand draagt alleen de @font-face-regels. Het bepaalt GEEN kleuren, maten of
 * familienamen: die wonen in de tokenbron en komen per site binnen via het stijlboek.
 * Hier staat alleen wat een stijlboek niet kan: verwijzen naar een bestand.
 *
 * De familienamen staan in tokens/token-definitions-gehilversum.json:
 *   --gh-font-family-heading : Syne, system-ui, sans-serif
 *   --gh-font-family-base    : Inter, system-ui, -apple-system, sans-serif
 * Besloten 1 sep 2026 met Allard: de tokenbron wint van het huisstijl-doc, dus
 * koppen Syne en bodytekst Inter.
 *
 * WAAROM GEEN GOOGLE FONTS: een @font-face naar fonts.gstatic.com stuurt het
 * IP-adres van elke bezoeker naar een derde partij. Dat is een AVG-vraag, geen
 * prestatievraag. Beide families staan onder de SIL Open Font License, dus
 * meeleveren mag -- zie fonts/HERKOMST.md.
 *
 * scripts/bouw-stijl.sh weigert een url(...) waarvan het bestand niet in static/
 * staat: een @font-face die naar niets wijst faalt zonder een woord te zeggen, en
 * dat is precies het defect dat deze extensie repareert.
 */

/* Variabele fonts: een bestand draagt het hele gewichtsbereik. Het tweede getal in
   font-weight is dus geen keuze maar de as van het bestand zelf. */

@font-face {
	font-family: 'Syne';
	src: url('fonts/syne-variable.woff2') format('woff2-variations');
	font-weight: 400 800;
	font-style: normal;
	/* swap: liever de vervangende letter tonen dan een lege pagina. Zonder dit staat
	   er tot honderd milliseconden lang niets, en dat is erger dan even system-ui. */
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('fonts/inter-variable.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* Karla is het lettertype van een SITE (@AllArt), niet van GEHILVERSUM. Hij staat hier
   omdat een stijlboek een familie kan noemen en die familie dan ergens vandaan moet komen;
   zonder deze regel zou een site hem bij Google Fonts halen. Op een site die hem niet
   noemt kost hij niets: de browser haalt een lettertype pas op als er tekst in staat.
   Zie fonts/HERKOMST.md. */
@font-face {
	font-family: 'Karla';
	src: url('fonts/karla-variable.woff2') format('woff2-variations');
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

/* ------------------------------------------------------------------------
 * De rol binden — want tokens erven niet.
 *
 * Gemeten 1 sep 2026: onze eigen elementen renderen in Syne en Inter, maar
 * alles wat het THEMA zelf rendert (de body, de chrome eromheen) blijft
 * system-ui. Reden: het thema leest Liferay's eigen --font-family-base, en
 * dat is een andere variabele dan onze --gh-font-family-base. Precies wat op
 * 18 augustus bij de kleuren bleek: een merkwaarde overschrijven kleurt geen
 * knoppen mee; je moet de ROL zelf zetten.
 *
 * Deze regel voegt geen token toe en verandert geen merkwaarde -- hij knoopt
 * Liferay's basis aan de onze. Daarom is dit een codebeslissing en geen
 * merkbeslissing. De duurzame variant (een waarde voor Liferay's eigen token
 * in de tokenbron, zodat het via het stijlboek op ELKE site meekomt, ook waar
 * deze extensie niet is aangezet) is ingang D en ligt bij de vormgever.
 * ------------------------------------------------------------------------ */

:root {
	--font-family-base: var(--gh-font-family-base);
}

/* Dezelfde knoop voor de primaire knop van Clay -- 31 okt 2026.
 *
 * Gemeten op bin2 (Wijkcentrum De Koepel): de knop *Versturen* van Liferay Forms
 * is #0b5fff terwijl het stijlboek #C2500E zet. Clay leest
 * --btn-primary-background-color; het stijlboek schrijft --gh-btn-primary-bg.
 * Twee namen voor één rol, dus de knop krijgt de Liferay-standaard.
 *
 * Ontbreekt de --gh-waarde op een site, dan is de verwijzing ongeldig en valt
 * Clay terug op zijn eigen standaard: er verandert dan niets. Dit raakt alle
 * Clay-knoppen met .btn-primary (formulieren, inloggen), op elke site met deze
 * extensie aan. Dat is de bedoeling: ze horen de merkkleur te dragen. */
:root {
	--btn-primary-background-color: var(--gh-btn-primary-bg);
	--btn-primary-border-color: var(--gh-btn-primary-bg);
	--btn-primary-color: var(--gh-btn-primary-color);
	--btn-primary-hover-background-color: var(--gh-btn-primary-hover-bg);
	--btn-primary-hover-border-color: var(--gh-btn-primary-hover-bg);
	--btn-primary-hover-color: var(--gh-btn-primary-color);
}

/* De hoek van die knop volgt het stijlboek -- 2 nov 2026. Clay zet op .btn een vaste
 * 0.25rem in plaats van --border-radius. Op een site met afgeronde knoppen (De Koepel:
 * 64px, een pil) had het formulier daardoor als enige een hoekige knop. Alleen in
 * Liferay Forms, zodat beheerschermen ongemoeid blijven; een site zonder eigen
 * waarde houdt de 0.25rem van Clay. */
.portlet-forms .btn {
	border-radius: var(--border-radius, 0.25rem);
}

/* ---------------------------------------------------------------------------
 * BEWEGING MET RESPIJT, OP DE PLEK WAAR HET ÉÉN KEER HOEFT — 17 sep 2026.
 *
 * Criterium 6 van de meetlat (capabilities-vloer) vraagt dat reduced-motion in de
 * BOUW zit. Gemeten die dag over zeventien fragmenten: vijf regelen het zelf, en
 * twee bewegen zonder respijt -- `ghv-nieuwsbrief` en `ghv-tekstsectie`. Allebei
 * doen dat met precies één ding: `transition: var(--gh-transition-ui)`.
 *
 * Dat per fragment repareren zou de fout zeven keer uitnodigen. De overgangsduur
 * is een TOKEN, dus het antwoord hoort bij het token: wie geen beweging wil,
 * krijgt een duur van nul, en elk fragment dat het token gebruikt volgt vanzelf --
 * ook de fragmenten die er morgen bij komen.
 *
 * WAT DIT NIET DEKT, en dat hoort erbij: een `animation` met eigen sleutelframes
 * (het skelet in ghv-overzicht) en beweging die JavaScript zelf start
 * (`scrollIntoView({behavior:'smooth'})`). Die eerste hoort in de CSS van het
 * fragment zelf, de tweede bij de aanroep. Zie `scripts/poort-beweging-respijt.mjs`.
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	:root {
		--gh-transition-ui: none;
	}
}

/* ---------------------------------------------------------------------------
 * GEEN BLOK BREDER DAN ZIJN PLEK · 30 okt 2026.
 *
 * Gemeten op productie, 390 px breed: de 404-pagina van Liferay (de standaard
 * hulppagina die elke site krijgt) scrolt 205 px opzij, op @AllArt en op de
 * GEHILVERSUM-site. Die pagina zet in haar eigen paginastijl `width: 800px
 * !important` op de container en `width: 520px !important` op de alinea's.
 *
 * Een `width` met !important is niet te overschrijven zonder zelf !important te
 * worden, maar `max-width` wint altijd van `width`. Dus geen breedte opleggen,
 * alleen een plafond: een container of basiscomponent is nooit breder dan zijn
 * ouder. Rijen (`lfr-layout-structure-item-row`) bewust NIET: die zijn met hun
 * negatieve marge juist 30 px breder dan hun ouder, en een plafond zou de goten
 * scheef trekken.
 *
 * Nagemeten met de regel ingevoegd, 390 en 1280 px: de 404 op @AllArt en op de
 * GEHILVERSUM-site van 595 naar 390 px; home, detail, FAQ en organiseren van
 * @AllArt en de GEHILVERSUM-home: elke blokpositie en -breedte gelijk.
 * ------------------------------------------------------------------------ */

.lfr-layout-structure-item-container,
[class*="lfr-layout-structure-item-basic-component-"] {
	max-width: 100%;
}

/* VASTE BREEDTE BLIJFT VAST · 2 nov 2026.
 *
 * Gemeten op productie (Wijkcentrum De Koepel): een houder met *Vaste breedte*
 * krijgt van Clay `container-fluid-max-xl` en daarmee `max-width: 1248px`. De
 * regel hierboven zet daar `max-width: 100%` overheen -- hij komt later in de
 * cascade met dezelfde specificiteit -- dus elke vaste houder werd sinds 30 okt
 * op elke site met deze extensie zo breed als het scherm.
 *
 * Hier het plafond van beide: nooit breder dan de ouder (de 404-reparatie blijft)
 * en nooit breder dan de vaste maat van Clay. */
.lfr-layout-structure-item-container.container-fluid-max-xl {
	max-width: min(100%, var(--container-max-xl, 1248px));
}
.lfr-layout-structure-item-container.container-fluid-max-lg {
	max-width: min(100%, var(--container-max-lg, 992px));
}