/* ghv-standaardwaarden:begin */
/* GEGENEREERD door scripts/bouw-ghv-thema.mjs uit tokens/token-definitions-gehilversum.json.
 * Niet met de hand wijzigen. Specificiteit nul: elk stijlboek en elk thema wint. */
:where(:root) {
	--color-accent: #C369FF;
	--color-yellow: #FBBA07;
	--color-red: #E62654;
	--color-blue-dark: #5626E6;
	--color-green: #A6E329;
	--color-bg-dark: #000000;
	--color-bg-dark-overlay: #00000099;
	--color-bg-panel-overlay: #00000099;
	--color-bg-sidebar-center: #000000;
	--color-bg-sidebar-edge: #0F0D0D;
	--gh-text-on-dark-muted: #FFFFFFD9;
	--gh-text-on-dark-secondary: #AAAAAA;
	--gh-overlay-hover: #0000000F;
	--gh-overlay-on-dark: #FFFFFF33;
	--gh-spacing-navbar-padding: clamp(14px, 6.25vw, 90px);
	--gh-space-inline: 0.5rem;
	--gh-space-stack-field: 1rem;
	--gh-space-grid: 1.5rem;
	--gh-pad-card: 1rem;
	--gh-space-section: 2rem;
	--gh-space-stack: 1rem;
	--gh-space-label-gap: 0.25rem;
	--gh-pad-btn: 0.5rem 1rem;
	--gh-pad-control: 0.5rem 0.75rem;
	--gh-pad-badge: 0.25rem 0.6rem;
	--gh-pad-notice: 0.75rem 1rem;
	--gh-pad-cell: 0.65rem 0.9rem;
	--gh-shadow-card: 0 4px 10.5px 0 rgba(0,0,0,0.12);
	--gh-shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
	--gh-shadow-lg: 0 4px 16px rgba(0,0,0,0.15);
	--gh-shadow-modal: 0 10px 30px rgba(0,0,0,0.25);
	--gh-transition-press: 0.05s ease;
	--gh-transition-ui: 0.2s ease;
	--gh-transition-reveal: 0.3s ease;
	--gh-size-logo-header: 214px;
	--gh-size-logo-footer: 32px;
	--gh-size-logo-footer-bottom: 7.7rem;
	--gh-size-footer-column-min: 200px;
	--gh-maat-leesregel: 58ch;
	--gh-container-navbar: 1380px;
	--gh-schuinte: 0px;
	--gh-border-width: 1px;
	--gh-border-width-input: 1.5px;
	--gh-border-width-nadruk: 2px;
	--gh-border-width-accent: 4px;
	--gh-font-family-heading: Syne, system-ui, sans-serif;
	--gh-font-family-base: Inter, system-ui, -apple-system, sans-serif;
	--gh-font-size-caption: 0.8rem;
	--gh-font-size-meta: 0.875rem;
	--gh-font-size-eyebrow: 0.8rem;
	--gh-font-size-ui: 0.875rem;
	--gh-font-size-body-sm: 0.9rem;
	--gh-font-size-badge: 0.85rem;
	--gh-font-size-base: 1.125rem;
	--gh-font-size-card-title: 1rem;
	--gh-font-size-heading: 1.25rem;
	--gh-font-size-titel: 2.8125rem;
	--gh-font-size-hero: clamp(2rem, 5vw, 2.5rem);
	--gh-font-size-stat: 2.25rem;
	--gh-font-weight-light: 200;
	--gh-font-weight-normal: 400;
	--gh-font-weight-medium: 500;
	--gh-font-weight-semibold: 600;
	--gh-font-weight-bold: 700;
	--gh-font-weight-display: 900;
	--gh-line-height-kop: 1.3;
	--gh-line-height-titel: 1.15;
	--gh-line-height-hero: 1.1;
	--gh-line-height-body: 1.5;
	--gh-line-height-artikel: 1.65;
	--gh-tracking-label: 0.06em;
	--gh-tracking-titel: -0.015em;
	--gh-tracking-hero: -0.02em;
	--gh-tracking-heading: 0.2px;
	--gh-btn-primary-bg: #E62654;
	--gh-btn-primary-color: #FFFFFF;
	--gh-btn-primary-hover-bg: #C41E48;
	--gh-btn-secondary-bg: #F4F4F6;
	--gh-btn-secondary-color: #111827;
	--gh-btn-secondary-hover-bg: #EEEEF5;
	--gh-btn-danger-bg: #CC0000;
	--gh-btn-danger-color: #FFFFFF;
	--gh-btn-danger-hover-bg: #A93226;
	--gh-btn-success-bg: #1A6A1A;
	--gh-btn-success-hover-bg: #1A6A1A;
	--gh-btn-neutral-bg: #6C757D;
	--body-secondary-color: #6B6C7E;
	--gh-form-placeholder: #9AA0A6;
	--gh-surface: #FFFFFF;
	--gh-surface-page: #FFFFFF;
	--gh-surface-subtle: #F7F8F9;
	--gh-surface-disabled: #888888;
	--gh-surface-media-placeholder: #E8F4F7;
	--gh-surface-accent-subtle: #64328A26;
	--gh-surface-promo-highlight: #FFE24126;
	--gh-surface-note: #FFFEDF;
	--gh-surface-dark: #1A1A1A;
	--gh-surface-dark-panel: #2A2A2A;
	--gh-surface-dark-field: #3A3A3A;
	--gh-form-invalid-bg: #FFF8F8;
	--gh-border: #E7E7ED;
	--gh-border-subtle: #F7F8F9;
	--gh-border-accent: #1A1A1A;
	--gh-border-on-dark-solid: #444444;
	--gh-border-on-dark-alpha: #FFFFFF66;
	--gh-focus-ring: #FFA500;
	--gh-link: #1C1C24;
	--gh-link-hover: #004499;
	--success-bg: #ECFDF5;
	--success-border: #A7F3D0;
	--danger-bg: #FEF2F2;
	--danger-border: #FECACA;
	--warning-bg: #FDF6EC;
	--warning-border: #F5D9A8;
	--info-bg: #EAF0FB;
	--info-border: #B8CCEC;
	--success-text: #155724;
	--danger-text: #721C24;
	--warning-text: #856404;
	--info-text: #1A56DB;
	--color-object-activiteit: #5B4FCF;
	--color-object-hulpvraag: #E07C3A;
	--color-object-vacature: #1E7A3C;
	--color-object-organisatie: #0E7490;
	--color-object-faq: #1A7A8F;
	--color-object-fotografie: #C8A428;
	--color-object-hulpaanbod: #D44A8F;
	--color-object-hulppunt: #2D6A9F;
	--color-object-actueel: #1A5276;
	--color-object-vrijwilligersverhalen: #2D7A5A;
	--color-object-anbi: #54A4DB;
	--color-object-documenten: #ED1C24;
	--color-kanaal-eigen: #FBBA07;
	--color-kanaal-eigen-text: #8A6000;
	--color-kanaal-extern: #8B45CC;
	--color-kanaal-toegestaan: #3A9B5C;
	--color-kanaal-ter-beoordeling: #1A5FB4;
	--color-kanaal-afgewezen: #C41245;
	--color-cycle-1: #2D6A9F;
	--color-cycle-2: #5B9A3C;
	--color-cycle-3: #D4831A;
	--color-cycle-4: #7B3A9F;
	--color-social-linkedin: #0A66C2;
	--color-social-facebook: #1877F2;
	--color-social-whatsapp: #25D366;
	--color-social-facebook-hover: #1464D0;
	--color-social-facebook-subtle: #EEF4FF;
	--color-social-linkedin-hover: #0855A0;
	--color-social-whatsapp-hover: #1DA853;
	--color-social-twitter: #000000;
	--color-social-twitter-hover: #333333;
	--color-kader-welzijn: #2D6A9F;
	--color-kader-zorg: #5B9A3C;
	--color-kader-veiligheid: #D4831A;
	--color-type-vervoer: #2D6A9F;
	--color-type-expertise: #5B9A3C;
	--color-type-handjes: #D4831A;
	--color-type-spullen: #7B3A9F;
	--color-type-ruimte: #1A7A8F;
	--color-type-maatje: #7A3A1A;
	--color-type-financiele-ondersteuning: #8A2D6A;
}
/* ghv-standaardwaarden:einde */
/*
 * 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;
}

/* Podkova en Reddit Sans zijn de lettertypen van een SITE (participatiehilversum.nl),
   niet van GEHILVERSUM; zelfde redenering als Karla hierboven. Zie fonts/HERKOMST.md. */
@font-face {
	font-family: 'Podkova';
	src: url('fonts/podkova-variable.woff2') format('woff2-variations');
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Reddit Sans';
	src: url('fonts/redditsans-variable.woff2') format('woff2-variations');
	font-weight: 200 900;
	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));
}