/*
 * dreamglow/usp-balk — één bericht tegelijk in rij 1 (spec 1b, sectie 2).
 *
 * De berichten liggen op elkaar in één rastercel en vloeien in 300 ms over.
 * Een bericht buiten beeld houdt zijn link bereikbaar voor het toetsenbord.
 * Focus zet het in beeld (view.js), en :focus-within doet dat al vóór de
 * Interactivity API zover is: de focus valt nooit op onzichtbare tekst.
 *
 * De letter is die van Rituals: 14 px op regelhoogte 20 met 0,3 px
 * spatiëring, op elke breedte (variant 2 van de eigenaar, 23-10-2026; was
 * 12/16 met 0,6 px, ontwerpsysteem regel 2 en besluit 8 van de controller).
 * De regelhoogte 20 is geen rol uit de schaal (14 staat daar op 24), maar een
 * eigen maat van de melding: header.melding.regel. De balk zet hem zelf, uit
 * tokens: zo staat hij overal zo, en erft hij niet de 14/24 van rij 1.
 */

.dg-usp-balk {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--8);
	min-inline-size: 0;
	font-size: var(--wp--preset--font-size--s);
	line-height: var(--wp--custom--header--melding--regel);
	letter-spacing: var(--wp--custom--spatie--licht);
}

.dg-usp-balk__berichten {
	display: grid;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dg-usp-balk__bericht {
	grid-area: 1 / 1;
	min-inline-size: 0;
	opacity: 0;
	pointer-events: none;
	white-space: nowrap;
	transition: opacity var(--wp--custom--duur--standaard) var(--wp--custom--curve--standaard);
}

/*
 * Een lang eigen bericht kapt af met een beletselteken, binnen de rij: geen
 * zijwaartse scroll op 320 (WCAG 1.4.10). De lijst en het bericht mogen daarvoor
 * krimpen (min-inline-size: 0), en de link of de tekst zelf kapt af. Het bericht
 * eromheen knipt niets, dus de focusring van de link valt er helemaal buiten. Er
 * is geen harde grens; de hulptekst in de editor vraagt om een kort bericht.
 */
.dg-usp-balk__bericht > * {
	display: inline-block;
	max-inline-size: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: top;
}

.dg-usp-balk__bericht.is-actief,
.dg-usp-balk__bericht:focus-within {
	opacity: 1;
	pointer-events: auto;
}

/*
 * Staat de focus op een bericht, dan staat alleen dat bericht in beeld. Anders
 * lagen er twee over elkaar: met minder beweging zet view.js het eerste bericht
 * terug terwijl de focus op een ander staat, en vóór de hydratatie draagt het
 * eerste bericht is-actief van de server.
 */
.dg-usp-balk__berichten:focus-within > .dg-usp-balk__bericht:not(:focus-within) {
	opacity: 0;
	pointer-events: none;
}

/*
 * Met de focus in de berichten geen overgang: het bericht met de focus staat
 * meteen in beeld en de andere meteen weg. Anders stond de focus 300 ms op een
 * bericht met opacity 0, en lagen er even twee over elkaar (RUST_OVERGANGEN).
 * Zonder focus wisselen ze weer in 300 ms.
 */
.dg-usp-balk__berichten:focus-within > .dg-usp-balk__bericht {
	transition: none;
}

.dg-usp-balk a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.dg-usp-balk a:focus-visible {
	text-decoration: underline;
}

@media (hover: hover) {
	.dg-usp-balk a:hover {
		text-decoration: underline;
	}
}

.dg-usp-balk__pauze {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--wp--preset--spacing--24);
	min-block-size: var(--wp--preset--spacing--24);
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--rond);
	background: transparent;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

.dg-usp-balk__pauze .dg-icoon {
	inline-size: var(--wp--preset--spacing--16);
	block-size: var(--wp--preset--spacing--16);
}

@media (prefers-reduced-motion: reduce) {
	.dg-usp-balk__pauze {
		display: none;
	}

	.dg-usp-balk__bericht {
		transition: none;
	}
}