/**
 * Ontdek Verpleegkunde Test — frontend.
 *
 * Twee uitgangspunten:
 *
 * 1. Het theme mag de test niet kunnen stylen, en de test niets erbuiten.
 *    Daarom is elke regel geworteld in .ov-test. Dat is niet alleen een
 *    namespace maar ook specificiteit: een theme dat `button { border-radius }`
 *    of `h2 { line-height }` zet, verliest het daarmee. Losse klassen bleken in
 *    de praktijk niet genoeg — vandaar de dubbele selector overal.
 *
 * 2. Maten staan in px, niet in rem. Een theme dat de root-fontgrootte verzet
 *    zou anders het hele ontwerp meeschalen.
 *
 * Het ontwerp is uitgetekend op 1728px (desktop) en 390px (mobiel). Waarden die
 * daartussen schalen staan als clamp(); de vw-factor is zo gekozen dat de
 * bovengrens op 1728px net bereikt wordt, zodat het daar exact klopt.
 *
 * Mobiel (basis)     : fotografie boven, content eronder, navigatie onderaan.
 * Desktop (>= 62rem) : content links, fotografie rechts.
 */

/* ---------------------------------------------------------------------------
   Fonts
   --------------------------------------------------------------------------- */

@font-face {
	font-family: 'Urbanchrome Roughen';
	src: url('../fonts/Urbanchrome-Roughen.woff2') format('woff2'),
		url('../fonts/Urbanchrome-Roughen.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Noto Sans lokaal, zodat de plugin geen verbinding met Google Fonts nodig heeft. */
@font-face {
	font-family: 'OV Noto Sans';
	src: url('../fonts/NotoSans-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'OV Noto Sans';
	src: url('../fonts/NotoSans-600.woff2') format('woff2');
	font-weight: 500 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'OV Noto Sans';
	src: url('../fonts/NotoSans-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------------------
   Tokens — mobiel is de basis
   --------------------------------------------------------------------------- */

.ov-test {
	/* Kleuren uit het ontwerp */
	--ov-bg: #000000;
	--ov-accent: #ff0050;
	--ov-accent-hover: #d90045;
	--ov-text: #ffffff;
	--ov-answer-border: rgba(255, 255, 255, 0.3);
	--ov-progress-idle: rgba(255, 178, 202, 0.5);

	/* Typografie */
	--ov-font-display: 'Urbanchrome Roughen', 'OV Noto Sans', system-ui, sans-serif;
	--ov-font-body: 'OV Noto Sans', 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--ov-kicker-size: 14px;
	--ov-kicker-leading: 1.4286;   /* 20/14 */
	--ov-title-size: 24px;
	--ov-title-leading: 1.4167;    /* 34/24 */
	--ov-lead-size: 18px;
	--ov-lead-leading: 1.7778;     /* 32/18 */
	--ov-lead-weight: 700;
	--ov-question-size: 18px;
	--ov-question-leading: 1.5556; /* 28/18 */
	--ov-answer-size: 14px;
	--ov-answer-leading: 1.5714;   /* 22/14 */
	--ov-note-size: 14px;

	/* Ruimte */
	--ov-gutter: 20px;
	--ov-gap-block: 24px;
	--ov-gap-heading: 8px;
	--ov-gap-answers: 16px;
	--ov-gap-intro: 48px;

	/* Componenten */
	--ov-answer-min-height: 52px;
	--ov-answer-pad-y: 13px;
	--ov-answer-pad-x: 16px;
	--ov-answer-radius: 20px;
	--ov-radio-size: 24px;
	--ov-radio-gap: 12px;

	--ov-button-height: 48px;
	--ov-button-pad-y: 12px;
	--ov-button-pad-x: 48px;
	--ov-button-radius: 24px;
	--ov-button-size: 16px;
	--ov-button-gap: 16px;

	--ov-progress-height: 6px;
	--ov-progress-gap: 8px;

	/* Het ontwerp geeft 237px voor de vraagfoto; in de praktijk vult 300px het
	   scherm beter en houdt het gezicht ruimte, zonder de knoppen te verdringen. */
	--ov-media-height: 300px;

	/* Ruimte die de sitekop inneemt wanneer die over de test heen valt. */
	--ov-header-offset: 0px;

	--ov-transition: 180ms ease;

	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: clip;
	background: var(--ov-bg);
	color: var(--ov-text);
	font-family: var(--ov-font-body);
	font-size: var(--ov-answer-size);
	line-height: var(--ov-answer-leading);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.ov-test *,
.ov-test *::before,
.ov-test *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Schermvullende modus
   ---------------------------------------------------------------------------
   De test is in het ontwerp een losstaande ervaring, zonder sitekop, menu of
   footer. In plaats van die elementen van het theme te verbergen — wat per
   theme andere selectors vergt en dus breekt zodra het theme verandert — legt
   de test zich als vaste laag over de pagina. Wat eronder zit doet er dan niet
   meer toe, en de plugin blijft theme-onafhankelijk.
   --------------------------------------------------------------------------- */

.ov-test.ov-test--fullscreen {
	position: fixed;
	inset: 0;
	z-index: 100000;
	width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* In deze modus telt de sitekop niet mee voor de hoogte. */
.ov-test.ov-test--fullscreen .ov-test__layout {
	min-height: 100dvh;
}

/* De body mag niet meescrollen achter de test. */
body.ov-test-is-open {
	overflow: hidden !important;
	touch-action: none;
}

/* ---------------------------------------------------------------------------
   Vaste balk: terug naar huis, plus het logo op desktop
   --------------------------------------------------------------------------- */

.ov-test .ov-test__chrome {
	position: absolute;
	top: 44px;
	right: var(--ov-gutter);
	left: var(--ov-gutter);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	pointer-events: none;
}

.ov-test .ov-test__home {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	pointer-events: auto;
	color: var(--ov-text);
	font-family: var(--ov-font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3571;
	text-decoration: none;
	transition: opacity var(--ov-transition);
}

.ov-test .ov-test__home:hover {
	opacity: 0.7;
	color: var(--ov-text);
}

.ov-test .ov-test__home:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 4px;
}

.ov-test .ov-test__logo {
	display: block;
	width: auto;
	max-height: 60px;
	pointer-events: auto;
}

/* Op mobiel staat de balk over de foto; op desktop staat hij in de kop. */
@media (min-width: 62rem) {
	.ov-test .ov-test__chrome {
		top: 32px;
	}
}

/* Reset van alles wat een theme doorgaans aanraakt. */
.ov-test h2,
.ov-test p,
.ov-test fieldset,
.ov-test legend,
.ov-test label,
.ov-test button,
.ov-test a,
.ov-test span,
.ov-test div,
.ov-test section,
.ov-test picture,
.ov-test img,
.ov-test svg {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	font-family: inherit;
	color: inherit;
}

.ov-test .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Schermen en layout
   --------------------------------------------------------------------------- */

.ov-test .ov-test__screen {
	display: none;
	width: 100%;
}

.ov-test .ov-test__screen.is-active {
	display: block;
}

.ov-test .ov-test__screen[hidden],
.ov-test .ov-test__result[hidden] {
	display: none !important;
}

.ov-test .ov-test__layout {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: calc(100svh - var(--ov-header-offset));
}

.ov-test .ov-test__media {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	height: var(--ov-media-height);
	overflow: hidden;
	background: #111416;
}

/* Beeld ligt als laag in het mediavlak en telt niet mee voor de hoogte. Anders
   rekt een staande foto de hele rij op tot zijn eigen verhouding en past het
   scherm niet meer binnen de viewport. */
.ov-test .ov-test__media > picture,
.ov-test .ov-test__media > img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.ov-test .ov-test__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

/* Elke vraag heeft een eigen foto. Ze liggen op elkaar en wisselen met een
   overvloeier, zodat er geen sprong of witte flits tussen de vragen zit. */
.ov-test .ov-test__media--stack {
	isolation: isolate;
}

.ov-test .ov-test__media-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 280ms ease, visibility 280ms;
}

.ov-test .ov-test__media-slide.is-active {
	opacity: 1;
	visibility: visible;
}

.ov-test .ov-test__media-slide picture,
.ov-test .ov-test__media-slide img {
	width: 100%;
	height: 100%;
}

.ov-test .ov-test__media-image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	object-position: center 35%;
}

/* Bewegend beeld op het startscherm. Ligt over de foto heen, zodat die als
   terugval dient wanneer de video niet laadt. */
/* De promovideo is 16:9 met de persoon in het midden; `cover` vult het slot
   en houdt het gezicht in beeld, staand op desktop en liggend op mobiel. */
.ov-test .ov-test__media--video {
	background: #000000;
}

.ov-test .ov-test__media-video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	background: #000000;
	/* Onzichtbaar tot het eerste echte beeld er is; dan vloeit hij in. */
	opacity: 0;
	transition: opacity 400ms ease;
}

.ov-test .ov-test__media-video.is-ready {
	opacity: 1;
}

/* Accent in de titel ("2 minuten"). */
.ov-test .ov-test__accent {
	color: var(--ov-accent);
}

/* Merknaam linksboven op desktop, verborgen op mobiel (daar staat "Home"). */
.ov-test .ov-test__brand {
	display: none;
	pointer-events: auto;
	font-family: var(--ov-font-display);
	font-size: 25px;
	line-height: 1.2;
	max-width: 300px;
	color: var(--ov-accent);
	text-decoration: none;
	text-transform: uppercase;
}

.ov-test .ov-test__brand .ov-test__logo {
	max-height: 60px;
}

@media (min-width: 62rem) {
	.ov-test .ov-test__brand {
		display: block;
	}

	.ov-test .ov-test__home {
		display: none;
	}
}

/* Wie beweging heeft uitgezet, krijgt het eerste beeld van de video stil te
   zien; het pauzeren gebeurt in frontend.js. Geen overvloeier. */
@media (prefers-reduced-motion: reduce) {
	.ov-test .ov-test__media-video {
		transition: none;
	}
}

.ov-test .ov-test__media-placeholder {
	width: 100%;
	height: 100%;
	background:
		radial-gradient(120% 90% at 70% 10%, rgba(255, 0, 80, 0.45) 0%, transparent 62%),
		linear-gradient(160deg, #23282c 0%, #000000 100%);
}

.ov-test .ov-test__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	padding: 32px var(--ov-gutter) 40px;
}

.ov-test .ov-test__content-inner {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--ov-gap-block);
	width: 100%;
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
   Typografie
   --------------------------------------------------------------------------- */

.ov-test .ov-test__kicker {
	display: block;
	font-family: var(--ov-font-display);
	font-size: var(--ov-kicker-size);
	font-weight: 400;
	line-height: var(--ov-kicker-leading);
	color: var(--ov-accent);
}

.ov-test .ov-test__title {
	font-family: var(--ov-font-display);
	font-size: var(--ov-title-size);
	font-weight: 400;
	line-height: var(--ov-title-leading);
	color: var(--ov-text);
}

.ov-test .ov-test__lead {
	font-family: var(--ov-font-body);
	font-size: var(--ov-lead-size);
	font-weight: var(--ov-lead-weight);
	line-height: var(--ov-lead-leading);
	color: var(--ov-text);
}

.ov-test .ov-test__note {
	font-family: var(--ov-font-body);
	font-size: var(--ov-note-size);
	font-weight: 500;
	line-height: 1.3571;
	text-align: center;
	color: var(--ov-text);
}

/* ---------------------------------------------------------------------------
   Startscherm en resultaat
   --------------------------------------------------------------------------- */

.ov-test .ov-test__intro-block {
	display: flex;
	flex-direction: column;
	gap: var(--ov-gap-answers);
}

.ov-test .ov-test__intro-actions,
.ov-test .ov-test__result-actions {
	display: flex;
	flex-direction: column;
	gap: var(--ov-gap-answers);
	margin-top: auto;
	padding-top: var(--ov-gap-intro);
}

/* ---------------------------------------------------------------------------
   Mobiel: de knoppen staan op een vaste plek onderaan
   ---------------------------------------------------------------------------
   In het ontwerp zitten Vorige/Volgende en de startknop altijd op dezelfde
   hoogte onder in beeld, ongeacht hoe lang de vraag of het antwoord is. Door ze
   binnen het scherm te verankeren blijven ze staan waar de gebruiker ze
   verwacht, en schuift alleen de inhoud erboven mee.
   --------------------------------------------------------------------------- */

@media (max-width: 61.999rem) {
	.ov-test {
		/* Op tablets zou alles de volle breedte pakken; de kolom stopt bij 640px en
		   staat dan gecentreerd. Tot ±700px schermbreedte blijft het de gutter. */
		--ov-column-inset: max(var(--ov-gutter), (100% - 640px) / 2);
	}

	.ov-test .ov-test__content {
		position: relative;
		padding-inline: var(--ov-column-inset);
		/* Ruimte vrijhouden voor de verankerde knoppen. */
		padding-bottom: 136px;
	}

	.ov-test .ov-test__screen--result .ov-test__content {
		padding-bottom: 200px;
	}

	/* Extra specifiek (.ov-test__content ertussen), omdat de basisregels voor
	   deze blokken verderop in het bestand staan en anders hun width: 100%
	   zouden winnen — waardoor de knoppen precies één gutter buiten beeld
	   steken. */
	.ov-test .ov-test__content .ov-test__nav,
	.ov-test .ov-test__content .ov-test__intro-actions,
	.ov-test .ov-test__content .ov-test__result-actions {
		position: absolute;
		right: var(--ov-column-inset);
		bottom: 48px;
		left: var(--ov-column-inset);
		width: auto;
		max-width: none;
		margin-top: 0;
		padding-top: 0;
	}

	/* De inhoud erboven mag scrollen als een vraag lang uitvalt. */
	.ov-test .ov-test__content-inner {
		flex: 0 1 auto;
	}

	.ov-test .ov-test__question.is-active {
		flex: 0 1 auto;
	}
}

/* Op mobiel heeft het resultaatscherm een eigen, rustiger maatvoering. */
@media (max-width: 61.999rem) {
	.ov-test .ov-test__screen--result .ov-test__intro-block {
		gap: 8px;
	}

	.ov-test .ov-test__title--result {
		font-size: 28px;
		line-height: 1.3929; /* 39/28 */
	}

	.ov-test .ov-test__screen--result .ov-test__lead {
		font-size: 16px;
		font-weight: 400;
		line-height: 1.75; /* 28/16 */
	}

	.ov-test .ov-test__screen--result .ov-test__media {
		--ov-media-height: 262px;
	}

	/* Vraagfoto's: de uitsnede 24px lager dan de standaard 35%, en er gaat nooit
	   meer dan 24px van de bovenkant af — ook niet op tablets, waar het vak veel
	   breder is en 35% anders de hoofden wegsnijdt. Nooit een lege rand (max 0). */
	.ov-test .ov-test__screen--questions .ov-test__media-image {
		object-position: 50% clamp(-24px, calc(35% + 24px), 0px);
	}

	/* Bij deze twee zit het hoofd hoog in beeld: altijd vanaf de bovenkant. */
	.ov-test .ov-test__media-slide[data-media-for='q3'] .ov-test__media-image,
	.ov-test .ov-test__media-slide[data-media-for='q6'] .ov-test__media-image {
		object-position: 50% 0;
	}

	/* Hoger dan de 340px uit het ontwerp: de video snijdt anders te veel weg.
	   Op lage telefoons nooit meer dan de helft van het scherm, zodat de
	   startknop in beeld blijft. */
	.ov-test .ov-test__screen--intro .ov-test__media {
		--ov-media-height: min(420px, 50svh);
	}
}

/* ---------------------------------------------------------------------------
   Voortgang: zeven losse segmenten
   --------------------------------------------------------------------------- */

.ov-test .ov-test__progress-track {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--ov-progress-gap);
	width: 100%;
	height: var(--ov-progress-height);
}

.ov-test .ov-test__progress-segment {
	flex: 1 1 0;
	min-width: 0;
	height: var(--ov-progress-height);
	border-radius: 20px;
	background: var(--ov-progress-idle);
	transition: background-color var(--ov-transition);
}

.ov-test .ov-test__progress-segment.is-active,
.ov-test .ov-test__progress-segment.is-done {
	background: var(--ov-accent);
}

/* ---------------------------------------------------------------------------
   Vragen
   --------------------------------------------------------------------------- */

.ov-test .ov-test__questions {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	width: 100%;
}

.ov-test .ov-test__question {
	display: none;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.ov-test .ov-test__question.is-active {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--ov-gap-block);
	animation: ov-test-fade var(--ov-transition) both;
}

.ov-test .ov-test__question[hidden] {
	display: none !important;
}

.ov-test .ov-test__legend {
	display: flex;
	flex-direction: column;
	gap: var(--ov-gap-heading);
	width: 100%;
	max-width: 100%;
	/* Een legend gedraagt zich anders per browser; float maakt het een blok. */
	float: left;
}

.ov-test .ov-test__legend + * {
	clear: both;
}

.ov-test .ov-test__question-title {
	display: block;
	font-family: var(--ov-font-body);
	font-size: var(--ov-question-size);
	font-weight: 700;
	line-height: var(--ov-question-leading);
	color: var(--ov-text);
}

/* ---------------------------------------------------------------------------
   Antwoorden
   --------------------------------------------------------------------------- */

.ov-test .ov-test__answers {
	display: flex;
	flex-direction: column;
	gap: var(--ov-gap-answers);
	width: 100%;
}

.ov-test .ov-test__answer {
	display: flex;
	align-items: center;
	gap: var(--ov-radio-gap);
	width: 100%;
	min-height: var(--ov-answer-min-height);
	padding: var(--ov-answer-pad-y) var(--ov-answer-pad-x);
	border: 2px solid var(--ov-answer-border);
	border-radius: var(--ov-answer-radius);
	background: transparent;
	color: var(--ov-text);
	font-family: var(--ov-font-body);
	font-size: var(--ov-answer-size);
	font-weight: 500;
	line-height: var(--ov-answer-leading);
	cursor: pointer;
	transition: border-color var(--ov-transition);
}

.ov-test .ov-test__answer:hover {
	border-color: rgba(255, 255, 255, 0.6);
}

.ov-test .ov-test__answer.is-selected {
	border-color: var(--ov-accent);
}

/* De radio blijft in de DOM voor toetsenbord en screenreaders. */
.ov-test .ov-test__answer-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

/* akar-icons:radio — leeg: ring van 2px op 12.5% inset. */
.ov-test .ov-test__radio {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: var(--ov-radio-size);
	height: var(--ov-radio-size);
}

.ov-test .ov-test__radio::before {
	content: '';
	position: absolute;
	inset: 12.5%;
	border: 2px solid var(--ov-answer-border);
	border-radius: 50%;
	transition: border-color var(--ov-transition);
}

/* akar-icons:radio-fill — gevuld: schijf op 8.33% inset. */
.ov-test .ov-test__radio-dot {
	position: absolute;
	inset: 8.33%;
	border-radius: 50%;
	background: var(--ov-accent);
	transform: scale(0.2);
	opacity: 0;
	transition: transform var(--ov-transition), opacity var(--ov-transition);
}

.ov-test .ov-test__answer.is-selected .ov-test__radio::before {
	border-color: transparent;
}

.ov-test .ov-test__answer.is-selected .ov-test__radio-dot {
	transform: scale(1);
	opacity: 1;
}

.ov-test .ov-test__answer-text {
	flex: 1 1 auto;
	min-width: 0;
}

.ov-test .ov-test__answer:has(.ov-test__answer-input:focus-visible) {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

/* Terugval voor browsers zonder :has() */
.ov-test .ov-test__answer-input:focus-visible + .ov-test__radio {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
	border-radius: 50%;
}

/* ---------------------------------------------------------------------------
   Knoppen
   --------------------------------------------------------------------------- */

.ov-test .ov-test__nav {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--ov-gap-answers);
	width: 100%;
	margin-top: auto;
	padding-top: var(--ov-gap-block);
}

.ov-test .ov-test__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ov-button-gap);
	width: auto;
	min-height: var(--ov-button-height);
	padding: var(--ov-button-pad-y) var(--ov-button-pad-x);
	border: 0;
	border-radius: var(--ov-button-radius);
	background: transparent;
	color: var(--ov-text);
	font-family: var(--ov-font-display);
	font-size: var(--ov-button-size);
	font-weight: 400;
	line-height: 1.375;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
	transition: background-color var(--ov-transition), color var(--ov-transition), opacity var(--ov-transition);
}

.ov-test .ov-test__button--primary {
	background: var(--ov-accent);
	color: var(--ov-text);
}

.ov-test .ov-test__button--primary:hover:not(:disabled) {
	background: var(--ov-accent-hover);
}

/* Tweede knop op het resultaatscherm: omlijnd, in de accentkleur. */
.ov-test .ov-test__button--outline {
	border: 2px solid var(--ov-accent);
	background: transparent;
	color: var(--ov-accent);
}

.ov-test .ov-test__button--outline:hover:not(:disabled) {
	background: var(--ov-accent);
	color: var(--ov-text);
}

.ov-test .ov-test__button--wide {
	width: 100%;
}

/* "Vorige": tekstlink met pijl, geen vlak. */
.ov-test .ov-test__button--link {
	gap: 6px;
	min-height: 24px;
	padding: 4px 0;
	border-radius: 0;
	background: none;
	font-family: var(--ov-font-body);
	font-size: var(--ov-note-size);
	font-weight: 500;
	line-height: 1.3571;
}

.ov-test .ov-test__button--link:hover:not(:disabled) {
	opacity: 0.75;
}

.ov-test .ov-test__button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.ov-test .ov-test__button:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

.ov-test .ov-test__button[hidden] {
	display: none !important;
}

.ov-test .ov-test__arrow {
	flex: 0 0 auto;
	width: 12px;
	height: 24px;
	color: currentColor;
}

.ov-test .ov-test__arrow--left {
	transform: scaleX(-1);
}

/* Staat er geen Vorige-knop, dan blijft Volgende rechts uitgelijnd. */
.ov-test .ov-test__nav [data-action='next'] {
	margin-inline-start: auto;
}

/* ---------------------------------------------------------------------------
   Laadscherm
   --------------------------------------------------------------------------- */

/* Ontwerp: geen foto, een blok van max. 805px midden in beeld. Bovenin de
   kicker en de titel (16px ertussen), 64px daaronder de animatie. */
.ov-test .ov-test__screen--loading .ov-test__content {
	justify-content: center;
	padding-inline: var(--ov-gutter);
}

.ov-test .ov-test__content-inner--loading {
	flex: 0 1 auto;
	align-items: center;
	justify-content: center;
	gap: 64px;
	max-width: 805px;
	margin: auto;
	text-align: center;
}

.ov-test .ov-test__loading-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
}

@media (max-width: 61.999rem) {
	/* Geen verankerde knoppen op dit scherm, dus geen ruimte daarvoor nodig:
	   gelijke marge boven en onder houdt het blok optisch in het midden. */
	.ov-test .ov-test__screen--loading .ov-test__content {
		padding-block: 96px;
	}

	.ov-test .ov-test__content-inner--loading {
		gap: 40px;
	}
}

@media (min-width: 62rem) {
	/* Zonder fotokolom neemt de inhoud de volle breedte. Boven 124px ruimte
	   voor het logo; onder 27px meer, omdat het ontwerp het blok net boven het
	   midden zet (top 308px op een scherm van 1117px). */
	.ov-test.ov-test--fullscreen .ov-test__screen--loading .ov-test__content,
	.ov-test .ov-test__screen--loading .ov-test__content {
		flex: 1 1 100%;
		padding: 124px var(--ov-gutter) 151px;
	}
}

.ov-test .ov-test__spinner {
	display: block;
	width: 40px;
	height: 40px;
	border: 3px solid rgba(255, 255, 255, 0.2);
	border-top-color: var(--ov-accent);
	border-radius: 50%;
	animation: ov-test-spin 900ms linear infinite;
}

/* ---------------------------------------------------------------------------
   Meldingen
   --------------------------------------------------------------------------- */

.ov-test .ov-test__error {
	padding: 12px 16px;
	border: 2px solid var(--ov-accent);
	border-radius: var(--ov-answer-radius);
	background: rgba(255, 0, 80, 0.12);
	color: var(--ov-text);
	font-size: var(--ov-note-size);
}

.ov-test .ov-test__error[hidden] {
	display: none !important;
}

.ov-test .ov-test__noscript {
	padding: 32px var(--ov-gutter);
	color: var(--ov-text);
}

.ov-test.is-busy {
	cursor: progress;
}

/* ---------------------------------------------------------------------------
   Animaties
   --------------------------------------------------------------------------- */

/* Bewust zonder transform: een element met een actieve transform wordt het
   referentiepunt voor zijn absoluut gepositioneerde kinderen, en dan zakken de
   navigatieknoppen naar de onderkant van de vraag in plaats van het scherm.
   De beweging zit daarom op de inhoud binnen de vraag, niet op de vraag zelf. */
@keyframes ov-test-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes ov-test-rise {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.ov-test .ov-test__question.is-active .ov-test__legend,
.ov-test .ov-test__question.is-active .ov-test__answers {
	animation: ov-test-rise 240ms ease both;
}

@keyframes ov-test-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---------------------------------------------------------------------------
   Knop die om aandacht vraagt
   ---------------------------------------------------------------------------
   Het ontwerp zet de hoofdknop op het start- en uitslagscherm in een frame dat
   "Button animatie" heet. De prototypeanimatie zelf zit niet in de CSS-export,
   dus dit is een ingetogen invulling: een zachte puls met een pijl die
   meewipt. Nadrukkelijk genoeg om de klik uit te lokken, rustig genoeg om niet
   te gaan irriteren — en hij stopt zodra de muis erop staat.
   --------------------------------------------------------------------------- */

@keyframes ov-test-nudge {
	0%, 62%, 100% {
		transform: none;
		box-shadow: 0 0 0 0 rgba(255, 0, 80, 0);
	}

	70% {
		transform: scale(1.025);
		box-shadow: 0 0 0 6px rgba(255, 0, 80, 0.22);
	}

	82% {
		transform: scale(0.995);
		box-shadow: 0 0 0 14px rgba(255, 0, 80, 0);
	}
}

@keyframes ov-test-arrow-nudge {
	0%, 62%, 100% {
		transform: translateX(0);
	}

	72% {
		transform: translateX(4px);
	}

	86% {
		transform: translateX(0);
	}
}

.ov-test .ov-test__button--nudge {
	animation: ov-test-nudge 3.2s ease-in-out 1.2s infinite;
	will-change: transform;
}

.ov-test .ov-test__button--nudge .ov-test__arrow {
	animation: ov-test-arrow-nudge 3.2s ease-in-out 1.2s infinite;
}

.ov-test .ov-test__button--nudge:hover,
.ov-test .ov-test__button--nudge:focus-visible {
	animation-play-state: paused;
}

.ov-test .ov-test__button--nudge:hover .ov-test__arrow,
.ov-test .ov-test__button--nudge:focus-visible .ov-test__arrow {
	animation-play-state: paused;
}

/* ---------------------------------------------------------------------------
   Desktop: content links, fotografie rechts (Figma 1728px)
   --------------------------------------------------------------------------- */

@media (min-width: 62rem) {
	.ov-test {
		/* De test is maximaal 1920px breed (zie .ov-test__layout). Daarom schalen
		   maten niet met de echte viewport maar met een "vw" die bij 1920px
		   stopt: breder scherm = zelfde test, alleen meer zwart aan de zijkant.
		   De clamps bereiken de Figma-waarden rond 1728px en blijven daarna gelijk. */
		--ov-vw: min(1vw, 19.2px);

		--ov-gutter: clamp(32px, 16px + 6.5 * var(--ov-vw), 128px);
		--ov-kicker-size: clamp(16px, 8px + 1.1 * var(--ov-vw), 24px);
		--ov-kicker-leading: 1.4167;   /* 34/24 */
		--ov-title-size: clamp(36px, 16px + 2.6 * var(--ov-vw), 56px);
		--ov-title-leading: 1.2857;    /* 72/56 */
		--ov-lead-size: clamp(18px, 10px + 0.9 * var(--ov-vw), 24px);
		--ov-lead-leading: 1.5;        /* 36/24 */
		--ov-lead-weight: 500;
		--ov-question-size: clamp(22px, 14px + 1.2 * var(--ov-vw), 32px);
		--ov-question-leading: 1.25;   /* 40/32 */
		--ov-answer-size: clamp(16px, 12px + 0.4 * var(--ov-vw), 18px);
		--ov-answer-leading: 2;        /* 36/18 */

		--ov-gap-block: 32px;
		--ov-gap-heading: 8px;
		--ov-gap-answers: 32px;
		--ov-gap-intro: 64px;

		/* 68px hoog: 2 + 14 + 36 + 14 + 2 */
		--ov-answer-min-height: 68px;
		--ov-answer-pad-y: 14px;
		--ov-answer-pad-x: 24px;

		--ov-progress-gap: 12px;
		--ov-progress-idle: rgba(255, 178, 202, 0.3);
	}

	/* Maximaal 1920px breed en gecentreerd; daarbuiten het zwart van .ov-test. */
	.ov-test .ov-test__layout {
		flex-direction: row-reverse;
		align-items: stretch;
		max-width: 1920px;
		margin-inline: auto;
	}

	/* De vaste balk (merknaam) lijnt uit met de linkerkant van de test, niet
	   met de rand van het scherm. */
	.ov-test .ov-test__chrome {
		left: calc(max(0px, (100% - 1920px) / 2) + var(--ov-gutter));
		right: calc(max(0px, (100% - 1920px) / 2) + var(--ov-gutter));
	}

	.ov-test .ov-test__media {
		/* 731 van 1728 = 42.3% */
		flex: 0 0 42.3%;
		height: auto;
		min-height: 100%;
	}

	.ov-test .ov-test__content {
		flex: 1 1 57.7%;
		justify-content: center;
		min-width: 0;
		/* 128px links + 805px content + 64px rechts = 997px */
		padding: 64px calc(var(--ov-gutter) / 2) 64px var(--ov-gutter);
	}

	.ov-test .ov-test__content-inner {
		flex: 0 1 auto;
		max-width: 805px;
	}

	/* De vraagtekst loopt smaller dan de antwoorden (692 van 805). */
	.ov-test .ov-test__legend {
		max-width: 86%;
	}

	.ov-test .ov-test__intro-block,
	.ov-test .ov-test__screen--result .ov-test__intro-block {
		gap: 24px;
	}

	.ov-test .ov-test__intro-actions {
		flex: 0 0 auto;
		max-width: 350px;
		margin-top: 0;
		gap: 16px;
	}

	/* Resultaatknoppen staan onder elkaar in een kolom van 350px. */
	.ov-test .ov-test__result-actions {
		flex-direction: column;
		align-items: stretch;
		max-width: 350px;
		margin-top: 0;
		gap: 16px;
		padding-top: 64px;
	}

	.ov-test .ov-test__questions {
		flex: 0 1 auto;
	}

	.ov-test .ov-test__question.is-active {
		flex: 0 1 auto;
		gap: 32px;
	}

	/* Op desktop staat de navigatie in de flow: 48px tussen Vorige en Volgende. */
	.ov-test .ov-test__nav {
		justify-content: flex-start;
		gap: 48px;
		margin-top: 0;
		padding-top: 0;
	}

	.ov-test .ov-test__nav [data-action='prev'] {
		gap: 11px;
		font-family: var(--ov-font-display);
		font-size: 16px;
		font-weight: 400;
		line-height: 1.375;
	}

	.ov-test .ov-test__nav [data-action='next'] {
		margin-inline-start: 0;
	}
}

/* Desktop is minimaal één schermhoogte. Past de inhoud niet (laag venster),
   dan groeit de test mee en scrollt het geheel aan de rand van het venster —
   nooit een losse scrollbalk in de tekstkolom, en nooit inhoud onder het logo. */
@media (min-width: 62rem) {
	.ov-test.ov-test--fullscreen .ov-test__layout {
		height: auto;
		min-height: 100dvh;
	}

	.ov-test.ov-test--fullscreen .ov-test__content {
		overflow: visible;
		/* Centreren via auto-marges i.p.v. justify-content: die schuiven nooit
		   negatief, dus een hoge vraag steekt niet boven de kolom uit. */
		justify-content: flex-start;
		/* Logo: 32px van boven + 60px hoog + 32px lucht. */
		padding-top: 124px;
	}

	.ov-test.ov-test--fullscreen .ov-test__content-inner {
		margin-block: auto;
	}
}

/* Lage laptopschermen (tot ~820px hoog): de ruimte tussen de blokken krimpt
   mee, zodat ook het resultaat met twee knoppen binnen beeld blijft. */
@media (min-width: 62rem) and (max-height: 51.25rem) {
	.ov-test .ov-test__content {
		padding-block: 72px 40px;
	}

	.ov-test .ov-test__intro-actions,
	.ov-test .ov-test__result-actions {
		padding-top: 32px;
	}

	.ov-test .ov-test__intro-block,
	.ov-test .ov-test__screen--result .ov-test__intro-block {
		gap: 16px;
	}

	.ov-test {
		--ov-title-size: clamp(32px, 12px + 2.2 * var(--ov-vw), 48px);
		--ov-lead-size: clamp(17px, 10px + 0.7 * var(--ov-vw), 21px);
	}
}

/* Korte telefoons (tot ~700px hoog, bijv. iPhone SE): de foto levert in
   zodat vraag, antwoorden én knoppen zonder scrollen in beeld blijven. */
@media (max-width: 61.999rem) and (max-height: 44rem) {
	.ov-test .ov-test__media,
	.ov-test .ov-test__screen--result .ov-test__media {
		--ov-media-height: 180px;
	}

	/* Het startscherm heeft minder tekst en mag de video ruimer houden. */
	.ov-test .ov-test__screen--intro .ov-test__media {
		--ov-media-height: 42svh;
	}
}

/* ---------------------------------------------------------------------------
   Toegankelijkheid
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ov-test *,
	.ov-test *::before,
	.ov-test *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.ov-test .ov-test__spinner {
		animation: none;
	}
}

@media (forced-colors: active) {
	.ov-test .ov-test__answer {
		border: 2px solid CanvasText;
	}

	.ov-test .ov-test__answer.is-selected {
		border-color: Highlight;
	}

	.ov-test .ov-test__radio-dot {
		background: Highlight;
	}
}