/*
 * Het menu op telefoon en tablet als mint vel onder de header. Waarom en hoe
 * staat in mobiel-menu.php.
 *
 * Dezelfde selectors als Blocksy in uploads/blocksy/css/global.css
 * ([data-header*="type-1"] #offcanvas ...); dit bestand laadt erna en wint op
 * volgorde. Blocksy zet bij het openen data-panel op de body: eerst leeg, een
 * frame later "in:right", bij het sluiten "out", en 250ms later gaat .active
 * eraf. Het sluiten moet dus binnen die 250ms klaar zijn.
 */

@media (max-width: 999.98px) {
	[data-header*="type-1"] #offcanvas {
		--nrd-menu-zacht: cubic-bezier(0.22, 1, 0.36, 1);
		--nrd-menu-lijn: #d6e5df;
		--nrd-menu-rand: calc((100vw - var(--theme-container-width)) / 2);
		background-color: rgba(36, 64, 63, 0.5);
	}

	/* Het vel: zo breed als het scherm, zo hoog als wat erin staat. De
	   bovenkant zit achter de header, de inhoud begint waar die ophoudt. */
	[data-header*="type-1"] #offcanvas .ct-panel-inner {
		inset-block: 0 auto;
		width: 100%;
		max-width: none;
		height: auto;
		max-height: calc(100% - 28px);
		margin: 0;
		align-self: stretch;
		box-shadow: none;
		background-color: var(--theme-palette-color-7, #eef5f2);
		transform: translate3d(0, -100%, 0);
		transition: transform 0.24s cubic-bezier(0.55, 0, 1, 0.45);
	}

	[data-header*="type-1"][data-panel*="in"] #offcanvas.active .ct-panel-inner {
		transform: translate3d(0, 0, 0);
		transition: transform 0.55s var(--nrd-menu-zacht);
	}

	/* Dezelfde golf als onder de petrol band in header-menu.css, maar dan
	   in mint en iets hoger. */
	[data-header*="type-1"] #offcanvas .ct-panel-inner::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: calc(100% - 1px);
		height: 24px;
		pointer-events: none;
		background: var(--theme-palette-color-7, #eef5f2);
		-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;
	}

	/* Het kruisje van Blocksy: de knop Sluit in de header doet zijn werk.
	   Voor het toetsenbord blijft hij bestaan (de focus blijft in het vel),
	   en verschijnt hij pas als hij focus heeft. */
	[data-header*="type-1"] #offcanvas .ct-panel-actions {
		position: absolute;
		top: calc(var(--nrd-menu-kop, 112px) + 4px);
		right: var(--nrd-menu-rand);
		z-index: 2;
		padding: 0;
	}

	[data-header*="type-1"] #offcanvas .ct-toggle-close {
		--toggle-button-margin-end: 0px;
		--toggle-button-margin-block: 0px;
		--toggle-button-border-color: var(--theme-palette-color-10, #31545b);
		--theme-icon-color: var(--theme-palette-color-10, #31545b);
		background-color: var(--theme-palette-color-8, #fff);
	}

	[data-header*="type-1"] #offcanvas .ct-toggle-close:not(:focus-visible) {
		clip-path: inset(50%);
		opacity: 0;
	}

	/* De inhoud: één raster van twee kolommen. */
	[data-header*="type-1"] #offcanvas [data-device="mobile"] .ct-panel-content-inner {
		--margin: 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 12px;
		align-content: start;
		height: auto;
		padding: calc(var(--nrd-menu-kop, 112px) + 16px) var(--nrd-menu-rand) 20px;
		overscroll-behavior: contain;
	}

	[data-header*="type-1"] #offcanvas [data-device="mobile"] .ct-panel-content-inner > * {
		margin: 0;
	}

	[data-header*="type-1"] #offcanvas [data-id="offcanvas-logo"] {
		display: none;
	}

	[data-header*="type-1"] #offcanvas .mobile-menu,
	[data-header*="type-1"] #offcanvas .mobile-menu > ul {
		display: contents;
	}

	/* De links: petrol, in Quicksand, op een vinger berekend. */
	[data-header*="type-1"] #offcanvas :is([data-id="mobile-menu"], [data-id="mobile-menu-secondary"]) {
		--theme-link-initial-color: var(--theme-palette-color-10, #31545b);
		--theme-link-hover-color: var(--theme-palette-color-10, #31545b);
		--theme-link-active-color: var(--theme-palette-color-10, #31545b);
		--theme-font-size: 16px;
		--theme-font-weight: 700;
		--theme-line-height: 1.3;
	}

	[data-header*="type-1"] #offcanvas .mobile-menu li {
		order: 5;
	}

	[data-header*="type-1"] #offcanvas .mobile-menu .ct-menu-link {
		--menu-item-padding: 0;
		min-height: 44px;
		align-items: center;
		text-underline-offset: 6px;
		text-decoration-thickness: 2px;
	}

	[data-header*="type-1"] #offcanvas .mobile-menu .current-menu-item > .ct-menu-link {
		text-decoration-line: underline;
		text-decoration-color: var(--theme-palette-color-3, #e94e1b);
	}

	/* Account na Contact, rechtsonder in het blok kleine links. */
	[data-header*="type-1"] #offcanvas .mobile-menu li:has(> a[href*="/mijn-account/"]) {
		order: 6;
	}

	/* De twee koffiesoorten: witte vlakken met hun dier, dat door de rand
	   van het vlak wordt afgesneden. */
	[data-header*="type-1"] #offcanvas .mobile-menu li:has(> a[href*="/cafeinevrij/"]) {
		order: 1;
	}

	[data-header*="type-1"] #offcanvas .mobile-menu li:has(> a[href*="/koffie-laag-in-cafeine/"]) {
		order: 2;
	}

	[data-header*="type-1"] #offcanvas .mobile-menu li:has(> a:is([href*="/cafeinevrij/"], [href*="/koffie-laag-in-cafeine/"])) {
		grid-column: 1 / -1;
		margin-bottom: 10px;
	}

	[data-header*="type-1"] #offcanvas .mobile-menu a:is([href*="/cafeinevrij/"], [href*="/koffie-laag-in-cafeine/"]) {
		--theme-font-family: Acme, sans-serif;
		--theme-font-size: clamp(24px, 4vw, 30px);
		--theme-font-weight: 400;
		--theme-line-height: 1.1;
		position: relative;
		isolation: isolate;
		overflow: hidden;
		min-height: 84px;
		padding: 0 128px 0 20px;
		border-radius: 14px;
		background-color: var(--theme-palette-color-8, #fff);
		box-shadow: inset 0 0 0 1px var(--nrd-menu-lijn);
		transition: box-shadow 0.2s ease, transform 0.2s var(--nrd-menu-zacht);
	}

	[data-header*="type-1"] #offcanvas .mobile-menu .current-menu-item > a:is([href*="/cafeinevrij/"], [href*="/koffie-laag-in-cafeine/"]) {
		text-decoration-line: none;
		box-shadow: inset 0 0 0 2px var(--theme-palette-color-10, #31545b), 0 3px 10px rgba(49, 84, 91, 0.12);
	}

	[data-header*="type-1"] #offcanvas .mobile-menu a:is([href*="/cafeinevrij/"], [href*="/koffie-laag-in-cafeine/"]):active {
		transform: scale(0.985);
	}

	[data-header*="type-1"] #offcanvas .mobile-menu a:is([href*="/cafeinevrij/"], [href*="/koffie-laag-in-cafeine/"])::after {
		content: "";
		position: absolute;
		z-index: -1;
		pointer-events: none;
		background-repeat: no-repeat;
		background-size: contain;
	}

	/* De luiaard hangt aan zijn liaan uit de hoek rechtsboven. */
	[data-header*="type-1"] #offcanvas .mobile-menu a[href*="/cafeinevrij/"]::after {
		right: -18px;
		top: -58px;
		width: 168px;
		height: 168px;
		background-image: url("/wp-content/uploads/2025/09/Luiwaard-copy-2-300x300.png");
		transform-origin: 55% 0;
	}

	/* De zeekoe zwemt van rechts het vlak in. */
	[data-header*="type-1"] #offcanvas .mobile-menu a[href*="/koffie-laag-in-cafeine/"]::after {
		right: -46px;
		bottom: -26px;
		width: 156px;
		height: 107px;
		background-image: url("/wp-content/uploads/2025/09/zee-koe-links.png");
	}

	/* Winkel: de bestelknop, over de hele breedte. */
	[data-header*="type-1"] #offcanvas [data-id="button"] {
		order: 3;
		grid-column: 1 / -1;
		margin-top: 2px;
	}

	[data-header*="type-1"] #offcanvas [data-id="button"] .ct-button {
		--theme-button-min-height: 54px;
		--theme-button-font-size: 19px;
		--theme-button-font-weight: 700;
		--theme-button-padding: 0 32px;
		width: 100%;
		justify-content: center;
	}

	/* Blocksy tekent de lijn hier niet; dan maar zelf. */
	[data-header*="type-1"] #offcanvas [data-device="mobile"] .ct-panel-content-inner > [data-id="divider"] {
		order: 4;
		grid-column: 1 / -1;
		height: 0;
		margin: 20px 0 6px;
		border-top: 1px solid var(--nrd-menu-lijn);
	}

	[data-header*="type-1"] #offcanvas [data-id="socials"] {
		order: 7;
		grid-column: 1 / -1;
		margin-top: 16px;
	}

	[data-header*="type-1"] #offcanvas [data-id="socials"].ct-header-socials [data-color="custom"] {
		--theme-icon-color: var(--theme-palette-color-10, #31545b);
		--theme-icon-hover-color: var(--theme-palette-color-3, #e94e1b);
		--background-color: var(--nrd-menu-lijn);
		--background-hover-color: var(--theme-palette-color-3, #e94e1b);
	}

	/* Binnenkomen: na het vel, een voor een, van iets hoger. */
	[data-panel*="in"] #offcanvas.active .ct-panel-content-inner > :not(nav),
	[data-panel*="in"] #offcanvas.active .mobile-menu li {
		animation: nrd-menu-in 0.5s var(--nrd-menu-zacht) both;
		animation-delay: 0.2s;
	}

	[data-panel*="in"] #offcanvas.active .mobile-menu li:has(> a[href*="/cafeinevrij/"]) {
		animation-delay: 0.08s;
	}

	[data-panel*="in"] #offcanvas.active .mobile-menu li:has(> a[href*="/koffie-laag-in-cafeine/"]) {
		animation-delay: 0.12s;
	}

	[data-panel*="in"] #offcanvas.active [data-id="button"] {
		animation-delay: 0.16s;
	}

	/* De luiaard schommelt een keer uit, de zeekoe glijdt binnen. */
	[data-panel*="in"] #offcanvas.active .mobile-menu a[href*="/cafeinevrij/"]::after {
		animation: nrd-menu-schommel 1.6s var(--nrd-menu-zacht) 0.15s both;
	}

	[data-panel*="in"] #offcanvas.active .mobile-menu a[href*="/koffie-laag-in-cafeine/"]::after {
		animation: nrd-menu-zwem 1.1s var(--nrd-menu-zacht) 0.2s both;
	}

	/* De knop Menu wordt Sluit, op dezelfde plek. nrd-menu-open zet
	   mobiel-menu.js op <html> zolang #offcanvas .active heeft. Met body
	   voor een :has() rekende de browser na elke wijziging in de pagina de
	   stijl opnieuw uit (zie zuinige-start.php). */
	.nrd-menu-open #header {
		z-index: 1000000;
	}

	/* Van streepjes naar kruisje als het malen van koffie (Aart, 9 oktober
	   2026). Openen: de buitenste streepjes schuiven naar het midden en
	   draaien een halve slag extra door, als de slinger van een molen; de
	   middelste wordt in het midden fijngemalen en valt als drie korrels
	   gruis naar beneden. Sluiten: de slinger draait terug en het middelste
	   streepje groeit weer uit het midden. Blocksy zet zelf rotate(45deg) en
	   rotate(-45deg); 225 en 135 graden zien er hetzelfde uit, maar de weg
	   ernaartoe is een slag.

	   De overgang hoort bij de stand waar je naartoe gaat. Daarom staan de
	   volgordes (eerst schuiven, dan draaien; terug eerst draaien, dan
	   schuiven) in twee regels. */
	#header [data-id="trigger"] .ct-icon[data-type] rect {
		transition:
			transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
			y 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.16s,
			x 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.16s,
			width 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.16s,
			opacity 0.2s ease 0.2s;
	}

	#header [data-id="trigger"][aria-expanded="true"] .ct-icon[data-type] rect {
		transition:
			transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
			y 0.22s cubic-bezier(0.22, 1, 0.36, 1),
			x 0.22s cubic-bezier(0.22, 1, 0.36, 1),
			width 0.22s cubic-bezier(0.22, 1, 0.36, 1),
			opacity 0.18s ease;
	}

	#header [data-id="trigger"][aria-expanded="true"] .ct-icon[data-type] rect:nth-child(1) {
		transform: rotate(225deg);
	}

	#header [data-id="trigger"][aria-expanded="true"] .ct-icon[data-type] rect:nth-child(2) {
		transform: scaleX(0);
	}

	#header [data-id="trigger"][aria-expanded="true"] .ct-icon[data-type] rect:nth-child(3) {
		transform: rotate(135deg);
	}

	/* Het gruis: drie korrels op de plek van het middelste streepje, in de
	   kleur van het icoontje. Ze vallen alleen bij het openen. */
	#header [data-id="trigger"]::after {
		content: "";
		position: absolute;
		left: calc(var(--toggle-button-padding, 10px) + 2px);
		top: calc(50% - 2px);
		width: 14px;
		height: 4px;
		pointer-events: none;
		opacity: 0;
		background:
			radial-gradient(circle at 2px 2.5px, var(--theme-icon-color, #fff) 1.1px, transparent 1.6px),
			radial-gradient(circle at 7px 1.2px, var(--theme-icon-color, #fff) 1.1px, transparent 1.6px),
			radial-gradient(circle at 12px 2.8px, var(--theme-icon-color, #fff) 1.1px, transparent 1.6px);
	}

	#header [data-id="trigger"][aria-expanded="true"]::after {
		animation: nrd-menu-gruis 0.8s cubic-bezier(0.45, 0, 0.85, 0.5) 0.12s both;
	}

	/* Open is de knop wit met petrol, zoals een gekozen keuzevlak: sluiten
	   is geen bestellen, en zo vecht hij niet met de oranje knop Winkel
	   eronder. Wit valt op alle drie de achtergronden op (mint vel, petrol
	   band, sticky pil). Ook bij :hover, want na een tik blijft die op een
	   telefoon hangen. */
	#header [data-id="trigger"][aria-expanded="true"] {
		--toggle-button-second-color: var(--theme-palette-color-8, #fff);
		--toggle-button-second-color-hover: var(--theme-palette-color-8, #fff);
		--theme-icon-color: var(--theme-palette-color-10, #31545b);
		--theme-icon-hover-color: var(--theme-palette-color-10, #31545b);
		--theme-link-initial-color: var(--theme-palette-color-10, #31545b);
		--theme-link-hover-color: var(--theme-palette-color-10, #31545b);
		box-shadow: inset 0 0 0 1px #d6e5df;
	}

	#header [data-id="trigger"] {
		transition: background-color 0.3s ease;
	}

	/* Bovenaan een pagina met een doorzichtige header staan zoeken en het
	   mandje wit: daar ligt de hero achter. Gaat het menu open, dan ligt het
	   mint vel erachter en zie je ze niet meer (Aart, 11 oktober 2026).
	   Zolang het menu open is krijgen ze de donkere kleur van de vaste pil.
	   Niet op een pagina met de petrol band: die blijft achter de iconen
	   staan, en daar blijven ze wit. Hetzelfde voor het open mandje staat in
	   winkelmand.css. Live sinds 11 oktober 2026. */
	[data-header*="type-1"][data-panel*="in"] [data-transparent] :is([data-id="search"], [data-id="cart"] .ct-cart-item, [data-id="account"] .ct-account-item) {
		--theme-icon-color: var(--theme-palette-color-2, #121723);
		--theme-icon-hover-color: rgba(46, 46, 46, 0.6);
	}

	[data-header*="type-1"] [data-id="trigger"] .ct-label {
		position: relative;
		transition: color 0.2s ease;
	}

	[data-header*="type-1"] [data-id="trigger"] .ct-label::after {
		content: "Sluit";
		position: absolute;
		inset-inline-start: 0;
		top: 0;
		color: var(--theme-link-initial-color, #fff);
		opacity: 0;
		transition: opacity 0.2s ease;
	}

	[data-header*="type-1"] [data-id="trigger"][aria-expanded="true"] .ct-label {
		color: transparent;
	}

	[data-header*="type-1"] [data-id="trigger"][aria-expanded="true"] .ct-label::after {
		opacity: 1;
		transition-delay: 0.08s;
	}
}

@keyframes nrd-menu-in {
	from {
		opacity: 0;
		transform: translate3d(0, -10px, 0);
	}
}

@keyframes nrd-menu-gruis {
	0% {
		opacity: 0;
		transform: translate3d(0, -1px, 0) scaleX(0.4);
	}
	18% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scaleX(1);
	}
	100% {
		opacity: 0;
		transform: translate3d(0, 11px, 0) scaleX(1.15);
	}
}

@keyframes nrd-menu-schommel {
	0% {
		transform: rotate(9deg);
	}
	45% {
		transform: rotate(-4deg);
	}
	75% {
		transform: rotate(1.5deg);
	}
	100% {
		transform: rotate(0);
	}
}

@keyframes nrd-menu-zwem {
	from {
		opacity: 0;
		transform: translate3d(28px, 4px, 0);
	}
}

@media (max-width: 999.98px) and (min-width: 690px) {
	/* Het woord Menu staat hier sinds mobiel-menu.php ook, maar Blocksy heeft
	   voor tablet geen labelkleur (global.css), dus het werd inkt op oranje.
	   Wit zoals op de telefoon, hover oranje zoals daar. */
	#header [data-id="trigger"]:not([aria-expanded="true"]) {
		--theme-link-initial-color: var(--theme-palette-color-8, #fff);
		--theme-link-hover-color: var(--theme-palette-color-3, #e94e1b);
	}

	/* Op een tablet de twee koffiesoorten naast elkaar. */
	[data-header*="type-1"] #offcanvas [data-device="mobile"] .ct-panel-content-inner {
		grid-template-columns: repeat(4, 1fr);
		column-gap: 16px;
	}

	[data-header*="type-1"] #offcanvas .mobile-menu li:has(> a:is([href*="/cafeinevrij/"], [href*="/koffie-laag-in-cafeine/"])) {
		grid-column: span 2;
	}
}

/* Op een telefoon blijft :hover na een tik hangen. Blocksy maakt de knop
   Menu bij hover wit (petrol in de sticky pil) en trekt de streepjes even
   lang, dus na het sluiten bleef hij wit met drie gelijke streepjes in plaats
   van oranje met de korte, lange en middellange (Aart, 9 oktober 2026). Zonder
   muis is hover hier gelijk aan de gewone stand. */
@media (max-width: 999.98px) and (hover: none) {
	#header [data-id="trigger"]:not([aria-expanded="true"]) {
		--toggle-button-second-color-hover: var(--toggle-button-second-color);
		--theme-icon-hover-color: var(--theme-icon-color);
		--theme-link-hover-color: var(--theme-link-initial-color);
	}

	#header [data-id="trigger"]:not([aria-expanded="true"]):hover .ct-icon[data-type="type-2"] rect:nth-child(1) {
		width: 10px;
	}

	#header [data-id="trigger"]:not([aria-expanded="true"]):hover .ct-icon[data-type="type-2"] rect:nth-child(3) {
		width: 15px;
	}
}

@media (max-width: 999.98px) and (prefers-reduced-motion: reduce) {
	[data-header*="type-1"] #offcanvas .ct-panel-inner,
	[data-header*="type-1"][data-panel*="in"] #offcanvas.active .ct-panel-inner {
		transform: none;
		transition: none;
	}

	[data-panel*="in"] #offcanvas.active .ct-panel-content-inner > *,
	[data-panel*="in"] #offcanvas.active .mobile-menu li,
	[data-panel*="in"] #offcanvas.active .mobile-menu a::after {
		animation: none;
	}

	#header [data-id="trigger"] .ct-icon[data-type] rect,
	#header [data-id="trigger"][aria-expanded="true"] .ct-icon[data-type] rect {
		transition: none;
	}

	#header [data-id="trigger"][aria-expanded="true"]::after {
		animation: none;
	}
}