/*
 * Het hoofdmenu uitgeklapt houden op kleinere laptops en tablets in
 * landschap, de lijn van logo en inhoud, en de header op mobiel. Live sinds
 * 9 oktober 2026: functions.php laadt dit bestand voor iedereen.
 *
 * Blocksy toont de desktopheader vanaf 1000px (vast in main.min.css). Past
 * het menu daar niet naast het logo en de knoppen, dan zet het script van
 * Blocksy de laatste items onder "Meer" (static/bundle/892.*.js). Gemeten op
 * 5 oktober 2026: onder ongeveer 1345px gebeurde dat, en tot 1180px stonden
 * er nog vier, daaronder drie. Voor de eerste muisbeweging (Guest Mode)
 * stonden ze er wel alle vijf, half afgesneden, en daarna sprongen ze weg.
 *
 * Het script rekent: de breedte van de rij min de padding, min alles wat
 * geen menu is (logo, account, winkelmand, knop Winkel, zoeken, met hun
 * marges), en daar moet het menu in passen, met zijn eigen marges twee keer
 * meegeteld. Tussen twee menuteksten zat 50px: 25px padding per link en
 * 25px gap. Dat is waar de ruimte vandaan komt, in deze volgorde:
 *
 *   1. De rij even breed als de inhoud van de pagina (5vw van de rand), in
 *      plaats van 35px daarbinnen. Het logo staat dan recht boven de tekst
 *      van een productpagina. De sticky balk houdt 20px padding en loopt
 *      daarvoor 20px buiten de inhoud.
 *   2. Kleinere marges tussen de knoppen: 7px in plaats van 10px.
 *   3. Minder ruimte tussen de menuteksten, meeschalend met de breedte: 50px
 *      bij 1366px, 28px bij 1200px.
 *   4. Pas onder 1200px een kleiner logo en kleinere menuletters.
 *
 * Elke stap houdt minstens 30px over op wat het script nodig heeft, nagemeten
 * met dezelfde berekening als het script op 1000 tot 1440px.
 *
 * Vanaf 1440px blijven het menu en de knoppen zoals ze waren. Stap 1 geldt
 * sinds 8 oktober 2026 op elke breedte: daarboven stond het logo 35px binnen
 * een container van 1280px, en dus 40px rechts van de hero (1290px) en 35px
 * rechts van de winkel. Op een tablet stond het 4vw, op een telefoon 5vw
 * binnen de rand van de inhoud. De Gutenberg-pagina's staan op dezelfde lijn,
 * zie _basis.css en _uitlijning.css in content/gutenberg.
 *
 * De oranje balk erboven ook. Op desktop liep zijn rij van rand tot rand
 * (30px van de rand), nu is hij zo breed als de inhoud: de tekst links en het
 * menu rechts staan recht boven het logo en de zoekknop. Daaronder blijft de
 * balk van rand tot rand, zodat je over de hele breedte kunt vegen, maar
 * begint de tekst op de lijn van het logo in plaats van op 16px.
 *
 * Dezelfde selectors als Blocksy in uploads/blocksy/css/global.css; dit
 * bestand laadt erna en wint op volgorde. De rest zijn variabelen die Blocksy
 * zelf leest, maar op deze plek niet zet.
 */

@media (min-width: 1000px) {
	/* --theme-container-width, niet --theme-container-edge-spacing: Blocksy
	   rekent de breedte uit op :root, dus de spatiëring hier aanpassen doet
	   niets meer. De maximale breedte is die van Blocksy (1280px) plus twee
	   keer de padding. */
	[data-device="desktop"] [data-row*="middle"] {
		--theme-container-width: min(100%, calc(90vw + 40px));
		--theme-normal-container-max-width: calc(1280px + 40px);
	}

	[data-header*="type-1"] .ct-header [data-row*="middle"] {
		--row-padding: 0px 20px;
	}

	/* Blocksy zet alleen width op .ct-container-fluid; een max-width zo
	   breed als de inhoud komt er gewoon bij. Alleen met de nieuwe balk
	   (balk.php): de oude balk uit het contentblok liep in die smallere rij
	   over twee regels, ook op 1920px (9 oktober 2026 gezien). */
	#header [data-row="top"] > div:has(.nrd-balk) {
		max-width: min(var(--theme-container-width), var(--theme-normal-container-max-width));
	}

	/* De lijst houdt 0,45em ruimte voor de focusring van de eerste link;
	   zonder dit stond de tekst 6px rechts van het logo. Op .nrd-balk: op de
	   lijst zet balk.css margin 0, en dat laadt hierna. */
	.nrd-balk {
		margin-inline-start: -0.45em;
	}

	/* Bovenaan de pagina, waar de header niet doorzichtig is: een petrol
	   band van rand tot rand, direct onder de oranje balk, met de golf van
	   mobiel eronder (live sinds 15 oktober 2026). Was een
	   afgeronde pil van 1320px, 12px onder de balk. Aart: "mag eigenlijk
	   wel hele breedte zijn", zoals de hero's op de pagina's met een eigen
	   kop. Logo en zoekknop blijven op de lijn van de inhoud: de padding is
	   wat de pil aan weerszijden overliet, plus zijn eigen 20px. De -12px
	   heft de margin-top uit de Extra CSS op (die collapst door de rij). De
	   vaste header na scrollen blijft de pil. */
	[data-header*="type-1"] [data-device="desktop"]:not([data-transparent]) [data-sticky]:not([data-sticky*="yes"]) [data-row*="middle"] {
		margin-top: -12px;
		--row-border-radius: 0px;
		--row-padding: 0px calc((100% - min(var(--theme-container-width), var(--theme-normal-container-max-width))) / 2 + 20px);
	}

	[data-header*="type-1"] [data-device="desktop"]:not([data-transparent]) [data-sticky]:not([data-sticky*="yes"]) [data-row*="middle"] > div {
		width: 100%;
		max-width: none;
	}

	[data-header*="type-1"] [data-device="desktop"]:not([data-transparent]) [data-sticky]:not([data-sticky*="yes"]) [data-row*="middle"]::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: calc(100% - 1px);
		height: 24px;
		pointer-events: none;
		background: var(--theme-palette-color-10, #31545b);
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1000 V52 C840,76 680,74 500,46 C330,20 160,18 0,40 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1000 V52 C840,76 680,74 500,46 C330,20 160,18 0,40 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	}
}

@media (max-width: 999.98px) {
	[data-header*="type-1"] .ct-header [data-row*="middle"] {
		--row-padding: 0px;
	}

	/* De eerste tekst van de oranje balk staat ook op deze lijn: dat regelt
	   balk.css, met padding in de strook (sinds 12 oktober 2026). */

	/* De sticky header (9 oktober 2026). Het was een pil van 88vw, 12px
	   onder de rand, wit op 31%: de pagina liep er links, rechts en boven
	   breed langs. Nu 8px van de randen, 14px afgerond (blok uit DESIGN.md), mint op 62% met 14px
	   blur en een witte haarlijn rondom. Het logo en de knop Menu blijven op
	   de lijn van de inhoud. De 12px komt uit de Extra CSS van de Customizer
	   (margin-top met !important op .ct-container); de sticky laag zelf
	   schuift 4px omhoog.

	   De padding rekent met 100% en niet met 100vw (sinds 11 oktober 2026).
	   Aart zag het logo in de vaste pil rechts van de tekst eronder staan:
	   100vw telt de schuifbalk mee, en in een smal venster van een
	   desktopbrowser (schuifbalk van 15px) stonden logo en knop daardoor
	   7,5px te ver naar binnen, in de vaste pil en in de petrol band. 100%
	   is hier de breedte van de rij, zonder schuifbalk; op een telefoon,
	   waar de schuifbalk over de pagina ligt, zijn ze gelijk. De haarlijn om
	   de vaste pil is 1px breed en schoof logo en knop nog 1px naar binnen:
	   vandaar 9px en niet 8. */
	[data-header*="type-1"] [data-sticky*="yes"] {
		margin-top: -4px;
	}

	[data-header*="type-1"] .ct-header [data-sticky*="yes"] [data-row*="middle"] {
		--row-border-radius: 14px;
		--row-padding: 0px calc((100% - var(--theme-container-width)) / 2 - 9px);
		--theme-backdrop-blur: 14px;
	}

	[data-header*="type-1"] .ct-header [data-sticky*="yes"] [data-row*="middle"] > div {
		width: calc(100% - 16px);
		max-width: none;
		background-color: color-mix(in srgb, var(--theme-palette-color-7, #eef5f2) 62%, transparent);
		--theme-border-top: 1px solid rgba(255, 255, 255, 0.6);
		--theme-border-bottom: 1px solid rgba(255, 255, 255, 0.6);
		border-inline: 1px solid rgba(255, 255, 255, 0.6);
	}

	/* Bovenaan de pagina, waar de header niet doorzichtig is (alles met de
	   lichte paginakop, zie paginakop.php): een petrol band van rand tot
	   rand, direct onder de oranje balk, met onderaan een golf. Zoals de kop
	   van de mails (mailstijl.php, assets/mail/golf-kop.png), dezelfde
	   vorm. Was een afgeronde petrol pil 12px onder de balk. Blocksy kleurt
	   de rij zelf petrol; hier alleen breedte, afronding en de golf. */
	[data-header*="type-1"] [data-device="mobile"]:not([data-transparent]) [data-sticky]:not([data-sticky*="yes"]) {
		margin-top: -12px;
	}

	[data-header*="type-1"] [data-device="mobile"]:not([data-transparent]) [data-sticky]:not([data-sticky*="yes"]) [data-row*="middle"] {
		--row-border-radius: 0px;
		--row-padding: 0px calc((100% - var(--theme-container-width)) / 2);
	}

	[data-header*="type-1"] [data-device="mobile"]:not([data-transparent]) [data-sticky]:not([data-sticky*="yes"]) [data-row*="middle"] > div {
		width: 100%;
		max-width: none;
	}

	[data-header*="type-1"] [data-device="mobile"]:not([data-transparent]) [data-sticky]:not([data-sticky*="yes"]) [data-row*="middle"]::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: calc(100% - 1px);
		height: 17px;
		pointer-events: none;
		background: var(--theme-palette-color-10, #31545b);
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1000 V52 C840,76 680,74 500,46 C330,20 160,18 0,40 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1000 V52 C840,76 680,74 500,46 C330,20 160,18 0,40 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	}
}

@media (min-width: 1000px) and (max-width: 1439.98px) {
	[data-device="desktop"] [data-row*="middle"] [data-items] {
		--margin: 0 7px;
	}

	[data-header*="type-1"] .ct-header [data-id="menu"] {
		--menu-items-gap: 0px;
		--menu-items-spacing: clamp(28px, calc(18vw - 192px), 50px);
	}
}

@media (min-width: 1000px) and (max-width: 1199.98px) {
	[data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container {
		--logo-max-height: 72px;
	}

	[data-header*="type-1"] .ct-header [data-id="menu"] {
		--menu-items-spacing: 26px;
	}

	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a {
		--theme-font-size: 16px;
	}
}

@media (min-width: 1000px) and (max-width: 1099.98px) {
	[data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container {
		--logo-max-height: 64px;
	}

	[data-header*="type-1"] .ct-header [data-id="menu"] {
		--menu-items-spacing: 18px;
	}

	[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a {
		--theme-font-size: 15px;
	}

	[data-header*="type-1"] .ct-header [data-id="button"] [class*="ct-button"] {
		--theme-button-font-size: 15px;
	}
}