/*
 * Apple-style sticky navbar, emo2026.
 *
 * Plain CSS, hand-authored. BEM-ish class names so each rule is grep-able.
 *
 * Shared design tokens live in assets/css/tokens.css (loaded as the
 * 'emo2026-tokens' stylesheet dependency). Only nav-specific values -
 * geometry, dropdown shadow, mobile breakpoint, stay local below.
 */

:root {
	/* ---- Geometry (nav-only) ---- */
	--nav-height: 48px;
	--nav-max-width: var(--layout-content-max-width);
	--nav-side-padding: var(--layout-gutter);
	/* 1024px, not the theme's usual 833px cutover: the German menu labels
	 * are long ("Netzwerkisolatoren", "Dienstleistungen"), so the bar
	 * needs logo 122 + items ~720 + utility 112 + gutters 44, measured
	 * 1022px with the eighth item (Dienstleistungen, owner 2026-08-31).
	 * The language toggle showing both languages (2026-10-26) and the
	 * ninth item (Shop) pushed the measured need to about 1150px: at
	 * 1080px the utility cluster ran 60px past the window (QM 2026-10-27).
	 * Collapsing later leaves viewports below that with a nav wider than
	 * the window, which scrolls the whole page sideways; 940px was the
	 * seven-item value. The media query below must match this value. */
	--nav-mobile-breakpoint: 1180px;

	/* ---- Color (nav-only mappings to shared palette) ----
	 * The BAR is opaque (owner 2026-08-31): content scrolling under a
	 * translucent bar tinted it with whatever passed beneath, so the
	 * chrome changed colour down the page and dark sections turned it
	 * grey. The dropdown and search panels keep the glass material,
	 * they are transient and sit over a bar that is now solid. */
	--nav-bg:           var(--color-bg-base);
	--nav-bg-solid:     var(--color-bg-base);
	--nav-border:       var(--color-border-hairline-translucent);
	--nav-fg:           var(--color-text-primary);
	/* #1d1d1f at 72% alpha. No shared token matches this exact value
	 * (--color-text-secondary is opaque #6e6e73), kept local on purpose. */
	--nav-fg-muted:     color-mix(in srgb, var(--color-brand-ink) 72%, transparent);
	/* Fainter alpha ink for headings over glass; opaque mid-greys are
	 * forbidden on translucent surfaces (DESIGN-SPEC.md section 5). */
	--nav-fg-faint:     color-mix(in srgb, var(--color-brand-ink) 56%, transparent);
	--nav-fg-hover:     var(--color-text-primary);
	--nav-accent:       var(--color-link);

	/* Dropdown panel */
	--nav-dropdown-bg: var(--color-bg-translucent-strong);
	/* Subsystem-specific shadow, no shared elevation scale exists yet. */
	--nav-dropdown-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);

	/* Mobile overlay */
	--nav-mobile-bg: var(--color-bg-base);

	/* Motion, 220ms is intentionally faster than --motion-duration-base
	 * (250ms); kept local so future bumps to the global timing don't drift
	 * the nav's snap. Curve is the shared standard cubic. */
	--nav-easing:   var(--motion-ease-standard);
	--nav-duration: 220ms;

	/* Typography. Weight 500, not 400: text over translucency needs the
	 * slightly heavier cut to hold up against the blurred backdrop
	 * (DESIGN-SPEC.md section 5). */
	--nav-font:        var(--font-sans);
	--nav-font-size:   var(--font-size-14);
	--nav-font-weight: 500;

	/* Layering */
	--nav-z: 1000;
	--nav-mobile-z: 1100;
}

/* ---------- Host header element ---------- */

.site-header {
	/* The <header id="site-header"> wrapper is the sticky positioning context. */
	position: sticky;
	top: 0;
	z-index: var(--nav-z);
}

/* When the mobile overlay is open we lock body scroll. JS toggles this class. */
.has-nav-open {
	overflow: hidden;
}

/* ---------- Nav shell ---------- */

.site-nav {
	/* Containing block for the dropdown/search panels AND the ::after
	   scroll-edge below; same geometry as anchoring to .site-header. */
	position: relative;
	color: var(--nav-fg);
	font-family: var(--nav-font);
	font-size: var(--nav-font-size);
	font-weight: var(--nav-font-weight);
	-webkit-font-smoothing: antialiased;
	width: 100%;
}

/* The bar's material lives on a ::before layer, NOT on .site-nav itself.
 * That was originally to keep a backdrop-filter from turning the element
 * into the containing block for fixed-position descendants, which shrank
 * the fixed full-screen mobile drawer (.site-nav__mobile) to the 48px
 * bar. The blur is gone now that the bar is opaque, but the layer stays:
 * it is what lets the bar paint behind its own content without a
 * stacking context on .site-nav. */
.site-nav::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--nav-bg);
}

/* Scroll-edge effect in place of the old 1px border-bottom: floating chrome
   over content gets a gradient fade, not a divider (DESIGN-SPEC.md section
   5). Fades in via .is-scrolled (header.js) once content actually scrolls
   underneath; at rest the bar blends into the page. */
.site-nav::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 8px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.06), transparent);
	opacity: 0;
	transition: opacity var(--nav-duration) var(--nav-easing);
	pointer-events: none;
}

.site-nav.is-scrolled::after {
	opacity: 1;
}

/* The bar needs no backdrop-filter @supports fallback any more: it is
   opaque in every browser. The dropdown and search panel still carry
   theirs, in the material fallbacks at the end of the file. */

.site-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: var(--nav-height);
	max-width: var(--nav-max-width);
	margin: 0 auto;
	padding: 0 var(--nav-side-padding);
}

/* ---------- Brand ---------- */

.site-nav__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--nav-fg);
	text-decoration: none;
	flex: 0 0 auto;
	transition: opacity var(--nav-duration) var(--nav-easing);
}

.site-nav__brand:hover,
.site-nav__brand:focus-visible {
	opacity: 0.7;
}

.site-nav__brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
}

.site-nav__brand-text {
	font-size: 0.9375rem;  /* 15px off-scale; --font-size-14/16 don't match the shipped optics */
	font-weight: 500;
	letter-spacing: var(--letter-spacing-base);
}

/* ---------- Site logo (template-part: template-parts/site-logo.php) ----------
 *
 * The brand <a> in .site-nav__brand renders the logo by including site-logo.php,
 * which outputs a <span class="site-logo"> wrapper with [data-logo-context].
 * Sizing/color adapts per context; color always inherits from the link via
 * currentColor so .site-nav__brand:hover (opacity: 0.7) still dims it together
 * with the wordmark, no separate hover rule needed here.
 */

.site-logo {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: inherit;
	line-height: 1;
}

/* ---------- Production wordmark (Logo3 PNG) ----------
 *
 * The PNG is the full brand (no separate mark + text), rendered as a single
 * <img class="site-logo__img"> from template-parts/site-logo.php. The earlier
 * placeholder SVG-mark + dual-weight wordmark rules (.site-logo__mark[…],
 * .site-logo__wordmark[…]) were pruned by PERF-1 once LOGO-1 finalised the
 * raster swap, none of those classes exist in the rendered DOM anymore.
 *
 * The inline width/height attributes on the <img> drive the navbar size.
 * Per-context overrides bump the cap height for footer / standalone usage.
 */
.site-logo__img {
	/* WC's woocommerce-layout.css ships .woocommerce img { height: auto;
	 * max-width: 100% } which on shop pages overrides our height
	 * and renders the logo at its natural 79px height. !important wins
	 * unconditionally, the logo is a small surface, the rule is intentional. */
	display: block !important;
	width: auto !important;
	height: 32px !important;
	max-width: none !important;

	/* No vertical nudge here on purpose. The logo used to sit visibly low, but
	 * the cause was the un-reset 8px UA margin on <body> pushing the whole bar
	 * down (see the base reset in style.css), not the artwork. The PNG's ink
	 * runs 5..73 of its 79px, i.e. 2.0px above and 2.4px below the box at a
	 * 32px render, so the flex centring lands it correctly on its own. */
}

.site-logo[data-logo-context="footer"] .site-logo__img,
.site-logo[data-logo-context="standalone"] .site-logo__img {
	height: 40px !important;
}

.site-nav__brand--mobile .site-logo__img {
	height: 36px !important;
}

/* ---------- Brand recolor of the wordmark ----------
 *
 * The shipped PNG is the original multi-colour artwork; the 2026 styleguide
 * shows the wordmark as a single brand colour per treatment. Rather than
 * ship a second raster, the protected artwork is used as an alpha MASK and
 * tinted, so one file serves every colour and the ink follows the tokens.
 *
 * @supports gates it: a browser without mask support keeps the untouched
 * image, which is the correct fallback (on-brand artwork, just not recoloured)
 * rather than an invisible logo.
 *
 * Lived in token-variants.css while the brand was a dev-only preview; it
 * belongs here now that the brand palette is the shipped one.
 */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
	.site-logo {
		position: relative;
		display: inline-block;
	}

	.site-logo__img {
		visibility: hidden;
	}

	.site-logo::before {
		content: "";
		position: absolute;
		inset: 0;
		/* The colour is the per-visit pick (mapping below); without JS
		   there is no pick and the static EMO CORE stands. */
		background: var(--logo-visit, var(--color-link));
		/* The SAME artwork three times, composited (mask layers default
		   to Porter-Duff add): the thin "systems" glyphs are over half
		   anti-aliased pixels, and through a single alpha layer that
		   dilution rendered them as a second, lighter colour next to the
		   bold "emo", and pulled the tint visibly off its swatch. Three
		   passes drive partial alpha toward solid (0.55 -> 0.91, fills
		   -> 1.0) while edges keep a gradient, so the wordmark reads as
		   ONE colour at the exact brand value. */
		-webkit-mask:
			url("../images/emo-logo.png") left center / contain no-repeat,
			url("../images/emo-logo.png") left center / contain no-repeat,
			url("../images/emo-logo.png") left center / contain no-repeat;
		-webkit-mask-composite: source-over, source-over;
		mask:
			url("../images/emo-logo.png") left center / contain no-repeat,
			url("../images/emo-logo.png") left center / contain no-repeat,
			url("../images/emo-logo.png") left center / contain no-repeat;
		mask-composite: add, add;
	}

	/* Footer sits on a dark surface: the "logo on dark" sheet uses the
	   bright accent, EMO CORE would disappear there. The per-load pick
	   has its own dark channel for the same reason. */
	.site-logo[data-logo-context="footer"]::before {
		background: var(--logo-visit-dark, var(--color-brand-accent));
	}
}

/* ---------- Logo colour per page load (inc/logo-visit.php) ----------
 *
 * A fresh brand colour on every page load (owner 2026-09-09, was once
 * per visit before that): a pre-paint script draws a brand colour,
 * skips the look the previous load used so the change is visible, and
 * stamps <html data-emo-logo>. The pool is EMO DEEP, EMO CORE and EMO
 * GRAPHITE (owner 2026-09-17). EMO HARMONY and EMO AIR were in it for
 * part of that day and came back out: a light ink on this light navbar
 * measures about 1.3:1 and the wordmark stops reading. The rule is
 * light on light, not those two colours, so any future pale addition
 * needs an outline on the mask before it can join.
 *
 * All SEVEN mappings live here, not just the three in the pool, so
 * changing the pool stays a one-line edit in logo-visit.php.
 *
 * Two channels, because the navbar is light and the footer is dark.
 * --logo-visit is the light-surface ink and takes the pick as drawn.
 * --logo-visit-dark is the dark-surface ink: every colour in the
 * current pool is a dark one and would disappear on a dark ground, so
 * all three hand over to the accent there, the same substitution the
 * static footer logo makes. The pale mappings, which nothing draws
 * today, carry through unchanged; they are at their best on dark.
 *
 * No attribute (JS off) leaves the static defaults above.
 */
html[data-emo-logo="emo-deep"]     { --logo-visit: var(--brand-emo-deep);     --logo-visit-dark: var(--color-brand-accent); }
html[data-emo-logo="emo-core"]     { --logo-visit: var(--brand-emo-core);     --logo-visit-dark: var(--color-brand-accent); }
html[data-emo-logo="emo-graphite"] { --logo-visit: var(--brand-emo-graphite); --logo-visit-dark: var(--color-brand-accent); }
html[data-emo-logo="emo-harmony"]  { --logo-visit: var(--brand-emo-harmony);  --logo-visit-dark: var(--brand-emo-harmony); }
html[data-emo-logo="emo-air"]      { --logo-visit: var(--brand-emo-air);      --logo-visit-dark: var(--brand-emo-air); }
html[data-emo-logo="emo-signal"]   { --logo-visit: var(--brand-emo-signal);   --logo-visit-dark: var(--brand-emo-signal); }
html[data-emo-logo="emo-pure"]     { --logo-visit: var(--brand-emo-pure);     --logo-visit-dark: var(--brand-emo-pure); }

/* ---------- Desktop menu ---------- */

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	justify-content: center;
}

.site-nav__item {
	position: static; /* dropdown spans the full nav width, so anchor it to .site-nav, not the <li>. */
}

.site-nav__link {
	display: inline-flex;
	align-items: center;
	height: var(--nav-height);
	padding: 0 var(--space-3);
	color: var(--nav-fg-muted);
	text-decoration: none;
	font-size: var(--nav-font-size);
	font-weight: var(--nav-font-weight);
	/* 0 rather than the -0.01em base: glass text gets a small tracking
	   bump (DESIGN-SPEC.md section 5). */
	letter-spacing: 0;
	/* opacity is in the list so the :active press eases back on release. */
	transition:
		color var(--nav-duration) var(--nav-easing),
		opacity var(--nav-duration) var(--nav-easing);
}

.site-nav__link:hover,
.site-nav__link:focus-visible,
.site-nav__item:hover .site-nav__link,
.site-nav__item:focus-within .site-nav__link {
	color: var(--nav-fg-hover);
}

/* ---------- Dropdown panel ---------- */

/* Glass materializes: blur radius and scale animate together with the
   slide (DESIGN-SPEC.md section 5), originating from the trigger's edge
   (section 4). The hidden-state transition governs the EXIT leg and runs
   the mirrored easing (section 4, inverse bezier on the way back). */
.site-nav__dropdown {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--nav-dropdown-bg);
	-webkit-backdrop-filter: saturate(100%) blur(0px);
	backdrop-filter: saturate(100%) blur(0px);
	box-shadow: var(--nav-dropdown-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px) scale(0.98);
	transform-origin: top center;
	transition:
		opacity var(--nav-duration) var(--motion-ease-standard-out),
		transform var(--nav-duration) var(--motion-ease-standard-out),
		-webkit-backdrop-filter var(--nav-duration) var(--motion-ease-standard-out),
		backdrop-filter var(--nav-duration) var(--motion-ease-standard-out),
		visibility 0s linear var(--nav-duration);
	pointer-events: none;
}

/* Bottom scroll-edge of the open panel, gradient in place of the old
   1px border-bottom. */
.site-nav__dropdown::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 8px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.06), transparent);
	pointer-events: none;
}

.site-nav__item:hover .site-nav__dropdown,
.site-nav__item:focus-within .site-nav__dropdown,
.site-nav__item.is-open .site-nav__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	transition:
		opacity var(--nav-duration) var(--nav-easing),
		transform var(--nav-duration) var(--nav-easing),
		-webkit-backdrop-filter var(--nav-duration) var(--nav-easing),
		backdrop-filter var(--nav-duration) var(--nav-easing),
		visibility 0s linear 0s;
	pointer-events: auto;
}

.site-nav__dropdown-inner {
	max-width: var(--nav-max-width);
	margin: 0 auto;
	padding: 32px var(--nav-side-padding);  /* off-scale 32px, dropdown-specific */
}

.site-nav__dropdown-placeholder {
	margin: 0;
	color: var(--nav-fg-muted);
	font-size: var(--font-size-16);
	letter-spacing: var(--letter-spacing-base);
}

/* ---------- Utility cluster (language, search, cart, hamburger) ---------- */

.site-nav__utility {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	flex: 0 0 auto;
}

.site-nav__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--nav-fg-muted);
	cursor: pointer;
	text-decoration: none;
	/* transform is in the list so the :active compress eases back on release. */
	transition:
		color var(--nav-duration) var(--nav-easing),
		background var(--nav-duration) var(--nav-easing),
		transform var(--nav-duration) var(--nav-easing);
}

.site-nav__icon-btn:hover,
.site-nav__icon-btn:focus-visible {
	color: var(--nav-fg-hover);
	background: var(--color-overlay-hover);
}

/* ---------- Hamburger (mobile only) ---------- */

.site-nav__hamburger {
	display: none; /* shown via media query below */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	width: 36px;
	height: 36px;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--nav-fg);
	cursor: pointer;
	transition:
		background var(--nav-duration) var(--nav-easing),
		transform var(--nav-duration) var(--nav-easing);
}

.site-nav__hamburger:hover,
.site-nav__hamburger:focus-visible {
	background: var(--color-overlay-hover);
}

.site-nav__hamburger-bar {
	display: block;
	width: 18px;
	height: 1.5px;
	background: currentColor;
	transition:
		transform var(--nav-duration) var(--nav-easing),
		opacity var(--nav-duration) var(--nav-easing);
}

/* When the menu is open, morph the hamburger into an X. */
.site-nav__hamburger[aria-expanded="true"] .site-nav__hamburger-bar:nth-child(1) {
	transform: translateY(5.5px) rotate(45deg);
}
.site-nav__hamburger[aria-expanded="true"] .site-nav__hamburger-bar:nth-child(2) {
	opacity: 0;
}
.site-nav__hamburger[aria-expanded="true"] .site-nav__hamburger-bar:nth-child(3) {
	transform: translateY(-5.5px) rotate(-45deg);
}

/* ---------- Mobile overlay ---------- */

.site-nav__mobile {
	position: fixed;
	inset: 0;
	background: var(--nav-mobile-bg);
	z-index: var(--nav-mobile-z);
	display: flex;
	flex-direction: column;
	padding: 0 var(--nav-side-padding);
	overflow-y: auto;
	opacity: 0;
	transform: translateY(-8px);
	transition:
		opacity var(--nav-duration) var(--nav-easing),
		transform var(--nav-duration) var(--nav-easing);
}

.site-nav__mobile[hidden] {
	display: none;
}

.site-nav__mobile.is-open {
	opacity: 1;
	transform: translateY(0);
}

.site-nav__mobile-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--nav-height);
	flex: 0 0 auto;
	border-bottom: 1px solid var(--nav-border);
}

.site-nav__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--nav-fg);
	cursor: pointer;
	transition:
		background var(--nav-duration) var(--nav-easing),
		transform var(--nav-duration) var(--nav-easing);
}

.site-nav__close:hover,
.site-nav__close:focus-visible {
	background: var(--color-overlay-hover);
}

.site-nav__mobile-list {
	list-style: none;
	margin: 0;
	padding: var(--space-3) 0;
	flex: 1 1 auto;
}

.site-nav__mobile-item {
	border-bottom: 1px solid var(--nav-border);
}

.site-nav__mobile-link {
	display: block;
	padding: 1.125rem var(--space-1);  /* 18px off-scale, mobile-row vertical rhythm */
	color: var(--nav-fg);
	text-decoration: none;
	font-size: 1.375rem;  /* 22px off-scale; --font-size-21 is close but not equal */
	font-weight: 500;
	letter-spacing: var(--letter-spacing-base);
	transition:
		color var(--nav-duration) var(--nav-easing),
		opacity var(--nav-duration) var(--nav-easing);
}

.site-nav__mobile-link:hover,
.site-nav__mobile-link:focus-visible {
	color: var(--nav-accent);
}

.site-nav__brand--mobile {
	font-size: 1.0625rem;  /* 17px off-scale; --font-size-16/18 don't match the shipped optics */
}

/* ---------- Focus rings (visible, on-brand) ---------- */

.site-nav a:focus-visible,
.site-nav button:focus-visible {
	outline: 2px solid var(--nav-accent);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* ---------- Breakpoint: collapse to mobile ---------- */

/* Keep in sync with --nav-mobile-breakpoint above (media queries cannot
   read custom properties). */
@media (max-width: 1180px) {
	.site-nav__list {
		display: none;
	}
	.site-nav__hamburger {
		display: inline-flex;
	}
	/* Both utility icons stay in the bar: every screen must answer "where can
	   I go" (DESIGN-SPEC.md section 8), and the mini-cart CSS already routes
	   the mobile cart tap straight to /warenkorb/. The account icon that used
	   to be dropped here no longer exists, the shop has no accounts, and
	   Bestellverfolgung gets its own row in the overlay instead. */

	/* 44px minimum touch targets on the coarse-pointer bar; the visual
	   36px circle stays (the hover/press disc), the hit area grows. */
	.site-nav__hamburger,
	.site-nav__icon-btn {
		width: 44px;
		height: 44px;
	}
}

/* ---------- Mega-menu (column grid + headings + link list + CTA) ----------
 *
 * Sits inside .site-nav__dropdown-inner. Apple's mega-menu has very minimal
 * chrome: no borders between columns, just whitespace, with a small grey
 * heading above each tight link list and a single highlighted CTA at the
 * top-left of the panel.
 *
 * Order in the DOM: CTA first, then the column grid below it.
 */

/* CTA: top-left highlight link. Slightly larger than the link items, link-blue,
 * with a chevron that nudges right on hover. */
.site-nav__mega-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-6);
	color: var(--nav-accent);
	text-decoration: none;
	font-size: var(--font-size-21);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-tight);
	transition:
		color var(--nav-duration) var(--nav-easing),
		opacity var(--nav-duration) var(--nav-easing);
}

.site-nav__mega-cta:hover,
.site-nav__mega-cta:focus-visible {
	color: var(--color-link-hover);
}

.site-nav__mega-cta-chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--nav-duration) var(--nav-easing);
}

.site-nav__mega-cta:hover .site-nav__mega-cta-chevron,
.site-nav__mega-cta:focus-visible .site-nav__mega-cta-chevron {
	transform: translateX(2px);
}

/* Column grid. Auto-fit lets 2/3/4-column panels share one rule -
 * each column claims at least 200px and the grid wraps when the
 * viewport is too narrow. Safe to leave flowing: auto-fit collapses
 * empty tracks, so a panel never shows more columns than it has
 * link groups. A wider --nav-max-width widens these columns, it
 * cannot invent a fifth one. */
.site-nav__mega-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-7);
}

.site-nav__mega-column {
	min-width: 0;
}

/* Section heading: small, grey, slightly heavier weight. We deliberately
 * avoid `text-transform: uppercase` because German compound nouns like
 * "Anforderungsassistent" become unreadable in caps. The shipped design
 * uses font-size + weight + color for the heading effect instead. */
.site-nav__mega-heading {
	margin: 0 0 var(--space-3);
	/* Alpha ink, not the opaque mid-grey token: color over translucency
	   sits on the vibrancy inks (DESIGN-SPEC.md section 5). */
	color: var(--nav-fg-faint);
	font-size: var(--font-size-12);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
}

.site-nav__mega-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav__mega-list-item {
	margin: 0;
}

/* Link rows: tight vertical rhythm, dark primary text, link-blue on hover. */
.site-nav__mega-link {
	display: block;
	padding: var(--space-1) 0;
	color: var(--nav-fg);
	text-decoration: none;
	font-size: var(--font-size-14);
	/* 500 over glass, tracking bumped to 0, same rationale as
	   .site-nav__link (DESIGN-SPEC.md section 5). */
	font-weight: 500;
	letter-spacing: 0;
	line-height: var(--line-height-base);
	transition:
		color var(--nav-duration) var(--nav-easing),
		opacity var(--nav-duration) var(--nav-easing);
}

.site-nav__mega-link:hover,
.site-nav__mega-link:focus-visible {
	color: var(--nav-accent);
}

/* ---------- Search panel (toggled by [data-nav-search]) ---------- */

.site-nav__search {
	/* Sits below the bar and slides down. Sticky positioning of .site-nav
	 * carries this with it; the panel itself is absolute so it doesn't
	 * push anything. Bigger surface than the bar = heavier material
	 * (DESIGN-SPEC.md section 5): dropdown-strength background + shadow.
	 * Materializes like the dropdown, blur and scale animate with the
	 * slide, exit runs the mirrored easing. */
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--nav-dropdown-bg);
	-webkit-backdrop-filter: saturate(100%) blur(0px);
	backdrop-filter: saturate(100%) blur(0px);
	box-shadow: var(--nav-dropdown-shadow);
	transform: translateY(-8px) scale(0.98);
	transform-origin: top center;
	opacity: 0;
	visibility: hidden;
	transition:
		transform var(--nav-duration) var(--motion-ease-standard-out),
		opacity var(--nav-duration) var(--motion-ease-standard-out),
		-webkit-backdrop-filter var(--nav-duration) var(--motion-ease-standard-out),
		backdrop-filter var(--nav-duration) var(--motion-ease-standard-out),
		visibility 0s linear var(--nav-duration);
}

/* Bottom scroll-edge, gradient in place of the old 1px border-bottom. */
.site-nav__search::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 8px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.06), transparent);
	pointer-events: none;
}

.site-nav[data-search-open] .site-nav__search {
	transform: translateY(0) scale(1);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	opacity: 1;
	visibility: visible;
	transition:
		transform var(--nav-duration) var(--nav-easing),
		opacity var(--nav-duration) var(--nav-easing),
		-webkit-backdrop-filter var(--nav-duration) var(--nav-easing),
		backdrop-filter var(--nav-duration) var(--nav-easing),
		visibility 0s;
}

/* Browsers that respect [hidden] would suppress display entirely; we want
 * the slide animation, so override. */
.site-nav__search[hidden] {
	display: block;
}

.site-nav__search-form {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	max-width: var(--layout-content-max-width);
	margin: 0 auto;
	padding: var(--space-3) var(--space-5);
}

.site-nav__search-form-icon {
	flex: 0 0 auto;
	color: var(--nav-fg-muted);
}

.site-nav__search-input {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-21);
	font-weight: 400;
	color: var(--nav-fg);
	background: transparent;
	border: 0;
	outline: 0;
	padding: var(--space-2) 0;
	line-height: var(--line-height-base);
}

.site-nav__search-input::placeholder {
	color: var(--nav-fg-muted);
}

.site-nav__search-input:focus-visible {
	/* The whole panel is the focus indicator; no per-input ring needed. */
	outline: 0;
}

.site-nav__search-close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--nav-fg-muted);
	cursor: pointer;
	transition:
		background var(--nav-duration) var(--nav-easing),
		color var(--nav-duration) var(--nav-easing),
		transform var(--nav-duration) var(--nav-easing);
}

.site-nav__search-close:hover,
.site-nav__search-close:focus-visible {
	background: var(--color-overlay-hover);
	color: var(--nav-fg);
	outline: 0;
}

/* ============================================================
 * Language toggle, quiet uppercase link in the utility cluster
 * (rendered only for non-active languages by header-apple.php).
 * ============================================================ */

/* Both languages side by side, the current one first and in full ink,
   the other muted and a link; a hairline between them makes it read as
   one control rather than two labels. */
.site-nav__langs {
	display: inline-flex;
	align-items: center;
}

.site-nav__lang {
	display: inline-flex;
	align-items: center;
	padding: 0 var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--font-size-12);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	text-decoration: none;
	/* Alpha ink over the translucent bar, not the opaque mid-grey token
	   (DESIGN-SPEC.md section 5). */
	color: var(--nav-fg-muted);
	transition:
		color var(--motion-duration-fast) var(--motion-ease-standard),
		opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

.site-nav__lang.is-current {
	color: var(--nav-fg);
	cursor: default;
}

.site-nav__lang + .site-nav__lang::before {
	content: "";
	width: 1px;
	height: 0.9em;
	margin-right: var(--space-2);
	background: var(--nav-fg-faint);
}

a.site-nav__lang:hover,
a.site-nav__lang:focus-visible {
	color: var(--nav-fg-hover);
}

/* ---------- Press feedback (DESIGN-SPEC.md section 1) ----------
 *
 * Pointer-DOWN response on every nav control. transition-duration sits
 * INSIDE :active so the press snaps in under 100ms while the release
 * eases back at the slower hover timing from the base rules. Round
 * buttons compress, text links dim. Placed after every hover rule so
 * the press background beats the hover background in the cascade. */

.site-nav__icon-btn:active,
.site-nav__hamburger:active,
.site-nav__close:active,
.site-nav__search-close:active {
	transform: scale(0.92);
	background: var(--color-overlay-press);
	transition-duration: var(--motion-duration-press);
}

.site-nav__link:active,
.site-nav__mobile-link:active,
.site-nav__mega-link:active,
.site-nav__mega-cta:active,
a.site-nav__lang:active {
	opacity: 0.55;
	transition: opacity var(--motion-duration-press) var(--nav-easing);
}

/* ---------- Reduced motion ----------
 *
 * Targeted, not a blanket 0ms: slides/scales become short opacity
 * cross-fades and decorative transforms are dropped, while the
 * comprehension-aiding color/background/opacity fades keep their timing
 * (DESIGN-SPEC.md section 7). Sits after every base rule it overrides,
 * cascade order replaces the old !important hammer. */

@media (prefers-reduced-motion: reduce) {
	/* Panels: no slide, no scale, no blur ramp, just a 120ms fade. Blur is
	   pinned at the open value so only opacity animates; the visibility
	   delay tracks the shortened fade. */
	.site-nav__dropdown,
	.site-nav__item:hover .site-nav__dropdown,
	.site-nav__item:focus-within .site-nav__dropdown,
	.site-nav__item.is-open .site-nav__dropdown,
	.site-nav__search,
	.site-nav[data-search-open] .site-nav__search {
		transform: none;
		-webkit-backdrop-filter: saturate(180%) blur(20px);
		backdrop-filter: saturate(180%) blur(20px);
		transition:
			opacity 120ms ease,
			visibility 0s linear 120ms;
	}

	.site-nav__item:hover .site-nav__dropdown,
	.site-nav__item:focus-within .site-nav__dropdown,
	.site-nav__item.is-open .site-nav__dropdown,
	.site-nav[data-search-open] .site-nav__search {
		transition:
			opacity 120ms ease,
			visibility 0s linear 0s;
	}

	.site-nav__mobile,
	.site-nav__mobile.is-open {
		transform: none;
		transition: opacity 120ms ease;
	}

	/* Press compress is a transform: drop it, the background shift stays
	   as pointer-down feedback (spec section 7 keeps comprehension
	   feedback). */
	.site-nav__icon-btn:active,
	.site-nav__hamburger:active,
	.site-nav__close:active,
	.site-nav__search-close:active {
		transform: none;
	}

	/* Hamburger-to-X is meaningful state, keep the end pose but swap
	   instantly. */
	.site-nav__hamburger-bar {
		transition: none;
	}

	/* Decorative chevron nudge. */
	.site-nav__mega-cta-chevron {
		transition: none;
	}
	.site-nav__mega-cta:hover .site-nav__mega-cta-chevron,
	.site-nav__mega-cta:focus-visible .site-nav__mega-cta-chevron {
		transform: none;
	}
}

/* ---------- Material fallbacks ----------
 *
 * Every translucent surface carries BOTH fallbacks (DESIGN-SPEC.md
 * section 5): reduced transparency = solid and no blur; increased
 * contrast = solid plus a defined border, where the hairline the
 * scroll-edge gradients replaced comes back as a real divider. Open-state
 * selectors are repeated so these outrank the materialize rules above. */

/* No backdrop-filter support: the glass panels go solid. The bar needs no
   entry here, it is opaque already; it stays in the preference blocks
   below only because listing it there costs nothing and keeps the
   selector lists parallel if the bar ever returns to glass. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-nav__dropdown,
	.site-nav__search {
		background: var(--nav-bg-solid);
	}
}

@media (prefers-reduced-transparency: reduce) {
	.site-nav::before,
	.site-nav__dropdown,
	.site-nav__item:hover .site-nav__dropdown,
	.site-nav__item:focus-within .site-nav__dropdown,
	.site-nav__item.is-open .site-nav__dropdown,
	.site-nav__search,
	.site-nav[data-search-open] .site-nav__search {
		background: var(--nav-bg-solid);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

@media (prefers-contrast: more) {
	.site-nav::before,
	.site-nav__dropdown,
	.site-nav__item:hover .site-nav__dropdown,
	.site-nav__item:focus-within .site-nav__dropdown,
	.site-nav__item.is-open .site-nav__dropdown,
	.site-nav__search,
	.site-nav[data-search-open] .site-nav__search {
		background: var(--nav-bg-solid);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border-bottom: 1px solid var(--color-text-primary);
	}

	/* Solid hairline replaces the gradient scroll-edges. */
	.site-nav::after,
	.site-nav__dropdown::after,
	.site-nav__search::after {
		content: none;
	}
}

/* 320px: the utility group (language link, search, cart and hamburger at
 * 44px each) measures 177px, and with the logo, the 24px inner gap and the
 * gutters the bar ran 24px past the viewport, so the hamburger was clipped
 * on every page. Tighten the gaps before anything else has to shrink. */
@media (max-width: 359px) {
	.site-nav__inner {
		gap: var(--space-2);
	}
	.site-nav__utility {
		gap: 0;
	}
	.site-nav__lang {
		padding: 0 var(--space-1);
	}
	.site-nav__lang + .site-nav__lang::before {
		margin-right: var(--space-1);
	}
}