/*
 * Componenten van het nieuwe ontwerp, bij de patronen in patterns/. Ook in
 * de blokeditor geladen (inc/patronen.php).
 */

:root {
	/*
	 * Gebogen onderrand van een foto (vlagvorm, zie ACHTERHOEK_vormen-09 in
	 * de huisstijl): hoeken op 93%, midden op 100%, als boog benaderd.
	 */
	--aa-vlagrand: polygon(
		0 0, 100% 0, 100% 93%, 82.7% 95.8%, 67.4% 98%, 56% 99.5%, 50% 100%,
		44% 99.5%, 32.6% 98%, 17.3% 95.8%, 0 93%
	);
}

/* ==========================================================================
   Secties
   ==========================================================================
   Elk patroon is een groep over de volle breedte (.aa-sectie) met de inhoud
   op de contentbreedte. De achtergrondkleur kiest de redacteur.
   ========================================================================== */

/*
 * Kadence zet .entry-content .alignfull op padding 0 en
 * .entry-content .wp-block-group.has-background op 20px 30px (en laadt na dit
 * bestand); vandaar de extra klassen.
 */
.aa-sectie,
.entry-content .wp-block-group.aa-sectie.alignfull {
	padding-block: clamp(3rem, 6vw, 4.5rem);
	padding-inline: var(--global-content-edge-padding, 1.5rem);
}

/*
 * Kadence geeft elk blok 32px marge onder. Tussen blokken over de volle
 * breedte is dat een witte strook (tussen het visieblok en de agenda
 * bijvoorbeeld); die blokken bepalen hun ruimte zelf met hun padding.
 */
.entry-content :is(.wp-block-group, .wp-block-cover, .wp-block-image).alignfull {
	margin-block-end: 0;
}

/*
 * Twee secties zonder achtergrond na elkaar lopen visueel in elkaar over;
 * dan niet twee keer de volle ruimte ertussen.
 */
.aa-sectie:not(.has-background) + .aa-sectie:not(.has-background) {
	padding-block-start: 0;
}

.aa-sectie > *,
.aa-sectie > .wp-block-group__inner-container > * {
	max-width: var(--global-content-width, 1200px);
	margin-inline: auto;
}

.aa-sectie > * + *,
.aa-sectie > .wp-block-group__inner-container > * + * {
	margin-block-start: 2rem;
}

.aa-intro > *,
.aa-intro > .wp-block-group__inner-container > * {
	max-width: 52rem;
}

/*
 * De h1 van de homepage is de sitenaam en staat alleen in de code, vóór de
 * zichtbare kop. Hij staat buiten de tekststroom, dus de kop erna begint
 * gewoon bovenaan de sectie.
 */
.aa-sectie > .screen-reader-text + *,
.aa-sectie > .wp-block-group__inner-container > .screen-reader-text + * {
	margin-block-start: 0;
}

/* Knop onder een kaartenrij of tegels staat losser dan de rest van de sectie. */
.aa-sectie > .wp-block-buttons,
.aa-sectie > .wp-block-group__inner-container > .wp-block-buttons {
	margin-block-start: clamp(2.5rem, 4vw, 3.5rem);
}

/* ==========================================================================
   Header
   ==========================================================================
   Het logo en de contrastknop staan in HTML-elementen van Kadence en komen
   uit de plugin awp-kadence ([site-logo] en [awp_contrast_toggle]). Die
   krijgen de opmaak van Kadence niet mee, dus die staat hier.
   ========================================================================== */

.header-html .logo-wrapper,
.mobile-html .logo-wrapper {
	display: flex;
}

.header-html .logo-image,
.mobile-html .logo-image {
	display: block;
	/* 200px: dan past het menu ernaast tot de header naar de mobiele versie schakelt. */
	width: 200px;
	max-width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	.header-html .logo-image,
	.mobile-html .logo-image {
		width: 170px;
	}
}

/*
 * Op smallere schermen de vaste marge tussen de headeronderdelen vervangen
 * door ruimte in de rij zelf; dat houdt de onderdelen beter bij elkaar als
 * de ruimte krap wordt. Met #masthead ervoor, want Kadence zet die marge in
 * een stylesheet die na deze laadt.
 */
@media (max-width: 1024px) {
	#masthead .site-header-item {
		margin-right: 0;
	}

	#masthead .site-header-row {
		gap: 1rem;
	}
}

.header-html .brand:focus-visible,
.mobile-html .brand:focus-visible {
	outline: 3px solid var(--global-palette3);
	outline-offset: 4px;
}

/*
 * Contrastknop: een icoon zoals het zoek-icoon ernaast. Kadence maakt er
 * standaard een donker knopje van, vandaar de zware selector. De tekst in de
 * knop leest de schermlezer voor; awp-kadence houdt aria-label en
 * aria-pressed bij.
 */
.site-header-item .kadence-color-palette-switcher.kcps-style-button button.kadence-color-palette-toggle {
	display: flex;
	align-items: center;
	padding: 0.4rem;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--global-palette3);
	cursor: pointer;
	filter: none;
}

.site-header-item .kadence-color-palette-switcher.kcps-style-button button.kadence-color-palette-toggle:hover {
	color: var(--global-palette1);
}

.site-header-item .kadence-color-palette-switcher.kcps-style-button button.kadence-color-palette-toggle:focus-visible {
	outline: 3px solid var(--global-palette3);
	outline-offset: 2px;
}

/* Even groot als het zoekicoon ernaast (header_search_icon_size). */
.kadence-color-palette-toggle .awp__icon {
	width: 1.25rem;
	height: 1.25rem;
}

/*
 * In de contrastmodus een streep door het icoon: de knop zet het contrast
 * dan weer uit. Zonder die streep lijken de twee standen te veel op elkaar.
 * De rand om de streep heeft de kleur van de header, zodat er ruimte om de
 * streep lijkt te zitten.
 */
.site-header-item .kadence-color-palette-switcher.kcps-style-button button.kadence-color-palette-toggle {
	position: relative;
}

.color-switch-dark .kadence-color-palette-toggle::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 2px;
	height: 1.6rem;
	margin: auto;
	border-radius: 1px;
	background: currentColor;
	box-shadow: 0 0 0 2px var(--global-palette9);
	rotate: 45deg;
}

.kadence-color-palette-toggle .kadence-color-palette-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * Menutekst op dezelfde basislijn als "AMBASSADEURS" in het logo (ontwerp).
 * De binnenruimte van een menu-item blijft boven en onder gelijk, zodat de
 * focusrand gelijkmatig om de tekst staat; in plaats daarvan schuift het
 * hele menu omlaag. Het logo is 200x50 en staat midden in de header van
 * 96px; de basislijn van AMBASSADEURS ligt dan op 64px, 13px lager dan de
 * basislijn van een gecentreerd menu-item. Met #masthead ervoor, want Kadence
 * zet de padding inline na deze stylesheet.
 */
#masthead .main-navigation .primary-menu-container > ul > li.menu-item > a {
	padding-top: 0.6em;
	padding-bottom: 0.6em;
}

@media (min-width: 1025px) {
	#main-header .site-header-item-main-navigation {
		position: relative;
		top: 13px;
	}
}

/*
 * Het uitklapmenu begint op de onderrand van de header (96px). Het
 * menu-item staat door de verschuiving hierboven op 39-84px, dus 57px vanaf
 * de bovenkant van het item. Alleen het eerste niveau; een dieper niveau
 * staat naast zijn ouder.
 */
#masthead .header-navigation .header-menu-container > ul > li > ul.sub-menu,
#masthead .header-navigation .header-menu-container > ul > li > ul.submenu {
	top: 57px;
}

/* ==========================================================================
   Taalkeuze in de header (template-parts/header/aa-talen.php)
   ========================================================================== */

/*
 * Volle hoogte van de headerrij, zodat de lijst net als het uitklapmenu op
 * de onderrand van de header begint. De iconen blijven verticaal gecentreerd
 * (dat doet .site-header-item zelf).
 */
#masthead .site-header-section-right {
	align-self: stretch;
}

.aa-talen {
	height: 100%;
	align-items: stretch;
}

.aa-talen__wrap {
	position: relative;
	display: flex;
	align-items: center;
	align-self: stretch;
}

.aa-talen__knop {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	padding: 0.4rem;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	color: var(--global-palette3);
	cursor: pointer;
}

/* Kadence geeft een knop bij hover en focus een eigen achtergrond. */
.aa-talen__knop:hover,
.aa-talen__knop:focus,
.aa-talen__knop:active {
	background-color: transparent;
	box-shadow: none;
}

.aa-talen__knop:hover {
	color: var(--global-palette1);
}

.aa-talen__knop:focus-visible,
.aa-talen__lijst a:focus-visible {
	outline: 3px solid var(--global-palette3);
	outline-offset: 2px;
}

.aa-talen__vlag {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

.aa-talen__pijl {
	display: flex;
}

.aa-talen__knop[aria-expanded="true"] .aa-talen__pijl {
	rotate: 180deg;
}

/*
 * De lijst als het uitklapmenu in de header: even breed, zelfde binnenruimte
 * en schaduw, en beginnend op de onderrand van de header. Wit met
 * Avondblauwe tekst, Buitenlucht bij hover.
 */
.aa-talen__lijst {
	position: absolute;
	z-index: 1000;
	top: 100%;
	right: 0;
	width: 240px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--global-palette9);
	box-shadow: 0 2px 13px rgb(0 0 0 / 10%);
}

.aa-talen__lijst li {
	margin: 0;
}

.aa-talen__lijst li + li a {
	border-top: 1px solid rgb(16 77 119 / 20%);
}

.aa-talen__lijst a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 16px;
	color: var(--global-palette12);
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
}

/* Alleen de achtergrond verandert; Kadence kleurt een link bij hover anders. */
.aa-talen__lijst a:hover,
.aa-talen__lijst a:focus-visible {
	background: var(--global-palette7);
	color: var(--global-palette12);
	text-decoration: underline;
}

/* ==========================================================================
   Kaarten (nieuws, innovaties)
   ==========================================================================
   Query-lus met class aa-kaarten. Foto met gebogen onderrand, gecentreerde
   titel en korte tekst. De hele kaart is klikbaar via de titellink (één
   link per kaart, dus één tabstop).

   Varianten:
   - standaard: witte kaart, oranje titel (op Buitenlucht)
   - .aa-kaarten--blauw: Buitenlucht-kaart, Avondblauwe titel (op wit)
   - .aa-kaarten--vier: vier kolommen
   ========================================================================== */

.aa-kaarten {
	--aa-kaart-achtergrond: var(--global-palette9);
	--aa-kaart-titel: var(--global-palette1);
	--aa-kaart-kolommen: 3;
}

.aa-kaarten--blauw {
	--aa-kaart-achtergrond: var(--global-palette7);
	--aa-kaart-titel: var(--global-palette12);
}

.aa-kaarten--vier {
	--aa-kaart-kolommen: 4;
}

.aa-kaarten .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(var(--aa-kaart-kolommen), minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1024px) {
	.aa-kaarten .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.aa-kaarten .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

.aa-kaarten .wp-block-post {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	background: var(--aa-kaart-achtergrond);
	text-align: center;
}

.aa-kaarten .wp-block-post-featured-image {
	margin: 0;
	clip-path: var(--aa-vlagrand);
}

.aa-kaarten .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Ruimte voor drie regels; het afkappen zelf zit op de link erbinnen. */
.aa-kaarten .wp-block-post-title {
	min-height: 3.75em;
	margin: 1.25rem 1.5rem 0.75rem;
	color: var(--aa-kaart-titel);
	font-family: "Univers LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	text-transform: none;
}

/* Kaart zonder tekst eronder (innovaties): ruimte onder de titel. */
.aa-kaarten .wp-block-post:not(:has(.wp-block-post-excerpt)) .wp-block-post-title {
	margin-block-end: 1.5rem;
}

/*
 * Langere titels na drie regels afkappen. Op de titel zelf kan dat niet: die
 * is een flex-item, en dan wordt -webkit-box "flow-root" en doet line-clamp
 * niets.
 */
.aa-kaarten .wp-block-post-title a {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: inherit;
	text-decoration: none;
}

/* De titellink bedekt de hele kaart. */
.aa-kaarten .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.aa-kaarten .wp-block-post:hover .wp-block-post-title a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Focus op de hele kaart, want de link bedekt de kaart. */
.aa-kaarten .wp-block-post-title a:focus-visible {
	outline: none;
}

.aa-kaarten .wp-block-post:has(a:focus-visible) {
	outline: 3px solid var(--global-palette3);
	outline-offset: 3px;
}

.aa-kaarten .wp-block-post-excerpt {
	margin: 0 1.5rem 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.aa-kaarten .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* ==========================================================================
   Hero
   ==========================================================================
   Omslagblok (video of foto) met class aa-hero. Een badgeknop erin staat
   rechtsonder, half over de rand (mockup Home).
   ========================================================================== */

.wp-block-cover.aa-hero {
	overflow: visible;
}

/* Niet de binnencontainer maar de hero zelf als referentie voor de badge. */
.aa-hero .wp-block-cover__inner-container {
	position: static;
}

.aa-hero .aa-badge {
	position: absolute;
	/* Rechterrand van de badge op de contentbreedte (1200px), niet op de schermrand. */
	right: max(1.5rem, calc((100% - var(--global-content-width, 1200px)) / 2));
	bottom: -3.5rem;
	z-index: 2;
}

.aa-hero__pauze {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	z-index: 2;
	padding: 0.4rem 0.8rem;
	border: 0;
	border-radius: 0;
	background: rgba(29, 29, 27, 0.75);
	color: var(--global-palette9);
	font-size: 0.875rem;
	cursor: pointer;
}

.aa-hero__pauze:focus-visible {
	outline: 2px solid var(--global-palette9);
	outline-offset: 2px;
}

/* ==========================================================================
   Visie (omslagblok "Kom maar op")
   ========================================================================== */

/*
 * De tekst rechts binnen de contentbreedte, niet tegen de schermrand. Het
 * omslagblok zet bij "inhoud rechts" width/margin met een dubbele klasse,
 * vandaar de zware selector.
 */
.wp-block-cover.aa-visie.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--global-content-width, 1200px);
	margin-inline: auto;
}

.aa-visie__tekst {
	max-width: 24rem;
	margin-inline-start: auto;
	text-align: center;
}

/* Het omslagblok zet koppen op "inherit"; de slogan blijft Ambassadeursrood. */
.wp-block-cover.aa-visie .aa-slogan {
	color: var(--global-palette1);
}

/*
 * Een brede strook uit een foto snijdt snel hoofden weg: standaard iets
 * boven het midden. Een focuspunt dat de redacteur kiest (inline stijl)
 * gaat hier altijd overheen.
 */
.aa-visie .wp-block-cover__image-background {
	object-position: 50% 35%;
}

/*
 * Zachte witte waas van rechts achter de tekst, zodat de oranje slogan op
 * elke foto leesbaar blijft (in de mockup valt de tekst op een lichte lucht).
 * De overlay van het omslagblok staat op 0% dekking; hier wordt het de waas.
 */
.wp-block-cover.aa-visie .wp-block-cover__background.has-background-dim.has-background-dim-0 {
	background: linear-gradient(to left, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.7) 28%, rgba(255, 255, 255, 0) 55%);
	opacity: 1;
}

.wp-block-cover.aa-visie .aa-kicker {
	margin-block-end: 0.75rem;
}

.wp-block-cover.aa-visie .aa-slogan {
	margin-block: 0 1.5rem;
	margin-inline: auto;
}

.aa-kicker {
	margin: 0 0 0.5rem;
	color: var(--global-palette1);
	font-family: "Freudian One", "Arial Narrow", Arial, sans-serif;
	font-size: 1.5rem;
	line-height: 1;
	text-transform: uppercase;
}

.aa-slogan {
	max-width: 4.5ch;
	margin: 0 auto 1.5rem;
	font-size: clamp(3.5rem, 9vw, 6.5rem);
	line-height: 0.85;
}

.aa-visie .wp-block-buttons {
	justify-content: center;
}

/*
 * Tot en met tablet past de tekst niet naast de foto: dan valt hij over de
 * vrouw op de brommer en is hij op de donkere delen slecht leesbaar. Daarom
 * de foto als strook bovenaan en de tekst eronder op wit, zonder waas. De
 * strook groeit mee met de breedte, anders blijft er van de foto op een
 * tablet alleen een smalle band over.
 */
@media (max-width: 1024px) {
	.wp-block-cover.aa-visie {
		--aa-visie-strook: clamp(14rem, 36vw, 22rem);

		align-items: flex-start;
		padding-block-start: calc(var(--aa-visie-strook) + 2rem);
		background: var(--global-palette9);
	}

	.wp-block-cover.aa-visie .wp-block-cover__image-background {
		height: var(--aa-visie-strook);
		bottom: auto;
	}

	.wp-block-cover.aa-visie .wp-block-cover__background.has-background-dim.has-background-dim-0 {
		display: none;
	}

	.aa-visie__tekst {
		margin-inline: auto;
	}
}

/* ==========================================================================
   Agenda ([achterhoek_agenda] uit de plugin)
   ==========================================================================
   Witte tegels met de datum groot; de laatste tegel is oranje met een
   pijlpunt en linkt naar de volledige agenda.
   ========================================================================== */

.aa-agenda {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Kadence geeft .single-content ul een inspringing (en laadt na dit bestand). */
.single-content :is(.aa-agenda, .aa-agendalijst) {
	margin: 0;
	padding: 0;
}

.aa-agenda__item {
	margin: 0;
}

.aa-agenda__link {
	display: block;
	height: 100%;
	min-height: 9rem;
	padding: 1.25rem 0.75rem;
	background: var(--global-palette9);
	color: var(--global-palette12);
	text-align: center;
	text-decoration: none;
}

.aa-agenda__datum {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-block-end: 0.6rem;
	font-weight: 700;
	line-height: 1;
}

.aa-agenda__dag {
	font-size: 1.75rem;
}

.aa-agenda__maand {
	font-size: 1.125rem;
	text-transform: uppercase;
}

/*
 * Op smalle tegels lange woorden ("Energietransitie") op lettergrepen
 * afbreken; ruimte voor drie regels, daarna afkappen, zodat de datums van
 * alle tegels op dezelfde hoogte staan.
 */
.aa-agenda__titel {
	display: -webkit-box;
	min-height: 3.9em;
	overflow: hidden;
	font-size: 1rem;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-height: 1.3;
	hyphens: auto;
	overflow-wrap: break-word;
}

.aa-agenda__link:hover .aa-agenda__titel {
	text-decoration: underline;
}

.aa-agenda__link:focus-visible {
	outline: 3px solid var(--global-palette3);
	outline-offset: 3px;
}

.aa-agenda__item--alles .aa-agenda__link {
	display: grid;
	align-content: center;
	justify-items: start;

	/* Boven meer dan onder, zoals bij de knoppen (letters staan hoog). */
	padding-block: 1.375rem 1.125rem;
	padding-inline: 1rem 2.5rem;
	background: var(--global-palette1);
	clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
	color: var(--global-palette9);

	/* 19px vet: grote tekst, dan is wit op Ambassadeursrood genoeg (style.css). */
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
}

.aa-agenda__item--alles .aa-agenda__link:hover {
	background: var(--global-palette2);
	text-decoration: underline;
}

/* Binnen de pijlvorm, want clip-path snijdt een rand erbuiten weg. */
.aa-agenda__item--alles .aa-agenda__link:focus-visible {
	outline: 2px solid var(--global-palette9);
	outline-offset: -6px;
}

/* ==========================================================================
   Nieuwsbrief (Brevo-formulier in een Avondblauw blok)
   ==========================================================================
   Links de uitleg en het e-mailveld, rechts de keuze van nieuwsbrieven met
   de knop rechtsonder (mockup Home). De wrappers van het Brevo-formulier
   krijgen display: contents, zodat de velden in het raster van het blok
   vallen; het formulier zelf blijft een formulier.
   ========================================================================== */

.aa-nieuwsbrief {
	padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 3rem);
	color: var(--global-palette9);
}

.aa-nieuwsbrief h2 {
	margin: 0 0 1.5rem;
	color: var(--global-palette9);
	text-align: center;
}

.aa-nieuwsbrief a {
	color: inherit;
}

@media (min-width: 768px) {
	.aa-nieuwsbrief,
	.aa-nieuwsbrief > .wp-block-group__inner-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"kop     kop"
			"intro   lijsten"
			"email   lijsten"
			"melding knop";
		column-gap: 3rem;
		align-items: start;
	}

	.aa-nieuwsbrief:has(> .wp-block-group__inner-container) {
		display: block;
	}

	.aa-nieuwsbrief form,
	.aa-nieuwsbrief .sib_signup_box_inside_1 {
		display: contents;
	}

	.aa-nieuwsbrief h2 { grid-area: kop; }
	.aa-nieuwsbrief .aa-nieuwsbrief__intro { grid-area: intro; }
	.aa-nieuwsbrief p.sib-email-area { grid-area: email; }
	.aa-nieuwsbrief .sib-multi-lists-area { grid-area: lijsten; }
	.aa-nieuwsbrief .button-sib-form { grid-area: knop; justify-self: end; }
	.aa-nieuwsbrief .sib_msg_disp,
	.aa-nieuwsbrief .g-recaptcha { grid-area: melding; }
}

.aa-nieuwsbrief label,
.aa-nieuwsbrief legend {
	color: var(--global-palette9);
	font-weight: 700;
}

.aa-nieuwsbrief .sib-multi-lists-area {
	margin: 0;
	padding: 0;
	border: 0;
}

.aa-nieuwsbrief .sib-multi-lists label {
	font-weight: 400;
}

.aa-nieuwsbrief .sib-multi-lists > div {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-block: 0.25rem;
}

.aa-nieuwsbrief input[type="checkbox"] {
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--global-palette1);
}

.aa-nieuwsbrief input[type="email"] {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 0;
	border-radius: 0;
	background: var(--global-palette9);
	color: var(--global-palette3);
}

.aa-nieuwsbrief input[type="email"]:focus-visible,
.aa-nieuwsbrief input[type="checkbox"]:focus-visible {
	outline: 3px solid var(--global-palette13);
	outline-offset: 2px;
}

.aa-nieuwsbrief .sib-default-btn {
	/* Boven meer dan onder, zoals bij de andere knoppen (letters staan hoog). */
	padding: 0.875rem 2.25rem 0.625rem;
	border: 0;
	background: var(--global-palette1);
	color: var(--global-palette9);
	font-weight: 700;
	cursor: pointer;
}

.aa-nieuwsbrief .sib-default-btn:hover {
	background: var(--global-palette2);
}

/* ==========================================================================
   Subkop (blokstijl "Subkop" op een kopblok)
   ========================================================================== */

.wp-block-heading.is-style-aa-subkop {
	margin-block: 2rem 0.5rem;
	color: var(--global-palette1);
	font-family: "Univers LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	text-transform: none;
}

/* ==========================================================================
   Themapagina
   ========================================================================== */

/* Foto bovenaan over de volle breedte, met gebogen onderrand. */
.wp-block-image.aa-themafoto {
	margin-block: 0;
}

/* Iets boven het midden, zodat hoofden niet wegvallen (zoals bij de visie). */
.wp-block-image.aa-themafoto img {
	display: block;
	width: 100%;
	height: clamp(16rem, 36vw, 32rem);
	object-fit: cover;
	object-position: 50% 30%;
	clip-path: var(--aa-vlagrand);
}

.aa-kruimelpad {
	margin-block-end: 0.75rem;
	font-size: 0.9375rem;
}

/*
 * Kruimelpad en titel dichter onder de foto dan de ruimte van een gewone
 * sectie (ontwerp). Kadence zet eigen marges op p en h1 (en laadt later),
 * vandaar de extra klassen.
 */
.entry-content .wp-block-group.aa-sectie.aa-thema-intro.alignfull {
	padding-block-start: 3rem;
}

.aa-thema-intro p.aa-kruimelpad {
	margin-block-end: 1.5rem;
}

.aa-kruimelpad a {
	color: var(--global-palette1);
}

.aa-thema-intro h1.wp-block-heading {
	margin-block: 0 1rem;
}

.aa-thema-intro .aa-thema-intro__kolommen {
	gap: clamp(2rem, 5vw, 5rem);
}

/* Kernzin verticaal gecentreerd naast de intro (kolommen zelf zetten align-items met !important). */
.aa-thema-intro__kolommen > .wp-block-column:last-child {
	align-self: center;
}

/* Kernzin met een lichtoranje zeshoek erachter (mockup). */
.aa-citaat {
	position: relative;
	isolation: isolate;
	margin: 0;
	padding-block: 2rem;
	color: var(--global-palette1);
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	line-height: 1.15;
}

/*
 * Naast de intro van een themapagina groter dan de kernzinnen op de
 * visiepagina, met de regelval uit het ontwerp: vier korte regels.
 */
.aa-thema-intro .aa-citaat {
	max-width: 9em;
	font-size: clamp(1.75rem, 2.8vw, 2.5rem);
	line-height: 1.05;
}

/* Zeshoek hoger en verder naar rechts, half achter de eerste regels (ontwerp). */
.aa-thema-intro .aa-citaat::before {
	top: -1.1em;
	right: auto;
	left: 4.7em;
	width: 5.25em;
}

.aa-citaat::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	right: 5%;
	width: 11rem;
	aspect-ratio: 1.15 / 1;
	background: #F6DCD1;
	-webkit-mask: var(--aa-vorm-zeshoek) center / 100% 100% no-repeat;
	mask: var(--aa-vorm-zeshoek) center / 100% 100% no-repeat;
}

/*
 * Lopende tekst links uitgelijnd met de intro (contentbreedte), maar niet
 * breder dan 62rem: prettiger lezen. De rest van de contentbreedte blijft
 * als ruimte rechts.
 */
.aa-thema-tekst > *,
.aa-thema-tekst > .wp-block-group__inner-container > * {
	box-sizing: border-box;
	padding-inline-end: max(0px, calc(min(var(--global-content-width, 1200px), 100%) - 62rem));
}

.aa-thema-tekst > * + *,
.aa-thema-tekst > .wp-block-group__inner-container > * + * {
	margin-block-start: 0.75rem;
}

/* Geen extra ruimte boven de eerste kop; de sectie heeft zelf al ruimte. */
.aa-thema-tekst > :first-child,
.aa-thema-tekst > .wp-block-group__inner-container > :first-child {
	margin-block-start: 0;
}

/* ==========================================================================
   Nieuwsbrief gemist? (per jaar; archief.js maakt er een keuzelijst van)
   ========================================================================== */

/*
 * Direct onder het blauwe inschrijfblok, even breed. Kadence zet 32px marge
 * onder elk blok, dus ook die onder het inschrijfblok moet weg.
 */
.aa-sectie > .aa-nieuwsbrief + .aa-archief,
.aa-sectie > .wp-block-group__inner-container > .aa-nieuwsbrief + .aa-archief {
	margin-block-start: 0;
}

.entry-content .wp-block-group.aa-nieuwsbrief:has(+ .aa-archief) {
	margin-block-end: 0;
}

.aa-archief {
	padding: 1.25rem clamp(1.25rem, 4vw, 3rem);
}

.aa-archief > .wp-block-group__inner-container,
.aa-archief:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 2rem;
	row-gap: 0.25rem;
	align-items: center;
}

.aa-archief .is-style-aa-subkop {
	grid-column: 1;
	margin: 0;
}

/* Met .entry-content: Kadence zet eigen marges op p en ul (en laadt later). */
.entry-content .aa-archief p {
	grid-column: 1;
	margin: 0;
	color: var(--global-palette12);
}

.aa-archief__keuze {
	grid-column: 2;
	grid-row: 1 / span 2;
}

.aa-archief__keuze select {
	min-width: 12rem;
	padding: 0.6rem 0.8rem;
	border: 0;
	border-radius: 0;
	background-color: var(--global-palette9);
	color: var(--global-palette3);
}

.aa-archief__keuze select:focus-visible {
	outline: 3px solid var(--global-palette3);
	outline-offset: 2px;
}

.aa-archief details {
	grid-column: 1 / -1;
	margin-block-start: 0.75rem;
}

.aa-archief summary {
	color: var(--global-palette12);
	font-weight: 700;
	cursor: pointer;
}

/* Met JavaScript is de keuzelijst het label; de uitklapkop is dan overbodig. */
.aa-archief--js summary {
	display: none;
}

/*
 * De nieuwsbrieven van het gekozen jaar als knoppen op een rij: wit met
 * Avondblauw, zodat ze naast de oranje hoofdknoppen rustig blijven.
 */
.entry-content .aa-archief ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.aa-archief li {
	margin: 0;
}

.aa-archief li a {
	display: inline-block;
	padding: 0.55rem 1.1rem 0.45rem;
	border-radius: 25px;
	background: var(--global-palette9);
	color: var(--global-palette12);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.aa-archief li a:hover,
.aa-archief li a:focus-visible {
	background: var(--global-palette12);
	color: var(--global-palette9);
	text-decoration: underline;
}

.aa-archief li a:focus-visible {
	outline: 3px solid var(--global-palette3);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.aa-archief > .wp-block-group__inner-container,
	.aa-archief:not(:has(> .wp-block-group__inner-container)) {
		grid-template-columns: 1fr;
	}

	.aa-archief__keuze {
		grid-column: 1;
		grid-row: auto;
		margin-block-start: 0.75rem;
	}
}

/* ==========================================================================
   Personen (ACF-blok Ambassadeur): foto in een zeshoek, naam, functie
   ========================================================================== */

/* Meer lucht onder de kop "Deelnemers aan deze thematafel" (ontwerp). */
.entry-content .aa-thema-personen .wp-block-group.aa-personen {
	margin-block-start: 3rem;
}

.aa-personen > .wp-block-group__inner-container,
.aa-personen:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 2rem;
}

/*
 * Alle personen in een rij even hoog (raster), de foto verticaal in het
 * midden. De tekst vult die hoogte: naam bovenaan, contact onderaan, zodat
 * namen, mail en telefoon naast elkaar op dezelfde hoogte staan.
 */
.aa-persoon {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.aa-persoon__tekst {
	display: flex;
	flex-direction: column;
	align-self: stretch;
}

.aa-persoon__foto {
	display: grid;
	flex: 0 0 7.5rem;
	aspect-ratio: 1 / 1.1;
	place-items: center;
	overflow: hidden;
	background: var(--global-palette7);
	-webkit-mask: var(--aa-vorm-zeshoek) center / 100% 100% no-repeat;
	mask: var(--aa-vorm-zeshoek) center / 100% 100% no-repeat;
	color: var(--global-palette9);
}

.aa-persoon__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aa-persoon__foto svg {
	width: 55%;
	height: auto;
}

.aa-persoon__naam {
	margin: 0 0 0.35rem;
	color: var(--global-palette1);
	font-family: "Univers LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
}

/* Met p erbij: Kadence zet 32px onder elke alinea (en laadt later). */
.aa-persoon p.aa-persoon__functie,
.aa-persoon p.aa-persoon__contact {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.45;
}

/*
 * Een witregel boven het contact, en altijd ruimte voor twee regels (mail en
 * telefoon), ook als er geen telefoonnummer is.
 */
.aa-persoon p.aa-persoon__contact {
	min-height: calc(2 * 1.45em);
	margin-block-start: auto;
	padding-block-start: 1.45em;
	box-sizing: content-box;
}

.aa-persoon__contact a {
	color: var(--global-palette1);
}

/*
 * Blok Ambassadeurcategorie (plugin): twee kolommen met een lichte lijn
 * tussen de rijen. Geen ruimte tussen de kolommen, zodat de lijn doorloopt;
 * de linker kolom houdt ruimte aan de rechterkant.
 */
.ambassador-category.aa-personen {
	gap: 0;
}

.ambassador-category > .aa-persoon {
	padding-block: 1.5rem;
	border-top: 1px solid var(--global-palette7);
}

.ambassador-category > .aa-persoon:first-child {
	border-top: 0;
}

@media (min-width: 768px) {
	.ambassador-category.aa-personen {
		grid-template-columns: repeat(2, 1fr);
	}

	.ambassador-category > .aa-persoon:nth-child(2) {
		border-top: 0;
	}

	.ambassador-category > .aa-persoon:nth-child(odd) {
		padding-inline-end: 2rem;
	}
}

.aa-leeg {
	text-align: center;
}

/* ==========================================================================
   Pagina's
   ==========================================================================
   Zonder titelbalk (kadence-defaults.php). Begint een pagina met een blok
   over de volle breedte, dan sluit dat aan op de header; begint hij met
   tekst, dan blijft de ruimte erboven. Een Kadence-rij die op elk scherm
   verborgen is (oude inhoud), telt niet als eerste blok.
   ========================================================================== */

/*
 * Een afbeelding op "volle breedte" midden in een Kadence-kolom (tussen de
 * tekst) blijft binnen de contentbreedte, net als de tekst eromheen. De
 * foto bovenaan een pagina staat niet in een kolom en blijft breed.
 */
.entry-content .kt-inside-inner-col > :is(.wp-block-kadence-image, .wp-block-image).alignfull {
	width: 100%;
	max-width: calc(var(--global-content-width, 1200px) - 2 * var(--global-content-edge-padding, 1.5rem));
	margin-inline: auto;
}

/*
 * Kadence zet zo'n afbeelding in een vak met vaste verhouding (bij volle
 * breedte 2:1) en snijdt hem bij. Op contentbreedte past een schema als op
 * /project-aanmelden-subsidie-aanvragen/ daar niet in: dan de hele
 * afbeelding in zijn eigen verhouding.
 */
.entry-content .kt-inside-inner-col > .wp-block-kadence-image.alignfull .kb-is-ratio-image {
	height: auto;
	padding-bottom: 0;
}

.entry-content .kt-inside-inner-col > :is(.wp-block-kadence-image, .wp-block-image).alignfull img {
	position: static;
	width: 100%;
	height: auto;
}

/* Ook zonder de binnenruimte van Kadence's "boxed" inhoudsstijl. */
body.page:not(.home) .content-area:has(.entry-content > .alignfull:first-child:not(.kb-v-lg-hidden.kb-v-md-hidden.kb-v-sm-hidden)) {
	margin-block-start: 0;
}

body.page:not(.home) .entry-content-wrap:has(> .entry-content > .alignfull:first-child:not(.kb-v-lg-hidden.kb-v-md-hidden.kb-v-sm-hidden)) {
	padding-block-start: 0;
}

/*
 * Een foto over de volle breedte bovenaan krijgt de gebogen onderrand, zoals
 * op de visiepagina: een Kadence-rij met achtergrondfoto, een omslagblok of
 * een afbeelding. Met body ervoor: WordPress zet de klasse page ook op het
 * artikel, en dat heeft geen home, dus anders telt de homepage mee.
 */
body.page:not(.home) .entry-content > :is(.kb-row-layout-wrap.kt-row-has-bg, .wp-block-image).alignfull:first-child {
	clip-path: var(--aa-vlagrand);
}

/* Bij een omslagblok alleen de achtergrond: een badge erin mag uitsteken. */
body.page:not(.home) .entry-content > .wp-block-cover.alignfull:first-child > :is(.wp-block-cover__image-background, .wp-block-cover__video-background, .wp-block-cover__background) {
	clip-path: var(--aa-vlagrand);
}

/* ==========================================================================
   Tegels met een knop onderaan (Kadence-kolommen, bv. /thematafels/)
   ==========================================================================
   Kolommen waarvan de knop de klasse button-bottom heeft (oude inhoud):
   foto's in dezelfde verhouding en de knop onderaan, zodat de knoppen naast
   elkaar op één hoogte staan, ook als de tekst korter is.
   ========================================================================== */

.wp-block-kadence-column:has(> .kt-inside-inner-col > .button-bottom) {
	align-self: stretch;
}

.wp-block-kadence-column:has(> .kt-inside-inner-col > .button-bottom) > .kt-inside-inner-col {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/*
 * Onder de knop geen marge: Kadence haalt die alleen weg bij het laatste blok
 * in de kolom, en soms staat er nog een lege alinea achter.
 */
.entry-content .wp-block-kadence-column > .kt-inside-inner-col > .button-bottom {
	margin-block: auto 0;
}

/* Lege alinea's onder de knop zouden die weer omhoog duwen. */
.wp-block-kadence-column:has(> .kt-inside-inner-col > .button-bottom) > .kt-inside-inner-col > p:empty {
	display: none;
}

.wp-block-kadence-column:has(> .kt-inside-inner-col > .button-bottom) .wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* ==========================================================================
   Innovatie (losse innovatie, post type project)
   ==========================================================================
   De kop zoals op de themapagina's: foto tegen de header met gebogen
   onderrand, dan kruimelpad, titel en intro. De rest van de pagina staat nog
   in het template (template-parts/content/single-project-entry.php).
   ========================================================================== */

:is(.single-project, .single-event) .content-area:has(.aa-detail__foto) {
	margin-block-start: 0;
}

/* Foto bovenaan een detailpagina (innovatie, evenement). */
.aa-detail__foto {
	margin: 0;
}

.aa-detail__foto img {
	display: block;
	width: 100%;
	height: clamp(16rem, 36vw, 32rem);
	object-fit: cover;
	object-position: 50% 30%;
	clip-path: var(--aa-vlagrand);
}

/* Het template zet 2rem rondom elke sectie; hier dezelfde maten als de themapagina. */
.project-page section.aa-innovatie__kop {
	padding-block-start: 3rem;
	padding-inline: var(--global-content-edge-padding, 1.5rem);
}

.aa-innovatie__kop p.aa-kruimelpad {
	margin-block-end: 1.5rem;
}

.aa-innovatie__kop h1 {
	margin-block: 0 1rem;
}

/* Tekst 60%, foto 40%, zoals de intro van een themapagina. */
@media (min-width: 800px) {
	.project-page .aa-innovatie__kop.cols {
		gap: clamp(2rem, 5vw, 5rem);
	}

	.project-page .aa-innovatie__kop.cols .left {
		flex: 0 0 60%;
		max-width: none;
		margin-right: 0;
	}

	.project-page .aa-innovatie__kop.cols .right {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* Contactpersonen als de deelnemers op een themapagina, met lucht onder de kop. */
.aa-innovatie__personen .aa-personen {
	margin-block-start: 2rem;
}

.aa-innovatie__kop .right img {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   Evenement (template-parts/content/single-event-entry.php)
   ==========================================================================
   Dezelfde kop als een innovatie en een themapagina; de gegevens in de stijl
   van de agendalijst (datumblok van .aa-agendalijst__datum).
   ========================================================================== */

.aa-detail__sectie {
	box-sizing: border-box;
	max-width: var(--global-content-width, 1200px);
	margin-inline: auto;
	padding: 2rem var(--global-content-edge-padding, 1.5rem);
}

.aa-detail__kop {
	padding-block-start: 3rem;
}

.aa-detail__kop p.aa-kruimelpad {
	margin-block-end: 1.5rem;
}

.aa-detail__kop h1 {
	margin-block: 0 1.5rem;
}

/* Tekst 60%, foto 40%, zoals de intro van een themapagina. */
@media (min-width: 800px) {
	.aa-detail__kop--beeld {
		display: flex;
		align-items: center;
		gap: clamp(2rem, 5vw, 5rem);
	}

	.aa-detail__kop--beeld > .aa-detail__tekst {
		flex: 0 0 60%;
		min-width: 0;
	}

	.aa-detail__kop--beeld > .aa-detail__beeld {
		flex: 1 1 0;
		min-width: 0;
	}
}

/*
 * Foto van een evenement zoals bij een nieuwsbericht: zo breed als de inhoud
 * van de header en even hoog. Kadence maakt die van een bericht half zo hoog
 * als de smalle tekstkolom (794px, of de schermbreedte min de binnenruimte).
 */
.aa-evenement .aa-detail__foto {
	max-width: calc(min(var(--global-content-width, 1200px), 100vw) - 2 * var(--global-content-edge-padding, 1.5rem));
	margin-inline: auto;
}

.aa-evenement .aa-detail__foto img {
	height: calc(0.5 * min(794px, 100vw - 2 * var(--global-content-edge-padding, 1.5rem)));
}

/* Zonder beeld even breed als met: lange regels en een lange balk lezen slecht. */
.aa-detail__kop:not(.aa-detail__kop--beeld) > .aa-detail__tekst {
	max-width: 45rem;
}

.aa-detail__beeld img {
	display: block;
	width: 100%;
	height: auto;
}

.aa-detail__personen .aa-personen {
	margin-block-start: 2rem;
}

/* Datumblok met wanneer, organisatie en locatie. */
.aa-evenement__info {
	display: flex;
	margin-block: 0 1.5rem;
	background: var(--global-palette8);
}

.aa-evenement__gegevens {
	display: grid;
	align-self: center;
	gap: 0.35rem;
	margin: 0;
	padding: 1rem 1.25rem;
	font-size: 0.9375rem;
}

.aa-evenement__gegevens > div {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.75rem;
}

.aa-evenement__gegevens dt {
	min-width: 6.5rem;
	font-weight: 700;
}

.aa-evenement__gegevens dd {
	margin: 0;
}

/* "Deelnemen?" als laatste: geen witte strook tussen het vlak en de footer. */
.single-event .content-area:has(.aa-evenement__deelnemen) {
	margin-block-end: 0;
}

/* "Deelnemen?": Avondblauw vlak met witte tekst, zoals het inschrijfblok. */
.aa-evenement__deelnemen {
	margin-block-start: 2rem;
	background: var(--global-palette12);
	color: var(--global-palette9);
}

.aa-evenement__deelnemen .aa-detail__sectie {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.aa-evenement__deelnemen h2,
.aa-evenement__deelnemen a {
	color: var(--global-palette9);
}

.aa-evenement__deelnemen h2 {
	margin-block: 0 1rem;
}

/* ==========================================================================
   Nieuwsbericht (losse berichten)
   ========================================================================== */

/*
 * De foto sluit direct aan op de header (mockup). Zonder foto blijft de
 * ruimte, anders staat de titel tegen de header.
 */
.single-post .content-area:has(.post-thumbnail.kadence-thumbnail-position-above) {
	margin-block-start: 0;
}

/*
 * Uitgelichte afbeelding boven de titel, met gebogen onderrand, en breder
 * dan de smalle tekstkolom: even breed als de inhoud van de header, dus de
 * contentbreedte min de binnenruimte links en rechts (mockup). De hoogte
 * blijft Kadence's padding-bottom van 50% van de tekstkolom; bij 842/1200px
 * geeft dat de lage verhouding uit de mockup, op smalle schermen iets hoger.
 */
.single-post .post-thumbnail.kadence-thumbnail-position-above {
	margin-block-end: 2rem;
	margin-inline: calc((100% - min(var(--global-content-width, 1200px), 100vw) + 2 * var(--global-content-edge-padding, 1.5rem)) / 2);
	clip-path: var(--aa-vlagrand);
}

.single-post .entry-taxonomies a {
	text-decoration: none;
}

.single-post .entry-taxonomies a:hover {
	text-decoration: underline;
}

/* "Vorige" en "Volgende" met een oranje lijn ertussen. */
:is(.single-post, .single-event) .post-navigation .nav-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

:is(.single-post, .single-event) .post-navigation .nav-previous {
	padding-inline-end: 1.5rem;
}

:is(.single-post, .single-event) .post-navigation .nav-next {
	grid-column: 2;
	padding-inline-start: 1.5rem;
	border-inline-start: 2px solid var(--global-palette1);
	text-align: right;
}

:is(.single-post, .single-event) .post-navigation a {
	display: block;
	color: var(--global-palette3);
	font-size: 0.9375rem;
	text-decoration: none;
}

:is(.single-post, .single-event) .post-navigation .post-navigation-sub {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin-block-end: 0.35rem;
	color: var(--global-palette1);
	font-size: 1.1875rem;
	font-weight: 700;
	text-transform: none;
}

:is(.single-post, .single-event) .post-navigation .nav-next .post-navigation-sub {
	justify-content: flex-end;
}

/* De oranje lijn staat op .nav-next; Kadence zet er zelf nog een grijze bij. */
:is(.single-post, .single-event) .post-navigation .nav-previous::after {
	content: none;
}

/*
 * Midden van de hoofdletters in plaats van midden van de regel; de letters
 * staan hoog in de regel, dus zonder dit oogt de pijl te laag.
 */
:is(.single-post, .single-event) .post-navigation .aa-dubbelpijl {
	translate: 0 -0.16em;
}

:is(.single-post, .single-event) .post-navigation a:hover .aa-nav-titel {
	text-decoration: underline;
}

:is(.single-post, .single-event) .post-navigation a:focus-visible {
	outline: 3px solid var(--global-palette3);
	outline-offset: 3px;
}

.aa-dubbelpijl {
	width: 1em;
	height: 0.75em;
	fill: currentColor;
}

/* ==========================================================================
   Uitgelichte zin (pullquote-blok): oranje, met lichtoranje zeshoek
   ========================================================================== */

.wp-block-pullquote {
	position: relative;
	isolation: isolate;
	margin-block: 2rem;
	padding: 1.5rem 0 1.5rem 2.5rem;
	border: 0;
	text-align: left;
}

.wp-block-pullquote::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 8rem;
	aspect-ratio: 1.15 / 1;
	background: #F6DCD1;
	-webkit-mask: var(--aa-vorm-zeshoek) center / 100% 100% no-repeat;
	mask: var(--aa-vorm-zeshoek) center / 100% 100% no-repeat;
}

.wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

.wp-block-pullquote p {
	color: var(--global-palette1);
	font-family: "Univers LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: 1.15;
}

.wp-block-pullquote cite {
	color: var(--global-palette5);
	font-size: 0.875rem;
	font-style: normal;
}

/* ==========================================================================
   Overzichten (nieuws; innovaties en agenda volgen)
   ========================================================================== */

.aa-overzicht-kop h1 {
	margin-block-end: 1.5rem;
}

/* Filterblok (mockup innovatie-overzicht): lichtblauw met witte velden. */
.aa-filter {
	padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 4vw, 2.25rem);
}

.aa-filter .is-style-aa-subkop {
	margin-block-start: 0;
}

.aa-filter__uitleg {
	margin-block: 0.25rem 1rem;
	color: var(--global-palette12);
	font-weight: 700;
}

.aa-filter .searchandfilter ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aa-filter .searchandfilter li {
	margin: 0;
	padding: 0;
}

.aa-filter .searchandfilter li.sf-field-search {
	flex: 1 1 18rem;
}

.aa-filter .searchandfilter li:not(.sf-field-search) {
	flex: 0 1 18rem;
}

/* Smal: alle velden onder elkaar over de volle breedte. */
@media (max-width: 767px) {
	.aa-filter .searchandfilter > ul > li:not(.sf-field-search) {
		flex-basis: 100%;
	}
}

.aa-filter .searchandfilter label {
	display: block;
	margin: 0;
}

.aa-filter .sf-input-text,
.aa-filter .sf-input-select {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.6rem 0.9rem;
	border: 0;
	border-radius: 0;
	background-color: var(--global-palette9);
	color: var(--global-palette3);
	font-size: 1rem;
}

/* Keuzelijst met het driehoekje in Avondblauw (mockup); ook "Nieuwsbrief gemist?". */
.aa-filter .sf-input-select,
.aa-archief__keuze select {
	padding-inline-end: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M0 0h12L6 8z' fill='%23104D77'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 0.75rem;
	appearance: none;
}

.aa-filter .sf-input-text:focus-visible,
.aa-filter .sf-input-select:focus-visible {
	outline: 3px solid var(--global-palette12);
	outline-offset: 2px;
}

.aa-aantal {
	margin: 0 0 1.25rem;
	color: var(--global-palette5);
	font-size: 0.9375rem;
}

/*
 * Nieuwsarchief: titel met de datum eronder, zoals op het bericht zelf. De
 * ruimte voor drie regels titel staat op titel en datum samen, zodat de
 * datum direct onder de titel staat en de samenvattingen toch op één hoogte
 * beginnen (3 x 1,25rem x 1,25 voor de titel, plus de datumregel).
 */
.aa-kaarten .aa-kaart__kop {
	min-height: calc(4.6875rem + 0.35rem + 1.40625rem);
	margin: 1.25rem 1.5rem 0.75rem;
}

.aa-kaarten .aa-kaart__kop .wp-block-post-title {
	min-height: 0;
	margin: 0;
}

.aa-kaarten .aa-kaart__kop p.aa-kaart__datum {
	margin: 0.35rem 0 0;
	color: var(--global-palette3);
	font-size: 0.9375rem;
	line-height: 1.5;
}

/*
 * Paginering (WP-PageNavi): ronde knoppen, zoals de nieuwsbrieven onder
 * "Nieuwsbrief gemist?". Wit met Avondblauw en een lichtblauwe rand, zodat
 * ze zowel op wit (innovaties) als op Buitenlucht (nieuws, agenda) te zien
 * zijn. De huidige pagina Avondblauw, hover en focus oranje, zoals de knoppen.
 */

/* Kadence zet .pagination op 2,5em boven en onder (en laadt later). Onder
   alleen de ruimte van de sectie zelf. */
.search-filter-results .aa-paginering.pagination {
	margin: 3rem 0 0;
}

.aa-paginering .wp-pagenavi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.aa-paginering .wp-pagenavi a,
.aa-paginering .wp-pagenavi span {
	display: inline-grid;
	min-width: 2.75rem;
	height: 2.75rem;
	margin: 0;

	/* Iets meer boven dan onder: de letters staan hoog in hun regel. */
	padding: 0.28em 0.9rem 0;
	place-items: center;
	border: 0;
	border-radius: 999px;
	background: var(--global-palette9);
	box-shadow: inset 0 0 0 2px var(--global-palette7);
	color: var(--global-palette12);

	/* 19px vet: bij hover wit op Ambassadeursrood, dat mag bij grote tekst. */
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.aa-paginering .wp-pagenavi .current {
	background: var(--global-palette12);
	box-shadow: none;
	color: var(--global-palette9);
}

/* "Pagina 1 van 14" en het weglatingsteken: tekst, geen knop. */
.aa-paginering .wp-pagenavi .pages,
.aa-paginering .wp-pagenavi .extend {
	min-width: 0;
	padding-inline: 0.25rem;
	background: none;
	box-shadow: none;
	color: var(--global-palette3);
	font-weight: 400;
}

.aa-paginering .wp-pagenavi a:hover,
.aa-paginering .wp-pagenavi a:focus-visible {
	background: var(--global-palette1);
	box-shadow: none;
	color: var(--global-palette9);
	text-decoration: underline;
}

.aa-paginering .wp-pagenavi a:focus-visible {
	outline: 3px solid var(--global-palette3);
	outline-offset: 2px;
}

/* Op een telefoon "Pagina 1 van 14" op een eigen regel boven de knoppen. */
@media (max-width: 600px) {
	.aa-paginering .wp-pagenavi .pages {
		flex-basis: 100%;
	}
}

/* ==========================================================================
   Zoekresultaten
   ==========================================================================
   Geen eigen ontwerp; dezelfde kaarten als op /innovaties/ (Buitenlucht
   licht met Avondblauwe titel, want de pagina zelf is wit). Kadence maakt
   hier zijn eigen lus (article.loop-entry), dus de opmaak staat los van
   .aa-kaarten.
   ========================================================================== */

.search-results .content-wrap.grid-cols {
	gap: 1.5rem;
}

.search-results .loop-entry {
	position: relative;
	display: flex;
	height: 100%;
	flex-direction: column;
	background: var(--global-palette8);
	text-align: center;
}

.search-results .loop-entry .post-thumbnail {
	margin: 0;
	clip-path: var(--aa-vlagrand);
}

.search-results .loop-entry .entry-content-wrap {
	padding: 1.25rem 1.5rem 1.5rem;
}

.search-results .loop-entry .entry-title {
	/* Ruimte voor drie regels, zodat de samenvattingen gelijk beginnen. */
	min-height: 3.75em;
	margin: 0;
	color: var(--global-palette12);
	text-transform: none;
}

/* Hele kaart klikbaar via de titel; dat blijft één tabstop. */
.search-results .loop-entry .entry-title a {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: inherit;
	text-decoration: none;
}

.search-results .loop-entry .entry-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.search-results .loop-entry:hover .entry-title a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.search-results .loop-entry .entry-title a:focus-visible {
	outline: none;
}

.search-results .loop-entry:has(a:focus-visible) {
	outline: 3px solid var(--global-palette3);
	outline-offset: 3px;
}

.search-results .loop-entry .entry-meta {
	justify-content: center;
	margin-block-start: 0.35rem;
	color: var(--global-palette3);
}

.search-results .loop-entry .entry-summary {
	margin-block-start: 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.search-results .loop-entry .entry-summary p {
	margin: 0;
}

/* Paginering van Kadence in dezelfde ronde knoppen als de overzichten. */
.search-results .navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.search-results .navigation.pagination .page-numbers {
	display: inline-grid;
	min-width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0.28em 0.9rem 0;
	place-items: center;
	border: 0;
	border-radius: 999px;
	background: var(--global-palette9);
	box-shadow: inset 0 0 0 2px var(--global-palette7);
	color: var(--global-palette12);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.search-results .navigation.pagination .page-numbers.current {
	background: var(--global-palette12);
	box-shadow: none;
	color: var(--global-palette9);
}

.search-results .navigation.pagination .page-numbers.dots {
	min-width: 0;
	padding-inline: 0.25rem;
	background: none;
	box-shadow: none;
	color: var(--global-palette3);
	font-weight: 400;
}

.search-results .navigation.pagination a.page-numbers:hover,
.search-results .navigation.pagination a.page-numbers:focus-visible {
	background: var(--global-palette1);
	box-shadow: none;
	color: var(--global-palette9);
	text-decoration: underline;
}

.search-results .navigation.pagination a.page-numbers:focus-visible {
	outline: 3px solid var(--global-palette3);
	outline-offset: 2px;
}

/* ==========================================================================
   Innovatie-overzicht
   ========================================================================== */

/* Kaarten in lichte Buitenlucht met Avondblauwe titel (mockup). */
.aa-kaarten--licht {
	--aa-kaart-achtergrond: var(--global-palette8);
	--aa-kaart-titel: var(--global-palette12);
}

/* Filterblok met twee kolommen: links zoeken en thema, rechts de vinkjes. */
@media (min-width: 768px) {
	.aa-filter--kolommen .searchandfilter > ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem 2.5rem;
		align-items: start;
	}

	.aa-filter--kolommen .searchandfilter > ul > li:nth-child(-n + 2) {
		grid-column: 1;
	}

	.aa-filter--kolommen .searchandfilter > ul > li:nth-child(n + 3) {
		grid-column: 2;
	}

	.aa-filter--kolommen .searchandfilter > ul > li:nth-child(3) {
		grid-row: 1;
	}

	.aa-filter--kolommen .searchandfilter > ul > li:nth-child(4) {
		grid-row: 2;
	}
}

/* Vinkjes onder elkaar, wit vak met een Avondblauw ruitje als ze aan staan. */
.aa-filter .searchandfilter li ul {
	display: block;
}

.aa-filter .searchandfilter li li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-block: 0.4rem;
}

.aa-filter .sf-input-checkbox {
	flex: 0 0 1.25rem;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: var(--global-palette9) no-repeat center / 60%;
	cursor: pointer;
	appearance: none;
}

.aa-filter .sf-input-checkbox:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0l6 6-6 6-6-6z' fill='%23104D77'/%3E%3C/svg%3E");
}

.aa-filter .sf-input-checkbox:focus-visible {
	outline: 3px solid var(--global-palette12);
	outline-offset: 2px;
}

/* In Windows' hoog-contrastmodus verdwijnen achtergrondafbeeldingen: dan gewone vinkjes. */
@media (forced-colors: active) {
	.aa-filter .sf-input-checkbox {
		appearance: auto;
	}
}

.aa-filter .sf-label-checkbox {
	color: var(--global-palette3);
	cursor: pointer;
}

.aa-filter .wp-block-buttons {
	margin-block-start: 1.25rem;
}

/*
 * "Over onze innovaties" met het downloadblok ernaast, even hoog als de
 * tekst (mockup): oranje vlak met een pijlpunt over de campagnefoto.
 */
.aa-over > .wp-block-column:last-child {
	display: flex;
	align-self: stretch;
}

.entry-content .aa-over .wp-block-group.aa-cta {
	flex: 1;
	margin: 0;
}

.aa-cta > .wp-block-group__inner-container,
.aa-cta:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	height: 100%;
}

/*
 * Boven de foto, zodat de pijlpunt eroverheen valt. Met p en .entry-content:
 * Kadence zet 32px onder elke alinea (en laadt later).
 */
.entry-content p.aa-cta__tekst {
	position: relative;
	z-index: 1;
	display: flex;
	margin: 0 -2.5rem 0 0;
}

.aa-cta__tekst a {
	display: flex;
	align-items: center;
	width: 100%;

	/* Iets meer boven dan onder: de letters staan hoog in hun regel. */
	padding: 1.9rem 3.5rem 1.6rem 1.5rem;
	background: var(--global-palette1);
	clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
	color: var(--global-palette9);
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	font-weight: 700;
	line-height: 1.15;
	text-decoration: none;
	hyphens: auto;
}

/* Kadence kleurt een link bij hover Ambassadeursrood donker, gelijk aan het vlak. */
.aa-cta__tekst a:hover,
.aa-cta__tekst a:focus-visible {
	background: var(--global-palette2);
	color: var(--global-palette9);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.aa-cta__tekst a:focus-visible {
	outline: 2px solid var(--global-palette9);
	outline-offset: -6px;
}

.wp-block-image.aa-cta__beeld {
	margin: 0;
}

/* De foto vult zijn helft; het brandpunt op de vrouw op de brommer. */
.wp-block-image.aa-cta__beeld img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 40% 0%;
}

@media (max-width: 600px) {
	.aa-cta > .wp-block-group__inner-container,
	.aa-cta:not(:has(> .wp-block-group__inner-container)) {
		grid-template-columns: 1fr;
	}

	.entry-content p.aa-cta__tekst {
		margin: 0;
	}

	.wp-block-image.aa-cta__beeld img {
		height: auto;
		aspect-ratio: 16 / 9;
	}
}

/* ==========================================================================
   Agenda-overzicht (search-filter/17819.php)
   ==========================================================================
   Witte rijen op Buitenlucht met een oranje datumblok; de hele rij is
   klikbaar via de titel.

   Contrast: wit op Ambassadeursrood (#D35724) is 4,07:1, genoeg voor grote
   tekst maar niet voor de maand en het jaar. Het datumblok is daarom
   Ambassadeursrood donker (5,95:1). De titel is vet en 19px, dan telt hij
   als grote tekst en mag hij in Ambassadeursrood (3:1).
   ========================================================================== */

.aa-agendalijst {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aa-agendalijst__item {
	position: relative;
	display: flex;
	gap: clamp(1rem, 3vw, 1.75rem);
	margin: 0;
	background: var(--global-palette9);
}

.aa-agendalijst__datum {
	display: flex;
	flex: 0 0 clamp(4.5rem, 12vw, 6rem);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	padding: 1rem 0.5rem;
	background: var(--global-palette2);
	color: var(--global-palette9);
	font-weight: 700;
	line-height: 1;
}

.aa-agendalijst__dag {
	font-size: 1.75rem;
}

.aa-agendalijst__maand {
	font-size: 1rem;
	text-transform: uppercase;
}

/* Jaartal onderin, iets kleiner en niet vet. */
.aa-agendalijst__jaar {
	margin-block-start: 0.15rem;
	font-size: 0.875rem;
	font-weight: 400;
}

.aa-agendalijst__tekst {
	align-self: center;
	min-width: 0;
	padding-block: 1rem;
	padding-inline-end: 1.25rem;
}

/* Een h2 voor de structuur, maar in de tekstletter en niet in kapitalen. */
.aa-agendalijst__titel {
	margin: 0;
	color: var(--global-palette1);
	font-family: inherit;
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.3;
	text-transform: none;
	overflow-wrap: break-word;
}

.aa-agendalijst__titel a {
	color: inherit;
	text-decoration: none;
}

.aa-agendalijst__titel a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.aa-agendalijst__item:hover .aa-agendalijst__titel a {
	text-decoration: underline;
}

.aa-agendalijst__titel a:focus-visible {
	outline: none;
}

.aa-agendalijst__item:has(a:focus-visible) {
	outline: 3px solid var(--global-palette3);
	outline-offset: 3px;
}

.aa-agendalijst__meta {
	margin: 0.3rem 0 0;
	color: var(--global-palette4);
	font-size: 0.9375rem;
}

/*
 * Blokken met eigen binnenruimte: Kadence zet .entry-content
 * .wp-block-group.has-background op 20px 30px (en laadt na dit bestand).
 */
.entry-content .wp-block-group:is(.aa-filter, .aa-contact__formulier).has-background {
	padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 4vw, 2.25rem);
}

.entry-content .wp-block-group.aa-nieuwsbrief.has-background {
	padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
}

/* ==========================================================================
   Contact
   ==========================================================================
   Links het formulier in Buitenlucht, rechts de gegevens als uitklapblokken
   (core/details), onderaan de kaart (mockup Contact).
   ========================================================================== */

.aa-contact__titel {
	text-align: center;
}

.wp-block-columns.aa-contact {
	gap: clamp(2rem, 4vw, 3.5rem);
}

/* Gravity Forms, basisthema: vette Avondblauwe labels, witte velden zonder rand. */
.aa-contact__formulier .gform_wrapper .gfield_label {
	color: var(--global-palette12);
	font-size: 0.9375rem;
	font-weight: 700;
}

.aa-contact__formulier .gform_wrapper :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
	width: 100%;
	padding: 0.6rem 0.9rem;
	border: 0;
	border-radius: 0;
	background: var(--global-palette9);
	color: var(--global-palette3);
	font-size: 1rem;
}

.aa-contact__formulier .gform_wrapper :is(input, textarea):focus-visible {
	outline: 3px solid var(--global-palette12);
	outline-offset: 2px;
}

/* Sterretje in de kleur van het label (mockup), niet in GF-rood (GF laadt later). */
.aa-contact__formulier .gform_wrapper .gfield_label .gfield_required {
	color: inherit;
}

/*
 * De uitleg bij het sterretje alleen voor schermlezers (de velden zelf
 * hebben aria-required); in de mockup staat hij niet.
 */
.aa-contact__formulier .gform_wrapper .gform_required_legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.aa-contact__formulier .gform_wrapper .gform_footer {
	justify-content: flex-end;
	margin-block-start: 0.5rem;
	padding-block-end: 0;
}

.aa-contact__formulier .gform_wrapper .gfield_description,
.aa-contact__formulier .gform_wrapper .gfield--type-html {
	color: var(--global-palette3);
	font-size: 0.875rem;
}

.aa-contact__formulier .gform_wrapper .gfield--type-html a {
	color: var(--global-palette1);
}

/* Uitklapblokken met een lijn ertussen en een driehoekje (mockup). */
.aa-uitklap {
	border-block-end: 1px solid var(--global-palette12);
}

.aa-uitklap:not(.aa-uitklap + .aa-uitklap) {
	border-block-start: 1px solid var(--global-palette12);
}

.aa-uitklap + .aa-uitklap {
	margin-block-start: 0;
}

.aa-uitklap > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.65rem;
	color: var(--global-palette12);
	font-size: 0.9375rem;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.aa-uitklap > summary::-webkit-details-marker {
	display: none;
}

/* Driehoekje van randen, zodat het ook in hoog-contrastmodus zichtbaar blijft. */
.aa-uitklap > summary::after {
	content: "";
	flex: none;
	border-block-start: 0.5rem solid currentColor;
	border-inline: 0.4rem solid transparent;
}

.aa-uitklap[open] > summary {
	color: var(--global-palette1);
}

.aa-uitklap[open] > summary::after {
	rotate: 180deg;
}

.aa-uitklap > summary:focus-visible {
	outline: 3px solid var(--global-palette12);
	outline-offset: 2px;
}

/* Kadence zet .single-content p op eigen marges (en laadt na dit bestand). */
.wp-block-details.aa-uitklap > :not(summary) {
	margin-block: 0 0.9rem;
	font-size: 0.9375rem;
}

.aa-uitklap a,
.aa-contact__woo a {
	color: var(--global-palette1);
}

.wp-block-column p.aa-contact__woo {
	margin-block: 1rem;
	font-size: 0.9375rem;
}

.wp-block-group.aa-contact__volg {
	align-items: center;
	gap: 0.6rem;
}

.wp-block-group.aa-contact__volg p {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 700;
}

/* Oranje rondjes met witte iconen in plaats van de merkkleuren. */
.aa-contact__social.wp-block-social-links {
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	font-size: 1rem;
}

.aa-contact__social.wp-block-social-links .wp-social-link {
	background-color: var(--global-palette1);
	color: var(--global-palette9);
}

.aa-contact__social.wp-block-social-links .wp-social-link:hover {
	background-color: var(--global-palette2);
}

.wp-block-group.aa-kaart {
	margin-block: 0;
}

.aa-kaart iframe {
	display: block;
	width: 100%;
	height: clamp(18rem, 32vw, 28rem);
	border: 0;
}

/*
 * Zonder toestemming toont Complianz een plaatje in de verhouding van dat
 * plaatje (bijna vierkant, dus veel te hoog over de volle breedte); even hoog
 * als de kaart zelf.
 */
.aa-kaart .cmplz-placeholder-parent.cmplz-blocked-content-container {
	height: clamp(18rem, 32vw, 28rem);
	padding-top: 0 !important;
	background-position: center;
	background-size: cover;
}

/* ==========================================================================
   Visie (pagina)
   ==========================================================================
   Foto met de badge "Kom maar op!", intro, de drie ontwikkellijnen als
   zeshoeken en per ontwikkellijn foto, tekst en kernzin (mockup Visie).
   ========================================================================== */

/*
 * Kleur per ontwikkellijn. Akker en Weide zijn op wit te licht voor tekst
 * (1,7:1 en 1,9:1); koppen en kernzinnen krijgen donkere varianten
 * (4,9:1 en 5,4:1). De lichte kleuren blijven voor de vlakken.
 */
.aa-lijn--rood {
	--aa-lijn: var(--global-palette1);
	--aa-lijn-tekst: var(--global-palette1);
	--aa-lijn-tint: #F6DCD1;
}

.aa-lijn--akker {
	--aa-lijn: var(--global-palette13);
	--aa-lijn-tekst: #8C6D12;
	--aa-lijn-tint: var(--global-palette15);
}

.aa-lijn--weide {
	--aa-lijn: var(--global-palette14);
	--aa-lijn-tekst: #6E6E1E;
	--aa-lijn-tint: #EEF0CC;
}

.wp-block-cover.aa-visie-kop {
	min-height: clamp(18rem, 36vw, 32rem);
	padding: 0;
}

.aa-visie-kop .wp-block-cover__image-background {
	object-position: 50% 30%;
	clip-path: var(--aa-vlagrand);
}

/* Badge (geen link) rechtsonder half over de rand, zoals de knop op de homepage. */
.aa-visie-kop p.aa-badge {
	--aa-badge-kleur: var(--global-palette1);

	position: absolute;
	/* Rechterrand van de badge op de contentbreedte (1200px), niet op de schermrand. */
	right: max(1.5rem, calc((100% - var(--global-content-width, 1200px)) / 2));
	bottom: -3.5rem;
	z-index: 2;
	isolation: isolate;
	margin: 0;
	padding-inline: 1.6rem;
}

.aa-visie-lijnen__kolommen,
.aa-visie-lijn__kolommen {
	gap: clamp(2rem, 5vw, 5rem);
}

.aa-visie-lijnen__kolommen > .wp-block-column:last-child,
.aa-visie-lijn__kolommen > .wp-block-column:has(.aa-citaat) {
	align-self: center;
}

.aa-visie-lijnen__tekst {
	font-size: 1.125rem;
}

/* Drie overlappende zeshoeken; de overlap mengt de kleuren (mockup). */
.single-content .aa-ontwikkellijnen,
.aa-ontwikkellijnen {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	max-width: 30rem;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.aa-ontwikkellijnen > li {
	display: grid;
	aspect-ratio: 1253 / 1358;
	margin: 0;
	background: var(--aa-lijn);
	-webkit-mask: var(--aa-vorm-zeshoek) center / 100% 100% no-repeat;
	mask: var(--aa-vorm-zeshoek) center / 100% 100% no-repeat;
	mix-blend-mode: multiply;
}

.aa-ontwikkellijnen > li:nth-child(1) {
	grid-area: 1 / 1 / 2 / 4;
}

.aa-ontwikkellijnen > li:nth-child(2) {
	grid-area: 1 / 3 / 2 / 6;
}

.aa-ontwikkellijnen > li:nth-child(3) {
	grid-area: 2 / 2 / 3 / 5;
	margin-block-start: -22%;
}

/* Donkere tekst: leesbaar op alle drie de kleuren (wit op Akker en Weide niet). */
.aa-ontwikkellijnen a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 14% 12%;
	color: var(--global-palette3);
	font-family: "Freudian One", "Arial Narrow", Arial, sans-serif;
	font-size: clamp(1rem, 2.2vw, 1.3rem);
	line-height: 1.05;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.aa-ontwikkellijnen a::before {
	content: "Ontwikkellijn";
	margin-block-end: 0.35rem;
	font-family: "Univers LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.6rem;
	letter-spacing: 0.08em;
}

/* Tekst in het deel dat niet overlapt. */
.aa-ontwikkellijnen > li:nth-child(1) a {
	padding-inline-end: 26%;
	padding-block-end: 26%;
}

.aa-ontwikkellijnen > li:nth-child(2) a {
	padding-inline-start: 26%;
	padding-block-end: 26%;
}

.aa-ontwikkellijnen > li:nth-child(3) a {
	padding-block-start: 34%;
}

.aa-ontwikkellijnen a:hover,
.aa-ontwikkellijnen a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* Binnen de zeshoek, want clip-path snijdt een rand erbuiten weg. */
.aa-ontwikkellijnen a:focus-visible {
	outline: 3px solid var(--global-palette3);
	outline-offset: -1.5rem;
}

.wp-block-image.aa-visie-band {
	margin-block: 0;
}

.wp-block-image.aa-visie-band img {
	display: block;
	width: 100%;
	height: clamp(14rem, 26vw, 24rem);
	object-fit: cover;
}

/* Kop met anker (vanuit de zeshoeken): niet onder de header verdwijnen. */
.aa-visie-lijn h2.wp-block-heading {
	color: var(--aa-lijn-tekst);
	scroll-margin-top: 7rem;
}

.aa-visie-lijn .aa-citaat {
	color: var(--aa-lijn-tekst);
}

.aa-visie-lijn .aa-citaat::before {
	background: var(--aa-lijn-tint);
}

/* Rechts (of links) uitgelijnd: de tekst loopt er, zoals in de mockup, omheen. */
@media (min-width: 768px) {
	.wp-block-pullquote.alignright {
		float: right;
		width: 45%;
		margin: 0 0 1rem 2rem;
	}

	.wp-block-pullquote.alignleft {
		float: left;
		width: 45%;
		margin: 0 2rem 1rem 0;
	}
}


/* ==========================================================================
   Contrastmodus (tweede kleurenset)
   ==========================================================================
   De knop in de header schakelt via de dark mode van Kadence Pro naar een
   vrijwel zwart-witte set. Wat niet uit het palet komt staat hier: de tinten
   achter de kernzinnen, de pijltjes in de formulieren en het onderstrepen
   van links, die zonder kleurverschil anders niet opvallen. Kadence zet in
   die modus color-scheme op dark; dat klopt hier niet, de set is licht.
   ========================================================================== */

.color-switch-dark {
	color-scheme: light;
}

.color-switch-dark .aa-lijn--rood,
.color-switch-dark .aa-lijn--akker,
.color-switch-dark .aa-lijn--weide {
	--aa-lijn-tekst: var(--global-palette3);
	--aa-lijn-tint: #EDEDED;
}

/*
 * De zeshoeken van de ontwikkellijnen zijn vlakken met zwarte tekst erin en
 * overlappen elkaar; drie grijstinten houden ze uit elkaar. Het accent is
 * hier zwart en zou de tekst onleesbaar maken.
 */
.color-switch-dark .aa-lijn--rood {
	--aa-lijn: #A6A6A6;
}

.color-switch-dark .aa-citaat::before {
	background: #EDEDED;
}

/* Pijltje en ruitje in de filters zwart in plaats van Avondblauw. */
.color-switch-dark .aa-filter .sf-input-select,
.color-switch-dark .aa-archief__keuze select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M0 0h12L6 8z' fill='%23000000'/%3E%3C/svg%3E");
}

.color-switch-dark .aa-filter .sf-input-checkbox:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0l6 6-6 6-6-6z' fill='%23000000'/%3E%3C/svg%3E");
}

/* Het logo in de zwarte variant uit de huisstijl. */
.color-switch-dark .header-html .logo-image,
.color-switch-dark .mobile-html .logo-image,
.color-switch-dark .site-footer .custom-logo,
.color-switch-dark .site-footer .wp-block-site-logo img {
	content: url("../img/logo-zwart.svg");
}

/* Zonder kleurverschil moet een link in de tekst een streep hebben. */
.color-switch-dark .entry-content a:not(.wp-element-button):not(.wp-block-button__link):not(.aa-agenda__link):not(.wp-social-link-anchor) {
	text-decoration: underline;
}