/* ------------------------------------------------------------------
   NLP Academie - vormgeving
   Kleuren, maten en typografie komen uit theme.json. Wat hier staat zijn
   de onderdelen die met alleen blokinstellingen niet te maken zijn.
   ------------------------------------------------------------------ */

:root {
	--nlpa-radius-kaart: 10px;
	--nlpa-radius-groot: 18px;
	--nlpa-radius-knop: 50px;
	--nlpa-breed: 1140px;
	--nlpa-marge: 24px;
	--nlpa-paars-rgb: 119, 40, 124;
	/* De merkolijf blijft beschikbaar voor accenten. Voor knoppen is hij te
	   licht voor witte tekst, daarom gebruiken we een donkerdere actietint. */
	--nlpa-olijf-knop: #6b681e;
	--nlpa-olijf-knop-hover: #565318;
	--nlpa-tekst-op-donker: rgba(253, 252, 253, 0.88);
	--nlpa-tekst-op-donker-zacht: rgba(253, 252, 253, 0.72);

	/* Eén beweging voor de hele site: traag uitlopend, nooit terugverend. */
	--nlpa-veer: cubic-bezier(0.16, 1, 0.3, 1);
	--nlpa-vlot: 0.22s var(--nlpa-veer);
	--nlpa-traag: 0.5s var(--nlpa-veer);

	/* Schaduwen krijgen de kleur van het merk mee in plaats van grijs. */
	--nlpa-schaduw-zacht: 0 18px 40px -28px rgba(43, 20, 51, 0.45);
	--nlpa-schaduw-diep: 0 34px 70px -40px rgba(43, 20, 51, 0.55);

	/* Drie maten lucht tussen secties, zodat niet elke sectie dezelfde
	   hoogte krijgt en de pagina een ritme heeft. */
	--nlpa-lucht: clamp(46px, 5.4vw, 74px);
	--nlpa-lucht-ruim: clamp(58px, 7vw, 96px);
	--nlpa-lucht-krap: clamp(32px, 3.6vw, 50px);
}

/* Cijfers in kolommen even breed, zodat prijzen en data uitlijnen. */
.nlpa-feiten b,
.nlpa-cohort__prijs,
.nlpa-prijskaart__bedrag,
.nlpa-cijfer b,
.nlpa-kental b {
	font-variant-numeric: tabular-nums;
}

/* Zonder dit telt padding bovenop een opgegeven hoogte en wordt alles hoger dan
   bedoeld. WordPress zet het op zijn eigen blokken, maar niet op eigen opmaak. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	/* De merk-olijf haalt op wit 2,2:1 en voldoet niet aan de eis van 3:1 voor
	   bedieningselementen. De donkere variant haalt 5,0:1. */
	outline: 3px solid var(--wp--preset--color--olijf-tekst);
	outline-offset: 2px;
}

/* Overslaan-naar-inhoud, zichtbaar zodra hij focus krijgt. */
.nlpa-overslaan {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--paars-diep);
	color: var(--wp--preset--color--wit);
	padding: 12px 20px;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	border-radius: 0 0 var(--nlpa-radius-kaart) 0;
}

.nlpa-overslaan:focus {
	left: 0;
}

/* ------------------------------------------------------------ bovenbalk */

.nlpa-kop {
	background: var(--wp--preset--color--wit);
	box-shadow: var(--wp--preset--shadow--balk);
	position: relative;
	z-index: 5;
}

.nlpa-logo {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 800;
	font-size: 20px;
	line-height: 1.1;
	color: var(--wp--preset--color--paars);
	text-decoration: none;
	display: inline-block;
}

.nlpa-logo span {
	display: block;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tekst-grijs);
	margin-top: 3px;
}

/* Hoofdmenu: de blokinstellingen dekken kleur en afstand, hier alleen de stem. */
.wp-block-navigation {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	font-size: 14.5px;
}

.wp-block-navigation a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--tekst);
	text-decoration: none;
}

.wp-block-navigation a:where(:not(.wp-element-button)):hover,
.wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--paars);
}

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

.wp-block-button__link {
	color: var(--wp--preset--color--wit);
	transition: background-color var(--nlpa-vlot), transform var(--nlpa-vlot), box-shadow var(--nlpa-vlot);
}

/* Een knop mag voelen als iets dat je indrukt: hij komt bij aanwijzen een
   haartje omhoog en zakt bij het klikken weer terug. */
.wp-block-button__link:hover,
.nlpa-knop:hover {
	transform: translateY(-1px);
	box-shadow: var(--nlpa-schaduw-zacht);
}

.wp-block-button__link:active,
.nlpa-knop:active {
	transform: translateY(1px);
	box-shadow: none;
}

.wp-block-button.is-style-olijf .wp-block-button__link {
	background-color: var(--nlpa-olijf-knop);
	color: var(--wp--preset--color--wit);
}

.wp-block-button.is-style-olijf .wp-block-button__link:hover {
	background-color: var(--nlpa-olijf-knop-hover);
}

.wp-block-button.is-style-lijn .wp-block-button__link {
	background: transparent;
	border: 2px solid rgba(253, 252, 253, 0.8);
	color: var(--wp--preset--color--wit);
	padding-top: 12px;
	padding-bottom: 12px;
}

.wp-block-button.is-style-lijn .wp-block-button__link:hover {
	background: rgba(253, 252, 253, 0.16);
}

/* ------------------------------------------------------------- bovenkopje */

.nlpa-bovenkopje {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--olijf-tekst);
	margin: 0 0 14px;
}

.has-paars-diep-background-color .nlpa-bovenkopje,
.nlpa-hero .nlpa-bovenkopje {
	color: var(--nlpa-tekst-op-donker-zacht);
}

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

.nlpa-hero {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--inkt);
	color: var(--wp--preset--color--wit);
	display: flex;
	align-items: center;
	min-height: 640px;
}

.nlpa-hero__foto {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: 50% 30%;
}

.nlpa-hero__laag {
	position: absolute;
	inset: 0;
	background: linear-gradient(227deg, rgba(64, 31, 78, 0) 34%, rgba(119, 40, 124, 0.94) 66%);
}

.nlpa-hero__laag--boven {
	background: linear-gradient(180deg, rgba(43, 20, 51, 0.5) 0%, rgba(43, 20, 51, 0) 42%);
}

.nlpa-hero__binnen {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 80px var(--nlpa-marge);
	max-width: var(--nlpa-breed);
	margin: 0 auto;
}

.nlpa-hero__inhoud {
	max-width: 600px;
	/* De blokindeling zet standaard beide marges op auto en centreert daarmee.
	   Voor de hero moet het blok juist tegen de rechterkant staan. */
	margin-left: auto !important;
	margin-right: 0 !important;
}

/* Tweede laag: donkert de bovenkant af zodat de menubalk loskomt van de foto. */
.nlpa-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(43, 20, 51, 0.5) 0%, rgba(43, 20, 51, 0) 42%);
	pointer-events: none;
}

.nlpa-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

.nlpa-hero .wp-block-buttons {
	gap: 14px;
}

.nlpa-hero .wp-block-button__link {
	font-size: 15px;
	padding: 14px 26px;
}

.nlpa-hero :where(h1, h2) {
	color: var(--wp--preset--color--wit);
}

.nlpa-hero p {
	color: var(--nlpa-tekst-op-donker);
	font-size: 18.5px;
	max-width: 50ch;
}

.nlpa-hero__kenmerken {
	display: flex;
	gap: 26px;
	flex-wrap: wrap;
	margin-top: 34px;
	padding-top: 24px;
	border-top: 1px solid rgba(253, 252, 253, 0.28);
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	font-size: 13px;
	color: var(--nlpa-tekst-op-donker-zacht);
	list-style: none;
	padding-left: 0;
}

.nlpa-hero__kenmerken li::before {
	content: "\2713";
	color: var(--wp--preset--color--olijf);
	margin-right: 8px;
	font-weight: 700;
}

@media (max-width: 900px) {
	.nlpa-hero {
		min-height: auto;
	}
	.nlpa-hero__laag {
		background: linear-gradient(180deg, rgba(64, 31, 78, 0.55) 0%, rgba(119, 40, 124, 0.95) 55%);
	}
	.nlpa-hero__inhoud {
		margin-left: 0;
		max-width: none;
	}
	.nlpa-hero__binnen {
		padding-top: 56px;
		padding-bottom: 56px;
	}
}

/* --------------------------------------------------------- vertrouwensrij */

/* Vier cijfers, geen doos eromheen en geen gevulde balk. Alleen haarlijnen
   tussen de kolommen, zodat de rij licht blijft en de hero het werk doet. */
.nlpa-cijfers {
	padding: 0 var(--nlpa-marge);
	background: var(--wp--preset--color--wit);
}

.nlpa-cijfers__binnen {
	max-width: var(--nlpa-breed);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0;
	padding-block: clamp(20px, 2.4vw, 28px);
	border-bottom: 1px solid var(--wp--preset--color--rand);
}

.nlpa-cijfers__binnen > div {
	padding-inline: clamp(18px, 2.5vw, 34px);
	border-left: 1px solid var(--wp--preset--color--rand);
}

.nlpa-cijfers__binnen > div:first-child {
	padding-left: 0;
	border-left: 0;
}

.nlpa-cijfers b {
	display: block;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 800;
	font-size: clamp(30px, 3.4vw, 40px);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--inkt);
	font-variant-numeric: tabular-nums;
}

.nlpa-cijfers span {
	display: block;
	margin-top: 8px;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tekst-grijs);
}

@media (max-width: 700px) {
	.nlpa-cijfers__binnen > div {
		padding-inline: 0;
		border-left: 0;
		padding-block: 14px;
		border-top: 1px solid var(--wp--preset--color--rand);
	}
	.nlpa-cijfers__binnen > div:first-child {
		border-top: 0;
		padding-top: 0;
	}
}

/* -------------------------------------------------------- het antwoordblok */

.nlpa-antwoord {
	/* De streep aan de zijkant is vervangen door een markering bovenaan. Een
	   gekleurde balk links op een blok is het patroon waaraan sjabloonwerk te
	   herkennen is, en hij doet niets wat de kop niet al doet. */
	background: var(--wp--preset--color--paneel);
	border-top: 3px solid var(--wp--preset--color--olijf);
	padding: 24px 30px 26px;
	border-radius: 0 0 var(--nlpa-radius-kaart) var(--nlpa-radius-kaart);
	max-width: 72ch;
	margin-block: 32px;
}

.has-paneel-background-color .nlpa-antwoord {
	background: var(--wp--preset--color--wit);
}

.nlpa-antwoord__label {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--olijf-tekst);
	margin-bottom: 10px;
}

.nlpa-antwoord p {
	margin: 0;
	font-size: 18px;
}

.nlpa-antwoord p + p {
	margin-top: 12px;
}

.nlpa-herkomst {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--wp--preset--color--rand);
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	font-size: 12px;
	color: var(--wp--preset--color--tekst-grijs);
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}

.nlpa-vink {
	color: var(--wp--preset--color--groen);
}

/* ------------------------------------------------------------------ kaarten */

.nlpa-kaarten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 24px;
}

.nlpa-kaart {
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: var(--nlpa-radius-kaart);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nlpa-kaart:hover {
	border-color: var(--wp--preset--color--paars);
	box-shadow: var(--wp--preset--shadow--diep);
}

.nlpa-kaart__beeld {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--wp--preset--color--paneel);
}

.nlpa-kaart__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.nlpa-kaart__body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.nlpa-kaart__niveau {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--olijf-tekst);
	margin-bottom: 8px;
}

.nlpa-kaart__titel {
	font-size: 20px;
	margin: 0 0 10px;
}

.nlpa-kaart__titel a {
	text-decoration: none;
	color: inherit;
}

.nlpa-kaart p {
	font-size: 15.5px;
	color: var(--wp--preset--color--tekst-grijs);
	flex: 1;
}

.nlpa-kaart__feiten {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	font-size: 12.5px;
	color: var(--wp--preset--color--tekst-grijs);
	padding: 14px 0;
	margin: 6px 0 16px;
	border-top: 1px solid var(--wp--preset--color--rand);
	border-bottom: 1px solid var(--wp--preset--color--rand);
	list-style: none;
	padding-left: 0;
}

.nlpa-kaart__link {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 14.5px;
	text-decoration: none;
}

/* ------------------------------------------------------------- genummerd raster */

.nlpa-redenen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--rand);
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: var(--nlpa-radius-kaart);
	overflow: hidden;
}

.nlpa-reden {
	background: var(--wp--preset--color--wit);
	padding: 30px 28px;
}

.nlpa-reden__nr {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 800;
	font-size: 13px;
	color: var(--wp--preset--color--olijf-tekst);
	letter-spacing: 0.1em;
}

.nlpa-reden h3 {
	font-size: 18px;
	margin: 10px 0 8px;
}

.nlpa-reden p {
	font-size: 15.5px;
	color: var(--wp--preset--color--tekst-grijs);
	margin: 0;
}

/* -------------------------------------------------------------- ervaringen */

.nlpa-ervaring {
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--rand);
	border-left: 5px solid var(--wp--preset--color--olijf);
	border-radius: 0 var(--nlpa-radius-kaart) var(--nlpa-radius-kaart) 0;
	padding: 26px 28px;
}

.nlpa-ervaring__sterren {
	color: var(--wp--preset--color--olijf);
	letter-spacing: 3px;
	font-size: 15px;
	margin-bottom: 12px;
}

.nlpa-ervaring__wie {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 14px;
	color: var(--wp--preset--color--paars);
}

.nlpa-ervaring__wie span {
	display: block;
	font-weight: 600;
	font-size: 12.5px;
	color: var(--wp--preset--color--tekst-grijs);
}

/* ------------------------------------------------------- kennisbank: A tot Z */

.nlpa-alfabet {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 26px;
	padding: 0;
	list-style: none;
}

.nlpa-alfabet a {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 14px;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: 50%;
	text-decoration: none;
	background: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--paars);
}

.nlpa-alfabet a:hover {
	background: var(--wp--preset--color--paars);
	color: var(--wp--preset--color--wit);
	border-color: var(--wp--preset--color--paars);
}

.nlpa-alfabet .is-leeg {
	color: var(--wp--preset--color--tekst-grijs);
	background: var(--wp--preset--color--paneel);
	pointer-events: none;
}

.nlpa-termen {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 0 30px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.nlpa-term {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: baseline;
	padding: 12px 0;
	border-bottom: 1px solid var(--wp--preset--color--rand);
	text-decoration: none;
	color: var(--wp--preset--color--tekst);
}

.nlpa-term b {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	font-size: 15px;
}

.nlpa-term span {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	font-size: 11px;
	color: var(--wp--preset--color--tekst-grijs);
}

.nlpa-term:hover b {
	color: var(--wp--preset--color--paars);
}

/* --------------------------------------------------------- artikelsjabloon */

.nlpa-artikel {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 46px;
	align-items: start;
	max-width: var(--nlpa-breed);
	margin: 0 auto;
}

.nlpa-inhoudsopgave {
	position: sticky;
	top: 24px;
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: var(--nlpa-radius-kaart);
	padding: 20px 22px;
}

.nlpa-inhoudsopgave__label {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tekst-grijs);
	margin-bottom: 12px;
}

.nlpa-inhoudsopgave a {
	display: block;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	font-size: 14px;
	padding: 7px 0;
	text-decoration: none;
	color: var(--wp--preset--color--tekst-grijs);
	border-top: 1px solid var(--wp--preset--color--rand);
}

.nlpa-inhoudsopgave a:first-of-type {
	border-top: 0;
}

.nlpa-inhoudsopgave a.is-actief {
	color: var(--wp--preset--color--paars);
}

.nlpa-kruimelbalk {
	min-height: 36px;
	margin: 0 !important;
	padding: 0 var(--nlpa-marge) !important;
	background: var(--wp--preset--color--paars-diep);
	color: rgba(253, 252, 253, 0.82);
}

.nlpa-kruimelbalk + .wp-block-post-content,
.nlpa-kruimelbalk + main {
	margin-block-start: 0 !important;
}

.nlpa-kruimelbalk .nlpa-kruimels {
	width: 100%;
	max-width: var(--nlpa-breed);
	margin: 0 auto;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	font-size: 12px;
	line-height: 1.35;
}

.nlpa-kruimels__lijst {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	min-height: 36px;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nlpa-kruimels__lijst li {
	display: inline-flex;
	align-items: center;
}

.nlpa-kruimels__lijst li + li::before {
	content: "\203A";
	margin: 0 8px;
	color: var(--wp--preset--color--olijf);
	font-weight: 700;
}

.nlpa-kruimels__lijst a {
	color: rgba(253, 252, 253, 0.76);
	text-decoration: none;
}

.nlpa-kruimels__lijst a:hover,
.nlpa-kruimels__lijst a:focus-visible {
	color: var(--wp--preset--color--wit);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nlpa-kruimels__lijst [aria-current="page"] {
	color: var(--wp--preset--color--wit);
}

.nlpa-meta {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	font-size: 12.5px;
	color: var(--wp--preset--color--tekst-grijs);
	padding-bottom: 20px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--wp--preset--color--rand);
}

/* Leesbare regellengte in de lopende tekst van een artikel. */
.nlpa-lichaam > p,
.nlpa-lichaam > ul,
.nlpa-lichaam > ol {
	max-width: 70ch;
}

.nlpa-lichaam h2 {
	margin-top: 42px;
	margin-bottom: 10px;
}

.nlpa-lichaam h3 {
	font-size: 19px;
	margin: 30px 0 8px;
}

/* -------------------------------------------------------------- doorstroom */

.nlpa-brug {
	margin-top: 32px;
	background: var(--wp--preset--color--paars-diep);
	color: var(--wp--preset--color--wit);
	border-radius: var(--nlpa-radius-kaart);
	padding: 28px 30px;
	max-width: 70ch;
}

.nlpa-brug :where(h2, h3, h4) {
	color: var(--wp--preset--color--wit);
	font-size: 19px;
	margin: 0 0 8px;
}

.nlpa-brug p {
	color: var(--nlpa-tekst-op-donker);
	margin: 0 0 20px;
	font-size: 16px;
}

/* ------------------------------------------------------------------ onderkant */

.nlpa-voet {
	background: var(--wp--preset--color--paars-diep);
	color: var(--nlpa-tekst-op-donker);
	padding: clamp(42px, 5vw, 60px) var(--nlpa-marge) 30px;
	font-size: 15px;
}

.nlpa-voet__binnen {
	max-width: var(--nlpa-breed);
	margin: 0 auto;
}

.nlpa-voet__kolommen {
	display: grid;
	grid-template-columns: minmax(250px, 1.45fr) repeat(4, minmax(120px, 0.75fr));
	gap: clamp(24px, 3vw, 44px);
}

.nlpa-voet__merk .nlpa-logo {
	color: var(--wp--preset--color--wit);
}

.nlpa-voet__merk .nlpa-logo span {
	color: var(--nlpa-tekst-op-donker-zacht);
}

.nlpa-voet__contact {
	margin: 16px 0 0;
	font-size: 14.5px;
	line-height: 1.75;
}

.nlpa-voet__contact > span {
	display: block;
}

.nlpa-voet__contact strong {
	color: var(--wp--preset--color--wit);
	font-weight: 600;
}

.nlpa-voet h2,
.nlpa-voet h3,
.nlpa-voet h4 {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--wit);
	margin-bottom: 14px;
}

.nlpa-voet ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nlpa-voet li {
	padding: 5px 0;
}

.nlpa-voet a {
	color: var(--nlpa-tekst-op-donker);
	text-decoration: none;
}

.nlpa-voet a:hover {
	color: var(--wp--preset--color--wit);
	text-decoration: underline;
}

.nlpa-voet__onder {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid rgba(253, 252, 253, 0.16);
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	font-size: 12.5px;
}

/* ------------------------------------------------------------------ diversen */

.nlpa-sectie {
	padding-block: var(--nlpa-lucht);
}

.nlpa-sectie--ruim {
	padding-block: var(--nlpa-lucht-ruim);
}

.nlpa-sectie--krap {
	padding-block: var(--nlpa-lucht-krap);
}

/* De sectiekop staat op brede schermen in twee kolommen: het bovenkopje in
   een smalle marge links, de titel daarnaast. Dat haalt de kop uit het
   midden van de kolom en geeft de pagina een linkerlijn om aan te hangen. */
/* Geen eigen maximumbreedte: de blokindeling geeft de sectiekop dezelfde
   breedte als de inhoud eronder, zodat beide op dezelfde lijn beginnen. De
   regellengte wordt binnen de kop geregeld. */
.nlpa-sectiekop {
	margin-bottom: clamp(20px, 2.4vw, 32px);
}

.nlpa-sectiekop > :not(.nlpa-bovenkopje) {
	max-width: 30ch;
}

.nlpa-sectiekop--midden {
	text-align: center;
}

.nlpa-sectiekop--midden > * {
	margin-inline: auto;
}

.nlpa-sectiekop p {
	color: var(--wp--preset--color--tekst-grijs);
	margin: 14px 0 0;
}

.nlpa-sectiekop > p:not(.nlpa-bovenkopje) {
	max-width: 56ch;
}

.nlpa-sectiekop p.nlpa-bovenkopje {
	color: var(--wp--preset--color--olijf-tekst);
	max-width: none;
}

@media (min-width: 1000px) {
	.nlpa-sectiekop--met-label {
		display: grid;
		grid-template-columns: 140px minmax(0, 1fr);
		column-gap: clamp(20px, 2.4vw, 34px);
		align-items: start;
	}
	.nlpa-sectiekop--met-label > .nlpa-bovenkopje {
		grid-column: 1;
		grid-row: 1;
		margin-top: 10px;
		padding-top: 12px;
		border-top: 2px solid var(--wp--preset--color--olijf);
	}
	.nlpa-sectiekop--met-label > *:not(.nlpa-bovenkopje) {
		grid-column: 2;
		max-width: 30ch;
	}
	.nlpa-sectiekop--met-label > p:not(.nlpa-bovenkopje) {
		max-width: 52ch;
	}
}

/* ------------------------------------------------------------- onthullen */

/* Onderdelen komen bij het scrollen omhoog in beeld. Alleen als de browser
   scroll-tijdlijnen kent en de bezoeker beweging niet heeft uitgezet; anders
   staat alles er gewoon. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.nlpa-uitgelicht,
		.nlpa-stap,
		.nlpa-belofte,
		.nlpa-module,
		.nlpa-cohort,
		.nlpa-video,
		.nlpa-groei li,
		.nlpa-feiten > div,
		.nlpa-locaties figure,
		.nlpa-citaat {
			animation: nlpa-opkomen 0.6s var(--nlpa-veer) both;
			animation-timeline: view();
			animation-range: entry 2% cover 20%;
		}
	}
}

@keyframes nlpa-opkomen {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 860px) {
	.nlpa-artikel {
		grid-template-columns: 1fr;
		gap: 26px;
	}
	.nlpa-inhoudsopgave {
		position: static;
	}
	.nlpa-sectie {
		padding-block: 52px;
	}
}

/* ------------------------------------------------------------------
   Homepage
   ------------------------------------------------------------------ */

/* De omslagblokken van de hero en de brochureband vullen de hele breedte,
   ook als ze in een begrensde kolom staan. */
.nlpa-hero.wp-block-cover,
.nlpa-band.wp-block-cover {
	padding: 0;
}

.nlpa-hero .wp-block-cover__inner-container,
.nlpa-band .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--nlpa-breed);
	margin-inline: auto;
	padding-inline: var(--nlpa-marge);
}

.nlpa-hero .wp-block-cover__inner-container {
	padding-block: 80px;
}


/* De omslagblokken krijgen hun ruimte van binnenuit, want de buitenrand is op
   nul gezet om de foto tot de zijkanten door te laten lopen. */
.nlpa-band .wp-block-cover__inner-container {
	padding-block: 74px;
}

.nlpa-band {
	color: var(--wp--preset--color--wit);
}

.nlpa-band :where(h1, h2, h3) {
	color: var(--wp--preset--color--wit);
}

.nlpa-band p {
	color: var(--nlpa-tekst-op-donker-zacht);
}

/* Portretten van de trainers */

.nlpa-portretten {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.nlpa-portretten figure {
	margin: 0;
	border-radius: var(--nlpa-radius-kaart);
	overflow: hidden;
	position: relative;
	background: var(--wp--preset--color--paneel);
}

.nlpa-portretten img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
}

.nlpa-portretten figcaption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 26px 16px 12px;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 14px;
	color: var(--wp--preset--color--wit);
	background: linear-gradient(180deg, rgba(64, 31, 78, 0), rgba(64, 31, 78, 0.9));
}

.nlpa-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 26px;
}

.nlpa-persoon {
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: var(--nlpa-radius-kaart);
	padding: 18px 20px;
}

.nlpa-persoon b {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 16px;
	color: var(--wp--preset--color--inkt);
	display: block;
}

.nlpa-persoon span {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	font-size: 12px;
	color: var(--wp--preset--color--tekst-grijs);
}

/* Ervaringen */

.nlpa-ervaringen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 22px;
}

.nlpa-ervaring p {
	font-size: 16px;
	margin-bottom: 16px;
}

/* Locaties */

.nlpa-locaties {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.nlpa-locaties figure {
	margin: 0;
	position: relative;
	border-radius: var(--nlpa-radius-kaart);
	overflow: hidden;
}

.nlpa-locaties img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

.nlpa-locaties figcaption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 40px 22px 20px;
	background: linear-gradient(180deg, rgba(64, 31, 78, 0), rgba(64, 31, 78, 0.92));
	color: var(--wp--preset--color--wit);
}

.nlpa-locaties figcaption b {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 800;
	font-size: 19px;
	display: block;
}

.nlpa-locaties figcaption span {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	font-size: 13px;
	color: var(--nlpa-tekst-op-donker-zacht);
}

/* Kennisbankblok op de homepage */

.nlpa-kbzoek .wp-block-search__inside-wrapper {
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: var(--nlpa-radius-knop);
	padding: 6px 6px 6px 22px;
}

.nlpa-kbzoek .wp-block-search__input {
	border: 0;
	background: transparent;
	font-family: var(--wp--preset--font-family--tekst);
	font-size: 16px;
	padding: 11px 0;
}

.nlpa-kbtellers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 20px;
}

.nlpa-kbtel {
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: var(--nlpa-radius-kaart);
	padding: 18px;
	text-align: center;
	text-decoration: none;
	display: block;
}

.nlpa-kbtel:hover {
	border-color: var(--wp--preset--color--paars);
}

.nlpa-kbtel b {
	display: block;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 800;
	font-size: 24px;
	color: var(--wp--preset--color--paars);
}

.nlpa-kbtel span {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tekst-grijs);
}

/* Brochureformulier */

.nlpa-formulier {
	background: var(--wp--preset--color--wit);
	border-radius: var(--nlpa-radius-kaart);
	padding: 26px;
}

.nlpa-formulier label {
	display: block;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	font-size: 12.5px;
	color: var(--wp--preset--color--tekst-grijs);
	margin-bottom: 5px;
}

.nlpa-formulier input {
	width: 100%;
	min-height: 44px;
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: 4px;
	padding: 11px 14px;
	font-family: var(--wp--preset--font-family--tekst);
	font-size: 15px;
	margin-bottom: 14px;
	color: var(--wp--preset--color--tekst);
}

.nlpa-formulier button {
	width: 100%;
	border: 0;
	cursor: pointer;
	background: var(--nlpa-olijf-knop);
	color: var(--wp--preset--color--wit);
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 15px;
	padding: 14px 30px;
	border-radius: var(--nlpa-radius-knop);
}

.nlpa-formulier button:hover {
	background: var(--nlpa-olijf-knop-hover);
}

/* Wint van de lichte tekstkleur van de band eromheen. */
.nlpa-formulier .nlpa-formulier__klein {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	font-size: 11.5px;
	color: var(--wp--preset--color--tekst-grijs);
	margin: 12px 0 0;
	text-align: center;
}

@media (max-width: 900px) {
	.nlpa-locaties,
	.nlpa-portretten,
	.nlpa-duo {
		grid-template-columns: 1fr;
	}
	.nlpa-kbtellers {
		grid-template-columns: repeat(3, 1fr);
	}
	.nlpa-band {
		padding-block: 52px;
	}
}

@media (max-width: 1100px) {
	.nlpa-voet__kolommen {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.nlpa-voet__kolommen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Op een smal scherm staat de tekst onder elkaar over de volle breedte.
	   Een verloop van boven naar beneden houdt hem dan leesbaar.
	   De !important is nodig omdat het omslagblok het verloop inline meegeeft. */
	.nlpa-hero .wp-block-cover__background {
		background: linear-gradient(180deg, rgba(64, 31, 78, 0.62) 0%, rgba(119, 40, 124, 0.95) 55%) !important;
	}

	.nlpa-band .wp-block-cover__background {
		background: linear-gradient(180deg, rgba(64, 31, 78, 0.95) 0%, rgba(64, 31, 78, 0.9) 100%) !important;
	}

	.nlpa-hero .wp-block-cover__inner-container {
		padding-block: 56px;
	}
}

@media (max-width: 560px) {
	.nlpa-voet__kolommen {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}


/* ------------------------------------------------------------------
   Toegankelijkheid: tikdoelen
   WCAG 2.2 vraagt 44 bij 44 pixels. De links in de kaarten en de
   begrippenlijst zaten daar met 18 tot 25 pixels ruim onder.
   ------------------------------------------------------------------ */

.nlpa-kaart__link,
.nlpa-kaart__titel a,
.nlpa-term,
.nlpa-kbtel,
.nlpa-inhoudsopgave a,
.nlpa-kruimels a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.nlpa-kaart__titel a {
	display: block;
	padding-block: 8px;
}

.nlpa-term {
	display: flex;
}

.nlpa-kbtel {
	display: block;
	min-height: 44px;
}

/* Het kruimelpad is lopende tekst, daar zou 44 pixels de regel uit elkaar
   trekken. De links staan ver genoeg uit elkaar, dus alleen wat lucht. */
.nlpa-kruimels a {
	display: inline;
	min-height: 0;
	padding-block: 6px;
}


/* De links onderaan waren 18 pixels hoog. WCAG 2.2 AA vraagt 24 bij 24 voor een
   tikdoel; met deze ruimte eromheen zitten ze op 30 en blijft de kolom leesbaar.
   De 44 pixels uit de AAA-regel houden we aan voor knoppen, menu en kaarten,
   niet voor dichte tekstlijsten, want die zouden dan uit elkaar vallen. */
.nlpa-voet a {
	display: inline-block;
	padding-block: 6px;
}

.nlpa-voet li {
	padding: 1px 0;
}