/**
 * Exit Ready Scan — opmaak.
 *
 * Alle selectors beginnen met .ers-, zodat er niets buiten de scan kan worden
 * geraakt. Er staat geen enkele globale selector in dit bestand: geen body,
 * geen elementselectors zonder .ers-voorvoegsel, en geen !important.
 *
 * Kleuren: typografie en neutrale tinten volgen waar het kan de Avada-variabelen
 * met een harde fallback. De kleuren die een TOEGANKELIJKHEIDSBESLISSING dragen
 * staan bewust hard in dit bestand en niet in een themavariabele:
 *
 * - knopvlak #557290 met witte tekst = 5,00:1 (WCAG AA vereist 4,5:1)
 * - het huisstijloranje #f0932b met wit zou 2,36:1 zijn en voldoet niet
 * - randen van de antwoordopties #767676 = 4,54:1 (WCAG 1.4.11 vereist 3:1)
 *
 * Wijzig die drie niet zonder de contrastverhouding opnieuw te berekenen.
 */

.ers-scan {
	--ers-blauw: #557290;
	--ers-blauw-donker: #445c74;
	--ers-tekst: #383838;
	--ers-grijs: #767676;
	--ers-lijn: #d8d8d8;
	--ers-vlak: #f6f6f6;
	--ers-wit: #ffffff;
	--ers-radius: 3px;

	box-sizing: border-box;
	max-width: 720px;
	margin: 0 auto;
	color: var(--body_typography-color, var(--ers-tekst));
	font-family: var(--body_typography-font-family, "Open Sans", Arial, Helvetica, sans-serif);
	font-size: 16px;
	line-height: 1.6;
}

.ers-scan *,
.ers-scan *::before,
.ers-scan *::after {
	box-sizing: inherit;
}

.ers-scan [hidden] {
	display: none;
}

/* ------------------------------------------------------------- panelen */

/*
 * Scrollpunt. Het JavaScript meet de hoogte van de WordPress-adminbalk en van
 * Avada's sticky menu en zet die als --ers-scroll-offset. De terugvalwaarde van
 * 120px dekt het gebruikelijke geval (menu van 80px plus wat lucht) voor het
 * geval het script nog niet heeft gemeten.
 */
.ers-scan .ers-paneel,
.ers-scan .ers-voortgang,
.ers-scan .ers-fout {
	scroll-margin-top: var(--ers-scroll-offset, 120px);
}

.ers-paneel {
	padding: 24px 20px;
	border: 1px solid var(--ers-lijn);
	border-radius: var(--ers-radius);
	background-color: var(--ers-wit);
}

.ers-paneel:focus {
	outline: none;
}

.ers-intro__kop,
.ers-stap__kop,
.ers-resultaat__kop {
	margin: 0 0 10px;
	color: #1d1d1d;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
}

.ers-intro__tekst,
.ers-stap__intro {
	margin: 0 0 18px;
	font-size: 16px;
}

/*
 * De geruststellende regel boven de startknop. Rustig gehouden: een lichte
 * balk met een vinkje, geen schreeuwende badge. Het blauw is dezelfde
 * huisstijlkleur als de rest van de scan.
 */
.ers-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	padding: 10px 16px;
	border: 1px solid #c8d4de;
	border-radius: var(--ers-radius);
	background-color: #eef2f6;
	color: #2f4256;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

.ers-badge__vink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	border-radius: 50%;
	background-color: var(--ers-blauw);
	color: var(--ers-wit);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.ers-privacy {
	margin: 0 0 8px;
	padding: 12px 14px;
	border-left: 3px solid var(--ers-blauw);
	background-color: var(--ers-vlak);
	font-size: 14px;
}

.ers-privacy--klein {
	padding: 0 0 0 17px;
	border-left: 0;
	background: none;
	color: var(--ers-grijs);
	font-size: 13px;
}

.ers-intro__actie {
	margin: 20px 0 0;
}

/* -------------------------------------------------------------- knoppen */

.ers-knop {
	display: inline-block;
	min-height: 48px;
	padding: 12px 22px;
	border: 2px solid transparent;
	border-radius: var(--ers-radius);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ers-knop--primair {
	border-color: var(--ers-blauw);
	background-color: var(--ers-blauw);
	color: var(--ers-wit);
}

.ers-knop--primair:hover {
	border-color: var(--ers-blauw-donker);
	background-color: var(--ers-blauw-donker);
	color: var(--ers-wit);
}

.ers-knop--secundair {
	border-color: var(--ers-grijs);
	background-color: var(--ers-wit);
	color: var(--ers-tekst);
}

.ers-knop--secundair:hover {
	border-color: var(--ers-tekst);
	background-color: var(--ers-vlak);
}

/*
 * Avada zet sitebreed .fusion-disable-outline input { outline: 0 } en haalt
 * daarmee de focusring van elk invoerveld weg. Dat is een directe val op WCAG
 * 2.4.7. Deze regels hebben een hogere specificiteit en zetten de focusring
 * binnen de scan terug, zonder ook maar iets buiten de scan te wijzigen.
 */
.ers-scan .ers-knop:focus-visible,
.ers-scan .ers-uitleg__knop:focus-visible,
.ers-scan .ers-fout__link:focus-visible,
.ers-scan .ers-cta__knop:focus-visible,
.ers-scan .ers-cta__link:focus-visible {
	outline: 3px solid var(--ers-blauw);
	outline-offset: 2px;
}

/* -------------------------------------------------------------- vragen */

.ers-vraag {
	margin: 0 0 22px;
	padding: 0 0 20px;
	border: 0;
	border-bottom: 1px solid var(--ers-lijn);
}

.ers-vraag:last-of-type {
	border-bottom: 0;
}

.ers-vraag__legend {
	display: block;
	width: 100%;
	margin: 0 0 12px;
	padding: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.45;
}

.ers-vraag__nummer {
	display: block;
	margin-bottom: 2px;
	color: var(--ers-grijs);
	font-size: 13px;
	font-weight: 400;
}

.ers-opties {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ers-optie {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 10px 14px;
	border: 2px solid var(--ers-lijn);
	border-radius: var(--ers-radius);
	background-color: var(--ers-wit);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ers-optie:hover {
	border-color: var(--ers-grijs);
	background-color: var(--ers-vlak);
}

.ers-optie--nvt {
	margin-top: 4px;
	border-style: dashed;
}

.ers-optie__input {
	width: 20px;
	height: 20px;
	margin: 0 12px 0 0;
	flex: 0 0 auto;
	accent-color: var(--ers-blauw);
	cursor: pointer;
}

.ers-optie__label {
	flex: 1 1 auto;
	padding: 6px 10px;
	border-left: 4px solid transparent;
	border-radius: 2px;
	font-size: 15px;
	line-height: 1.4;
}

/*
 * Geselecteerd antwoord duidelijk zichtbaar. Bewust op twee manieren, want de
 * indicatie mag nooit van een enkele techniek afhangen:
 *
 * 1. De label-regel hieronder gebruikt de aloude broer-selector (:checked +).
 *    Die werkt in elke browser en onder alle omstandigheden, en levert al een
 *    vlak, een accentrand en vette tekst op.
 * 2. De :has()-regel daaronder kleurt daarnaast de hele rij. Dat is een extra,
 *    geen voorwaarde: browsers zonder :has() tonen nog steeds een duidelijke
 *    selectie, en ook de invalidatie van :has() bij programmatisch gezette
 *    keuzes is niet in elke browser betrouwbaar.
 *
 * De selectie wordt bovendien nooit alleen met kleur aangegeven: het vlak, de
 * accentrand, het vette label en de gevulde radioknop dragen het samen.
 */
.ers-scan .ers-optie__input:checked + .ers-optie__label {
	border-left-color: var(--ers-blauw);
	background-color: #eef2f6;
	font-weight: 700;
}

.ers-scan .ers-optie:has(.ers-optie__input:checked) {
	border-color: var(--ers-blauw);
	background-color: #eef2f6;
}

/* Focusring op de optie zelf, met dezelfde specificiteitstruc als hierboven. */
.ers-scan .ers-optie__input:focus-visible {
	outline: 3px solid var(--ers-blauw);
	outline-offset: 2px;
}

.ers-scan .ers-optie:has(.ers-optie__input:focus-visible) {
	border-color: var(--ers-blauw);
}

.ers-vraag__fout {
	margin: 10px 0 0;
	color: #a4262c;
	font-size: 14px;
	font-weight: 600;
}

/* --------------------------------------------------------- toelichting */

.ers-uitleg {
	margin: 0 0 12px;
}

.ers-uitleg__knop {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	padding: 6px 4px;
	border: 0;
	background: none;
	color: var(--ers-blauw);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.ers-uitleg__icoon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	border: 2px solid currentColor;
	border-radius: 50%;
	font-size: 12px;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
}

.ers-uitleg__label {
	text-decoration: underline;
}

.ers-uitleg__paneel {
	margin: 4px 0 0;
	padding: 14px 16px;
	border-left: 3px solid var(--ers-blauw);
	background-color: var(--ers-vlak);
	font-size: 14px;
}

.ers-uitleg__paneel p {
	margin: 0 0 10px;
}

.ers-uitleg__paneel p:last-child {
	margin-bottom: 0;
}

/* ----------------------------------------------------------- voortgang */

.ers-voortgang {
	margin: 0 0 14px;
}

.ers-voortgang__tekst {
	margin: 0 0 6px;
	color: var(--ers-grijs);
	font-size: 14px;
}

.ers-voortgang__scheiding {
	margin: 0 6px;
}

.ers-voortgang__balk {
	height: 6px;
	border-radius: 3px;
	background-color: var(--ers-lijn);
	overflow: hidden;
}

.ers-voortgang__vulling {
	display: block;
	width: 0;
	height: 100%;
	background-color: var(--ers-blauw);
	transition: width 0.25s ease;
}

/* ---------------------------------------------------------------- fout */

.ers-fout {
	margin: 0 0 14px;
	padding: 14px 16px;
	border: 2px solid #a4262c;
	border-radius: var(--ers-radius);
	background-color: #fdf3f4;
}

.ers-fout:focus {
	outline: none;
}

.ers-fout__kop,
.ers-fout__tekst {
	margin: 0 0 6px;
	font-size: 15px;
}

.ers-fout__lijst {
	margin: 8px 0 0;
	padding: 0 0 0 18px;
}

.ers-fout__link {
	padding: 4px 0;
	border: 0;
	background: none;
	color: #a4262c;
	font-family: inherit;
	font-size: 14px;
	text-align: left;
	text-decoration: underline;
	cursor: pointer;
}

/* ------------------------------------------------------------ navigatie */

.ers-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22px 0 0;
}

/* ------------------------------------------------------------ resultaat */

.ers-score {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 6px 0 2px;
}

.ers-score__getal {
	color: var(--ers-blauw);
	font-size: 52px;
	font-weight: 700;
	line-height: 1;
}

.ers-score__van {
	color: var(--ers-grijs);
	font-size: 15px;
}

.ers-score__klasse {
	margin: 0 0 14px;
	color: #1d1d1d;
	font-size: 21px;
	font-weight: 700;
}

.ers-resultaat__duiding {
	margin: 0 0 14px;
	font-size: 16px;
}

.ers-resultaat__uitzondering,
.ers-resultaat__waarschuwing {
	margin: 0 0 14px;
	padding: 12px 14px;
	border-left: 3px solid var(--ers-blauw);
	background-color: var(--ers-vlak);
	font-size: 15px;
}

.ers-resultaat__detail {
	margin: 0 0 8px;
	font-size: 15px;
}

.ers-resultaat__subkop {
	margin: 26px 0 12px;
	color: #1d1d1d;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
}

/* Pijlers */

.ers-pijlers {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ers-pijler {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4px;
	margin: 0 0 12px;
}

.ers-pijler__naam {
	font-size: 15px;
	font-weight: 600;
}

.ers-pijler__meter {
	display: block;
	height: 8px;
	border-radius: 4px;
	background-color: var(--ers-lijn);
	overflow: hidden;
}

.ers-pijler__vulling {
	display: block;
	height: 100%;
	background-color: var(--ers-blauw);
}

.ers-pijler__waarde {
	color: var(--ers-grijs);
	font-size: 14px;
}

/* Aandachtspunten */

.ers-punten {
	margin: 0;
	padding: 0 0 0 20px;
}

.ers-punt {
	margin: 0 0 18px;
	padding-left: 6px;
}

.ers-punt__stelling {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
}

.ers-punt__tekst {
	margin: 0 0 6px;
	font-size: 15px;
}

.ers-punt__stap {
	margin: 0;
	padding: 8px 12px;
	border-left: 3px solid var(--ers-lijn);
	background-color: var(--ers-vlak);
	font-size: 14px;
}

.ers-sterk {
	padding: 14px 16px;
	border-left: 3px solid var(--ers-blauw);
	background-color: var(--ers-vlak);
}

.ers-sterk__stelling {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
}

.ers-sterk__tekst {
	margin: 0;
	font-size: 15px;
}

.ers-nuancering {
	margin: 24px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--ers-lijn);
	color: var(--ers-grijs);
	font-size: 13px;
	line-height: 1.55;
}

/* ------------------------------------------------------------------ CTA */

.ers-cta {
	margin: 26px 0 0;
	padding: 20px;
	border: 1px solid var(--ers-lijn);
	border-radius: var(--ers-radius);
	background-color: var(--ers-vlak);
}

.ers-cta__tekst {
	margin: 0 0 14px;
	font-size: 16px;
}

/*
 * De hoofd-CTA krijgt exact de uitstraling van de knop KENNISMAKEN in de
 * websiteheader. Overgenomen uit .free_consult_btn .menu-text in het actieve
 * child theme Avada-Child-New (regels 56-61 en 100-110):
 *
 *   achtergrond   var(--color-primary)   #f0932b
 *   tekst         var(--color-white)     #ffffff
 *   radius        var(--radius-button)   2px
 *   hover         opacity: 0.8
 *   overgang      var(--transition-slow) 0.8s
 *   hoofdletters  text-transform: uppercase
 *
 * De waarden staan hier hard, met de themavariabelen als voorkeur. Zo blijft de
 * knop meelopen als de huisstijl wijzigt, maar valt hij niet terug op niets
 * wanneer die variabelen ooit verdwijnen.
 *
 * LET OP, en dit is bewust zo gebouwd: wit op #f0932b haalt een contrast van
 * 2,36:1 en voldoet daarmee niet aan WCAG AA (4,5:1). Dat geldt net zo goed
 * voor de bestaande headerknop. De focusring hieronder is daarom juist NIET
 * oranje maar bijna zwart met een witte binnenring, zodat de focus op zowel het
 * oranje vlak als de lichte achtergrond duidelijk zichtbaar blijft.
 */
.ers-cta__knop {
	display: inline-block;
	min-height: 48px;
	padding: 15px 24px;
	border-radius: var(--radius-button, 2px);
	background-color: var(--color-primary, #f0932b);
	color: var(--color-white, #ffffff);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	text-decoration: none;
	text-transform: uppercase;
	opacity: 1;
	transition: opacity var(--transition-slow, 0.8s);
}

.ers-cta__knop:hover {
	background-color: var(--color-primary, #f0932b);
	color: var(--color-white, #ffffff);
	opacity: 0.8;
}

/*
 * Eigen focusring voor de oranje knop, met hogere specificiteit dan de
 * algemene regel hierboven in dit bestand. Donker met een witte binnenring:
 * die combinatie blijft zichtbaar op oranje en op de lichte kaart eromheen.
 */
.ers-scan .ers-cta__knop:focus-visible {
	outline: 3px solid #1d1d1d;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #ffffff;
	opacity: 1;
}

.ers-cta__contact {
	margin: 14px 0 0;
	color: var(--ers-grijs);
	font-size: 14px;
}

.ers-cta__link {
	color: var(--ers-blauw);
	text-decoration: underline;
}

.ers-resultaat .ers-knop--secundair {
	margin-top: 18px;
}

/* --------------------------------------------- terugval zonder JavaScript */

.ers-noscript {
	margin: 0 0 18px;
	padding: 14px 16px;
	border-left: 3px solid var(--ers-blauw);
	background-color: var(--ers-vlak);
	font-size: 15px;
}

.ers-klassen {
	margin: 26px 0 0;
}

.ers-klassen__kop {
	margin: 0 0 14px;
	font-size: 20px;
	font-weight: 700;
	text-transform: none;
}

.ers-klasse {
	margin: 0 0 20px;
	padding: 16px 18px;
	border: 1px solid var(--ers-lijn);
	border-radius: var(--ers-radius);
}

.ers-klasse__kop {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	text-transform: none;
}

.ers-klasse__duiding {
	margin: 0 0 10px;
	font-size: 15px;
}

.ers-klasse__detail {
	margin: 0 0 6px;
	font-size: 14px;
}

/* ------------------------------------------------------------ desktop */

@media (min-width: 600px) {
	.ers-paneel {
		padding: 30px 28px;
	}

	.ers-opties {
		gap: 6px;
	}

	.ers-pijler {
		grid-template-columns: 200px 1fr 50px;
		align-items: center;
		gap: 12px;
	}

	.ers-score__getal {
		font-size: 64px;
	}
}

/* ------------------------------------------------- beperkte beweging */

@media (prefers-reduced-motion: reduce) {
	.ers-scan .ers-knop,
	.ers-scan .ers-optie,
	.ers-scan .ers-voortgang__vulling {
		transition: none;
	}
}