/* ==========================================================================
   Landingspagina's - het type tussen een CMS-artikel en een producthomepage in

   De blokken staan in een geordende lijst, dus elk blok moet op zichzelf staan
   en naast elk ander blok kunnen liggen. Daarom heeft elk blok zijn eigen
   verticale ruimte en zijn er geen marges die van boven naar beneden lekken.

   Kleuren komen uit basics.css, dezelfde als de producthomepages: #1B75BA als
   hoofdblauw, #00ACED als accent, #d5f4ff als rustig vlak.
   ========================================================================== */

.lp {
	--lp-ink: #1a1a1a;
	--lp-muted: #5b6470;
	--lp-line: #e4e8ee;
	--lp-card: #fff;
	--lp-blauw: var(--color-link, #1B75BA);
	--lp-blauw-diep: #145a90;
	--lp-accent: var(--secundary-blue, #00ACED);
	--lp-zacht: var(--light-blue, #d5f4ff);
	--lp-oranje: var(--mw-orange, #ff6600);
	--lp-grijs: #f0f3f5;
	--lp-radius: 10px;
	--lp-ruimte: clamp(2rem, 5vw, 3.5rem);

	display: block;
	color: var(--lp-ink);
	/* De pagina is wit; de body eronder is grijs. Blokken die op een grijs vlak horen (punten,
	   stappen, faq) zetten dat zelf, zodat wit en grijs elkaar afwisselen. */
	background: #fff;
}

/* Het kruimelpad ligt op hetzelfde vlak als de hero eronder; samen vormen ze één band in plaats
   van een grijze strook boven een blauwe. Heeft de pagina geen hero, dan staat het kruimelpad
   nog steeds op die achtergrond - dat leest als de kop van de pagina. */
.lp-kruimels {
	padding-top: .75rem;
	background: var(--lp-zacht);
}

	.lp-kruimels .kruimelpad {
		padding-bottom: 0;
	}

/* Volgt de hero direct op de kruimels, dan hoeft die er niet nog een hele bak ruimte bovenop te
   zetten: de band is dan al begonnen. */
.lp-kruimels + .lp-hero {
	padding-top: 1rem;
}

/* ---------- gedeelde onderdelen ------------------------------------------ */

.lp h2 {
	margin: 0 0 1rem;
	font-size: clamp(1.35rem, 3vw, 1.75rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--lp-blauw);
}

.lp h3 {
	margin: 0 0 .4rem;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
}

.lp p {
	line-height: 1.7;
}

.lp-lead {
	max-width: 70ch;
	margin: -.4rem 0 1.5rem;
	font-size: 1.05rem;
	color: var(--lp-muted);
}

/* Eén knopvorm voor de hele pagina, in twee sterktes. */
.lp-knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0 1.4rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--lp-blauw);
	color: #fff;
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

	.lp-knop:hover {
		background: var(--lp-blauw-diep);
		color: #fff;
	}

	.lp-knop:focus-visible {
		outline: 2px solid var(--lp-blauw);
		outline-offset: 2px;
	}

.lp-knop--rustig {
	background: transparent;
	border-color: var(--lp-blauw);
	color: var(--lp-blauw);
}

	.lp-knop--rustig:hover {
		background: var(--lp-blauw);
		color: #fff;
	}

/* ---------- hero --------------------------------------------------------- */

.lp-hero {
	padding: var(--lp-ruimte) 0;
	background: var(--lp-zacht);
}

.lp-hero__binnen {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 2rem;
}

@media (max-width: 860px) {
	.lp-hero__binnen {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Op een smal scherm is het beeld sfeer en geen informatie; de tekst gaat voor. */
	.lp-hero__beeld {
		display: none;
	}
}

.lp-hero h1 {
	margin: 0 0 .75rem;
	font-size: clamp(1.85rem, 5vw, 2.75rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--lp-blauw);
}

.lp-hero__lead {
	max-width: 60ch;
	margin: 0;
	font-size: clamp(1.05rem, 2vw, 1.2rem);
	color: #33404d;
}

.lp-hero__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.5rem;
}

/* Het uitgelichte feit: een gekleurde kaart die op een smal scherm gewoon onder de tekst valt -
   anders dan de afbeelding is dit informatie, dus hij verdwijnt daar niet. */
.lp-hero__promo {
	max-width: 18rem;
	padding: 1.25rem 1.5rem;
	background: #fff;
	border: 2px solid var(--lp-blauw);
	border-radius: var(--lp-radius);
	box-shadow: 0 8px 24px rgba(27, 117, 186, .12);
	color: var(--lp-ink);
	text-align: center;
}

	.lp-hero__promo h2 {
		margin: 0 0 .5rem;
		font-size: 1.05rem;
		color: var(--lp-blauw);
	}

	.lp-hero__promo p {
		margin: 0;
		font-size: .95rem;
		line-height: 1.55;
		color: #3d444d;
	}

	.lp-hero__promo b {
		display: block;
		font-size: 1.85rem;
		line-height: 1.2;
		margin: .35rem 0;
		color: var(--lp-blauw);
	}

@media (max-width: 860px) {
	.lp-hero__promo {
		max-width: none;
	}
}

.lp-hero__beeld img {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
	border-radius: var(--lp-radius);
}

/* ---------- tekst -------------------------------------------------------- */

.lp-tekst {
	padding: var(--lp-ruimte) 0 0;
}

.lp-tekst__kolom {
	max-width: 70ch;
}

	.lp-tekst__kolom p {
		margin: 0 0 .9rem;
		color: #3d444d;
	}

	.lp-tekst__kolom h3 {
		margin-top: 1.75rem;
	}

	.lp-tekst__kolom ul,
	.lp-tekst__kolom ol {
		margin: 0 0 .9rem;
		padding-left: 1.25rem;
		line-height: 1.7;
		color: #3d444d;
	}

	.lp-tekst__kolom li {
		margin-bottom: .35rem;
	}

	.lp-tekst__kolom a {
		color: var(--lp-blauw);
	}

	/* Een tabel in de tekst (bijv. de uitkeringsvormen naast elkaar) */
	.lp-tekst__kolom table {
		width: 100%;
		margin: 0 0 1rem;
		border-collapse: collapse;
		font-size: .95rem;
		line-height: 1.5;
	}

		.lp-tekst__kolom th,
		.lp-tekst__kolom td {
			padding: .6rem .75rem;
			border: 1px solid var(--lp-line);
			text-align: left;
			vertical-align: top;
			color: #3d444d;
		}

		.lp-tekst__kolom th {
			background: var(--lp-zacht);
			color: var(--lp-ink);
			font-weight: 700;
		}

		.lp-tekst__kolom tbody tr:nth-child(even) {
			background: var(--lp-grijs);
		}

/* ---------- stappen ------------------------------------------------------ */

.lp-stappen {
	margin-top: var(--lp-ruimte);
	padding: var(--lp-ruimte) 0;
	background: var(--lp-grijs);
}

/* De nummers komen uit een teller, zodat er geen cijfers in de tekst staan en de
   volgorde in de HTML klopt. */
.lp-stappen__lijst {
	counter-reset: stap;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

	.lp-stappen__lijst li {
		counter-increment: stap;
		position: relative;
		padding: 1.25rem 1.25rem 1.25rem 3.5rem;
		background: var(--lp-card);
		border: 1px solid var(--lp-line);
		border-radius: var(--lp-radius);
	}

		.lp-stappen__lijst li::before {
			content: counter(stap);
			position: absolute;
			top: 1.25rem;
			left: 1.25rem;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 1.75rem;
			height: 1.75rem;
			border-radius: 50%;
			background: var(--lp-blauw);
			color: #fff;
			font-size: .9rem;
			font-weight: 700;
		}

		.lp-stappen__lijst p {
			margin: 0;
			color: #3d444d;
		}

		.lp-stappen__lijst a {
			display: inline-block;
			margin-top: .5rem;
			color: var(--lp-blauw);
		}

/* ---------- punten ------------------------------------------------------- */

.lp-punten {
	margin-top: var(--lp-ruimte);
	padding: var(--lp-ruimte) 0;
	background: var(--lp-grijs);
}

.lp-punten__lijst {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

	.lp-punten__lijst li {
		position: relative;
		padding-left: 1.9rem;
	}

		/* Het vinkje is twee randen onder een hoek; scheelt een afbeelding. */
		.lp-punten__lijst li::before {
			content: "";
			position: absolute;
			top: .35rem;
			left: .25rem;
			width: .45rem;
			height: .8rem;
			border-right: 2px solid var(--lp-accent);
			border-bottom: 2px solid var(--lp-accent);
			transform: rotate(45deg);
		}

		.lp-punten__lijst p {
			margin: 0;
			color: #3d444d;
		}

		.lp-punten__lijst a {
			color: var(--lp-blauw);
		}

/* ---------- cta ---------------------------------------------------------- */

.lp-cta {
	margin: var(--lp-ruimte) 0 0;
	padding: var(--lp-ruimte) 0;
	background: var(--lp-blauw);
	color: #fff;
}

	.lp-cta h2 {
		color: #fff;
	}

	.lp-cta p {
		max-width: 60ch;
		margin: 0;
	}

	.lp-cta .lp-knop {
		background: #fff;
		color: var(--lp-blauw);
	}

		.lp-cta .lp-knop:hover {
			background: var(--lp-zacht);
			color: var(--lp-blauw-diep);
		}

	.lp-cta .lp-knop--rustig {
		background: transparent;
		border-color: #fff;
		color: #fff;
	}

		.lp-cta .lp-knop--rustig:hover {
			background: #fff;
			color: var(--lp-blauw);
		}

/* De rustige variant, voor als er al veel blauw op de pagina staat. */
.lp-cta--licht {
	background: var(--lp-zacht);
	color: var(--lp-ink);
}

	.lp-cta--licht h2 {
		color: var(--lp-blauw);
	}

	.lp-cta--licht .lp-knop {
		background: var(--lp-blauw);
		color: #fff;
	}

		.lp-cta--licht .lp-knop:hover {
			background: var(--lp-blauw-diep);
		}

.lp-cta__binnen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.lp-cta__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

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

.lp-faq {
	margin-top: var(--lp-ruimte);
	padding: var(--lp-ruimte) 0;
	background: var(--lp-grijs);
}

.lp-faq__lijst {
	display: grid;
	gap: .5rem;
	max-width: 70ch;
}

.lp-faq__item {
	background: var(--lp-card);
	border: 1px solid var(--lp-line);
	border-radius: var(--lp-radius);
	overflow: hidden;
}

	.lp-faq__item summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: .9rem 1.1rem;
		font-weight: 600;
		line-height: 1.4;
		cursor: pointer;
		list-style: none;
	}

		.lp-faq__item summary::-webkit-details-marker {
			display: none;
		}

		.lp-faq__item summary::after {
			content: "";
			flex: 0 0 auto;
			width: .65rem;
			height: .65rem;
			border-right: 2px solid var(--lp-blauw);
			border-bottom: 2px solid var(--lp-blauw);
			transform: rotate(45deg) translate(-.15rem, -.15rem);
			transition: transform .15s ease;
		}

	.lp-faq__item[open] summary::after {
		transform: rotate(225deg) translate(-.05rem, -.05rem);
	}

	.lp-faq__item summary:focus-visible {
		outline: 2px solid var(--lp-blauw);
		outline-offset: -2px;
	}

.lp-faq__antwoord {
	padding: 0 1.1rem 1.1rem;
	line-height: 1.7;
	color: #3d444d;
}

	.lp-faq__antwoord p {
		margin: 0 0 .75rem;
	}

	.lp-faq__antwoord p:last-child {
		margin-bottom: 0;
	}

/* ---------- vingers in plaats van een muis ------------------------------- */

@media (pointer: coarse) {
	.lp-faq__item summary {
		padding-top: 1.05rem;
		padding-bottom: 1.05rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp * {
		transition: none !important;
	}
}