/*
 * dreamglow/zoeken — de zoekknop en de zoeklaag (spec 1b, sectie 4).
 *
 * De knop is een iconknop van 48 × 48 (.dg-icoonknop, uit het headerblok),
 * geen .wp-element-button: die heeft de knopstijl van het ontwerpsysteem, en
 * werd daarmee 56 hoog (aanvulling van de controller).
 *
 * De laag en de dim zijn verborgen (hidden) tot @dreamglow/venster ze opent;
 * elke regel die ze zichtbaar maakt, schrijft :not([hidden]). Onder 640 is de
 * laag schermvullend, met een eigen sluitknop. Vanaf 640 is hij een band onder
 * de header over de volle breedte, met de inhoud in de container en de dim
 * eronder. view.js leest aan de sluitknop welke vorm geldt.
 *
 * De lijn onder "Bekijk alle N resultaten" is de lijn van de hovertaal: de
 * klasse dg-lijn uit blocks/header/style.css, niet een eigen onderstreping
 * (besluit van de controller, afwijkingen-1b.md).
 */

.dg-zoeken__zonder-js {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	margin: 0;
}

/*
 * Zonder JavaScript doet de zoekknop niets: dan staat alleen het formulier uit
 * <noscript> in rij 2. Met JavaScript is de inhoud van <noscript> geen element,
 * en telt deze regel niet; zo is er geen mediaquery voor nodig.
 */
.dg-zoeken:has(.dg-zoeken__zonder-js) .dg-zoeken__knop {
	display: none;
}

/* Een veld met een percentage krimpt mee: het formulier past zo ook op 390
   naast menuknop, logo, account en winkelwagen, zonder dat de pagina opzij
   schuift. */
.dg-zoeken__zonder-js .dg-zoeken__veld {
	inline-size: 100%;
}

/*
 * Zonder JavaScript staat het logo van 640 tot 1279 niet gecentreerd, maar
 * naast de menuknop: gecentreerd lag het tot ±923 over het formulier (fixronde
 * 1, Minor 3). Deze regel weegt 0,4,0, meer dan de regel die het logo in het
 * blad van de header centreert (0,3,0).
 */
@media (width > 639px) {
	.dg-header__rij-2-binnen:has(> .wp-block-dreamglow-zoeken .dg-zoeken__zonder-js) > .wp-block-site-logo {
		position: static;
		transform: none;
	}
}

/* ── De dim ── */

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

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

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

/* ── De laag: onder 640 schermvullend, onder de beheerbalk van WordPress als
   die er is (--dg-venster-beheerbalk, van @dreamglow/venster; code review V32) ── */

.dg-zoeken__laag:not([hidden]) {
	position: fixed;
	z-index: 2;
	inset: var(--dg-venster-beheerbalk, 0px) 0 0;
	overflow-y: auto;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--kop);
	transition:
		opacity var(--wp--custom--duur--standaard) var(--wp--custom--curve),
		transform var(--wp--custom--duur--standaard) var(--wp--custom--curve);
}

/* Opent in 300 ms: doorzichtigheid en 8 px naar beneden. */
@starting-style {
	.dg-zoeken__laag:not([hidden]) {
		opacity: 0;
		transform: translateY(calc(-1 * var(--wp--preset--spacing--8)));
	}
}

.dg-zoeken__laag[data-dg-stand="sluitend"] {
	opacity: 0;
	transform: translateY(calc(-1 * var(--wp--preset--spacing--8)));
}

.dg-zoeken__binnen {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--wp--preset--spacing--8);
	padding: var(--wp--preset--spacing--4) var(--dg-zijmarge) var(--wp--preset--spacing--40);
}

.dg-zoeken__status,
.dg-zoeken__populair,
.dg-zoeken__lijst {
	grid-column: 1 / -1;
}

@media (width > 639px) {
	.dg-zoeken__laag:not([hidden]) {
		inset: var(--dg-venster-top) 0 auto;
		max-block-size: calc(100dvh - var(--dg-venster-top));
		border-block-end: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--line);
	}

	.dg-zoeken__binnen {
		padding: var(--wp--preset--spacing--24) var(--dg-gutter) var(--wp--preset--spacing--40);
	}

	.dg-zoeken__formulier,
	.dg-zoeken__status,
	.dg-zoeken__populair,
	.dg-zoeken__lijst {
		max-inline-size: var(--wp--style--global--content-size);
	}

	/* Drie klassen: de regel van .dg-icoonknop in het headerblok telt er twee. */
	.dg-zoeken .dg-zoeken__laag .dg-zoeken__sluit {
		display: none;
	}
}

/* ── Het formulier ── */

.dg-zoeken__formulier {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	margin: 0;
}

/* Minstens 16 px (geen zoom op iOS) en een rand van minstens 3:1 (valkuil 11). */
.dg-zoeken__veld {
	appearance: none;
	flex: 1;
	min-inline-size: 0;
	box-sizing: border-box;
	block-size: var(--wp--preset--spacing--48);
	padding: 0 var(--wp--preset--spacing--16);
	border: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--ink-soft);
	border-radius: var(--wp--custom--radius--standaard);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--kop);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--m);
	line-height: var(--wp--custom--leading--m);
}

/* Geen wisknop van de browser (fixronde 1, Minor 4): in Chromium een blauw
   kruisje buiten het palet, en met het toetsenbord niet te bereiken. Het
   oude thema verborg hem ook. Een eigen wisknop is een ontwerpvraag voor de eigenaar. */
.dg-zoeken__veld::-webkit-search-cancel-button,
.dg-zoeken__veld::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.dg-zoeken__status {
	min-block-size: var(--wp--custom--leading--s);
	margin: var(--wp--preset--spacing--8) 0 0;
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--s);
	line-height: var(--wp--custom--leading--s);
}

/* ── Populaire zoekopdrachten en groepkoppen: Jost 14, kapitalen, 2 px ── */

.dg-zoeken__kopje,
.dg-zoeken__groepkop {
	margin: var(--wp--preset--spacing--16) 0 var(--wp--preset--spacing--8);
	color: var(--wp--preset--color--ink-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 400;
	line-height: var(--wp--custom--leading--s);
	letter-spacing: var(--wp--custom--spatie--groot);
	text-transform: uppercase;
}

.dg-zoeken__termen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dg-zoeken__term {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--dg-raakvlak);
	padding: 0 var(--wp--preset--spacing--16);
	border: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pil);
	color: var(--wp--preset--color--kop);
	text-decoration: none;
	transition: background-color var(--wp--custom--duur--standaard) var(--wp--custom--curve);
}

/* ── De suggesties ── */

.dg-zoeken__optie {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--16);
	min-block-size: var(--dg-raakvlak);
	padding: var(--wp--preset--spacing--8);
	border-radius: var(--wp--custom--radius--standaard);
	color: var(--wp--preset--color--kop);
	text-decoration: none;
}

/*
 * De gekozen suggestie (de pijlen, aria-activedescendant): het zandvlak én de
 * focusring van het thema. De DOM-focus blijft in het veld, dus :focus-visible
 * komt nooit op een optie; alleen het vlak was 1,08:1 tegen de laag (fixronde
 * 1, Important 1; WCAG 2.4.7). De ring staat binnen de optie, zodat de laag
 * hem aan de rand niet afsnijdt. In geforceerde kleuren valt het vlak weg, en
 * blijft de ring.
 */
.dg-zoeken__optie.is-actief {
	outline: var(--wp--custom--focus-ring);
	outline-offset: calc(-1 * var(--wp--custom--focus--afstand));
	background: var(--wp--preset--color--grain-soft);
}

/* Het fotovlak zoals in het menu: beige (jade), zoals de productfoto's (13-10-2026). */
.dg-zoeken__beeld {
	flex: none;
	inline-size: var(--wp--preset--spacing--48);
	block-size: var(--wp--preset--spacing--48);
	object-fit: contain;
	background: var(--wp--preset--color--jade);
}

.dg-zoeken__tekst {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-inline-size: 0;
}

.dg-zoeken__ondertitel {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--s);
	line-height: var(--wp--custom--leading--s);
}

.dg-zoeken__prijs {
	flex: none;
	font-size: var(--wp--preset--font-size--s);
}

.dg-zoeken__optie--alles {
	margin-block-start: var(--wp--preset--spacing--8);
}

/* De muis boven een suggestie geeft alleen het zandvlak: geen keuze, en geen
   aria-activedescendant (fixronde 1, Minor 7). Enter zoekt dan de getypte
   term. Alleen onder (hover: hover): een tik laat geen vlak achter. */
@media (hover: hover) {
	.dg-zoeken__term:hover,
	.dg-zoeken__optie: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 (zoals in het
   blad van het megamenu). */
@media (prefers-reduced-motion: reduce) {
	.dg-zoeken__dim:not([hidden]),
	.dg-zoeken__laag:not([hidden]),
	.dg-zoeken__term {
		transition: none;
	}
}