/*
 * De lichte paginakop (paginakop.php). Live sinds 7 oktober 2026.
 *
 * Geen balk: kruimelpad en titel staan links op de mintgrond van de pagina,
 * op de lijn van de inhoud eronder (.ct-container van Blocksy). De header is
 * op deze schermen niet doorzichtig, zie paginakop.php.
 */

.nrd-kop {
	--nrd-kop-petrol: var(--theme-palette-color-10, #31545b);
	--nrd-kop-rustig: #557277;
	--nrd-kop-salie: var(--theme-palette-color-1, #749b8d);

	position: relative;
	z-index: 2;
	/* Het dier op een productpagina (assets/mascotte.css) mag geen horizontale
	   scroll geven; naar beneden mag het wel over de rand. */
	overflow-x: clip;
	padding-top: clamp(28px, 3vw, 48px);
	color: var(--nrd-kop-petrol);
}

.nrd-kop__binnen {
	position: relative;
}

/* Kruimelpad: klein, rustig, de huidige pagina iets donkerder. */
.nrd-kop .nrd-kop__kruimel {
	margin: 0 0 12px;
	color: var(--nrd-kop-rustig);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
}

.nrd-kop .nrd-kop__kruimel a {
	color: inherit;
	text-decoration: none;
}

.nrd-kop .nrd-kop__kruimel .last-item {
	color: var(--nrd-kop-petrol);
}

@media (hover: hover) {
	.nrd-kop .nrd-kop__kruimel a:hover {
		color: var(--nrd-kop-petrol);
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}

.nrd-kop__titel {
	max-width: 22ch;
	margin: 0;
	color: var(--nrd-kop-petrol);
	font-size: clamp(36px, 1.6rem + 2.4vw, 64px);
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.nrd-kop__meta {
	margin: 14px 0 0;
	font-size: 15px;
	font-weight: 600;
}

.nrd-kop__meta a {
	color: var(--nrd-kop-petrol);
	text-decoration: underline;
	text-decoration-color: var(--nrd-kop-salie);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.nrd-kop__tekst {
	max-width: 62ch;
	margin-top: 16px;
	color: var(--theme-palette-color-2, #121723);
	font-size: 17px;
	line-height: 1.6;
}

.nrd-kop__tekst p {
	margin: 0;
}

.nrd-kop ::selection {
	background: rgba(116, 155, 141, 0.3);
	color: var(--theme-palette-color-2, #121723);
}

/* Productpagina: alleen het kruimelpad, de h1 staat in de samenvatting. ---- */

.nrd-kop--product .nrd-kop__kruimel {
	margin: 0;
}

@media (max-width: 689.98px) {
	.nrd-kop {
		padding-top: 24px;
	}

	.nrd-kop .nrd-kop__kruimel {
		font-size: 13px;
	}
}

/* Compact (Mijn account, live sinds 27 oktober 2026): alleen
   het kruimelpad, met de maten van een productpagina uit productfoto-maat.css.
   Pas ze samen aan. De h1 staat er nog, voor een schermlezer. ------------- */

.nrd-kop--compact {
	padding-top: 20px;
}

.nrd-kop--compact .nrd-kop__kruimel {
	margin: 0;
}

.nrd-kop--compact + .ct-container-full {
	padding-top: 24px;
}

@media (min-width: 1000px) {
	.nrd-kop--compact {
		padding-top: 32px;
	}
}

@media (max-width: 689.98px) {
	.nrd-kop--compact {
		padding-top: 20px;
	}

	.nrd-kop--compact + .ct-container-full {
		padding-top: 16px;
	}
}