/*
 * De footergroep (spec 2-3, "De footer"; ontwerpsysteem §4, r. 357): vanaf
 * 1280 een kolom met kop en lijst, precies zoals 1a hem zette; daaronder
 * staan de groepen onder elkaar, met een lijn ertussen, en maakt view.js er
 * een accordeon van. --dg-footer-als zegt view.js welke van de twee het is:
 * een script kent geen breakpoints (ontwerpsysteem §8; zoals --dg-filters-als
 * in blocks/filterpaneel/style.css).
 *
 * Zonder JavaScript is er geen knop: de kop is gewone tekst (het label), en
 * de lijst staat open. .is-accordeon zet view.js (state.accordeon).
 */
.wp-block-dreamglow-footer-groep {
	--dg-footer-als: accordeon;
	padding-block: var(--wp--preset--spacing--16);
	border-block-end: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--line);
}

/* De marges van de kolom van 1a (flow, blockGap 16): niets boven de kop, 16 tussen kop en lijst. */
.wp-block-dreamglow-footer-groep > * {
	margin-block: 0;
}

.wp-block-dreamglow-footer-groep > * + * {
	margin-block-start: var(--wp--preset--spacing--16);
}

/* hidden moet winnen van de display van core: de navigatie is een flexbox (body .is-layout-flex). */
.wp-block-dreamglow-footer-groep [hidden] {
	display: none;
}

/* Onder 1280 staan de kolommen onder elkaar, zonder tussenruimte: de lijn scheidt de groepen. */
.wp-block-columns:has(> .wp-block-column > .wp-block-dreamglow-footer-groep) {
	flex-direction: column;
	row-gap: 0;
}

/* De accordeon: de knop is de rij, de lijst hangt eronder. */
.wp-block-dreamglow-footer-groep.is-accordeon {
	padding-block: 0;
}

.wp-block-dreamglow-footer-groep.is-accordeon > * + * {
	margin-block-start: 0;
}

.wp-block-dreamglow-footer-groep.is-accordeon > nav {
	padding-block-end: var(--wp--preset--spacing--16);
}

/* De knop neemt de letter van de kop over (Cormorant 14/24, kapitalen met 2 px), als een rij van 48 hoog. */
.dg-footer-groep__knop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--16);
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: max(var(--dg-raakvlak), var(--wp--preset--spacing--48));
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: start;
	text-transform: inherit;
	cursor: pointer;
}

.dg-footer-groep__pijl {
	flex: none;
	inline-size: var(--wp--preset--spacing--16);
	block-size: var(--wp--preset--spacing--16);
}

/*
 * De pijl heeft twee stralen, omlaag en omhoog (render.php). Alleen die
 * omlaag staat er; open draait de pijl een halve slag in 300 ms op de ene
 * curve (spec 1b: "Chevrons die 180° draaien"; vergelijking met de
 * Rituals-analyse, 13-10-2026, N-27). De hoek is het token hoek.half.
 */
.dg-footer-groep__pijl-open {
	display: none;
}

.dg-footer-groep__pijl {
	transition: rotate var(--wp--custom--duur--standaard) var(--wp--custom--curve);
}

.dg-footer-groep__knop[aria-expanded="true"] .dg-footer-groep__pijl {
	rotate: var(--wp--custom--hoek--half);
}

/* Een groep die opengaat, verschijnt zacht: van doorzichtig en een stap
   hoger naar zijn plek, in 300 ms (N-27; was meteen). */
.wp-block-dreamglow-footer-groep.is-accordeon > nav {
	transition:
		opacity var(--wp--custom--duur--standaard) var(--wp--custom--curve),
		translate var(--wp--custom--duur--standaard) var(--wp--custom--curve);
}

@starting-style {
	.wp-block-dreamglow-footer-groep.is-accordeon > nav {
		opacity: 0;
		translate: 0 calc(-1 * var(--wp--preset--spacing--8));
	}
}

@media (prefers-reduced-motion: reduce) {
	.dg-footer-groep__pijl,
	.wp-block-dreamglow-footer-groep.is-accordeon > nav {
		transition: none;
	}
}

/*
 * Vóór de hydratatie: onder 1280 en met JavaScript aan tekent de CSS al de stand die view.js zo meteen zet
 * (label weg, knop zichtbaar, lijst dicht, groep zonder padding). Anders klapt de footer pas na de eerste
 * verf dicht, en springt alles eronder omhoog (layout shift, 0,1 tot 0,17 op een korte pagina). Zonder
 * JavaScript past (scripting: enabled) niet: dan blijft alles open, zonder knop. De prijs: laadt de
 * viewmodule niet, dan blijven de lijsten onder 1280 dicht, met een knop die niets doet (hetzelfde risico
 * als de juridische accordeon). Opent een groep, dan zet de store aria-expanded op true, en dat wint van
 * de dichte stand: view.js verandert hier niets aan. Alleen op de site: in de editor ontbreken
 * data-wp-interactive, het label en de knop. (scripting: enabled) kent geen breedte; het tweede blok
 * geeft de kolommen vanaf 1280 terug.
 */
@media (scripting: enabled) {
	.wp-block-dreamglow-footer-groep[data-wp-interactive] {
		padding-block: 0;
	}

	.wp-block-dreamglow-footer-groep .dg-footer-groep__label {
		display: none;
	}

	.wp-block-dreamglow-footer-groep .dg-footer-groep__knop[hidden] {
		display: flex;
	}

	.wp-block-dreamglow-footer-groep:has(.dg-footer-groep__knop[aria-expanded="false"]) > nav {
		display: none;
	}
}

@media (scripting: enabled) and (width > 1279px) {
	.wp-block-dreamglow-footer-groep .dg-footer-groep__label {
		display: inline;
	}

	.wp-block-dreamglow-footer-groep .dg-footer-groep__knop[hidden] {
		display: none;
	}

	.wp-block-dreamglow-footer-groep:has(.dg-footer-groep__knop[aria-expanded="false"]) > nav {
		display: flex;
	}
}

/* Vanaf 1280: kolommen, zoals 1a. */
@media (width > 1279px) {
	.wp-block-dreamglow-footer-groep {
		--dg-footer-als: kolommen;
		padding-block: 0;
		border-block-end: 0;
	}

	.wp-block-columns:has(> .wp-block-column > .wp-block-dreamglow-footer-groep) {
		flex-direction: row;
	}
}

/* De links in de footer (ook de juridische in de onderbalk) hadden geen
   hoverstaat (vergelijking met de Rituals-analyse, 13-10-2026, N-06): de
   onderstreping van de USP-balk. */
@media (hover: hover) {
	footer.wp-block-template-part .wp-block-navigation-item__content:hover {
		text-decoration: underline;
	}
}