/* SmartHub 2026 - secties die met standaard Avada-elementen zijn opgebouwd
 *
 * Niet elke sectie hoeft een eigen element te zijn. Een blok dat neerkomt op twee
 * kolommen met tekst en een beeld kan Avada zelf, inclusief het zoomeffect en het
 * omdraaien van de kolomvolgorde per schermbreedte. Onze opmaak komt dan mee via
 * klassen op de Avada-elementen.
 *
 * Deze laag repareert wat avada-reset.css bewust wegneemt: daar wordt de rij op volle
 * breedte gezet omdat onze eigen elementen hun eigen .wrap meebrengen. Blokken met
 * Avada-elementen hebben die .wrap niet, dus krijgen ze de contentbreedte hier terug.
 */

/* ── Rij: uitlijning ──
 *
 * De breedte regelt Avada zelf: zet Interior Content Width van de container op
 * Site Width, dan begrenst Avada de rij op de sitebreedte (1200px). De zijmarge
 * van 28px uit het concept zit op de buitenste kolommen - op de rij zetten heeft
 * geen zin, want Avada wist die met
 *
 *     #wrapper #main .fullwidth-box .fusion-row { padding-left:0; padding-right:0 }
 *
 * en twee ID's in een selector verslaan elke klasseregel.
 *
 * Wat hier wel moet: align-items op stretch. Anders volgt de beeldkolom de hoogte
 * van zijn eigen inhoud in plaats van die van de tekst ernaast, en blijft het beeld
 * op zijn minimumhoogte steken.
 */
/*
 * Kolommarges terugzetten.
 *
 * base.css bevat de reset uit Gido's concept: .sh-sectie *{margin:0;padding:0}.
 * Die is net zo specifiek als Avada's eigen
 *
 *     .fusion-layout-column{ margin-top:var(--awb-margin-top);
 *                            margin-bottom:var(--awb-margin-bottom) }
 *
 * maar laadt later, dus wint hij - en daarmee verdwijnt ELKE marge die in de
 * builder op een kolom is ingesteld. Dat verklaarde de te kleine ruimte onder de
 * koppen (48px en 52px) en tussen de kaart en het citaat (26px).
 *
 * Alleen binnen .sh-avada terugzetten: in de niet-omgebouwde secties moeten de
 * kolommen juist op nul blijven, want die halen hun ritme uit de eigen opmaak.
 * Daar staat de reset in avada-reset.css al op :not(.sh-avada).
 */
.sh-sectie.sh-avada .fusion-layout-column {
	margin-top: var(--awb-margin-top);
	margin-bottom: var(--awb-margin-bottom);
}

.sh-sectie.sh-duo .fusion-builder-row {
	align-items: stretch;
}



/*
 * Bewust GEEN maat en kleur op .fusion-text.
 *
 * Avada zet daar zelf al --awb-font-size, --awb-line-height en --awb-text-color op
 * inherit, en base.css geeft de body 17px / 1.6 / var(--ink) uit het concept mee.
 * Een eigen regel is dus overbodig en actief schadelijk: hij had specificiteit
 * (0,2,0), net als de conceptklassen op datzelfde element, maar laadt later. Zo
 * overschreef hij .sh-sectie .lead{color:var(--steen)} en werd de introtekst --ink.
 * Elke andere conceptklasse op een tekstelement zou hetzelfde overkomen.
 */

.sh-sectie .fusion-text p {
	margin: 0 0 14px;
}

.sh-sectie .fusion-text p:last-child {
	margin-bottom: 0;
}

/* ── Koptekst met clamp ──
 *
 * Het veld voor lettergrootte in Avada accepteert geen clamp(), dus die schaal
 * zetten we hier. Bewust aan een eigen klasse gehangen (sh-kop) en niet aan
 * Avada's maatklasse: gewone titel-elementen op de pagina blijven zo gewoon in
 * de builder instelbaar.
 *
 * Let op de manier waarop: Avada zet de grootte niet rechtstreeks op de kop maar
 * via een variabele op de wrapper -
 *
 *     .fusion-body .fusion-title.fusion-title-size-two { --awb-font-size: ... }
 *
 * Een regel op de <h2> zelf verliest het daarvan. We overschrijven daarom de
 * variabele; die wordt vanzelf doorgegeven aan de kop.
 */
.fusion-body .sh-sectie .fusion-title.sh-kop {
	--awb-font-size: clamp(1.9rem, 3.7vw, 2.85rem);
}

/* ── Ruimte boven een losse knoppenrij ──
 * Alleen als het element los in een Avada-kolom staat; binnen onze eigen
 * sjablonen regelt de opmaak daar zijn eigen ritme.
 */
.sh-sectie .fusion-column-wrapper > .knop-rij {
	margin-top: 28px;
}

/*
 * Laat elke Avada-titel zijn kleur ERVEN.
 *
 * Avada kleurt elke kop met .fusion-body #wrapper .fusion-title hN{color:
 * var(--awb-text-color)} (specificiteit 1-2-1, onverslaanbaar met klassen) en zet
 * die variabele per kopniveau op var(--hN_typography-color), wat in dit palet
 * uitkomt op #000000. Daardoor werd elke kop zwart, ook waar het concept --paars,
 * --roos of --ink voorschrijft.
 *
 * Met inherit valt de kop terug op de cascade van het concept: de kleur komt van de
 * titel-wrapper (.kicker), de kaart (.sh-hub, .sh-kaart-cta) of de sectie
 * (.sh-programmas). Precies zoals avada-reset.css het al voor kale koppen doet.
 */
.fusion-body .sh-sectie .fusion-title {
	--awb-text-color: inherit;
}

/* ── Kicker: Avada zet onze klasse op de wrapper, niet op de kop ──
 *
 * De marges lezen we uit Avada's variabelen in plaats van ze vast te zetten. Zet
 * iemand in de builder een andere marge, dan schrijft Avada --awb-margin-bottom
 * inline weg en wint die vanzelf. De conceptwaarde (16px boven de sectie, 6px in
 * een kaart) staat als standaard in het blok verderop. Met een vaste 16px hier
 * werd de 6px van de kaartkickers stilletjes overschreven.
 */
.sh-sectie .fusion-title.kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: var(--awb-margin-top);
	margin-bottom: var(--awb-margin-bottom);
	width: auto;
}

.sh-sectie .fusion-title.kicker::before {
	content: "";
	width: 26px;
	height: 3px;
	background: var(--roze);
	border-radius: 2px;
	flex: none;
}

/*
 * Ook hier via de variabele: Avada zet de lettergrootte op de wrapper, niet op de
 * kop. Een regel op de <h6> alleen is niet genoeg, dus zetten we beide - de
 * variabele voor Avada's eigen mechanisme, de eigenschap als vangnet.
 */
.fusion-body .sh-sectie .fusion-title.kicker {
	--awb-font-size: .78rem;
	--awb-margin-top: 0px;
	--awb-margin-bottom: 16px;
}

/*
 * Bewust GEEN kleur hier. Die stond er eerst hard op als var(--paars), met
 * specificiteit 0-4-1, en overrulede daarmee de sectiekleuren: in de donkere band
 * en in de CTA-kaart hoort de kicker var(--roos) te zijn. De kleur komt nu uit de
 * wrapper (.kicker) of uit --awb-text-color, precies zoals in het concept, waar
 * alleen hero, manifest, portaal en programma's de basiskleur overschrijven.
 */
.fusion-body .sh-sectie .fusion-title.kicker .fusion-title-heading {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .78rem;
	line-height: 1.6;
}

/* ── Knoppen in onze lijnstijl ──
 * Avada zet zijn kleuren als inline CSS-variabelen op de knop zelf; die winnen het
 * van een gewone klasseregel. Vandaar deze specifiekere selector.
 */
.sh-sectie a.fusion-button.btn-lijn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-radius: var(--pill);
	padding: 15px 30px;
	font-weight: 800;
	font-size: 1rem;
	line-height: 1;
	height: auto;
	text-decoration: none;
	background: transparent;
	color: var(--paars);
	border: 2px solid var(--paars);
	transition: transform .18s ease, background .18s ease, color .18s ease;
}

.sh-sectie a.fusion-button.btn-lijn:hover {
	background: var(--paars);
	color: #fff;
	transform: translateY(-2px);
}

.sh-sectie a.fusion-button.btn-lijn .fusion-button-text {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	text-transform: none;
	letter-spacing: 0;
}

/* ── Onder 980px onder elkaar ── */
@media (max-width: 980px) {

	/*
 * Kolommarges terugzetten.
 *
 * base.css bevat de reset uit Gido's concept: .sh-sectie *{margin:0;padding:0}.
 * Die is net zo specifiek als Avada's eigen
 *
 *     .fusion-layout-column{ margin-top:var(--awb-margin-top);
 *                            margin-bottom:var(--awb-margin-bottom) }
 *
 * maar laadt later, dus wint hij - en daarmee verdwijnt ELKE marge die in de
 * builder op een kolom is ingesteld. Dat verklaarde de te kleine ruimte onder de
 * koppen (48px en 52px) en tussen de kaart en het citaat (26px).
 *
 * Alleen binnen .sh-avada terugzetten: in de niet-omgebouwde secties moeten de
 * kolommen juist op nul blijven, want die halen hun ritme uit de eigen opmaak.
 * Daar staat de reset in avada-reset.css al op :not(.sh-avada).
 */
.sh-sectie.sh-avada .fusion-layout-column {
	margin-top: var(--awb-margin-top);
	margin-bottom: var(--awb-margin-bottom);
}

.sh-sectie.sh-duo .fusion-builder-row {
		display: block;
	}

	.sh-sectie.sh-duo .fusion-layout-column {
		width: var(--awb-width-small, 100%);
		margin-bottom: 32px;
	}

	.sh-sectie.sh-duo .sh-duo-beeld .fusion-column-wrapper {
		min-height: 260px;
	}
}


/* ── Beeld-element: varianten op .foto uit base.css ── */
.sh-sectie .foto-vullend {
	aspect-ratio: auto;
	height: 100%;
	min-height: 380px;
}

.sh-sectie .foto-vierkant {
	aspect-ratio: 1 / 1;
}

/*
 * Het beeld vult zijn kader; welk deel zichtbaar blijft bepaalt het focuspunt.
 * Dat staat als inline object-position op de afbeelding zelf, zodat het per beeld
 * in te stellen is - handig bij portretten of foto's waar het onderwerp niet in
 * het midden zit.
 */
.sh-sectie .foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	transition: transform .6s ease;
}

.sh-sectie .foto:hover img {
	transform: scale(1.04);
}

.sh-sectie .foto-stil:hover img {
	transform: none;
}

/*
 * Beeldkolom volledig vullen.
 *
 * De rij staat op stretch, dus de kolom is even hoog als de tekst ernaast. Die
 * hoogte moet doorgegeven worden tot aan de afbeelding: wrapper als flexbox met
 * stretch, en het beeld mag groeien. De minimumhoogte blijft als ondergrens voor
 * het geval de tekstkolom korter is.
 */
.sh-sectie.sh-duo .sh-duo-beeld .fusion-column-wrapper {
	display: flex;
	align-items: stretch;
	height: 100%;
}

.sh-sectie.sh-duo .sh-duo-beeld .foto {
	flex: 1 1 auto;
	width: 100%;
	height: auto;
}

@media (max-width: 980px) {

	/*
	 * "Vult de hoogte van de kolom ernaast" heeft onder het stapelpunt geen
	 * betekenis meer: er staat niets meer naast. De min-height van 260px maakte
	 * het vlak dan hoger dan de foto zelf, want `height: 100%` op de afbeelding
	 * valt terug op auto zodra de ouder geen vaste hoogte heeft. Het verschil was
	 * zichtbaar als een strook van de gestreepte plaatshouder. Op mobiel bepaalt
	 * de foto daarom zijn eigen hoogte.
	 */
	.sh-sectie .foto-vullend,
	.sh-sectie .duo-strak .foto-vullend {
		min-height: 0;
	}
}

/* ------------------------------------------------------------------ kaarten
 *
 * DE KAART IS DE WRAPPER, NIET DE KOLOM.
 *
 * Avada zet op .fusion-column-wrapper álles wat een kaart maakt - achtergrond,
 * rand, radius, schaduw, binnenmarge - én de kolomruimte, als marge:
 *
 *     .fusion-layout-column .fusion-column-wrapper{
 *         background-image:var(--awb-bg-image); ...
 *         margin-left:var(--awb-spacing-left); margin-right:var(--awb-spacing-right) }
 *
 * De kolom eromheen loopt dus dóór tot halverwege de tussenruimte. Zetten wij de
 * rand of de radius op de kolom, dan is de kaart aan weerszijden een halve
 * kolomruimte te breed en raken de kaarten elkaar. Alles wat het kaartuiterlijk
 * bepaalt hoort daarom op de wrapper; alleen de tekstkleur blijft op de kolom,
 * want die moet naar binnen erven.
 */
.sh-sectie .sh-kaart > .fusion-column-wrapper,
.sh-sectie .sh-quote > .fusion-column-wrapper {
	border-radius: var(--radius);
}

.sh-sectie .sh-kaart > .fusion-column-wrapper {
	border: 1px solid var(--lijn);
}

.sh-sectie .sh-quote > .fusion-column-wrapper {
	box-shadow: var(--shadow);
	position: relative;
}

/* Het grote aanhalingsteken steekt bewust boven de kaart uit. */
.sh-sectie .sh-quote > .fusion-column-wrapper::before {
	content: "\201C";
	position: absolute;
	top: -30px;
	left: 26px;
	font-size: 6rem;
	font-weight: 900;
	color: var(--roze);
	line-height: 1;
	font-family: Georgia, serif;
	z-index: 1;
}

.sh-sectie .sh-quote p {
	font-weight: 700;
	font-size: 1.12rem;
	line-height: 1.55;
}

.sh-sectie .sh-quote span {
	display: block;
	margin-top: 14px;
	font-size: .86rem;
	color: var(--steen);
	font-weight: 700;
}

/* De kaartkoppen zijn h3 maar zonder de kapitalen van een sectiekop. */
.fusion-body .sh-sectie .fusion-title.sh-kaart-kop h1,
.fusion-body .sh-sectie .fusion-title.sh-kaart-kop h2,
.fusion-body .sh-sectie .fusion-title.sh-kaart-kop h3,
.fusion-body .sh-sectie .fusion-title.sh-kaart-kop h4 {
	text-transform: none;
	letter-spacing: 0;
}

/* De CTA-kaart: verloop uit de builder, witte tekst hier. */
.sh-sectie .sh-kaart-cta {
	color: #fff;
}

.sh-sectie .sh-kaart-cta > .fusion-column-wrapper {
	border: 0;
	border-radius: var(--radius);
	box-shadow: 0 24px 54px rgba(162, 0, 103, .35);
}

.sh-sectie .sh-kaart-cta h1,
.sh-sectie .sh-kaart-cta h2,
.sh-sectie .sh-kaart-cta h3,
.sh-sectie .sh-kaart-cta h4,
.sh-sectie .sh-kaart-cta li {
	color: #fff;
}

.sh-sectie .sh-kaart-cta p {
	color: rgba(255, 255, 255, .85);
}

.sh-sectie .sh-kaart-cta .kicker {
	color: var(--roos);
}

/* Alleen de vinkjes worden lichter; het streepje voor de kicker blijft --roze,
   precies zoals in het concept (daar staat op .wg-kaart.cta enkel een override
   voor .checks li::before, en de kickerkleur staat inline op de span). */
.sh-sectie .sh-kaart-cta .checks li::before {
	background: var(--roos);
}

.sh-sectie .sh-kaart-cta .knop-rij {
	margin-top: 10px;
	flex-wrap: nowrap;
}

/* Onder de knoppen; de keurmerkregels staan al in base.css. */
.sh-sectie .sh-kaart-cta .zeker {
	margin-top: 16px;
}

@media (max-width: 980px) {

	.sh-sectie .sh-kaart-cta .knop-rij {
		flex-wrap: wrap;
	}
}

/* Kopgroottes van de kaarten. Zonder eigen waarde pakt Avada de h3 uit de
   themaopties; met de variabele houden we de maat uit het ontwerp. */
.fusion-body .sh-sectie .fusion-title.sh-kaart-kop,
.fusion-body .sh-sectie .fusion-title.sh-hub-kop,
.fusion-body .sh-sectie .fusion-title.sh-route-kop {
	--awb-font-size: clamp(1.12rem, 2vw, 1.45rem);
}

/* -------------------------------------------------------------- programma's
 *
 * Donkere band met sfeerbeeld. De inktsluier over het beeld is GEEN css maar een
 * containerinstelling: Fusion zet een verloop over het achtergrondbeeld
 * (linear-gradient(...), url(...)), dus twee keer dezelfde halfdoorzichtige
 * inktkleur geeft precies de .22-dekking uit het concept - en de klant kan eraan
 * draaien. Zie verfijn-blokken.php.
 *
 * De tekstkleur zetten we op de CONTAINER en niet op de koppen. Avada kleurt elke
 * kop met .fusion-body #wrapper .fusion-title h2{color:var(--awb-text-color)} -
 * specificiteit 1-2-1, daar wint geen klassenregel van. Staat die variabele niet,
 * dan is de declaratie ongeldig en valt de kleur terug op inherit. Precies dat
 * gebruiken we: zet de kleur een niveau hoger en alles binnen de band erft mee.
 */
.sh-sectie.sh-programmas {
	color: #fff;

}

/*
 * Kop van de sectie gecentreerd. De kolominhoud is een flexkolom, dus text-align
 * doet niets voor de kicker (die is inline-flex en blijft als flexitem links).
 * Avada heeft er wel een veld voor (valign_content) maar zet daar in deze versie
 * geen klasse voor op de wrapper, vandaar hier.
 */
.sh-sectie .center > .fusion-column-wrapper {
	align-items: center;
}

/*
 * Blokken die in het concept met margin-inline:auto worden gecentreerd.
 *
 * In het concept staan die in een gewone blokcontainer: daar vult de automatische
 * marge de ruimte tot aan max-width. In een Avada-kolom is de wrapper een flexbox,
 * en daar doet een automatische zijmarge het tegenovergestelde - hij verhindert dat
 * het element uitrekt, waardoor het naar zijn inhoud krimpt (840px werd 740px).
 * Een expliciete breedte zet dat recht; de max-width en de centrering blijven doen
 * wat ze moeten doen.
 */
.sh-sectie.sh-avada .faq {
	width: 100%;
}

.sh-sectie.sh-programmas .kicker {
	color: var(--roos);
}

.sh-sectie .accent-licht {
	color: var(--roos);
}

/*
 * De lead. Avada's .fusion-text zet een eigen maat en kleur op het element; onze
 * klasse .lead staat op diezelfde div en wint, maar de alinea erbinnen pikte zijn
 * maat elders op. Vandaar dat de alinea alles overerft.
 */
.fusion-body .sh-sectie .fusion-text.lead {
	font-size: 1.13rem;
	line-height: 1.6;
}

.fusion-body .sh-sectie .fusion-text.lead p {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0;
}

.sh-sectie.sh-programmas .lead {
	color: rgba(255, 255, 255, .78);
	margin-inline: auto;
}

/* De kaarten: verloop en binnenmarge uit de builder, de rest hier.
 *
 * Deze kolommen hebben een link, dus Avada schildert het verloop niet op de
 * wrapper maar op een eigen laag (.fusion-column-inner-bg) met daarin de anker-tag
 * die de hele kaart klikbaar maakt. Die laag springt in met
 * margin:calc(var(--awb-column-spacing)/2) - een variabele die Avada hier niet
 * zet, waardoor de sluier over de volle kolombreedte liep en de kaarten tegen
 * elkaar aan kwamen. We zetten hem daarom zelf, gelijk aan de kolomruimte van de
 * sectie (zie de sectieregel hieronder).
 */
.sh-sectie .sh-hub {
	color: #fff;
}

.sh-sectie .sh-hub > .fusion-column-wrapper {
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--radius);
	min-height: 360px;
	overflow: hidden;
	transition: transform .22s ease, border-color .22s, box-shadow .22s;
}

/*
 * Het verloop staat hier en niet als kolominstelling in de builder. Reden: deze
 * kolommen hebben een link, en dan verplaatst Avada de achtergrond naar een eigen
 * laag (.fusion-column-inner-bg) die over de VOLLE kolom loopt, terwijl de wrapper
 * met de rand een halve kolomruimte naar binnen zit. Je zag dan twee rechthoeken
 * over elkaar. Met het verloop op de wrapper is er nog maar een laag, en die valt
 * samen met de rand, de radius en de tussenruimte.
 */
.sh-sectie .sh-hub-h1 > .fusion-column-wrapper {
	background-image: linear-gradient(160deg, rgba(209, 0, 116, .92), rgba(156, 0, 87, .92));
}

.sh-sectie .sh-hub-h2 > .fusion-column-wrapper {
	background-image: linear-gradient(160deg, rgba(162, 0, 103, .92), rgba(92, 8, 63, .92));
}

.sh-sectie .sh-hub-h3 > .fusion-column-wrapper {
	background-image: linear-gradient(160deg, rgba(62, 55, 67, .9), rgba(29, 18, 32, .94));
}

/*
 * De kaart komt omhoog vanaf de KOLOM, niet vanaf de wrapper. Avada heeft op
 * .fusion-column-wrapper een reeks transform-regels staan, tot specificiteit
 * 0-9-1, waaronder
 *
 *     body:not(.fusion-builder-live-preview) .fusion-builder-row:hover
 *         > .fusion_builder_column > .fusion-column-wrapper
 *             { transform: var(--awb-transform-parent-hover) }
 *
 * die al afgaat zodra je ergens in de rij hovert. Daar wint onze regel niet van.
 * Op de kolom zelf zet Avada geen transform, dus daar werkt het wel - en de rand,
 * de schaduw en de ankerlaag schuiven gewoon mee omdat ze erin zitten.
 */
.sh-sectie .sh-hub {
	transition: transform .22s ease;
}

.sh-sectie .sh-hub:hover {
	transform: translateY(-8px);
}

.sh-sectie .sh-hub:hover > .fusion-column-wrapper {
	border-color: rgba(255, 255, 255, .45);
	box-shadow: 0 26px 60px rgba(0, 0, 0, .35);
}

.sh-sectie .sh-hub h1,
.sh-sectie .sh-hub h2,
.sh-sectie .sh-hub h3,
.sh-sectie .sh-hub h4 {
	color: #fff;
}

.sh-sectie .sh-hub p {
	color: rgba(255, 255, 255, .86);
	font-size: .97rem;
}

/* De tag is een klein label dat niet de volle kolombreedte mag pakken. */
.sh-sectie .sh-hub .tag {
	align-self: flex-start;
	display: inline-flex;
	padding: 6px 13px;
	border-radius: var(--pill);
	background: rgba(255, 255, 255, .16);
}

.fusion-body .sh-sectie .fusion-title.tag {
	--awb-font-size: .72rem;
}

/*
 * De regelhoogte moet op de kop zelf. Avada leest --awb-line-height bij een
 * titel-element namelijk nergens uit; alleen --awb-font-size wordt gebruikt.
 * Zonder deze regel houdt de h6 de 1.2 uit de themaopties en is de pil te plat.
 */
.fusion-body .sh-sectie .fusion-title.tag .fusion-title-heading {
	line-height: 1.6;
}

.sh-sectie .sh-hub .tag h1,
.sh-sectie .sh-hub .tag h2,
.sh-sectie .sh-hub .tag h3,
.sh-sectie .sh-hub .tag h4,
.sh-sectie .sh-hub .tag h5,
.sh-sectie .sh-hub .tag h6 {
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.sh-sectie .sh-hub .voor p {
	font-size: .82rem;
	font-weight: 700;
	color: rgba(255, 255, 255, .62);
}

.sh-sectie .sh-hub .voor b {
	color: #fff;
}

/* De pijl-link zakt naar de onderkant van de kaart, ongeacht de tekstlengte. */
.sh-sectie .sh-hub .link {
	margin-top: auto;
	color: #fff;
}

.sh-sectie .sh-hub .link p {
	margin: 0;
	display: inline-flex;
	gap: 8px;
	align-items: center;
	white-space: nowrap;
	font-weight: 800;
	color: #fff;
	font-size: 1rem;
}

.sh-sectie .sh-hub .link svg {
	width: 16px;
	height: 16px;
	flex: none;
	transition: transform .18s ease;
}

.sh-sectie .sh-hub:hover .link svg {
	transform: translateX(6px);
}

@media (max-width: 980px) {

	.sh-sectie .sh-hub > .fusion-column-wrapper {
		min-height: 0;
	}
}


/* ---------------------------------------------------------------- routekaarten
 *
 * Twee klikbare kolommen. Doordat de kolom een link heeft legt Avada de achtergrond
 * op een eigen laag ONDER de inhoudswrapper - precies de plek van .beeldlaag in het
 * concept. Daar staat het sfeerbeeld met het verloop eroverheen; de wrapper is de
 * witte kaart en wordt bij hover doorzichtig, zodat het beeld tevoorschijn komt.
 *
 * De verschuiving zit op de KOLOM, zodat de kaart en de beeldlaag samen bewegen.
 */
.sh-sectie .sh-route {
	border-radius: var(--radius);
	transition: transform .22s ease;
}

.sh-sectie .sh-route:hover {
	transform: translateY(-6px);
}

.sh-sectie .sh-route > .fusion-column-inner-bg,
.sh-sectie .sh-route .fusion-column-anchor,
.sh-sectie .sh-route .fusion-column-inner-bg-image {
	border-radius: var(--radius);
}

.sh-sectie .sh-route > .fusion-column-wrapper {
	background: #fff;
	border: 1px solid var(--lijn);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	transition: background .3s ease, border-color .3s ease, box-shadow .22s ease, color .25s ease;
}

.sh-sectie .sh-route:hover > .fusion-column-wrapper {
	background: transparent;
	border-color: transparent;
	box-shadow: var(--shadow-zwaar);
	color: #fff;
}

.sh-sectie .sh-route p {
	color: var(--steen);
	transition: color .25s ease;
}

.sh-sectie .sh-route:hover p {
	color: #fff;
}

/* De tag is hier een tikje groter dan die op de programmakaarten. */
.fusion-body .sh-sectie .sh-route .fusion-title.tag {
	--awb-font-size: .74rem;
}

.sh-sectie .sh-route .tag {
	align-self: flex-start;
	display: inline-flex;
	padding: 7px 14px;
	border-radius: var(--pill);
	transition: background .25s ease, color .25s ease;
}

.sh-sectie .sh-route-talent .tag {
	background: var(--roze-08);
	color: var(--roze);
}

.sh-sectie .sh-route-werkgever .tag {
	background: var(--paars-05);
	color: var(--paars);
}

.sh-sectie .sh-route:hover .tag {
	background: rgba(255, 255, 255, .2);
	color: #fff;
}

/* De pijl-link zakt naar de onderkant van de kaart. */
.sh-sectie .sh-route .link {
	margin-top: auto;
	transition: color .25s ease;
}

.sh-sectie .sh-route .link p {
	margin: 0;
	display: inline-flex;
	gap: 8px;
	align-items: center;
	font-weight: 800;
	color: inherit;
}

.sh-sectie .sh-route:hover .link,
.sh-sectie .sh-route:hover .link p {
	color: #fff;
}

.sh-sectie .sh-route .link svg {
	width: 16px;
	height: 16px;
	flex: none;
	transition: transform .18s ease;
}

.sh-sectie .sh-route:hover .link svg {
	transform: translateX(4px);
}

/*
 * De achtergrondlaag van een kolom-met-link gelijk leggen met de kaart.
 *
 * Avada zet die laag met left/right/top/bottom op 0 over de VOLLE kolom en springt
 * hem alleen in met margin:calc(var(--awb-column-spacing)/2) - een variabele die
 * hier nergens gezet wordt, dus die berekening valt weg en de laag stak een halve
 * kolomruimte buiten de kaart uit. Bij de routekaarten was dat zichtbaar als een
 * roze rand naast de witte kaart.
 *
 * De kolomruimte staat wél als --awb-spacing-left/right op de wrapper. Door die te
 * hergebruiken blijft de laag vanzelf kloppen als iemand de kolomruimte wijzigt.
 */
.sh-sectie .sh-route > .fusion-column-inner-bg,
.sh-sectie .sh-hub > .fusion-column-inner-bg {
	margin-left: var(--awb-spacing-left);
	margin-right: var(--awb-spacing-right);
}

/* --------------------------------------------------------------------- hero
 *
 * De container is hier de sectie; ons element levert alleen nog de decoratieve
 * lagen (beeld, tint, netwerk) in één wrapper die daaroverheen ligt. Zo kunnen de
 * kicker, kop, sub, knoppen en notitie losse Avada-elementen zijn en dus in de
 * Live Editor bewerkt worden - dat is de meest bewerkte tekst van de site.
 */
.sh-sectie.sh-hero {
	position: relative;
	min-height: min(88vh, 820px);
	display: flex;
	align-items: center;
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

/*
 * De lagenwrapper draagt bewust óók de klasse .hero, zodat alle tintvarianten
 * (.hero.tint-a/-b/-c .hero-tint) blijven gelden zonder ze te dupliceren. Die
 * klasse brengt alleen ook de sectie-eigenschappen mee; die zetten we hier terug.
 */
.sh-sectie .hero-lagen.hero {
	position: absolute;
	inset: 0;
	min-height: 0;
	display: block;
	overflow: visible;
	z-index: -1;
}

/*
 * De lagen moeten zich richten op de sectie en niet op de kolom. Avada zet
 * position:relative op zowel de rij als de kolom, waardoor de lagen anders binnen
 * de tekstkolom van 720px bleven hangen. Binnen deze ene sectie zetten we dat
 * terug op static; de sectie zelf is relatief en heeft isolation:isolate, dus de
 * negatieve z-index blijft netjes binnen de hero.
 */
.sh-sectie.sh-hero > .fusion-row,
.sh-sectie.sh-hero .fusion-layout-column {
	position: static;
}

/*
 * De tekstkolom houdt de breedte uit het ontwerp (.hero-in) en staat gecentreerd.
 *
 * In het concept is .hero een flexbox en is .wrap daarin een flexitem met
 * margin:0 auto; dat blok krimpt dus naar zijn inhoud en gaat in het midden staan.
 * Links uitlijnen op het grid zou 200px schelen ten opzichte van het ontwerp.
 */
.sh-sectie.sh-hero .sh-hero-tekst {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.sh-sectie.sh-hero .kicker {
	color: #fff;
}

.sh-sectie.sh-hero .kicker::before {
	background: var(--roos);
}

.fusion-body .sh-sectie.sh-hero .fusion-title.sh-hero-kop {
	--awb-font-size: clamp(2.5rem, 5.4vw, 4.4rem);
}

.sh-sectie.sh-hero .sh-hero-kop .r2 {
	color: var(--roos);
	display: block;
}

/* De opkomst-animatie uit het concept, per onderdeel met zijn eigen vertraging. */
.sh-sectie.sh-hero .sh-hero-kop {
	opacity: 0;
	animation: rijz .8s ease .1s forwards;
}

.sh-sectie.sh-hero .sub {
	opacity: 0;
	animation: rijz .8s ease .25s forwards;
}

.sh-sectie.sh-hero .sub p {
	margin: 24px 0 34px;
	font-size: 1.2rem;
	color: rgba(255, 255, 255, .9);
	max-width: 560px;
}

.sh-sectie.sh-hero .knop-rij {
	opacity: 0;
	animation: rijz .8s ease .4s forwards;
}

.sh-sectie.sh-hero .hero-note {
	opacity: 0;
	animation: rijz .8s ease .55s forwards;
}

.sh-sectie.sh-hero .hero-note p {
	margin-top: 16px;
	font-size: .86rem;
	color: rgba(255, 255, 255, .65);
}

/* ----------------------------------------------------------------- manifest
 *
 * De container is de sectie en draagt het verloop (een Avada-instelling). Het
 * sfeerbeeld kan daar niet in mee: in het ontwerp ligt dat op 12% ÓVER het verloop,
 * terwijl Avada een verloop juist over een achtergrondbeeld heen legt. Vandaar een
 * eigen laag, net als bij de hero.
 */
.sh-sectie.sh-manifest {
	position: relative;
	overflow: hidden;
	color: #fff;
	text-align: center;
	isolation: isolate;
}

.sh-sectie .manifest-laag {
	position: absolute;
	inset: 0;
	background-image: var(--manifest-bg);
	background-size: cover;
	background-position: center;
	opacity: .12;
	pointer-events: none;
	z-index: -1;
}

/* Zelfde reden als bij de hero: de laag moet zich richten op de sectie. */
.sh-sectie.sh-manifest > .fusion-row,
.sh-sectie.sh-manifest .fusion-layout-column {
	position: static;
}

.sh-sectie.sh-manifest .kicker {
	color: #fff;
}

.sh-sectie.sh-manifest .kicker::before {
	background: #fff;
}

.fusion-body .sh-sectie.sh-manifest .fusion-title.sh-manifest-kop {
	--awb-font-size: clamp(1.95rem, 4.3vw, 3.3rem);
}

.sh-sectie.sh-manifest .sh-manifest-kop {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

.sh-sectie.sh-manifest .sh-manifest-kop em {
	font-style: normal;
	color: var(--roos);
}

/* De tegels worden in het concept met margin:auto gecentreerd; in een flexkolom
   moet daar een expliciete breedte bij (zie ook .faq). */
.sh-sectie.sh-manifest .tegels,
.sh-sectie.sh-manifest .site {
	width: 100%;
}

/* Het wordmark hing aan .manifest en verloor zijn opmaak bij de omzetting. */
.sh-sectie.sh-manifest .site {
	margin-top: 52px;
	font-weight: 900;
	letter-spacing: .3em;
	font-size: .95rem;
	color: rgba(255, 255, 255, .65);
}

/* -------------------------------------------------- responsief stapelen
 *
 * Avada stapelt kolommen op zijn eigen breekpunten (1024 en 640). Het concept doet
 * dat per blok op een eigen punt: routekaarten op 820, levensfase op 880, verhaal
 * en programma's op 900, werkgeversblok op 920. Die punten zitten in base.css bij
 * de grids die wij vervangen hebben, dus hier zetten we ze voor de kolommen terug.
 *
 * Boven het punt lezen we var(--awb-width-large) uit in plaats van een vaste
 * breedte: zo blijft de instelling uit de builder leidend en hoeft deze regel niet
 * mee te veranderen als iemand de kolomverhouding aanpast.
 */
@media (min-width: 821px) {

	.sh-sectie.sh-routes > .fusion-row > .fusion-layout-column {
		width: var(--awb-width-large);
		max-width: none;
	}
}

@media (min-width: 901px) {

	.sh-sectie.sh-duo > .fusion-row > .fusion-layout-column,
	.sh-sectie.sh-programmas > .fusion-row > .fusion-layout-column {
		width: var(--awb-width-large);
		max-width: none;
	}
}

@media (min-width: 921px) {

	.sh-sectie.sh-wg > .fusion-row > .fusion-layout-column {
		width: var(--awb-width-large);
		max-width: none;
	}
}

@media (max-width: 820px) {

	.sh-sectie.sh-routes > .fusion-row > .fusion-layout-column {
		width: 100%;
		max-width: 100%;
	}
}

@media (max-width: 900px) {

	.sh-sectie.sh-duo > .fusion-row > .fusion-layout-column,
	.sh-sectie.sh-programmas > .fusion-row > .fusion-layout-column {
		width: 100%;
		max-width: 100%;
	}
}

@media (max-width: 920px) {

	.sh-sectie.sh-wg > .fusion-row > .fusion-layout-column {
		width: 100%;
		max-width: 100%;
	}
}

/* ── Werkgeverslogo's in het logovlak ──────────────────────────────────────
 *
 * In het concept staan in .vac-logo alleen initialen; hier komt waar mogelijk
 * het echte logo van de werkgever. Die zijn van alle formaten en verhoudingen,
 * dus ze moeten binnen het vlak passen in plaats van eruit lopen. Contain en
 * niet cover: een logo mag niet bijgesneden worden.
 */
.sh-sectie .vac-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 6px;
	border-radius: inherit;
}

/* Ledentegels: logo in plaats van initialen, zelfde uitgangspunt als .vac-logo. */
.sh-sectie .lid-tegel .logo-vlak img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 5px;
	border-radius: inherit;
}

/* De tegel is nu een link; die moet zich als de oude div blijven gedragen. */
.sh-sectie a.lid-tegel {
	text-decoration: none;
	color: inherit;
}

/* Kleine noot onder de rechterkolom van een aanmeldband. */
.sh-sectie .vacband .band-noot {
	margin-top: 16px;
	font-size: .82rem;
	color: rgba(255, 255, 255, .6);
}

/* ── Twee blokken die allebei .uitgelicht heten ───────────────────────────
 *
 * In de concepten draagt zowel de uitgelichte verhaalkaart op /verhalen/ als
 * de uitgelichte-eventsectie op /agenda/ de klasse .uitgelicht. De kaartregels
 * (grid van twee kolommen, witte achtergrond, rand, schaduw, negatieve
 * bovenmarge) belanden daardoor ook op de sectie, en die wordt dan een smalle
 * kaart met een geknelde kop.
 *
 * Ze zijn wel uit elkaar te houden: de kaart is een <a>, de sectie een
 * <section>. Vandaar deze regel, die alleen de sectie terugzet.
 */
.sh-sectie section.uitgelicht {
	display: block;
	grid-template-columns: none;
	background: linear-gradient(150deg, var(--paars), #5C083F);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin-top: 0;
	transform: none;
}

.sh-sectie section.uitgelicht:hover {
	transform: none;
	border-color: transparent;
}

/* ── Onderdelen die het concept nog niet kende ────────────────────────────
 *
 * De pijltekst onder een klikbare mijlpaal (op /over/ stond die als inline
 * stijl in de opmaak), en de initialen in een portretvlak zolang de foto van
 * een teamlid nog niet geüpload is.
 */
.sh-sectie .mijlpaal .pijltekst {
	margin-top: auto;
	font-weight: 900;
	color: var(--paars);
}

.sh-sectie a.mijlpaal {
	text-decoration: none;
	color: inherit;
}

.sh-sectie .teamlid .portret-initialen {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: var(--paars-05);
	color: var(--paars);
	font-weight: 900;
	font-size: 1.6rem;
	letter-spacing: .04em;
}

/* ── "Doorlopend"-badge naast "Nieuw" op vacaturekaarten ──────────────────
 *
 * Vrijwel elke SmartHub-vacature heeft geen sluitingsdatum: je kunt altijd
 * reageren. Dat is een geruststelling, geen urgentie, dus deze badge is bewust
 * rustig (neutrale tint, geen pulserende stip) tegenover het magenta "Nieuw".
 */
.sh-sectie .vac-badges {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}
.sh-sectie .vac-badges .vac-nieuw {
	margin-bottom: 0;
}
.sh-sectie .vac-doorlopend {
	background: var(--paars-05);
	color: var(--paars);
	font-size: .62rem;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 4px 11px;
	border-radius: var(--pill);
	display: inline-flex;
	align-items: center;
	width: max-content;
}

/* --- Mega-menu boven de pagina-inhoud -------------------------------------
 *
 * Avada geeft élke .fusion-builder-row position:relative met z-index:10. Zowel
 * de header-layout als de eerste container van de pagina wordt daardoor een
 * eigen stacking context op hetzelfde niveau, en bij gelijke z-index wint wat
 * later in de DOM staat: de pagina-inhoud. Het mega-paneel hangt onder de
 * header en viel dus achter de hero.
 *
 * Op de homepage gebeurde dat niet, omdat de hero daar uit een losse laag op
 * z-index:-1 bestaat; op de subpagina's is de hero een gewone sectie in die
 * rij. Vandaar dat het menu alleen op de homepage leek te werken.
 *
 * De z-index:60 op <header> zelf lost dit niet op: die geldt binnen de rij,
 * niet daarbuiten. Daarom tillen we de hele header-layout op.
 */
.fusion-tb-header {
	position: relative;
	z-index: 100;
}


/* --- Cijferbalk: zijkanten vrijhouden onder 1200px ------------------------
 *
 * .stats-in staat in de paginalagen op `padding: 36px 0` en die lagen laden ná
 * dit bestand. Vandaar de extra klasse (.fusion-body erbij, 0,3,0): anders
 * wint de kortere selector uit de laag en komt de zijpadding niet aan.
 * 28px is dezelfde marge als .wrap elders aanhoudt.
 */
@media (max-width: 1200px) {

	.fusion-body .sh-sectie .stats-in {
		padding-left: 28px;
		padding-right: 28px;
	}
}


/* --- Mobiele correcties ---------------------------------------------------
 *
 * Gemeten op een echte viewport van 390px (via een iframe; Chrome klemt een
 * headless venster op ~500px, dus --window-size=390 meet niets van waarde).
 *
 * De extra .fusion-body voor de selectors is nodig waar een paginalaag
 * dezelfde regel opnieuw zet: die lagen laden ná dit bestand, dus met gelijke
 * specificiteit winnen zij. Met .fusion-body erbij (0,3,0) komt het wel aan.
 */

/* 1. Cijferbalk stapelt niet op de homepage.
 *    pagina/index.css herhaalt .stats-in uit base.css maar bevat geen enkele
 *    mediaquery, waardoor de stapelregel van base.css (max-width:900) wordt
 *    overschreven. Op 390px stonden er dus nog vijf kolommen naast elkaar en
 *    liep de balk 42px buiten beeld. */
@media (max-width: 900px) {

	.fusion-body .sh-sectie .stats-in {
		grid-template-columns: 1fr 1fr;
	}

	.fusion-body .sh-sectie .stats h2 {
		grid-column: 1 / -1;
	}
}

/* 2. Agenda-items liepen 15px buiten beeld. Een rasterkolom krimpt niet onder
 *    zijn min-content; met min-width:0 mag de tekstkolom wél smaller worden. */
.sh-sectie .event > * {
	min-width: 0;
}

/* 3. Routekaarten raakten elkaar bij het stapelen: gemeten tussenruimte 0px. */
@media (max-width: 820px) {

	.sh-sectie.sh-routes > .fusion-row > .fusion-layout-column {
		margin-bottom: 28px;
	}

	.sh-sectie.sh-routes > .fusion-row > .fusion-layout-column:last-child {
		margin-bottom: 0;
	}
}

/* 4. Hubs: 24px tussen gestapelde kaarten is te krap voor volvlaks blokken. */
@media (max-width: 900px) {

	.fusion-body .sh-sectie .hubs {
		gap: 36px;
	}
}

/* 5. Werkgeversblok: idem voor de citaatkaart en de CTA eronder. */
@media (max-width: 920px) {

	.fusion-body .sh-sectie .wg-grid {
		gap: 48px;
	}

	.fusion-body .sh-sectie .wg-grid > div:first-child {
		gap: 32px;
	}
}

/* 6. Zoekhero zonder verticale binnenruimte onder 1200px (op verzoek). */
@media (max-width: 1200px) {

	.fusion-body .sh-sectie .hero-zoek .hero-in {
		padding: 0;
	}
}

/* --- Gestapelde Avada-blokken op de homepage ------------------------------
 *
 * De programma-kaarten ('Eén SmartHub. Drie programma's.') en de blokken onder
 * 'Talent vinden wordt steeds krapper.' zijn met standaard Avada-kolommen
 * gebouwd, niet met de eigen hubs/wg-elementen. Die kolommen hebben alleen
 * --awb-margin-bottom-large: 0px meegekregen en geen mobiele variant, dus
 * gestapeld raakten ze elkaar: gemeten 0px tussenruimte.
 *
 * De variabele zelf staat inline op het element en is daarom niet te
 * overschrijven; we zetten dus de margin zelf, onder het punt waarop Avada
 * de kolommen stapelt.
 */
@media (max-width: 900px) {

	.fusion-body .sh-sectie .fusion-layout-column.sh-hub,
	.fusion-body .sh-sectie .fusion-layout-column.sh-kaart,
	.fusion-body .sh-sectie .fusion-layout-column.sh-quote {
		margin-bottom: 28px;
	}

	.fusion-body .sh-sectie .fusion-layout-column.sh-hub:last-child,
	.fusion-body .sh-sectie .fusion-layout-column.sh-kaart:last-child,
	.fusion-body .sh-sectie .fusion-layout-column.sh-quote:last-child {
		margin-bottom: 30px;
	}
}

/* Lange samenstellingen als 'Werkgeversbijeenkomst' passen op een telefoon niet
   in één regel. break-word breekt alleen als het echt niet past - anders dan
   anywhere, dat ook woorden knipt die wél passen. */
.sh-sectie .event a,
.sh-sectie .event h3 {
	overflow-wrap: break-word;
}

/* --- Opt-in: knop onder het veld op een telefoon --------------------------
 *
 * .mail is één pil met het invoerveld en de knop naast elkaar. Op een
 * telefoon houdt het veld daar nog een centimeter van over ('naam@b|'), dus
 * daar zetten we ze onder elkaar. De pilvorm wordt dan een afgeronde bak,
 * anders staan er twee ronde vormen in elkaar.
 */
@media (max-width: 600px) {

	.sh-sectie .mail {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		border-radius: var(--radius);
		padding: 14px;
	}

	.sh-sectie .mail input {
		padding: 8px 10px;
	}

	.sh-sectie .mail .btn,
	.sh-sectie .mail button {
		justify-content: center;
		width: 100%;
	}
}

/* Op smalle schermen breekt de kop toch al over meerdere regels; de tweede
   regel als los blok levert dan een eenzame regel op. Inline met wat lucht
   ervoor loopt het door. */
@media (max-width: 760px) {

	.sh-sectie.sh-hero .sh-hero-kop .r2 {
		display: inline;
		padding-left: 10px;
	}
}

/* De subhero heeft in elke paginalaag een eigen binnenruimte (52px boven,
   66px onder). Samen met de sectiepadding van 96px wordt dat op een telefoon
   te veel lucht; daar volstaat de sectiepadding.
   De extra .fusion-body is nodig omdat de paginalagen ná dit bestand laden en
   dezelfde selector gebruiken. */
@media (max-width: 760px) {

	.fusion-body .sh-sectie .hero-sub .hero-in {
		padding: 0;
	}
}

/* --- Werkgeverspagina: zijkolom kan niet krimpen --------------------------
 *
 * De container stapelt onder 900px al netjes naar één kolom, maar een
 * rasteritem krimpt niet onder zijn min-content. De feitenlijst bevat lange,
 * onbreekbare waarden (websites, adressen), waardoor de zijkolom op een
 * telefoon 364px breed bleef in een container van 315px en er 39px buiten
 * beeld viel.
 */
.sh-werkgever-single__container > *,
.sh-werkgever-single__content,
.sh-werkgever-single__sidebar {
	min-width: 0;
}

.sh-werkgever-single__facts p,
.sh-werkgever-single__facts a,
.sh-werkgever-single__facts li {
	overflow-wrap: break-word;
}

/* --- Kruimelpad mag afbreken ----------------------------------------------
 *
 * .kruimel is een flexrij zonder wrap; bij een lange vacaturetitel liep de
 * laatste kruimel een paar pixels buiten beeld.
 */
.sh-sectie .kruimel {
	flex-wrap: wrap;
	row-gap: 4px;
}

/* ── Donkere hero zonder foto ──────────────────────────────────────────────────
   Zet de klasse sh-donkere-hero op de Avada-container om het hero-element dezelfde
   behandeling te geven als de artikel-hero op vacature- en nieuwsdetail: het donkere
   ink-vlak met het merkverloop en het streeppatroon eroverheen. Bedoeld voor pagina|s
   waar geen sfeerbeeld voor de hero is. */
.sh-sectie.sh-donkere-hero .hero {background:var(--ink)}
.sh-sectie.sh-donkere-hero .hero .hero-tint {
	background:
		linear-gradient(140deg,rgba(162,0,103,.55),rgba(29,18,32,.75)),
		repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 22px,rgba(255,255,255,.01) 22px 44px);
}

/* Verzendknop van het contactformulier. Het haakje is class="contactform" op de
   [fusion_form]-shortcode; Avada zet zijn eigen knoppadding inline, vandaar !important. */
.contactform .fusion-form-submit-field button.fusion-button {padding: 13px 29px !important;}


/*
 * De gestreepte achtergrond op `.foto` is een plaatshouder: hij vertelt de
 * redactie dat er nog een beeld moet komen. Zodra er wél een afbeelding in zit,
 * hoort hij weg — ook als het vlak hoger uitvalt dan de foto zelf, bijvoorbeeld
 * omdat de Avada-kolomwrapper (een flexbox met align-items: stretch) het vlak
 * uitrekt tot de hoogte van de tekstkolom ernaast.
 *
 * Dit is bewust de plaatshouder uitzetten en niet de hoogte forceren: de hoogte
 * komt uit de builder en hoort daar instelbaar te blijven.
 */
.sh-sectie .foto:has(img) {
	background: none;
}

/*
 * De vormkeuze uit de builder moet `.sh-sectie .duo-strak .foto` (0,3,0)
 * verslaan; die laat het beeldvlak juist de hoogte van de tekstkolom volgen.
 * Zonder deze regels doet de instelling "Vaste verhouding 4:3" of "Vierkant"
 * zichtbaar niets zodra het beeld in een duo-blok staat — het vlak bleef de
 * kolom volgen en sneed de foto navenant bij.
 *
 * `align-self: start` houdt het vlak op zijn eigen hoogte binnen de
 * flex-kolomwrapper van Avada; zonder dat rekt het alsnog uit tot de kolomhoogte.
 */
/* De laatste selector moet `.sh-sectie.sh-duo .sh-duo-beeld .foto` (0,4,0)
   verslaan; die zet flex:1 1 auto op het beeldvlak. */
.sh-sectie .foto-staand,
.sh-sectie .duo-strak .foto-staand,
.sh-sectie .foto-vierkant,
.sh-sectie .duo-strak .foto-vierkant,
.sh-sectie.sh-duo .sh-duo-beeld .foto-staand,
.sh-sectie.sh-duo .sh-duo-beeld .foto-vierkant {
	height: auto;
	min-height: 0;
	align-self: start;
	/*
	 * `flex: 0 0 auto` is hier de regel die het werk doet. De kolomwrapper van
	 * Avada is een flexbox in kolomrichting; daar bepaalt flex-grow de hoogte en
	 * regelt align-self alleen de breedte. Het vlak stond op `flex: 1 1 auto` en
	 * groeide daardoor mee tot de kolomhoogte, waardoor de ingestelde verhouding
	 * werd genegeerd en de foto alsnog werd bijgesneden.
	 */
	flex: 0 0 auto;
}

.sh-sectie .foto-staand,
.sh-sectie .duo-strak .foto-staand,
.sh-sectie.sh-duo .sh-duo-beeld .foto-staand {
	aspect-ratio: 4 / 3;
}

.sh-sectie .foto-vierkant,
.sh-sectie .duo-strak .foto-vierkant,
.sh-sectie.sh-duo .sh-duo-beeld .foto-vierkant {
	aspect-ratio: 1 / 1;
}

/* ------------------------------------------------------------------
   Slotband: beeldmerk als merkpatroon op de achtergrond (31-7)

   De klasse .slot wordt op twee plekken gebruikt: hier voor de afsluitende
   band, en in base.css voor de tekstoverlay op een foto (.foto .slot, die
   position:absolute is). Daarom hangen deze regels aan :has(> .slot-merkteken)
   en aan het directe kind, zodat de foto-overlay er buiten valt.
   ------------------------------------------------------------------ */
.sh-sectie .slot:has(> .slot-merkteken){position:relative;overflow:hidden;isolation:isolate}
.sh-sectie .slot > .slot-merkteken{
	position:absolute;z-index:0;pointer-events:none;
	right:-6%;top:50%;transform:translateY(-50%);
	width:min(620px,58vw);aspect-ratio:1;
	background:no-repeat center/contain;
	opacity:.12;
}
/* De inhoud moet boven het merkteken blijven; zonder z-index valt hij erachter. */
.sh-sectie .slot:has(> .slot-merkteken) > .wrap{position:relative;z-index:1}

@media (max-width:760px){
	.sh-sectie .slot > .slot-merkteken{width:420px;right:-32%;opacity:.1}
}

/* ------------------------------------------------------------------
   Footer: makerregel in de onderbalk (31-7)

   .f-bottom is een flexrij met space-between. Met drie items komt de
   makerregel vanzelf in het midden te staan.
   ------------------------------------------------------------------ */
.sh-sectie .f-maker{color:rgba(255,255,255,.55)}
.sh-sectie .f-maker a{color:rgba(255,255,255,.7);text-decoration:none;transition:color .15s}
.sh-sectie .f-maker a:hover{color:var(--roos)}

@media (max-width:760px){
	/* Op mobiel klapt de onderbalk; dan hoort de makerregel onderaan, niet ertussen. */
	.sh-sectie .f-bottom{flex-direction:column;align-items:flex-start;gap:10px}
	.sh-sectie .f-maker{order:3}
}

/* ------------------------------------------------------------------
   Teamportretten vierkant (31-7)

   De aangeleverde foto's zijn staand, liggend en vierkant door elkaar.
   Zonder vaste verhouding verspringt de rij en worden de kaarten
   ongelijk hoog. object-fit houdt het gezicht in beeld.
   ------------------------------------------------------------------ */
.sh-sectie .teamlid .foto {
	aspect-ratio: 1;
	overflow: hidden;
}

.sh-sectie .teamlid .foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* ------------------------------------------------------------------
   Stapkaarten zonder beeld: wit icoon op een roze verloop (31-7)

   Stond eerst op de gestreepte plaatshouder van .foto. Die is bedoeld
   als "hier komt nog een foto"; op de stappen is dat een blijvende
   toestand, dus daar hoort een eigen vlak.
   ------------------------------------------------------------------ */
.sh-sectie .stap .beeld:not(:has(img)) .foto {
	background: linear-gradient(150deg, var(--roze, #D10074) 0%, var(--paars, #A20067) 78%);
}

.sh-sectie .stap .stap-icoon {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #fff;
	pointer-events: none;
}

.sh-sectie .stap .stap-icoon svg {
	width: 64px;
	height: 64px;
	opacity: .92;
}

@media (max-width: 900px) {
	.sh-sectie .stap .stap-icoon svg { width: 52px; height: 52px; }
}
/* Het nummerbolletje is magenta met witte tekst en verdwijnt daardoor op het roze
   verloop van een kaart zonder foto. Daar keren we het om. */
.sh-sectie .stap .beeld:not(:has(img)) .fase-nr {
	background: #fff;
	color: var(--paars, #A20067);
	box-shadow: 0 4px 12px rgba(0,0,0,.14);
}

/* ------------------------------------------------------------------
   Achterhoek Student Card: deals in uitklapblokken (31-7)

   Native <details>, dus het werkt zonder JavaScript en de inhoud staat
   gewoon in de HTML. Geen FAQPage-schema: een korting is geen vraag.
   ------------------------------------------------------------------ */
.sh-sectie .deals {
	display: grid;
	gap: 14px;
	margin-top: 40px;
}

.sh-sectie .deal {
	border: 1px solid var(--lijn, #e9e2e6);
	border-radius: 18px;
	background: #fff;
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.sh-sectie .deal[open],
.sh-sectie .deal:hover {
	border-color: var(--roze, #D10074);
	box-shadow: 0 10px 26px rgba(209, 0, 116, .10);
}

.sh-sectie .deal > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 24px;
	cursor: pointer;
	list-style: none;
}

/* Het standaard driehoekje van de browser weg; we zetten er zelf een label neer. */
.sh-sectie .deal > summary::-webkit-details-marker { display: none; }
.sh-sectie .deal > summary::marker { content: ''; }

.sh-sectie .deal-kop {
	display: grid;
	gap: 3px;
}

.sh-sectie .deal-kop strong {
	font-size: 1.06rem;
	color: var(--ink, #1D1220);
}

.sh-sectie .deal-samen {
	font-size: .92rem;
	color: var(--steen, #5a4250);
}

.sh-sectie .deal-open {
	flex: none;
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--roze, #D10074);
}

.sh-sectie .deal[open] .deal-open { opacity: .55; }

.sh-sectie .deal-body {
	padding: 0 24px 24px;
	display: grid;
	gap: 14px;
	justify-items: start;
}

.sh-sectie .deal-body p { margin: 0; }

.sh-sectie .deal-code {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	border-radius: var(--pill, 999px);
	background: var(--paars-05, #faedf5);
}

.sh-sectie .deal-code span {
	font-size: .74rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--steen, #5a4250);
}

.sh-sectie .deal-code code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 700;
	color: var(--paars, #A20067);
}

@media (max-width: 620px) {
	.sh-sectie .deal > summary { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* --- Student Card-formulier --- */
.sh-sectie .sh-form--studentcard .sh-form__radio {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
}

/* Alleen de browserstijl van fieldset weghalen. `margin:0` stond hier ook, en dat wiste
   de onderruimte van .sh-form__row: de vraag eronder plakte tegen de laatste radio aan. */
.sh-sectie .sh-form--studentcard fieldset {
	border: 0;
	padding: 0;
}

.sh-sectie .sh-form--studentcard fieldset.sh-form__row {
	margin-bottom: 1.6rem;
}

/* De radiogroep iets losser dan de invoervelden: vijf regels onder elkaar lezen anders
   als een blok tekst in plaats van als een keuze. */
.sh-sectie .sh-form--studentcard legend {
	margin-bottom: 10px;
}

.sh-sectie .sh-form--studentcard legend {
	font-weight: 700;
	margin-bottom: 4px;
}

.sh-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Tweede, rustiger verwijzing binnen een deal (bijvoorbeeld de actievoorwaarden).
   Bewust een tekstlink en geen knop: één deal hoort één duidelijke actie te hebben. */
.sh-sectie .deal-bijlage {
	font-size: .88rem;
	color: var(--paars, #A20067);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------
   Student Card-formulier: eigen binnenmarge (31-7)

   De basisregel in forms.css is `padding: 1.75rem 0` — dus alleen boven
   en onder. Het kaartje heeft wel een rand en een schaduw, waardoor de
   labels en velden tegen de rand aan plakten. Elk formulier zet hier zijn
   eigen zijmarge: het lidmaatschapsformulier 36px, het sollicitatie-
   formulier 30px. Dit volgt het lidmaatschapsformulier, want die twee
   lijken qua opzet het meest op elkaar.
   ------------------------------------------------------------------ */
.sh-sectie .sh-form--studentcard .sh-form {
	padding: 40px 36px 44px;
}

@media (max-width: 760px) {
	.sh-sectie .sh-form--studentcard .sh-form {
		padding: 28px 22px 32px;
	}
}