/*
 * dreamglow/megamenu — balk en klikpaneel vanaf 1280 px, menuknop en lade
 * daaronder (spec 1b, sectie 3). Mobile first.
 *
 * Het venster en de dim zijn verborgen (hidden) tot @dreamglow/venster ze
 * opent. Elke regel die ze zichtbaar maakt, schrijft daarom :not([hidden]).
 * data-dg-stand="sluitend" is de stand tijdens het sluiten: wat uitschuift,
 * doet dat daar, en daarna zet het script hidden.
 *
 * De lijn van de hovertaal staat hier niet: de klasse dg-lijn uit
 * blocks/header/style.css tekent hem, op het item in de balk en op het label
 * in de panelen (besluit van de controller, afwijkingen-1b.md).
 *
 * Het blad van de header komt in de pagina ná dit blad: WordPress zet het blad
 * van een blok pas in de rij als zijn binnenblokken klaar zijn. Een regel die
 * daar iets overschrijft, weegt hier dus zwaarder, en zegt waarom.
 */

/* ── Balk en menuknop ── */

.dg-megamenu {
	display: flex;
	align-items: center;
}

.dg-megamenu__balk {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dg-megamenu__menulabel {
	display: none;
}

/*
 * De menuknop is ook een dg-icoonknop (48 x 48, het zandvlak bij hover). Die
 * regel in het blad van de header weegt 0,2,0 en zet display en padding; wat
 * de menuknop daarop wijzigt, heeft daarom drie klassen. Het label volgt de
 * letter van het menu (kapitalen, 2 px): een knop zet die anders zelf terug.
 */
.dg-megamenu .dg-megamenu__menuknop.dg-icoonknop {
	letter-spacing: inherit;
	text-transform: inherit;
}

@media (width > 639px) {
	.dg-megamenu .dg-megamenu__menuknop.dg-icoonknop {
		padding-inline: var(--wp--preset--spacing--12);
	}

	.dg-megamenu__menulabel {
		display: inline;
	}
}

/* ── Rijen, knoppen en tegels: beide vormen ── */

.dg-megamenu__rijen {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dg-megamenu__rij {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--16);
	inline-size: 100%;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: start;
	text-transform: inherit;
	text-decoration: none;
	cursor: pointer;
}

.dg-megamenu .dg-icoon--chevron-rechts,
.dg-megamenu .dg-icoon--terug {
	flex: none;
	inline-size: var(--wp--preset--spacing--16);
	block-size: var(--wp--preset--spacing--16);
}

.dg-megamenu__sluit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.dg-megamenu__sluit .dg-icoon {
	inline-size: var(--wp--preset--spacing--24);
	block-size: var(--wp--preset--spacing--24);
}

.dg-megamenu__alles {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	margin-block-end: var(--wp--preset--spacing--24);
	color: var(--wp--preset--color--kop);
	text-decoration: none;
}

/*
 * De tegels: core/query met post-template, uitgelicht beeld en titel (besluit
 * van de controller, fixronde 1 van taak 7), in twee kolommen. De lijst van
 * core krijgt de layout "flow", met een marge tussen de items (0,1,0); deze
 * selectors wegen meer.
 */
.dg-megamenu .dg-megamenu__tegels .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--24) var(--wp--preset--spacing--16);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dg-megamenu .dg-megamenu__tegels .wp-block-post-template > .wp-block-post {
	position: relative;
	margin: 0;
}

/* Het fotovlak: beige (jade), zoals de productfoto's (13-10-2026; was crème met multiply). */
.dg-megamenu .dg-megamenu__tegels .wp-block-post-featured-image {
	margin: 0;
	background: var(--wp--preset--color--jade);
}

/* 4:5 en contain. De blokinstellingen zetten hetzelfde inline; dit geldt ook zonder die. */
.dg-megamenu .dg-megamenu__tegels .wp-block-post-featured-image img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: var(--wp--preset--aspect-ratio--product);
	object-fit: contain;
}

/* De naam: de rol Productnaam, smal (20/28), op elke breedte (plan 1b, vraag 8). */
.dg-megamenu__tegels .wp-block-post-title {
	margin: var(--wp--preset--spacing--8) 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--custom--rol--productnaam--smal);
	font-weight: 500;
	line-height: var(--wp--custom--leading--xl);
	letter-spacing: var(--wp--custom--spatie--krap);
	text-transform: none;
}

/* Eén link per tegel, de naam. Zijn ::after legt het klikvlak over de hele tegel. */
.dg-megamenu__tegels .wp-block-post-title a {
	color: var(--wp--preset--color--kop);
	text-decoration: none;
}

.dg-megamenu__tegels .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* De promotegel: als eerste tegel over de volle breedte van het raster (twee
   kolommen), in 16:9, met de rij van 24 eronder. Hij staat vóór de collectie,
   niet erin: zo hoeft het raster van Woo niet te weten dat hij bestaat. */
.dg-megamenu__tegels .dg-promotegel {
	display: block;
	margin-block-end: var(--wp--preset--spacing--24);
	color: var(--wp--preset--color--kop);
	text-decoration: none;
}

.dg-megamenu__tegels .dg-promotegel__beeld {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: var(--wp--preset--aspect-ratio--video);
	object-fit: cover;
}

/* De tekst als de naam van een producttegel: de rol Productnaam, smal. */
.dg-megamenu__tegels .dg-promotegel__tekst {
	display: block;
	margin-block-start: var(--wp--preset--spacing--8);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--custom--rol--productnaam--smal);
	font-weight: 500;
	line-height: var(--wp--custom--leading--xl);
	letter-spacing: var(--wp--custom--spatie--krap);
	text-transform: none;
}

/* lade:begin — de lade, onder 1280 px (spec 1b, sectie 3, "Mobiel en tablet"). */

.dg-megamenu__dim:not([hidden]) {
	position: fixed;
	z-index: 1;
	inset: 0;
	background: var(--wp--custom--dim);
	transition: opacity var(--wp--custom--duur--standaard) var(--wp--custom--curve);
}

@starting-style {
	.dg-megamenu__dim:not([hidden]) {
		opacity: 0;
	}
}

.dg-megamenu__dim[data-dg-stand="sluitend"] {
	opacity: 0;
}

/*
 * Onder 640 schermvullend; van 640 tot 1279 430 breed over de volle hoogte.
 * Voor wie ingelogd is, begint de lade onder de beheerbalk van WordPress, die
 * erboven ligt (--dg-venster-beheerbalk, van @dreamglow/venster; code review
 * V32).
 */
.dg-megamenu__venster:not([hidden]) {
	position: fixed;
	z-index: 2;
	inset: var(--dg-venster-beheerbalk, 0px) auto 0 0;
	display: flex;
	flex-direction: column;
	inline-size: 100vw;
	block-size: calc(100dvh - var(--dg-venster-beheerbalk, 0px));
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--kop);
	transition: transform var(--wp--custom--duur--standaard) var(--wp--custom--curve);
}

@starting-style {
	.dg-megamenu__venster:not([hidden]) {
		transform: translateX(-100%);
	}
}

.dg-megamenu__venster[data-dg-stand="sluitend"] {
	transform: translateX(-100%);
}

@media (width > 639px) {
	.dg-megamenu__venster:not([hidden]) {
		inline-size: var(--wp--custom--menu--paneel);
	}
}

.dg-megamenu__niveau1 {
	flex: 1;
	overflow-y: auto;
}

/* De kop: 56 hoog, gelijk aan rij 2 van de header op deze breedte, en net als
   rij 2 met de lijn binnen die 56 (border-box). Zonder was hij 57 (taak 9). */
.dg-megamenu__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	block-size: var(--wp--custom--header--rij-2--basis);
	box-sizing: border-box;
	padding-inline-start: var(--dg-zijmarge);
	border-block-end: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--line);
}

.dg-megamenu__titel {
	font-size: var(--wp--preset--font-size--s);
	line-height: var(--wp--custom--leading--s);
	letter-spacing: var(--wp--custom--spatie--groot);
	text-transform: uppercase;
}

.dg-megamenu__sluit {
	inline-size: var(--wp--custom--header--rij-2--basis);
	block-size: var(--wp--custom--header--rij-2--basis);
}

/* Rijen van 48: de rol Hoofdnavigatie (Jost 14/24, kapitalen, 2 px) met 12
   erboven en eronder. De letter erft het menu van zijn blokinstellingen. */
.dg-megamenu__rijen .dg-megamenu__rij {
	min-block-size: var(--wp--preset--spacing--48);
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--12) var(--dg-zijmarge);
	line-height: var(--wp--custom--leading--s);
}

/* Onderaan het servicemenu en de taalkeuze: Jost 16/24, 40 per regel (taak 9). */
.dg-megamenu__voet {
	margin-block-start: var(--wp--preset--spacing--16);
	padding: var(--wp--preset--spacing--16) var(--dg-zijmarge);
	border-block-start: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--m);
	line-height: var(--wp--custom--leading--m);
	letter-spacing: normal;
	text-transform: none;
}

.dg-megamenu__voet ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dg-megamenu__voet a {
	display: flex;
	align-items: center;
	min-block-size: var(--dg-raakvlak);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

/* Niveau 2: over de volle breedte van de lade, komt op in 300 ms. */
.dg-megamenu__tegels:not([hidden]) {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	padding: 0 var(--dg-zijmarge) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
	transition:
		opacity var(--wp--custom--duur--standaard) var(--wp--custom--curve),
		transform var(--wp--custom--duur--standaard) var(--wp--custom--curve);
}

@starting-style {
	.dg-megamenu__tegels:not([hidden]) {
		opacity: 0;
		transform: translateX(var(--wp--preset--spacing--16));
	}
}

.dg-megamenu__terug {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	inline-size: 100%;
	block-size: var(--wp--preset--spacing--48);
	margin-block-end: var(--wp--preset--spacing--16);
	padding: 0;
	border: 0;
	border-block-end: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--line);
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

/* Tegels in de lade: 8 ertussen onder 640, 16 vanaf 640. */
.dg-megamenu .dg-megamenu__tegels .wp-block-post-template {
	column-gap: var(--wp--preset--spacing--8);
}

@media (width > 639px) {
	.dg-megamenu .dg-megamenu__tegels .wp-block-post-template {
		column-gap: var(--wp--preset--spacing--16);
	}
}

/* lade:einde */

/* ── Bureaublad, vanaf 1280: de balk en het klikpaneel ── */

@media (width > 1279px) {
	.dg-megamenu {
		align-self: stretch;
	}

	.dg-megamenu .dg-megamenu__menuknop.dg-icoonknop {
		display: none;
	}

	.dg-megamenu__balk {
		display: flex;
		align-self: stretch;
	}

	/* Het item loopt tot de onderrand van rij 2: daar ligt zijn lijn (dg-lijn),
	   als tabindicator over het hele item. */
	.dg-megamenu__knop,
	.dg-megamenu__link {
		display: flex;
		align-items: center;
		block-size: 100%;
		padding: 0 var(--wp--preset--spacing--16);
		border: 0;
		background: none;
		color: inherit;
		font: inherit;
		letter-spacing: inherit;
		text-transform: inherit;
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
	}

	/* De link houdt bij aanwijzen zijn kleur, zoals de knoppen: alleen de lijn
	   verandert. Hij erfde de hoverkleur van links uit theme.json
	   (vergelijking met de Rituals-analyse, 13-10-2026, N-34). */
	.dg-megamenu__link:hover {
		color: inherit;
	}

	/* De dim begint onder de header; de header blijft helder. */
	.dg-megamenu__dim:not([hidden]) {
		inset: var(--dg-venster-top) 0 0;
	}

	/* Paneel 1: links op de containerrand, onder de header tot de onderrand;
	   het crème vlak vult de marge links. Het verschijnt en verdwijnt direct. */
	.dg-megamenu__venster:not([hidden]) {
		inset: var(--dg-venster-top) auto 0 0;
		display: block;
		inline-size: calc(var(--dg-gutter) + var(--wp--custom--menu--paneel));
		block-size: auto;
		overflow: visible;
		box-sizing: border-box;
		padding-inline-start: var(--dg-gutter);
		transition: none;
	}

	@starting-style {
		.dg-megamenu__venster:not([hidden]) {
			transform: none;
		}
	}

	.dg-megamenu__venster[data-dg-stand="sluitend"] {
		transform: none;
	}

	.dg-megamenu__niveau1 {
		block-size: 100%;
		overflow-y: auto;
		box-sizing: border-box;
		padding: var(--wp--preset--spacing--64) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) 0;
	}

	/* Kop: alleen de ronde sluitknop van 40, met de lijn eronder. */
	.dg-megamenu__kop {
		justify-content: flex-start;
		block-size: auto;
		padding-inline-start: 0;
	}

	.dg-megamenu__titel,
	.dg-megamenu__voet,
	.dg-megamenu__terug {
		display: none;
	}

	.dg-megamenu__sluit {
		inline-size: var(--dg-raakvlak);
		block-size: var(--dg-raakvlak);
		border-radius: var(--wp--custom--radius--rond);
		transition: background-color var(--wp--custom--duur--standaard) var(--wp--custom--curve);
	}

	/* Rijen: Cormorant 24/32 met 12 erboven en eronder, dus 56 hoog. */
	.dg-megamenu__rijen .dg-megamenu__rij {
		min-block-size: 0;
		padding: var(--wp--preset--spacing--12) 0;
		font-family: var(--wp--preset--font-family--display);
		font-size: var(--wp--preset--font-size--2-xl);
		font-weight: 500;
		line-height: var(--wp--custom--leading--2-xl);
		letter-spacing: var(--wp--custom--spatie--krap);
		text-transform: none;
	}

	/* Paneel 2: naast paneel 1, op paper; schuift in met 16 px en doorzichtigheid. */
	.dg-megamenu__tegels:not([hidden]) {
		inset: 0 auto 0 100%;
		inline-size: var(--wp--custom--menu--tegelpaneel);
		box-sizing: border-box;
		padding: var(--wp--preset--spacing--64) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
		background: var(--wp--preset--color--paper);
	}

	@starting-style {
		.dg-megamenu__tegels:not([hidden]) {
			opacity: 0;
			transform: translateX(calc(-1 * var(--wp--preset--spacing--16)));
		}
	}
}

@media (width > 1279px) and (hover: hover) {
	.dg-megamenu__sluit:hover {
		background-color: var(--wp--preset--color--grain-soft);
	}
}

/* Dezelfde selectors als de regels die de overgang zetten: met :not([hidden])
   wegen die 0,2,0, en een losse klasse (0,1,0) verloor van ze. */
@media (prefers-reduced-motion: reduce) {
	.dg-megamenu__dim:not([hidden]),
	.dg-megamenu__venster:not([hidden]),
	.dg-megamenu__tegels:not([hidden]),
	.dg-megamenu__sluit {
		transition: none;
	}
}