/*
 * dreamglow/header — de header die plaatsmaakt (spec 1b, sectie 1).
 *
 * De omhulling van het sjabloondeel (<header>) plakt, met top gelijk aan min de
 * hoogte van rij 1: rij 1 scrolt vanzelf weg, rij 2 blijft staan, en de pagina
 * verspringt niet. CSS vindt die omhulling met :has(), omdat dit blok erin
 * staat. view.js zet alleen de toestand (data-dg-header op <html>).
 *
 * Geen hoogteverandering en geen marge tijdens het scrollen: zo ontstaat er geen
 * lus met scroll anchoring (de fout van het oude thema) en geen layoutverschuiving.
 */

/*
 * De afspraak met 3, 4 en 5 (spec 1b, sectie 7; ontwerpsysteem, sectie 9).
 * De hoogte van rij 2 kiest de schakelaar --dg-header-rij-2 in style.css van
 * het thema: 56, en 64 vanaf 1280 (besluit 1 van de controller). Dit blok
 * rekent daarmee en zet zelf geen breekpunt.
 */
:root {
	--dg-header-rij: var(--dg-header-rij-2);
	--dg-header-hoogte: calc(var(--wp--custom--header--rij-1) + var(--dg-header-rij));
	--dg-header-verschuiving: 0px;
	/*
	 * De beheerbalk van WordPress, voor wie ingelogd is (fixronde 1 van taak 4).
	 * WordPress geeft zijn verschuiving (--wp-admin--admin-bar--position-offset)
	 * alleen aan .is-position-sticky, en die klasse draagt deze header niet.
	 * Tot en met 600 scrolt de balk mee, vanaf 601 staat hij vast. Deze header
	 * telt hem mee vanaf 640, want de ontwerpbreekpunten zijn 640 en 1280:
	 * tussen 601 en 639 is 0 een benadering.
	 */
	--dg-beheerbalk: 0px;
	/* Geen focus volledig onder de header, ook niet als hij weg is (WCAG 2.4.11).
	   Een meespringende balk (de werkbalk van 4) zet --dg-meespringende-balken.
	   Dit vervangt de regel van admin-bar.css op html, en telt de balk mee. */
	scroll-padding-top: calc(var(--dg-beheerbalk, 0px) + var(--dg-header-rij) + var(--dg-meespringende-balken, 0px));
}

/*
 * Vanaf 640, één mediaregel voor de hele header (1b taak 15): de beheerbalk
 * telt mee, en rij 2 zet het logo in het midden.
 */
@media (width > 639px) {
	:root {
		--dg-beheerbalk: var(--wp-admin--admin-bar--height, 0px);
	}

	/* Van 640 tot 1279 staat het logo gecentreerd; vanaf 1280 weer links (rij 2). */
	.dg-header .dg-header__rij-2-binnen > .wp-block-site-logo {
		position: absolute;
		inset-inline-start: 50%;
		transform: translateX(-50%);
	}
}

/* Met een open venster staat de header er (zie hieronder); dan schuift een
   meespringende balk ook niet mee omhoog. */
html[data-dg-header="weg"]:not([data-dg-venster]) {
	--dg-header-verschuiving: var(--dg-header-rij);
}

/* Plakken en wegschuiven. */
header.wp-block-template-part:has(> .wp-block-dreamglow-header) {
	position: sticky;
	top: calc(var(--dg-beheerbalk) - var(--wp--custom--header--rij-1));
	z-index: 900;
	transition: transform var(--wp--custom--duur--standaard) var(--wp--custom--curve);
}

/*
 * Weg: de header schuift de hoogte van rij 2 omhoog, zijn hele hoogte min rij
 * 1. Meer hoeft niet: hij plakt, en dan ligt rij 1 al boven het venster (of
 * achter de beheerbalk); zo komt zijn onderkant op de rand. Dat is precies
 * --dg-header-verschuiving, waarmee een meespringende balk (de werkbalk van
 * 4/7) meeschuift, in dezelfde 300 ms op dezelfde curve: header en balk
 * bewegen samen. Met translateY(-100%) legde de onderkant de hele header af
 * (88 of 96) en de balk alleen rij 2: tijdens de overgang een kier tot 19 en
 * 21 px (taak 14).
 *
 * In procenten, en niet met de variabele zelf (fixronde 1 van taak 14). Over
 * 1280 heen wordt rij 2 56 of 64. Een lengte in de transform zou dan zelf een
 * overgang starten terwijl de header weg is: 300 ms lang lag hij tot 8 px over
 * de werkbalk. Een percentage blijft dezelfde berekende waarde; alleen de
 * hoogte verandert. Dit rekent erop dat de header rij 1 plus rij 2 is
 * (KopTest.test_de_rijen_hebben_hun_hoogte). Plakt de header nog niet, dan
 * schuift hij niet weg (view.js).
 */
html[data-dg-header="weg"]:not([data-dg-venster]) header.wp-block-template-part:has(> .wp-block-dreamglow-header) {
	transform: translateY(calc(-100% + var(--wp--custom--header--rij-1)));
}

/* Een open venster staat in de header en is position: fixed. Een transform
   maakt van de header zijn bevattende blok; daarom meteen terug naar none. */
html[data-dg-venster] header.wp-block-template-part:has(> .wp-block-dreamglow-header) {
	transition: none;
}

/*
 * Toetsenbordfocus in de header (taak 4, gemeten op 390 en 1440).
 *
 * De header plakt, en ligt in de strook die scroll-padding-top vrijhoudt. Een
 * element daarin vindt de browser "niet in beeld": bij elke Tab in de header
 * scrolde hij een half scherm omhoog, zonder dat het element verschoof (3000,
 * 2550, 2100). Ook de focus die een venster teruggeeft aan zijn knop, deed
 * dat. Een negatieve scroll-margin haalt die strook eraf. Niet in een venster:
 * daar moet de browser zijn eigen lijst wel scrollen.
 *
 * De strook is ook de meespringende balken hoog, zoals de werkbalk van 4/7 op
 * de winkel en een categorie: scroll-padding-top telt ze mee. Zonder hen in de
 * marge scrolde elke Shift+Tab in de header daar nog 247 tot 394 px omhoog
 * (code review V2).
 */
.dg-header :is(.dg-header__rij-1, .dg-header__rij-2) :not([role="dialog"], [role="dialog"] *) {
	scroll-margin-top: calc(-1 * (var(--dg-header-hoogte) + var(--dg-meespringende-balken, 0px)));
}

/* Komt de toetsenbordfocus in de header terwijl hij weg is, dan staat hij er
   meteen. Tijdens de overgang van 300 ms lag het element nog boven het venster,
   en scrolde de browser alsnog een half scherm omhoog (3000 naar 2502). */
header.wp-block-template-part:has(> .wp-block-dreamglow-header :focus-visible) {
	transition: none;
}

/* Weggescrold ligt rij 1 boven het venster. Staat de toetsenbordfocus erin,
   dan plakt de header met rij 1 erbij; anders lag de focus buiten beeld. */
header.wp-block-template-part:has(> .wp-block-dreamglow-header .dg-header__rij-1 :focus-visible) {
	top: var(--dg-beheerbalk);
}

/* Rij 1: beloftes en service, op het zandvlak. */
.dg-header .dg-header__rij-1 {
	block-size: var(--wp--custom--header--rij-1);
}

/*
 * In de Site Editor groeit rij 1 mee: de USP-balk zet daar zijn berichten onder
 * elkaar (blocks/usp-balk/editor.js), en in een rij van 32 liepen ze over rij 2
 * (1b taak 5, fixronde 1). .editor-styles-wrapper bestaat alleen in de editor;
 * op de site blijft rij 1 32 hoog.
 */
.editor-styles-wrapper .dg-header .dg-header__rij-1 {
	block-size: auto;
	min-block-size: var(--wp--custom--header--rij-1);
}

.dg-header .dg-header__rij-1-binnen {
	block-size: 100%;
	align-items: center;
	justify-content: center;
	font-size: var(--wp--preset--font-size--s);
	line-height: var(--wp--custom--leading--s);
}

.dg-header .dg-header__service {
	display: none;
}

@media (width > 1279px) {
	.dg-header .dg-header__rij-1-binnen {
		justify-content: space-between;
	}

	.dg-header .dg-header__service {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--24);
	}
}

/* Rij 2: logo, menu, zoeken, account en winkelwagen, met de lijn op elke breedte. */
.dg-header .dg-header__rij-2 {
	block-size: var(--dg-header-rij-2);
	box-sizing: border-box;
	border-block-end: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--line);
}

.dg-header .dg-header__rij-2-binnen {
	position: relative;
	block-size: 100%;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
}

/* Onder 1280 staat de menuknop links van het logo. */
.dg-header .dg-header__rij-2-binnen > .wp-block-dreamglow-megamenu {
	order: -1;
}

/* Zoeken, account en winkelwagen staan rechts, op elke breedte. */
.dg-header .dg-header__rij-2-binnen > .wp-block-dreamglow-zoeken {
	margin-inline-start: auto;
}

/* Van 640 tot 1279 staat het logo gecentreerd: in de mediaregel voor 640,
   bovenaan. Vanaf 1280 staat het weer links. */
@media (width > 1279px) {
	.dg-header .dg-header__rij-2-binnen {
		gap: var(--wp--preset--spacing--32);
	}

	.dg-header .dg-header__rij-2-binnen > .wp-block-dreamglow-megamenu {
		order: 0;
		align-self: stretch;
	}

	.dg-header .dg-header__rij-2-binnen > .wp-block-site-logo {
		position: static;
		transform: none;
	}
}

/* Iconknoppen: 24 in een vlak van 48; bij hover het zandvlak van rij 1. */
.dg-header .dg-icoonknop,
.dg-header .wc-block-customer-account__link,
.dg-header .wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--8);
	min-inline-size: var(--wp--preset--spacing--48);
	block-size: var(--wp--preset--spacing--48);
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pil);
	background: transparent;
	color: var(--wp--preset--color--kop);
	font: inherit;
	cursor: pointer;
	transition: background-color var(--wp--custom--duur--standaard) var(--wp--custom--curve);
}

.dg-header .dg-icoonknop .dg-icoon,
.dg-header .wc-block-customer-account__link svg,
.dg-header .wc-block-mini-cart__icon {
	inline-size: var(--wp--preset--spacing--24);
	block-size: var(--wp--preset--spacing--24);
}

@media (hover: hover) {
	.dg-header .dg-icoonknop:hover,
	.dg-header .wc-block-customer-account__link:hover,
	.dg-header .wc-block-mini-cart__button:hover {
		background-color: var(--wp--preset--color--grain-soft);
	}
}

@media (prefers-reduced-motion: reduce) {
	header.wp-block-template-part:has(> .wp-block-dreamglow-header),
	.dg-header .dg-icoonknop,
	.dg-header .wc-block-customer-account__link,
	.dg-header .wc-block-mini-cart__button {
		transition: none;
	}
}

/*
 * De lijn van de hovertaal (spec 1b, sectie 8), één keer voor de hele header:
 * 1 px in ink, die van links inschuift (scaleX 0 naar 1) in het tempo van de
 * duur-tokens. Zet de klasse dg-lijn op het label in een link of knop, of op de
 * link of knop zelf. De lijn staat aan bij hover (alleen onder (hover: hover)),
 * bij toetsenbordfocus, bij een open item (aria-expanded) en bij de huidige
 * pagina of taal (aria-current). Die laatste houdt hem dus altijd: zo verschilt
 * ze niet alleen in kleur (WCAG 1.4.1). De focusring blijft; de lijn vervangt
 * hem niet.
 *
 * Hier, en niet in één blok: de taalkeuze gebruikt hem als eerste (1b taak 6,
 * fixronde 1), en het megamenu, zijn panelen en de lade staan ook in de header.
 */
.dg-header .dg-lijn {
	position: relative;
}

.dg-header .dg-lijn::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: var(--wp--custom--lijn--dun);
	background: var(--wp--preset--color--ink);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--wp--custom--duur--standaard) var(--wp--custom--curve);
}

.dg-header :is(a, button):is([aria-current], [aria-expanded="true"], :focus-visible) > .dg-lijn::after,
.dg-header :is(a, button).dg-lijn:is([aria-current], [aria-expanded="true"], :focus-visible)::after {
	transform: scaleX(1);
}

@media (hover: hover) {
	.dg-header :is(a, button):hover > .dg-lijn::after,
	.dg-header :is(a, button).dg-lijn:hover::after {
		transform: scaleX(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dg-header .dg-lijn::after {
		transition: none;
	}
}

/*
 * Site-breed, hier omdat de header op elke pagina staat (het thema-stylesheet
 * houdt alleen breedtestanden, SchakelaarTest). Kleurwissels bewegen: elke
 * overgang duurt 300 ms op de ene curve (spec 1b, "Beweging"). Knoppen en
 * links wisselden hun kleur zonder overgang (vergelijking met de
 * Rituals-analyse, 13-10-2026, C-46 en N-16). Met :where() weegt de regel
 * niets: een blok dat zelf een transition zet (een lade, de koopbalk, de
 * header), houdt de zijne. Alleen kleuren: maat en positie bewegen alleen waar
 * een blok dat zelf vraagt.
 */
:where(a, button, .wp-element-button, .wp-block-button__link, input[type="submit"], select) {
	transition:
		color var(--wp--custom--duur--standaard) var(--wp--custom--curve),
		background-color var(--wp--custom--duur--standaard) var(--wp--custom--curve),
		border-color var(--wp--custom--duur--standaard) var(--wp--custom--curve),
		text-decoration-color var(--wp--custom--duur--standaard) var(--wp--custom--curve);
}

/* Koppen breken in regels van gelijke lengte (13-10-2026, T-61). Hier en
   niet in het thema: style.css wijst geen koppen aan (KopselectorTest). */
:where(h1, h2, h3) {
	text-wrap: balance;
}

/* De servicelink in rij 1 had geen hoverstaat (N-06): de onderstreping van
   de USP-balk. */
@media (hover: hover) {
	.dg-header__service a:hover {
		text-decoration: underline;
	}
}

@media (prefers-reduced-motion: reduce) {
	:where(a, button, .wp-element-button, .wp-block-button__link, input[type="submit"], select) {
		transition: none;
	}
}