/*
 * zv18 main.css: mobile-first, alleen custom properties uit theme.json.
 * Ontwerpregels: docs/05-ontwerp.md. Geen schaduwen; vlakcontrast voor diepte.
 */

:root {
	--c-action: var(--wp--preset--color--action);
	--c-action-strong: var(--wp--preset--color--action-strong);
	--c-accent: var(--wp--preset--color--accent);
	--c-highlight: var(--wp--preset--color--highlight);
	--c-navy: var(--wp--preset--color--navy);
	--c-sage: var(--wp--preset--color--sage);
	--c-base: var(--wp--preset--color--base);
	--c-bone: var(--wp--preset--color--bone);
	--c-ink: var(--wp--preset--color--ink);
	--c-hairline: var(--wp--preset--color--hairline);
	--c-stone: var(--wp--preset--color--stone);
	--c-smoke: var(--wp--preset--color--smoke);
	--c-graphite: var(--wp--preset--color--graphite);
	--c-lavender: var(--wp--preset--color--pastel-lavender);
	--c-ice: var(--wp--preset--color--pastel-ice);
	--c-lilac: var(--wp--preset--color--pastel-lilac);

	--s-4: var(--wp--preset--spacing--4);
	--s-8: var(--wp--preset--spacing--8);
	--s-12: var(--wp--preset--spacing--12);
	--s-16: var(--wp--preset--spacing--16);
	--s-24: var(--wp--preset--spacing--24);
	--s-32: var(--wp--preset--spacing--32);
	--s-48: var(--wp--preset--spacing--48);
	--s-64: var(--wp--preset--spacing--64);
	--s-80: var(--wp--preset--spacing--80);

	--radius-card: 20px;
	--radius-pill: 9999px;
	--radius-ghost: 16px;
	--radius-plate: 40px;
	--gutter: var(--s-16);
	--section-gap: var(--s-48);
	--focus-ring: 0 0 0 2px var(--c-base), 0 0 0 4px var(--c-action);
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--c-base);
	color: var(--c-ink);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.56;
	-webkit-font-smoothing: antialiased;
}

img,
svg {
	max-width: 100%;
	height: auto;
}

/* Tekstlinks in action-strong (5,0:1 op wit); action zelf is 4,2:1 en alleen voor focusring en niet-tekst. */
a {
	color: var(--c-action-strong);
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--c-navy);
}

/* Op bone haalt action-strong 4,36:1; navy haalt ruim 4,5:1. */
.zv18-compare__disclosure a,
.site-footer__note a {
	color: var(--c-navy);
}

.zv18-compare__disclosure a:hover,
.site-footer__note a:hover {
	color: var(--c-ink);
}

:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: 4px;
}

h1,
h2,
h3 {
	font-weight: 500;
	line-height: 1.15;
	margin: 0 0 var(--s-16);
	text-wrap: balance;
}

h1 {
	font-size: var(--wp--preset--font-size--heading-lg);
	letter-spacing: -0.025em;
	line-height: 1.14;
}

h2 {
	font-size: var(--wp--preset--font-size--heading);
	letter-spacing: -0.025em;
	line-height: 1.2;
}

h3 {
	font-size: var(--wp--preset--font-size--heading-sm);
	letter-spacing: -0.025em;
	line-height: 1.33;
}

/* Eyebrow-label (7shifts): 14px, 700, kapitalen, geopende tracking. Alleen hiervoor. */
.eyebrow {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: var(--c-graphite);
}

p {
	margin: 0 0 var(--s-16);
}

/* Layout */
.container {
	width: 100%;
	max-width: calc(var(--wp--style--global--wide-size, 1200px) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--content {
	max-width: calc(var(--wp--style--global--content-size, 720px) + 2 * var(--gutter));
}

.section {
	padding-block: var(--section-gap);
}

.section--bone {
	background: var(--c-bone);
	border-radius: var(--radius-plate);
}

.section--plate {
	padding-block: 0 var(--section-gap);
}

.section--flush {
	padding-block: 0;
}

/* Patroon 'werkwijze-band' als full-bleed band met ronde bovenhoeken */
.section--flush > .band {
	border-radius: var(--radius-plate) var(--radius-plate) 0 0;
	padding: var(--s-64) var(--gutter);
}

.section--flush > .band > * {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

.section--flush > .band > :last-child {
	margin-bottom: 0;
}

.section--flush > .band > p {
	margin-bottom: var(--s-16);
}

.site-main:focus {
	outline: none;
}

/* Skip-link */
.skip-link {
	position: absolute;
	left: var(--s-16);
	top: -100px;
	z-index: 100;
	padding: var(--s-12) var(--s-24);
	background: var(--c-ink);
	color: var(--c-base);
	border-radius: var(--radius-pill);
	text-decoration: none;
}

.skip-link:focus {
	top: var(--s-16);
	color: var(--c-base);
}

/* Header en navigatie */
.site-header {
	border-bottom: 1px solid var(--c-hairline);
	background: var(--c-base);
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-12);
	min-height: 64px;
	padding-block: var(--s-12);
}

/* Logo (concept D): zwart woordmerk, "18" in een indigo pill, "jaar" indigo, oranje streep onder "18 jaar". Puur CSS. */
.site-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.28em;
	color: var(--c-ink);
	text-decoration: none;
	font-weight: 800;
	font-size: 1.3rem;
	letter-spacing: -0.03em;
	line-height: 1;
	white-space: nowrap;
}

.site-logo:hover {
	color: var(--c-ink);
}

.site-logo__accent {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.18em;
	padding-bottom: 0.18em;
}

.site-logo__pill {
	display: inline-block;
	background: var(--c-action);
	color: var(--c-base);
	border-radius: 0.38em;
	padding: 0.12em 0.22em 0.1em;
	line-height: 1;
}

.site-logo__jaar {
	color: var(--c-action-strong);
}

.site-logo__accent::after {
	content: "";
	position: absolute;
	left: -0.05em;
	right: -0.05em;
	bottom: -0.06em;
	height: 0.26em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M6 15 C 40 9, 90 17, 130 12 S 175 8, 194 14' fill='none' stroke='%23ff6808' stroke-width='11' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	pointer-events: none;
}

.site-nav__toggle {
	min-height: 44px;
}

/* Mobiel: paneel op volle breedte onder logo en knop; met JavaScript ingeklapt tot de knop het opent. */
.site-nav {
	flex-basis: 100%;
	width: 100%;
	padding-block: var(--s-8) var(--s-4);
}

.js .site-nav {
	display: none;
}

.js .site-nav.is-open {
	display: block;
}

.site-nav__list,
.site-footer__list,
.link-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}

.site-nav__list a {
	display: block;
	padding: var(--s-12) var(--s-16);
	color: var(--c-graphite);
	font-weight: 500;
	text-decoration: none;
	border-radius: var(--radius-ghost);
	min-height: 44px;
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible {
	background: var(--c-bone);
	color: var(--c-ink);
}

.site-nav__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-12);
	padding: var(--s-16) var(--s-16) var(--s-8);
}

.site-nav__list--pills {
	flex-direction: row;
	gap: var(--s-8);
}

.site-nav__list--pills a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: var(--s-8) var(--s-24);
	border-radius: var(--radius-pill);
	background: var(--c-bone);
	color: var(--c-ink);
	font-weight: 500;
	text-decoration: none;
}

.site-nav__list--pills a:hover,
.site-nav__list--pills a:focus-visible {
	background: var(--c-hairline);
	color: var(--c-ink);
}

/* Knoppen */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-8);
	min-height: 44px;
	padding: var(--s-12) var(--s-24);
	border: 2px solid transparent;
	border-radius: var(--radius-pill);
	font: inherit;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	background: transparent;
	color: var(--c-ink);
}

.btn--primary {
	background: var(--c-action-strong);
	border-color: var(--c-action-strong);
	color: var(--c-base);
}

.btn--primary:hover {
	background: var(--c-navy);
	border-color: var(--c-navy);
	color: var(--c-base);
}

/* Oranje ring met witte tussenruimte om de indigo pill; geen elevatie, wel het 7shifts-signatuur. */
.btn--ring {
	box-shadow: 0 0 0 2px var(--c-base), 0 0 0 4px var(--c-accent);
}

.btn--ring:focus-visible {
	box-shadow: 0 0 0 2px var(--c-base), 0 0 0 4px var(--c-accent), 0 0 0 7px var(--c-action);
}

.btn--bone {
	background: var(--c-bone);
	border-color: var(--c-bone);
	color: var(--c-ink);
}

.btn--bone:hover {
	background: var(--c-hairline);
	border-color: var(--c-hairline);
	color: var(--c-ink);
}

.btn--outline {
	border-color: var(--c-accent);
	color: var(--c-ink);
}

.btn--outline:hover {
	background: var(--c-bone);
	color: var(--c-ink);
}

.btn--on-dark {
	color: var(--c-base);
}

.btn--on-dark:hover {
	background: var(--c-graphite);
	color: var(--c-base);
}

.btn--ghost {
	border-radius: var(--radius-ghost);
	color: var(--c-graphite);
	padding-inline: var(--s-16);
}

.btn--ghost:hover,
.btn--ghost[aria-expanded="true"] {
	background: var(--c-bone);
	color: var(--c-ink);
}

/* Kaarten */
.card {
	border-radius: var(--radius-card);
	padding: var(--s-24);
	background: var(--c-base);
}

.card > :last-child {
	margin-bottom: 0;
}

.card__media {
	margin: 0 0 var(--s-16);
	padding: var(--s-12);
	background: var(--c-base);
	border-radius: 12px;
}

.card__media img {
	display: block;
	width: 100%;
	height: auto;
}

.card--outline {
	border: 1px solid var(--c-hairline);
}

.card--lavender {
	background: var(--c-lavender);
}

.card--ice {
	background: var(--c-ice);
}

.card--lilac {
	background: var(--c-lilac);
}

.card--navy {
	background: var(--c-navy);
	color: var(--c-base);
}

.card--sage {
	background: var(--c-sage);
	color: var(--c-base);
}

.card-grid {
	display: grid;
	gap: var(--s-16);
	grid-template-columns: 1fr;
}

/* Zwarte band */
.band {
	background: var(--c-ink);
	color: var(--c-base);
	border-radius: var(--radius-card);
	padding: var(--s-32) var(--s-24);
}

.band--full {
	border-radius: var(--radius-plate) var(--radius-plate) 0 0;
	padding-block: var(--s-64);
}

.band a:not(.btn) {
	color: var(--c-highlight);
}

.band > :last-child {
	margin-bottom: 0;
}

.hl {
	background: transparent;
	color: var(--c-highlight);
	font-weight: 500;
}

/* Alleen op donker; op wit heeft limoen te weinig contrast. */
.section:not(.band) .hl,
.prose .hl {
	color: inherit;
	font-weight: 500;
}

/* Hero (7shifts): handgeschreven regel boven de kop, kop op display-maat, lange oranje streep */
.hero {
	padding-block: var(--s-48) var(--s-24);
	text-align: center;
}

.hero__eyebrow {
	font-family: var(--wp--preset--font-family--script);
	font-size: 1.75rem;
	line-height: 1;
	letter-spacing: -0.03em;
	margin: 0 0 var(--s-4);
	color: var(--c-ink);
}

.hero__title {
	font-size: var(--wp--preset--font-size--display);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.11;
	margin-bottom: var(--s-24);
}

.hero__intro {
	font-size: var(--wp--preset--font-size--body-lg);
	color: var(--c-smoke);
	max-width: 36em;
	margin-inline: auto;
	margin-bottom: var(--s-24);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-12);
	margin: 0;
}

/* Lange handgetekende oranje streep onder een deel van de kop. Eén keer per kop. */
.u-underline {
	position: relative;
	display: inline-block;
	white-space: normal;
}

.u-underline::after {
	content: "";
	position: absolute;
	left: -0.05em;
	right: -0.05em;
	bottom: -0.16em;
	height: 0.22em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cpath d='M6 15 C 60 9, 120 17, 180 12 S 300 8, 394 14' fill='none' stroke='%23ff6808' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	pointer-events: none;
}

/* Smal scherm: de kop breekt over meerdere regels, dus een rechte oranje onderstreping in plaats van de SVG-streep. */
@media (max-width: 639px) {
	.u-underline {
		display: inline;
		text-decoration: underline;
		text-decoration-color: var(--c-accent);
		text-decoration-thickness: 0.1em;
		text-underline-offset: 0.12em;
		text-decoration-skip-ink: none;
	}

	.u-underline::after {
		display: none;
	}
}

/* Hero plate: groot bone-paneel met 40px ronding direct onder de hero (bij ons: de verjaardagshulp) */
/* Hero met illustratie (B33) */
.hero__figure {
	margin: var(--s-24) auto 0;
	max-width: 280px;
}

.hero__figure img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 900px) {
	.hero--media {
		text-align: left;
	}

	.hero--media .hero__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(280px, 36%);
		gap: var(--s-48);
		align-items: center;
	}

	.hero--media .hero__intro {
		margin-inline: 0;
	}

	.hero--media .hero__actions {
		justify-content: flex-start;
	}

	.hero--media .hero__figure {
		margin: 0;
		max-width: none;
	}
}

.hero-plate {
	background: var(--c-bone);
	border-radius: var(--radius-plate);
	padding: var(--s-32) var(--s-24);
	text-align: center;
}

.hero-plate__title {
	margin-bottom: var(--s-24);
}

.hero-plate .placeholder {
	text-align: left;
	max-width: 720px;
	margin-inline: auto;
}

/* Kruimelpad en paginakop */
.breadcrumb {
	font-size: var(--wp--preset--font-size--small);
	color: var(--c-smoke);
	padding-block: var(--s-16);
}

.breadcrumb__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-8);
}

.breadcrumb__item + .breadcrumb__item::before {
	content: "/";
	margin-inline-end: var(--s-8);
	color: var(--c-stone);
}

.breadcrumb a {
	color: var(--c-smoke);
}

.page-header {
	padding-block: var(--s-8) var(--s-24);
}

.page-title {
	margin-bottom: 0;
}

/* Illustratie naast de titel (B33) */
.page-figure {
	margin: var(--s-16) 0 0;
	max-width: 220px;
}

.page-figure img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 900px) {
	.page-header--media {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: var(--s-32);
		align-items: center;
	}

	.page-header--media .page-figure {
		margin: 0;
		max-width: none;
	}
}

/* Inhoudskolom */
.prose {
	max-width: 65ch;
}

.prose--wide {
	max-width: none;
}

.prose > h2 {
	margin-top: var(--s-48);
}

.prose > h3 {
	margin-top: var(--s-32);
}

.prose ul,
.prose ol {
	padding-inline-start: 1.4em;
	margin: 0 0 var(--s-16);
}

.prose li + li {
	margin-top: var(--s-4);
}

.prose .wp-block-table,
.table-scroll {
	overflow-x: auto;
	margin: 0 0 var(--s-24);
	border: 1px solid var(--c-hairline);
	border-radius: 12px;
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.prose th,
.prose td {
	text-align: left;
	padding: var(--s-12) var(--s-16);
	border-bottom: 1px solid var(--c-hairline);
	vertical-align: top;
}

.prose thead th {
	background: var(--c-bone);
	font-weight: 700;
}

.prose tbody tr:last-child td {
	border-bottom: 0;
}

.prose details {
	border: 1px solid var(--c-hairline);
	border-radius: 12px;
	padding: var(--s-12) var(--s-16);
	margin: 0 0 var(--s-12);
}

.prose summary {
	cursor: pointer;
	font-weight: 500;
	min-height: 24px;
}

.prose summary:focus-visible {
	box-shadow: var(--focus-ring);
}

.prose details[open] summary {
	margin-bottom: var(--s-8);
}

.prose .wp-block-buttons .wp-block-button__link {
	border-radius: var(--radius-pill);
	background: var(--c-action-strong);
	color: var(--c-base);
	font-weight: 500;
	padding: var(--s-12) var(--s-24);
	text-decoration: none;
}

.next-step {
	margin-top: var(--s-32);
}

.prose .link-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--s-24);
}

.prose .link-list li + li {
	margin-top: 0;
}

.link-list a {
	display: inline-block;
	padding-block: var(--s-8);
}

/* Placeholder voor plugin-onderdelen die nog niet actief zijn */
.placeholder {
	border: 2px dashed var(--c-stone);
	border-radius: var(--radius-card);
	padding: var(--s-24);
	color: var(--c-graphite);
	background: var(--c-base);
}

.placeholder__title {
	font-weight: 700;
	margin-bottom: var(--s-4);
}

.placeholder__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

/* Footer */
.site-footer {
	border-top: 1px solid var(--c-hairline);
	background: var(--c-bone);
	padding-block: var(--s-48);
	font-size: var(--wp--preset--font-size--small);
	color: var(--c-smoke);
}

.site-footer__list {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--s-8) var(--s-24);
	margin-bottom: var(--s-24);
}

.site-footer__list a {
	color: var(--c-graphite);
}

.site-footer__note {
	max-width: 65ch;
}

.site-footer__copy {
	margin: 0;
}

/* Breder scherm */
@media (min-width: 640px) {
	:root {
		--gutter: var(--s-24);
		--section-gap: var(--s-64);
	}

	.card-grid--3,
	.card-grid--4,
	.card-grid--5 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Vijf kaarten in twee kolommen: de laatste over de volle breedte, geen losse kaart. */
	.card-grid--5 > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.band {
		padding: var(--s-48) var(--s-32);
	}

	.hero {
		padding-block: var(--s-80) var(--s-32);
	}

	.hero__eyebrow {
		font-size: 1.875rem;
	}

	.hero-plate {
		padding: var(--s-48) var(--s-48);
	}
}

@media (min-width: 900px) {
	.site-nav__toggle {
		display: none;
	}

	.js .site-nav,
	.site-nav {
		display: flex;
		flex-basis: auto;
		width: auto;
		align-items: center;
		gap: var(--s-16);
		padding-block: 0;
	}

	.site-nav__list {
		flex-direction: row;
		gap: var(--s-4);
	}

	.site-nav__actions {
		padding: 0;
		margin-inline-start: var(--s-16);
	}

	.card-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.card-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.card-grid--5 {
		grid-template-columns: repeat(5, 1fr);
	}

	.card-grid--5 > :last-child:nth-child(odd) {
		grid-column: auto;
	}
}

/* ==========================================================================
   Plugin-componenten (markup uit zv18-core, stijl hier)
   ========================================================================== */

.zv18-notice {
	padding: var(--s-16) var(--s-24);
	background: var(--c-bone);
	border-radius: 12px;
}

/* --- Vergelijking --- */
/* hidden moet winnen van display: grid/flex, anders blijven weggefilterde polissen staan. */
.zv18-compare [hidden] {
	display: none !important;
}

.zv18-compare {
	text-align: left;
}

.zv18-compare__testnote {
	display: inline-block;
	margin: 0 0 var(--s-16);
	padding: var(--s-4) var(--s-12);
	border-radius: var(--radius-pill);
	background: var(--c-lavender);
	color: var(--c-ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.zv18-compare__stale {
	margin: 0 0 var(--s-16);
	padding: var(--s-12) var(--s-16);
	border-radius: var(--radius-card);
	background: var(--c-bone);
	color: var(--c-ink);
	font-size: var(--wp--preset--font-size--small);
}

.zv18-compare__scope,
.zv18-compare__count,
.zv18-compare__note,
.zv18-compare__disclosure {
	font-size: var(--wp--preset--font-size--small);
	color: var(--c-smoke);
}

.zv18-compare__disclosure {
	margin-top: var(--s-24);
}

/* Cookiebanner (docs/09 Meten): onderaan, vlak, twee gelijkwaardige knoppen. Markup uit de plugin. */
.zv18-consent {
	position: fixed;
	inset-inline: var(--s-16);
	bottom: var(--s-16);
	z-index: 50;
	max-width: 640px;
	margin-inline: auto;
	padding: var(--s-16) var(--s-24);
	border: 2px solid var(--c-ink);
	border-radius: var(--radius-card);
	background: var(--c-base);
	color: var(--c-ink);
}

.zv18-consent[hidden] {
	display: none;
}

.zv18-consent__text {
	margin: 0 0 var(--s-12);
	font-size: var(--wp--preset--font-size--small);
}

.zv18-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-12);
	margin: 0;
}

.zv18-consent__actions .btn {
	flex: 1 1 140px;
	min-width: 0;
	max-width: 100%;
}

.site-footer__consent {
	margin-inline-start: var(--s-8);
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* Jaarkeuze (B39): alleen zichtbaar als er meer dan één goedgekeurd verzekeringsjaar is. */
.zv18-compare__years {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-8);
	margin: 0 0 var(--s-16);
	font-size: var(--wp--preset--font-size--small);
}

.zv18-compare__year {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: var(--s-4) var(--s-12);
	border: 2px solid var(--c-action);
	border-radius: var(--radius-pill);
	color: var(--c-ink);
	font-weight: 700;
	text-decoration: none;
}

a.zv18-compare__year:hover,
a.zv18-compare__year:focus-visible {
	background: var(--c-bone);
	color: var(--c-ink);
}

.zv18-compare__year.is-active {
	/* action-strong: witte tekst haalt hierop 4,97:1 (docs/05); op --c-action maar 4,19:1. */
	background: var(--c-action-strong);
	border-color: var(--c-action-strong);
	color: var(--c-base);
}

.zv18-compare__aside {
	margin: 0 0 var(--s-24);
}

.zv18-filters__toggle {
	width: 100%;
}

.zv18-compare__aside.is-collapsed .zv18-filters {
	display: none;
}

.zv18-filters {
	display: grid;
	gap: var(--s-24);
	padding: var(--s-24);
	margin: var(--s-12) 0 0;
	background: var(--c-base);
	border: 1px solid var(--c-hairline);
	border-radius: var(--radius-card);
}

.zv18-filters__group {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.zv18-filters__group legend {
	padding: 0;
	margin-bottom: var(--s-8);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: var(--c-graphite);
}

.zv18-filters__option {
	display: flex;
	align-items: center;
	gap: var(--s-8);
	min-height: 32px;
	cursor: pointer;
}

.zv18-filters__hint {
	margin: var(--s-8) 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--c-smoke);
}

.zv18-compare__consequence,
.zv18-compare__unknown {
	margin: 0 0 var(--s-16);
	padding: var(--s-12) var(--s-16);
	border-radius: var(--radius-card);
	background: var(--c-bone);
	font-size: var(--wp--preset--font-size--small);
}

.zv18-filters__help {
	display: inline-block;
	margin-top: var(--s-4);
	font-size: var(--wp--preset--font-size--small);
}

.zv18-filters__option input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--c-action);
}

.zv18-filters__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-16);
	margin: 0;
}

.zv18-compare__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--s-16);
}

.zv18-compare__empty {
	border: 2px dashed var(--c-stone);
	border-radius: var(--radius-card);
	padding: var(--s-24);
	margin-bottom: var(--s-16);
}

.zv18-compare__empty > :last-child {
	margin-bottom: 0;
}

.policy-row {
	display: grid;
	gap: var(--s-12);
	padding: var(--s-24);
	background: var(--c-base);
	border: 1px solid var(--c-hairline);
	border-radius: var(--radius-card);
}

.policy-row__badge {
	justify-self: start;
	margin: 0;
	padding: var(--s-4) var(--s-12);
	border-radius: var(--radius-pill);
	background: var(--c-ink);
	color: var(--c-highlight);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	letter-spacing: 0.025em;
	text-transform: uppercase;
}

.policy-row__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-sm);
}

.policy-row__logo {
	display: block;
	height: 32px;
	margin-bottom: var(--s-8);
}

.policy-row__logo img {
	height: 100%;
	width: auto;
	max-width: 120px;
	object-fit: contain;
	object-position: left center;
}

.policy-row__brand {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--c-smoke);
}

.policy-row__premium {
	margin: 0;
}

.policy-row__amount {
	display: block;
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.policy-row__stale {
	display: block;
	font-weight: 700;
}

.policy-row__per,
.policy-row__muted {
	font-size: var(--wp--preset--font-size--small);
	color: var(--c-smoke);
}

.policy-row__per {
	display: block;
}

.policy-row__facts {
	margin: 0;
	display: grid;
	gap: var(--s-8) var(--s-24);
}

.policy-row__facts dt {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: var(--c-graphite);
}

.policy-row__facts dd {
	margin: 0;
}

.policy-row__facts a {
	margin-inline-start: var(--s-4);
	font-size: var(--wp--preset--font-size--small);
}

.policy-row__source {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--c-smoke);
}

.policy-row__action {
	margin: 0;
}

/* Compacte vergelijking (homepage limit=5, stappenplan stap 1): alleen logo, naam, premie en knop (eigenaar, 20 oktober 2026). */
.zv18-compare--compact .policy-row {
	padding: var(--s-16) var(--s-24);
}

.zv18-compare--compact .zv18-compare__scope,
.zv18-compare--compact .zv18-compare__count,
.zv18-compare--compact .policy-row__badge,
.zv18-compare--compact .policy-row__care,
.zv18-compare--compact .policy-row__facts,
.zv18-compare--compact .policy-row__checked {
	display: none !important;
}

.zv18-compare__more {
	margin: var(--s-24) 0 0;
}

.zv18-compare .policy-row.is-beyond {
	display: none !important;
}

/* Programmatische focus na "Toon alle polissen": zichtbaar waar de lijst verdergaat. */
.zv18-compare .policy-row:focus {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: 4px;
}

.zv18-compare__showall {
	margin: var(--s-24) 0 0;
	text-align: center;
}

/* --- Nieuws (B34) --- */
.news-list {
	list-style: none;
	margin: var(--s-24) 0 0;
	padding: 0;
	display: grid;
	gap: var(--s-16);
}

.news-card {
	padding: var(--s-24);
	background: var(--c-base);
	border: 1px solid var(--c-hairline);
	border-radius: var(--radius-card);
}

.news-card__img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 var(--s-16);
	border-radius: 12px;
}

.news-list--archive .news-card__img {
	max-width: 280px;
}

.news-card__date,
.news-meta {
	margin: 0 0 var(--s-8);
	font-size: var(--wp--preset--font-size--small);
	color: var(--c-smoke);
}

.news-card__title {
	margin: 0 0 var(--s-8);
	font-size: var(--wp--preset--font-size--heading-sm);
}

.news-card__title a {
	color: var(--c-ink);
	text-decoration: none;
}

.news-card__title a:hover {
	text-decoration: underline;
}

.news-card__excerpt {
	margin: 0;
}

.news-meta {
	margin-top: var(--s-12);
}

.news-more,
.news-back {
	margin: var(--s-24) 0 0;
}

@media (min-width: 900px) {
	.news-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.news-list--n2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.news-list--n1,
	.news-list--archive {
		grid-template-columns: 1fr;
	}

	/* Eén artikel: brede kaart, afbeelding links. */
	.news-list--n1 .news-card {
		display: grid;
		grid-template-columns: 320px minmax(0, 1fr);
		column-gap: var(--s-24);
		align-items: center;
	}

	.news-list--n1 .news-card__img {
		grid-row: 1 / 4;
		margin: 0;
	}
}

/* --- Stappenplan stap voor stap (dialog) --- */
@media screen {
	.zv18-calendar__result.is-compact .zv18-timeline,
	.zv18-calendar__result.is-compact .zv18-calendar__note {
		display: none;
	}
}

.zv18-plan {
	width: calc(100% - 2 * var(--s-16));
	max-width: 600px;
	max-height: calc(100dvh - 2 * var(--s-16));
	padding: var(--s-24);
	border: 0;
	border-radius: var(--radius-card);
	background: var(--c-base);
	color: var(--c-ink);
	overflow-y: auto;
	text-align: left;
}

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

.zv18-plan [hidden] {
	display: none !important;
}

.zv18-plan::backdrop {
	background: rgb(0 0 0 / 0.55);
}

.zv18-plan__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-12);
}

.zv18-plan__count {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: var(--c-graphite);
}

.zv18-plan__close {
	width: 44px;
	height: 44px;
	border: 1px solid var(--c-hairline);
	border-radius: 50%;
	background: var(--c-base);
	color: var(--c-ink);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.zv18-plan__title {
	margin: var(--s-12) 0 var(--s-8);
	font-size: var(--wp--preset--font-size--heading-sm);
}

.zv18-plan__title:focus {
	outline: none;
}

.zv18-plan__lead {
	margin: 0 0 var(--s-16);
	color: var(--c-graphite);
}

.zv18-plan__dots {
	display: flex;
	gap: var(--s-8);
	margin: 0 0 var(--s-16);
}

.zv18-plan__dot {
	flex: 1;
	height: 6px;
	border-radius: var(--radius-pill);
	background: var(--c-hairline);
}

.zv18-plan__dot.is-done,
.zv18-plan__dot.is-active {
	background: var(--c-action);
}

.zv18-plan__step {
	padding: var(--s-16) var(--s-16) var(--s-8);
	border-radius: 12px;
	background: var(--c-bone);
}

.zv18-plan__step .zv18-timeline__title {
	font-size: var(--wp--preset--font-size--body-lg);
}

.zv18-plan__nav {
	display: flex;
	justify-content: space-between;
	gap: var(--s-12);
	margin-top: var(--s-24);
}

.zv18-plan__nav .zv18-plan__next {
	margin-left: auto;
}

/* --- Verzekeraars in de vergelijking --- */
.zv18-insurers__list {
	list-style: none;
	margin: var(--s-24) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-8);
}

.zv18-insurers__link {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	padding: var(--s-8) var(--s-12);
	background: var(--c-base);
	border: 1px solid var(--c-hairline);
	border-radius: var(--radius-card);
	color: var(--c-ink);
	text-decoration: none;
	text-align: center;
}

.zv18-insurers__link:hover {
	border-color: var(--c-ink);
}

.zv18-insurers__logo {
	width: 100%;
	max-width: 110px;
	height: 32px;
	object-fit: contain;
}

.zv18-insurers__name {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.15;
}

@media (min-width: 640px) {
	.zv18-insurers__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--s-12);
	}

	.zv18-insurers__link {
		height: 88px;
		padding: var(--s-12) var(--s-16);
	}

	.zv18-insurers__logo {
		max-width: 140px;
		height: 44px;
	}

	.zv18-insurers__name {
		font-size: inherit;
		line-height: 1.25;
	}
}

/* --- Verjaardagshulp --- */
.zv18-calendar {
	text-align: left;
	max-width: 720px;
	margin-inline: auto;
}

.zv18-calendar__question {
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 500;
}

.zv18-calendar__fields {
	display: grid;
	gap: var(--s-16);
}

.zv18-calendar__field label {
	display: block;
	margin-bottom: var(--s-4);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.zv18-calendar select {
	width: 100%;
	min-height: 44px;
	padding: var(--s-8) var(--s-12);
	border: 1px solid var(--c-smoke); /* 5,2:1 op wit; stone haalt de 3:1 voor veldranden niet */
	border-radius: 12px;
	background: var(--c-base);
	color: var(--c-ink);
	font: inherit;
}

.zv18-calendar select[aria-invalid="true"] {
	border-color: var(--c-ink);
	border-width: 2px;
}

.zv18-calendar__submit .btn {
	width: 100%;
}

.zv18-calendar__error {
	margin: var(--s-8) 0 0;
	padding-inline-start: var(--s-12);
	border-inline-start: 4px solid var(--c-accent);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.zv18-calendar__error--range {
	margin-top: var(--s-16);
}

.zv18-calendar__privacy {
	margin: var(--s-12) 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--c-smoke);
}

.zv18-contact__form {
	display: grid;
	gap: var(--s-16);
	max-width: 560px;
}

.zv18-contact__field label {
	display: block;
	margin-bottom: var(--s-4);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.zv18-contact input,
.zv18-contact textarea {
	width: 100%;
	min-height: 44px;
	padding: var(--s-8) var(--s-12);
	border: 1px solid var(--c-smoke); /* 5,2:1 op wit; stone haalt de 3:1 voor veldranden niet */
	border-radius: 12px;
	background: var(--c-base);
	color: var(--c-ink);
	font: inherit;
}

.zv18-contact [aria-invalid="true"] {
	border-color: var(--c-ink);
	border-width: 2px;
}

.zv18-contact__error,
.zv18-contact__status {
	margin: var(--s-8) 0 0;
	padding-inline-start: var(--s-12);
	border-inline-start: 4px solid var(--c-accent);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.zv18-contact__status {
	border-inline-start-color: var(--c-action);
	margin-bottom: var(--s-16);
}

.zv18-contact__status--error {
	border-inline-start-color: var(--c-accent);
}

.zv18-contact__hp {
	position: absolute;
	left: -9999px;
}

.zv18-contact__privacy {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--c-smoke);
}

.zv18-calendar__result {
	margin-top: var(--s-32);
	padding: var(--s-24);
	background: var(--c-base);
	border-radius: var(--radius-card);
}

.zv18-calendar__result:focus {
	outline: none;
	box-shadow: var(--focus-ring);
}

.zv18-calendar__title {
	font-size: var(--wp--preset--font-size--heading-sm);
	margin-bottom: var(--s-8);
}

.zv18-calendar__lead {
	font-size: var(--wp--preset--font-size--body-lg);
}

.zv18-calendar__lead--unconfirmed {
	padding: var(--s-12) var(--s-16);
	background: var(--c-bone);
	border-radius: 12px;
	font-size: var(--wp--preset--font-size--body);
}

.zv18-timeline {
	list-style: none;
	margin: var(--s-24) 0;
	padding: 0;
	display: grid;
	gap: var(--s-24);
}

.zv18-timeline__item {
	padding-inline-start: var(--s-16);
	border-inline-start: 3px solid var(--c-action);
}

.zv18-timeline__title {
	margin: 0 0 var(--s-8);
	font-size: var(--wp--preset--font-size--body-lg);
}

.zv18-timeline__list {
	list-style: none;
	margin: 0 0 var(--s-8);
	padding: 0;
	display: grid;
	gap: var(--s-8);
}

.zv18-timeline__check {
	display: flex;
	align-items: flex-start;
	gap: var(--s-8);
	cursor: pointer;
}

.zv18-timeline__check input {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 0.2em;
	accent-color: var(--c-action);
}

.zv18-timeline__top {
	margin: var(--s-16) 0;
}

/* Laagste premies in stap 1: alleen de polissen en de knop naar alle polissen (eigenaar, 20 oktober 2026). */
.zv18-timeline__top .zv18-compare__disclosure,
.zv18-timeline__top ~ .zv18-timeline__links {
	display: none !important;
}

.zv18-timeline__cta {
	margin: var(--s-12) 0;
}

.zv18-timeline__links {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.zv18-timeline__links a {
	margin-inline-end: var(--s-12);
}

.zv18-calendar__note {
	margin: 0 0 var(--s-8);
	font-size: var(--wp--preset--font-size--small);
	color: var(--c-smoke);
}

.zv18-calendar__actions {
	margin: var(--s-16) 0 0;
}

@media (min-width: 640px) {
	.zv18-calendar__fields {
		grid-template-columns: 1fr 1fr auto;
		align-items: end;
	}

	.zv18-calendar__submit .btn {
		width: auto;
	}

	.policy-row__facts {
		grid-template-columns: repeat(3, auto);
	}
}

@media (min-width: 900px) {
	.policy-row {
		grid-template-columns: 1.3fr 1fr 2fr auto;
		grid-template-areas:
			"badge badge badge badge"
			"name premium facts action"
			"source source source source";
		align-items: start;
		column-gap: var(--s-24);
	}

	.policy-row__badge { grid-area: badge; }
	.policy-row__name { grid-area: name; }
	.policy-row__premium { grid-area: premium; }
	.policy-row__facts { grid-area: facts; grid-template-columns: 1fr; }
	.policy-row__action { grid-area: action; justify-self: end; }
	.policy-row__source { grid-area: source; }

	.zv18-compare--compact .policy-row {
		grid-template-columns: minmax(0, 1fr) 170px 220px;
		grid-template-areas:
			"name premium action"
			"source source source";
		align-items: center;
	}

	/* Prijs en knop in elke regel op dezelfde plek, knoppen even breed. */
	.zv18-compare--compact .policy-row__premium {
		text-align: left;
	}

	.zv18-compare--compact .policy-row__action {
		justify-self: stretch;
	}

	.zv18-compare--compact .policy-row__cta {
		width: 100%;
	}

	.zv18-compare__layout {
		display: grid;
		grid-template-columns: 260px minmax(0, 1fr);
		gap: var(--s-32);
		align-items: start;
	}

	.zv18-compare__aside {
		position: sticky;
		top: var(--s-24);
		margin: 0;
	}

	.zv18-filters__toggle {
		display: none;
	}

	.zv18-filters {
		margin: 0;
	}

	.zv18-filters.is-live .zv18-filters__submit {
		display: none;
	}

	.zv18-compare:not(.zv18-compare--compact) .policy-row {
		grid-template-columns: 128px minmax(0, 1fr) auto;
		grid-template-areas:
			"badge badge badge"
			"logo name premium"
			"logo facts action"
			"source source source";
	}

	.zv18-compare:not(.zv18-compare--compact) .policy-row__logo {
		grid-area: logo;
		align-self: center;
		height: 56px;
		margin: 0;
	}

	.zv18-compare:not(.zv18-compare--compact) .policy-row__facts {
		grid-template-columns: repeat(2, auto);
		justify-content: start;
	}

	.zv18-compare:not(.zv18-compare--compact) .policy-row__care {
		grid-column: 1 / -1;
	}

	.zv18-compare:not(.zv18-compare--compact) .policy-row__premium {
		text-align: right;
	}

}

.prose .wp-block-details {
	border: 1px solid var(--c-hairline);
	border-radius: 12px;
	padding: var(--s-12) var(--s-16);
	margin: 0 0 var(--s-12);
}

.prose .wp-block-details summary {
	cursor: pointer;
	font-weight: 500;
}

.prose .wp-block-details[open] summary {
	margin-bottom: var(--s-8);
}

.prose .wp-block-details > p:last-child {
	margin-bottom: 0;
}