/* =========================================================
   Innovatie Media - themastyling. Tokens staan in style.css (:root).
   Alleen wat in Figma staat: header en hero (frame 1:26).
   ========================================================= */

/* ---------- Basis ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	background: var(--c-bg);
	color-scheme: dark;
}

body {
	margin: 0;
	min-height: 100vh;
	background: var(--c-bg);
	color: var(--c-white);
	font-family: var(--f-body);
	font-size: var(--fs-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

img,
video { display: block; max-width: 100%; height: auto; }
svg { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; line-height: inherit; }
::selection { background: var(--c-lavender); color: var(--c-ink); }
:focus-visible { outline: 2px solid var(--c-lavender); outline-offset: 3px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: fixed;
	top: 0.75rem; left: 0.75rem;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	border-radius: var(--radius-pill);
	background: var(--c-lavender);
	color: var(--c-ink);
	font-family: var(--f-display);
	font-weight: 500;
	text-decoration: none;
	transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* Lenis (lenis.css 1.3.17, hier opgenomen: een request minder) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }

.richtext > * + * { margin-top: 1em; }
.richtext p { text-wrap: pretty; }
.richtext a { color: var(--c-lavender); text-underline-offset: 0.18em; }
.richtext strong { font-weight: 600; }

/* ---------- Transitie (Osmo DrawSVG page transition) ---------- */
.transition {
	position: fixed;
	inset: 0;
	z-index: 60;
	pointer-events: none;
	overflow: clip;
}
.transition__shape {
	position: absolute;
	inset: 0;
	color: var(--c-lavender);
}
.transition__svg {
	position: absolute;
	top: -15%; left: -15%;
	width: 130%; height: 130%;
	max-width: none;
}
/* Eerste page load: het scherm staat al bedekt tot app.js de lijn uittekent. */
.js.is-loading:not(.is-reduced) .transition__svg path { stroke-width: 36%; }
/* Vangnet als de scripts niet laden: na 5 seconden toch de pagina tonen. */
.js.is-loading .transition { animation: im-cover-out 0.5s ease 5s forwards; }
@keyframes im-cover-out { to { opacity: 0; visibility: hidden; } }
.is-transitioning .transition { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
	.transition { display: none; }
}

/* ---------- Pillen en knoppen ---------- */
.pill,
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--btn-h);
	padding: 0 var(--btn-px);
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--f-display);
	font-weight: 500;
	font-size: var(--fs-btn);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	isolation: isolate;
	-webkit-tap-highlight-color: transparent;
	transition: color 0.45s var(--ease-im), border-color 0.45s var(--ease-im);
}

/* Hover: een krabbel tekent zich over de knop en vult hem (buttons.js,
   Osmo "Button 007"). De kleur van de krabbel per variant via --scribble;
   de tekst wisselt mee zodra de knop vol is. Toetsenbordfocus: direct vol. */
.pill { border-color: var(--c-white); color: var(--c-white); --scribble: var(--c-white); }
.scribble {
	position: absolute;
	inset: -1px;
	z-index: -1;
	border-radius: inherit;
	overflow: hidden;
	color: var(--scribble, var(--c-white));
	pointer-events: none;
}
.scribble svg { width: 100%; height: 100%; }
.pill:focus-visible .scribble path,
.btn:focus-visible .scribble path { stroke-width: 62; }
.pill__label,
.btn__label { position: relative; line-height: 1.25; }
/* Tekstkleur wisselt zodra de krabbel de knop grotendeels vult (erin) en
   meteen bij weggaan (eruit). */
.pill,
.btn { transition: color 0.3s ease 0.22s, border-color 0.45s var(--ease-im); }
.pill.is-hover,
.btn.is-hover { transition-delay: 0.32s; }

.pill.is-hover,
.pill:focus-visible { color: var(--c-ink); }

.btn--primair { background: var(--c-lavender); color: var(--c-ink); --scribble: var(--c-lavender-light); }

.btn--paars { border-color: var(--c-lavender); color: var(--c-lavender); --scribble: var(--c-lavender); }

.btn--omlijnd { border-color: var(--c-white); color: var(--c-white); --scribble: var(--c-white); }

.btn--paars.is-hover,
.btn--omlijnd.is-hover,
.btn--paars:focus-visible,
.btn--omlijnd:focus-visible { color: var(--c-ink); }

/* Op een lichte ondergrond: donkere varianten. */
.btn--on-light.btn--primair { background: var(--c-ink); color: var(--c-lavender); --scribble: var(--c-bg); }
.btn--on-light.btn--paars,
.btn--on-light.btn--omlijnd { border-color: var(--c-ink); color: var(--c-ink); --scribble: var(--c-ink); }
.btn--on-light.btn--paars.is-hover,
.btn--on-light.btn--omlijnd.is-hover { color: var(--c-lavender); }

.btns { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* ---------- Header (Figma 1:26) ----------
   Elk onderdeel staat los vast in beeld. De witte pillen en het logo mengen
   met difference: boven het bruin blijven ze licht, boven de foto keren ze om.
   Het logo heeft daarvoor een gecompenseerde kleur (#ffc6fc): min het bruin
   van de achtergrond geeft dat precies het lavendel uit het ontwerp. */
.site-header__menu,
.site-header__logo,
.site-header__ctas,
.site-header__lang {
	position: fixed;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top));
	z-index: 40;
}
.site-header__menu,
.site-header__logo,
.site-header__lang { mix-blend-mode: difference; }

.site-header__menu { left: var(--gutter); }
.site-header__logo {
	left: 0;
	right: 0;
	width: 3.5rem;                                      /* 56 */
	height: var(--btn-h);
	margin-inline: auto;
	display: flex;
	align-items: center;
	color: var(--c-logo-blend);
}
.site-header__mark,
.site-header__logo-img { width: 100%; height: auto; overflow: visible; }

.site-header__lang { right: var(--gutter); width: var(--lang-w); padding: 0; }
/* Bovenaan de pagina (eerste 100px) is de taalpil gewoon wit voor het
   contrast boven de foto; daarna keert hij om zoals de rest (app.js zet is-top). */
.is-top .site-header__lang { mix-blend-mode: normal; }
.site-header__ctas { right: calc(var(--gutter) + var(--lang-w) + 1.25rem); display: flex; gap: 0.75rem; }
.site-header--een-taal .site-header__ctas { right: var(--gutter); }

@media (max-width: 47.99em) {
	.site-header__logo { width: 2.75rem; }
	.site-header__ctas { display: none; }
}

/* ---------- Taalpaneel (lang.js) ----------
   Van rechts, met een draaiende wereldbol bovenin en de talen onderin. */
.langpanel {
	position: fixed;
	inset: 0;
	z-index: 50;
	visibility: hidden;
	pointer-events: none;
}
.lang-open .langpanel { visibility: visible; pointer-events: auto; }
/* Geen donkere laag: de backdrop vangt alleen de klik om te sluiten. De
   rest van de pagina gaat naar halve opacity. */
.langpanel__backdrop {
	position: absolute;
	inset: 0;
	cursor: pointer;
}
.site-main,
[data-header-item] { transition: opacity 0.6s var(--ease-im); }
.lang-open .site-main,
.lang-open [data-header-item] { opacity: 0.5; }
/* Net als de herofoto: 10px marge rechts, boven en onder, ronde hoeken. */
.langpanel__panel {
	position: absolute;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--frame));
	right: var(--frame);
	bottom: var(--frame);
	width: min(40rem, calc(100vw - 2 * var(--frame)));
	background: var(--c-panel);
	border-radius: var(--radius);
	overflow: hidden;
}
.langpanel__inner {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: calc(var(--header-top) - var(--frame)) calc(var(--gutter) - var(--frame)) calc(var(--gutter) - var(--frame));
	overflow-y: auto;
}
.langpanel__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.langpanel__kicker { font-size: var(--fs-small); color: var(--c-mute); }
.langpanel__globe {
	flex: 1 1 auto;
	display: grid;
	place-items: center;
	min-height: 14rem;
	padding: 1.5rem 0;
}
.langpanel__canvas { width: min(100%, 19rem, 34vh); aspect-ratio: 1; display: block; }
.langpanel__list { list-style: none; margin: 0; padding: 0; }
/* Meer dan vier talen: twee kolommen en compacter, zodat alles naast de bol past. */
.langpanel__list--veel { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
.langpanel__list--veel .langpanel__item { padding: 0.9rem 0; gap: 0.75rem; }
.langpanel__list--veel .langpanel__hello { font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.25rem); }
.langpanel__list--veel .langpanel__name { font-size: 0.875rem; }
.langpanel__list--veel .langpanel__arrow { width: 2.5rem; height: 2.5rem; }
@media (max-width: 30em) {
	.langpanel__list--veel { grid-template-columns: 1fr; }
}
.langpanel__row { position: relative; }
.langpanel__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.25rem 0;
	text-decoration: none;
	color: var(--c-white);
	transition: opacity 0.45s var(--ease-im);
}
.langpanel__text { display: grid; gap: 0.2rem; }
.langpanel__mask { display: block; overflow: hidden; padding-bottom: 0.08em; }
.langpanel__hello {
	display: block;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: clamp(2.25rem, 1.4rem + 2.4vw, 3.75rem);
	line-height: 1.05;
	color: var(--c-lavender);
}
.langpanel__name { display: block; font-size: 1rem; color: var(--c-mute); transition: color 0.35s; }
.langpanel__arrow {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border: 1px solid var(--c-white);
	border-radius: 50%;
	overflow: hidden;
	isolation: isolate;
	color: var(--c-white);
	--scribble: var(--c-white);
	transition: color 0.3s ease 0.22s;
}
.langpanel__chevsvg { position: relative; width: 100%; height: 100%; overflow: visible; }
/* Actieve taal: roze knop met een vinkje. */
.langpanel__arrow--check { background: var(--c-lavender); border-color: var(--c-lavender); color: var(--c-ink); }
.langpanel.is-aiming .langpanel__item:not(.is-aim) { opacity: 0.28; }
.langpanel__item.is-aim .langpanel__name { color: var(--c-white); }
.langpanel__item.is-hover .langpanel__arrow { color: var(--c-ink); transition-delay: 0.32s; }
.langpanel__item:focus-visible .langpanel__arrow { color: var(--c-ink); }
.langpanel__item:focus-visible .scribble path { stroke-width: 62; }
@media (max-width: 47.99em) {
	.langpanel__arrow { width: 2.75rem; height: 2.75rem; }
}

/* ---------- Titelreveal (lamalama, title-reveal.js) ---------- */
.title-line { white-space: nowrap; will-change: transform, clip-path; }

/* ---------- Blok: hero (Figma 1:26) ---------- */
/* Het Figma-frame is 4203 hoog bij een scherm van 982: onder de hero staat
   (nog) lege ruimte. Die houden we aan als scrollruimte voor het trap-effect
   tot er volgende secties zijn ontworpen. */
.site-main[data-barba-namespace="home"] { min-height: calc(100svh * 4.28); }
.section--hero { position: relative; }
.hero {
	position: relative;
	height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
}
.hero__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--gap);
	height: 100%;
	width: calc(100% - 41.07% - var(--frame));
	padding: calc(var(--header-top) + var(--btn-h) + 2rem) var(--gutter) var(--gutter);
}
.hero__title {
	max-width: 42rem;                                   /* 672 */
	font-family: var(--f-display);
	font-weight: 600;
	font-size: var(--fs-h1);
	line-height: 1;
	color: var(--c-lavender);
	text-wrap: balance;
}
.hero__text {
	max-width: 36.5rem;                                 /* 584 */
	font-size: var(--fs-lead);
	line-height: 1.35;
}
.hero__text > * + * { margin-top: 1.35em; }
/* Links in de introtekst (de diensten): subtiele bruine onderstreping met
   ronde uiteinden die bij hover van links naar rechts roze volloopt (de roze
   lijn groeit in de breedte, dus de ronde punt loopt mee); de tekst kleurt
   mee. Op één regel gehouden, zodat de lijn nooit over twee regels breekt. */
.hero__text a {
	position: relative;
	white-space: nowrap;
	color: inherit;
	text-decoration: none;
	transition: color 0.35s ease;
}
.hero__text a::before,
.hero__text a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.06em;
	height: 1px;
	border-radius: 1px;
	pointer-events: none;
}
.hero__text a::before { right: 0; background: var(--c-underline); }
/* Op retina-schermen een haarlijn: een halve CSS-pixel is daar één echte pixel. */
@media (min-resolution: 2dppx) {
	.hero__text a::before,
	.hero__text a::after { height: 0.5px; }
}
.hero__text a::after { width: 0; background: var(--c-lavender); transition: width 0.6s var(--ease-im); }
.hero__text a:focus-visible { color: var(--c-lavender); }
.hero__text a:focus-visible::after { width: 100%; }
@media (hover: hover) {
	.hero__text a:hover { color: var(--c-lavender); }
	.hero__text a:hover::after { width: 100%; }
}
.hero__visual {
	position: absolute;
	top: var(--frame);
	right: var(--frame);
	/* Expliciete hoogte (niet via bottom): ScrollTrigger pint dit kader en
	   meet dan zijn eigen hoogte. */
	height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame));
	height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame));
	width: 41.07%;                                      /* 621 van 1512 */
	border-radius: var(--radius);
	overflow: hidden;
	background: #3a3128;
}
/* Beeldlaag. Mobiel: parallax (hero.js), daarvoor is de laag 28% hoger.
   Laptop en desktop: kijkgat, zie hieronder. */
.hero__media { position: absolute; inset: -14% 0; will-change: transform; }

/* Kijkgat (laptop en desktop): de foto staat vast in het scherm (fixed) en
   het afgeronde kader knipt hem af (clip-path knipt ook vaste kinderen af).
   Bij het scrollen schuift het kader omhoog en zie je steeds minder foto.
   Pure CSS, dus het beeld staat echt stil, ook met Lenis. De foto houdt
   bovenin de 10px marge en dezelfde afgeronde hoeken als het kader, ook als
   het kader omhoog is geschoven. Een paar pixels breder dan het kader tegen
   afrondingsverschillen. */
@media (min-width: 56.25em) {
	/* Geen eigen achtergrond: de marge boven de vaste foto moet het bruin van
	   de pagina tonen, niet het kader. */
	.hero__visual { overflow: visible; clip-path: inset(0 round var(--radius)); background: none; }
	.hero__media {
		position: fixed;
		inset: auto;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--frame));
		right: calc(var(--frame) - 2px);
		width: calc(41.07% + 4px);
		height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame));
		height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--frame));
		border-radius: var(--radius) var(--radius) 0 0;
		overflow: hidden;
		will-change: auto;
	}
}

/* De frames liggen op volgorde op elkaar; alles tot en met het huidige frame
   staat aan, zodat er nooit een leeg moment is (hero.js). */
.hero__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.22s ease-out;
}
.hero__frame.is-shown,
.no-js .hero__frame:first-child { opacity: 1; }
/* Zwart verloop bovenin de foto zelf (op de beeldlaag, dus het blijft bij
   het kijkgat onder de pillen staan), zodat de pillen goed uitkomen. */
.hero__media::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 40%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.28) 40%, rgba(0, 0, 0, 0));
	pointer-events: none;
}
.hero--zonder-beeld .hero__content { width: auto; }

/* Laptop en desktop: de hero is precies het scherm hoog; tekst schaalt ook
   mee met de hoogte, zodat alles op een laag laptopscherm past. */
@media (min-width: 56.25em) {
	.hero__title { font-size: min(var(--fs-h1), 5.1vh); }
	.hero__text { font-size: min(var(--fs-lead), 2.45vh); }
	.hero__content { gap: min(var(--gap), 4.1vh); }
}

@media (max-width: 56.24em) {
	.hero { height: auto; display: flex; flex-direction: column; }
	.hero__content {
		width: auto;
		height: auto;
		justify-content: flex-start;
		padding: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + 3.5rem) var(--gutter) 2.5rem;
	}
	.hero__visual {
		position: relative;
		inset: auto;
		width: auto;
		height: min(150vw, 82svh);
		margin: 0 var(--frame) var(--frame);
	}
}

/* ---------- Terugval zonder ontwerp (pagina zonder blokken, 404) ---------- */
.plain {
	padding: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-top) + var(--btn-h) + 4rem) var(--gutter) var(--gutter);
}
.plain h1 {
	font-family: var(--f-display);
	font-weight: 600;
	font-size: var(--fs-h1);
	line-height: 1;
	color: var(--c-lavender);
	margin-bottom: 1.5rem;
}

/* ---------- Verborgen blok (alleen zichtbaar voor ingelogde redacteuren) ---------- */
.im-hidden-block { position: relative; outline: 2px dashed var(--c-lavender); outline-offset: -2px; }
.im-hidden-block__notice {
	position: relative;
	z-index: 5;
	margin: 0;
	padding: 0.625rem var(--gutter);
	background: var(--c-lavender);
	color: var(--c-ink);
	font-size: var(--fs-small);
	font-weight: 500;
}