/* ============================================================================
   Lennox Header — single source of truth (Ruinart pattern)
   Spec: data/design/header_rebuild_spec_2026-05-24.md
   Tokens come from kalium-child/style.css :root (loaded sitewide).
   Everything is scoped under .lx-header / #lx-drawer / .lx-mega — nothing
   else competes on these selectors, so NO !important is needed.
   Breakpoints: desktop >=1025 · tablet 768-1024 · mobile <768.
   ============================================================================ */

/* ── Base wrapper ─────────────────────────────────────────────────────── */
.lx-header {
	background-color: var(--surface-primary);          /* Ivory */
	border-bottom: 1px solid var(--lx-pearl);
	position: relative;
	z-index: 100;
	transition: background-color 250ms ease, border-color 250ms ease;
}
.lx-header__placeholder { /* injected by JS when sticky, = header height */ }

/* ── Row 1: chrome bar ────────────────────────────────────────────────── */
.lx-header__bar {
	display: flex;
	align-items: center;
	height: 76px;
	padding: 0 48px;
	position: relative;
}
.lx-header__logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
/* Logo: Imagify wraps wp_get_attachment_image in <picture> and puts our class
   on the WRAPPER — so we MUST constrain the inner <img> too (object-fit/max-height
   do nothing on <picture>). Proportional fit within 200×52 (well inside the 96px
   bar) so the logo can never overflow into the nav row. Works whether the class
   lands on a <picture> or directly on an <img>. */
/* Logo sizing. Elementor's `.elementor img { max-width:100%; height:auto }`
   (custom-frontend.min.css, specificity 0,1,1) was BEATING our 0,1,0 rule → on the
   absolute shrink-to-fit anchor that collapses the bare wordmark SVG <img> to 0×0
   (invisible; the old PNG escaped it as a <picture> wrapper). Scope under .lx-header
   (0,2,0 > 0,1,1) to WIN — no !important — with explicit height + max-width:none so the
   ~6.1:1 wordmark sizes purely by height (~341px wide at 56px tall). */
.lx-header .lx-header__logo-img,
.lx-header .lx-header__logo-img img {
	display: block;
	width: auto;
	height: 56px;
	max-width: none;
	object-fit: contain;
}
.lx-header__logo-text { font-family: var(--font-display); font-size: 30px; letter-spacing: 0.04em; color: var(--text-primary); }
.lx-header__utils { display: flex; align-items: center; gap: 24px; margin-left: auto; }

/* ── Button reset ─────────────────────────────────────────────────────────
   Kalium's base.min.css styles [type=button]/[type=submit] (specificity 0,1,0)
   with a dark bg + padding. Our buttons carry type="button", so they tie our
   single-class rules and Kalium (loaded later) wins → dark boxes + collapsed
   burger lines. Scoping under .lx-header / #lx-drawer (0,1,1) beats 0,1,0
   cleanly — no !important. */
.lx-header button,
#lx-drawer button {
	-webkit-appearance: none; appearance: none;
	margin: 0; padding: 0;
	background: none; border: 0; box-shadow: none; border-radius: 0;
	color: var(--text-primary); font: inherit; line-height: 0; cursor: pointer;
}

/* ── Hamburger (tablet/mobile only) ───────────────────────────────────── */
.lx-header__burger {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 30px; height: 30px;
}
.lx-header__burger span {
	display: block; flex-shrink: 0; width: 22px; height: 2px; /* 2px (even) — renders crisp at all zoom/DPR; 1.5px rounded unevenly per line */
	background-color: var(--text-primary);
	transition: transform 180ms var(--ease-quiet), opacity 180ms var(--ease-quiet);
}

/* ── WPML language switcher (shortcode output) ────────────────────────── */
.lx-header__lang .wpml-ls-display,
.lx-drawer__lang .wpml-ls-display { display: none; }   /* hides "(English)"/"(German)" sub-labels */
.lx-header__lang .wpml-ls,
.lx-drawer__lang .wpml-ls { background: none; border: 0; padding: 0; margin: 0; }
.lx-header__lang .wpml-ls > ul,
.lx-drawer__lang .wpml-ls > ul { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
.lx-header__lang .wpml-ls-item,
.lx-drawer__lang .wpml-ls-item { padding: 0 8px; border-right: 1px solid var(--lx-cashmere); }
.lx-header__lang .wpml-ls-item:last-child,
.lx-drawer__lang .wpml-ls-item:last-child { border-right: 0; padding-right: 0; }
.lx-header__lang .wpml-ls-item:first-child,
.lx-drawer__lang .wpml-ls-item:first-child { padding-left: 0; }
.lx-header__lang .wpml-ls-link,
.lx-drawer__lang .wpml-ls-link { text-decoration: none; padding: 0; }
.lx-header__lang .wpml-ls-native,
.lx-drawer__lang .wpml-ls-native {
	font-family: var(--font-sans);
	font-size: 12px; font-weight: 500; letter-spacing: 0.10em;
	text-transform: uppercase; color: var(--lx-cashmere);
	transition: color 180ms var(--ease-quiet);
}
.lx-header__lang .wpml-ls-current-language .wpml-ls-native,
.lx-header__lang .wpml-ls-link:hover .wpml-ls-native,
.lx-drawer__lang .wpml-ls-current-language .wpml-ls-native,
.lx-drawer__lang .wpml-ls-link:hover .wpml-ls-native { color: var(--text-primary); }

/* ── Cart ─────────────────────────────────────────────────────────────── */
/* §B5 — cart pulled onto the nav/language axis (Row 2), not the logo bar (client
   2026-06-23). Absolute vs .lx-header (relative) so it's free of both rows' flow and
   stays the positioned ancestor for its dropdown panel. 124px = bar 96 + nav 56/2.
   Tablet/mobile move it back to the bar row (Row 2 there = the drawer). */
.lx-hdrcart { position: absolute; right: 48px; top: 100px; transform: translateY(-50%); z-index: 101; }
.lx-hdrcart__toggle {
	position: relative; display: inline-flex; align-items: center;
	background: none; border: 0; padding: 4px; cursor: pointer;
	color: var(--text-primary);
	transition: color 150ms var(--ease-quiet);
}
/* Hover → cashmere (the language-switcher's tone) — a visible cue against the ivory
   header. .lx-header (0,3,0) beats Kalium base.min.css [type=button]:hover (0,2,0,
   loaded later) which was forcing --k-button-color (white → invisible on ivory).
   (client 2026-06-23) */
.lx-header .lx-hdrcart__toggle:hover { color: var(--lx-cashmere); }
.lx-hdrcart__count {
	position: absolute; top: -2px; right: -6px;
	min-width: 16px; height: 16px; padding: 0 4px;
	background-color: var(--text-primary); color: var(--surface-primary);
	font-family: var(--font-sans); font-size: 10px; font-weight: 600;
	line-height: 16px; text-align: center; border-radius: 999px;
}
.lx-hdrcart__panel {
	position: absolute; top: calc(100% + 12px); right: 0; width: 340px; max-width: 92vw;
	background: var(--surface-primary); border: 1px solid var(--lx-cashmere);
	box-shadow: 0 6px 24px -8px rgba(58,53,47,.16);
	padding: 20px; opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity var(--dur-2) var(--ease-quiet), transform var(--dur-2) var(--ease-quiet), visibility var(--dur-2);
	z-index: 200;
}
.lx-hdrcart.is-open .lx-hdrcart__panel { opacity: 1; visibility: visible; transform: none; }

/* ── Account (§#23) ───────────────────────────────────────────────────────
   Sitewide login/logout/account control. Mirrors the cart and sits just LEFT
   of it on the same axis. Deliberately a separate absolute element so the
   §B5-tuned .lx-hdrcart placement is untouched; the right offsets = the cart's
   per-breakpoint right value + the cart icon width + a ~16px gap. */
/* Desktop: sits LEFT of the language flags (which occupy ~right:104–164px on the
   nav axis); 24px symmetric gaps make the [account][flags][cart] cluster even.
   Tablet/mobile hide the nav flags, so the account moves next to the cart below. */
.lx-hdracct { position: absolute; right: 188px; top: 100px; transform: translateY(-50%); z-index: 101; }
.lx-hdracct__toggle {
	position: relative; display: inline-flex; align-items: center;
	background: none; border: 0; padding: 4px; cursor: pointer; line-height: 0;
	color: var(--text-primary); text-decoration: none;
	transition: color 150ms var(--ease-quiet);
}
.lx-header .lx-hdracct__toggle:hover { color: var(--lx-cashmere); }
.lx-hdracct__panel {
	position: absolute; top: calc(100% + 12px); right: 0; width: 200px; max-width: 92vw;
	background: var(--surface-primary); border: 1px solid var(--lx-cashmere);
	box-shadow: 0 6px 24px -8px rgba(58,53,47,.16);
	padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity var(--dur-2) var(--ease-quiet), transform var(--dur-2) var(--ease-quiet), visibility var(--dur-2);
	z-index: 200;
}
.lx-hdracct.is-open .lx-hdracct__panel { opacity: 1; visibility: visible; transform: none; }
.lx-hdracct__menu { list-style: none; margin: 0; padding: 0; }
.lx-hdracct__menu a {
	display: block; padding: 10px 12px; text-decoration: none;
	font-family: var(--font-sans); font-size: 12px; font-weight: 500;
	letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-primary);
	transition: background-color 150ms var(--ease-quiet), color 150ms var(--ease-quiet);
}
.lx-hdracct__menu a:hover { background-color: var(--lx-pearl); }
.lx-hdracct__menu .lx-hdracct__logout { border-top: 1px solid var(--lx-pearl); color: var(--text-secondary); }
@media (max-width: 1024px) { .lx-hdracct { top: 40px; right: 80px; } }
@media (max-width: 767px)  { .lx-hdracct { top: 32px; right: 62px; } .lx-hdracct__toggle .lx-icon--account { width: 22px; height: 22px; } }
@media (prefers-reduced-motion: reduce) { .lx-hdracct__panel { transition: none; } }

/* ── §nav-2026-06-25 (client feedback) — unify flags · account · cart into ONE flex cluster
   so the spacing is EVEN (was three absolute elements with mismatched right: offsets), in the
   order flags · account · cart, with a separator + active-state on the flags. Overrides the
   older per-element absolute positioning above via descendant specificity (0,2,0 > 0,1,0). */
.lx-header__utils {
	position: absolute; right: 48px; top: 100px; transform: translateY(-50%);
	display: flex; align-items: center; gap: 26px; z-index: 101;
}
.lx-header__utils .lx-header__lang,
.lx-header__utils .lx-hdracct,
.lx-header__utils .lx-hdrcart {
	position: relative; right: auto; left: auto; top: auto; transform: none;
}
.lx-header__utils .lx-header__lang { display: flex; align-items: center; }
/* flags: separator between the two languages + dim the inactive one for clarity */
.lx-header__utils .lx-lang { gap: 0; }
.lx-header__utils .lx-lang__item { padding: 0 14px; }
.lx-header__utils .lx-lang__item:first-child { padding-left: 0; border-right: 1px solid var(--lx-cashmere); }
.lx-header__utils .lx-lang__item:last-child { padding-right: 0; }
.lx-header__utils .lx-lang__item:not(.is-active) .lx-lang__flag { opacity: .5; transition: opacity 150ms var(--ease-quiet); }
.lx-header__utils .lx-lang__item.is-active .lx-lang__flag,
.lx-header__utils .lx-lang__link:hover .lx-lang__flag { opacity: 1; }
/* ≤1024px: nav + flags collapse into the drawer → cluster = account · cart on the bar row */
@media (max-width: 1024px) {
	.lx-header__utils { top: 40px; right: 32px; gap: 22px; }
	.lx-header__utils .lx-header__lang { display: none; }
	.lx-header__utils .lx-hdracct { display: none; }
}
@media (max-width: 767px) { .lx-header__utils { top: 32px; right: 20px; } }

/* Drawer account links (mobile) — sit above the pinned language switcher. */
.lx-drawer__account { display: flex; flex-direction: column; padding: 4px 20px 0; }
.lx-drawer__account-link {
	display: block; padding: 14px 0; text-decoration: none; border-top: 1px solid var(--lx-pearl);
	font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.10em;
	text-transform: uppercase; color: var(--text-primary);
}

/* ── Row 2: desktop nav + mega-menu (DESKTOP ONLY) ────────────────────── */
.lx-header__nav { display: flex; justify-content: center; align-items: center; height: 48px; position: relative; }
/* §1a — language flags pinned right on the nav row (same level as the nav headers).
   §B5 — shifted left to clear the cart, which now shares this axis at right:48px. */
.lx-header__nav .lx-header__lang { position: absolute; right: 104px; top: 50%; transform: translateY(-50%); }
.lx-lang { display: flex; align-items: center; gap: 18px; list-style: none; margin: 0; padding: 0; }
.lx-lang__item { display: flex; }
.lx-lang__link { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.lx-lang__flag { width: 21px; height: 14px; object-fit: cover; display: block; border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.lx-lang__name {
	font-family: var(--font-sans); font-size: 12px; font-weight: 500;
	letter-spacing: 0.10em; text-transform: uppercase; color: var(--lx-cashmere);
	transition: color 180ms var(--ease-quiet);
}
.lx-lang__item.is-active .lx-lang__name,
.lx-lang__link:hover .lx-lang__name { color: var(--text-primary); }
/* §B4 — desktop header language switcher = FLAGS ONLY (client 2026-06-23); the mobile
   drawer keeps the native name (.lx-drawer__lang) for legibility.
   a11y (2026-06-25): visually-hidden (NOT display:none) so the native language name
   stays in the accessibility tree — gives each flag link a discernible accessible name
   (WCAG 2.4.4 / axe link-name). Visual result is identical to display:none. */
.lx-header__lang .lx-lang__name {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.lx-nav { display: flex; align-items: center; gap: 80px; list-style: none; margin: 0; padding: 0; }
.lx-nav__item { position: static; }       /* static so .lx-mega can span full width */
.lx-nav__link {
	display: inline-block; padding: 4px 0;
	font-family: var(--font-sans); font-size: 13px; font-weight: 500;
	letter-spacing: 0.12em; text-transform: uppercase; line-height: 1;
	color: var(--text-primary); text-decoration: none;
	/* Underline grows L→R on hover (matches the footer's link underline). Uses
	   currentColor so it inherits any future header colour-scheme flip for free. */
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px;
	transition: color 150ms var(--ease-quiet), background-size 150ms var(--ease-quiet);
}
.lx-nav__link:hover, .lx-nav__link:focus-visible { color: var(--text-secondary); background-size: 100% 1px; }
/* Active item: persistent underline via the same mechanism (was a separate ::after line). */
.lx-nav__item.is-current > .lx-nav__link { background-size: 100% 1px; }
.lx-nav__link:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 4px; }

.lx-mega {
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--surface-primary); border-bottom: 1px solid var(--lx-pearl);
	opacity: 0; visibility: hidden; transform: translateY(-4px);
	transition: opacity var(--dur-3) var(--ease-quiet), transform var(--dur-3) var(--ease-quiet), visibility var(--dur-3);
	z-index: 90;
}
.lx-nav__item--mega:hover .lx-mega,
.lx-nav__item--mega:focus-within .lx-mega { opacity: 1; visibility: visible; transform: none; }
/* Mega = centered grid of cards, one per sub-item (each reads its own image).
   justify-content:center → 2 cards center cleanly (no right gap) and align
   identically across every top-level item; flex-wrap handles any card count. */
.lx-mega__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; max-width: 1280px; margin: 0 auto; padding: 48px; }
.lx-mega__card { display: block; width: 300px; text-decoration: none; }
.lx-mega__card-img { display: block; width: 300px; height: 200px; background: var(--lx-pearl); overflow: hidden; } /* wider + shorter per feedback; Pearl box shows when no image set */
/* Same Imagify <picture> handling: fill + cover on BOTH the wrapper and the
   inner <img> so the card image crops to the 300×200 box (not overflow it). */
.lx-header .lx-mega__card-pic,
.lx-header .lx-mega__card-pic img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.lx-mega__card-pic img { transition: transform var(--dur-3) var(--ease-quiet); }
.lx-mega__card:hover .lx-mega__card-pic,
.lx-mega__card:hover .lx-mega__card-pic img { transform: scale(1.04); }
.lx-mega__card { text-align: center; }   /* §1a — center the inline-block label so its hover underline matches the text width */
.lx-mega__card-label {
	display: inline-block; margin-top: 16px;
	font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.10em;
	text-transform: uppercase; color: var(--text-primary);
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px;
	transition: color 150ms var(--ease-quiet), background-size 150ms var(--ease-quiet);
}
/* §1a — underline effect on the desktop mega-menu ("drawer") items, matching .lx-nav__link */
.lx-mega__card:hover .lx-mega__card-label,
.lx-mega__card:focus-visible .lx-mega__card-label { color: var(--text-secondary); background-size: 100% 1px; }

/* ── Sticky + headroom hide/reveal (toggled by header.js past 120px) ────
   Past the threshold the header is fixed + solid. Scrolling DOWN slides it
   off-screen (translateY -100%); scrolling UP slides it back. The nav row
   STAYS (no collapse) so navigation is always reachable when shown. */
.lx-header.is-sticky {
	position: fixed; top: 0; left: 0; right: 0;
	background-color: var(--lx-white);
	border-bottom-color: var(--lx-cashmere);
	box-shadow: 0 1px 0 var(--lx-cashmere);
	transition: transform var(--dur-2) var(--ease-quiet), background-color 250ms ease, border-color 250ms ease;
	will-change: transform;
}
.lx-header.is-sticky.is-pinned   { transform: translateY(0); }
.lx-header.is-sticky.is-unpinned { transform: translateY(-100%); }
/* Logged-in admins: clear the WP admin bar so the fixed header isn't covered. */
.admin-bar .lx-header.is-sticky { top: 32px; }
@media (max-width: 782px) { .admin-bar .lx-header.is-sticky { top: 46px; } }

/* ── Tablet + mobile chrome ───────────────────────────────────────────── */
@media (max-width: 1024px) {
	.lx-header__bar { height: 80px; padding: 0 32px; }
	.lx-header .lx-header__logo-img,
	.lx-header .lx-header__logo-img img { height: 48px; }
	.lx-header__burger { display: flex; }
	.lx-header__nav { display: none; }            /* nav moves into the drawer */
	.lx-header__lang { display: none; }           /* lang moves into the drawer */
	.lx-hdrcart { top: 40px; right: 32px; }       /* §B5 — back to the bar row (Row 2 = drawer here); bar 80px → center 40px */
	/* tablet keeps full-height sticky bar (no shrink); headroom hide/reveal still applies */
}
@media (max-width: 767px) {
	.lx-header__bar { height: 64px; padding: 0 20px; }
	.lx-header .lx-header__logo-img,
	.lx-header .lx-header__logo-img img { height: 36px; }
	.lx-hdrcart__toggle .lx-icon--cart { width: 22px; height: 22px; }
	.lx-hdrcart { top: 32px; right: 20px; }       /* §B5 — bar 64px → center 32px */
	/* no sticky/headroom on mobile — header stays in flow */
	.lx-header.is-sticky { position: relative; box-shadow: none; transform: none; }
}

/* ── Mobile drawer (full-screen drill-down) ───────────────────────────── */
#lx-drawer {
	position: fixed; inset: 0; z-index: 10000;
	display: flex; flex-direction: column;
	background-color: var(--surface-primary);
	transform: translateX(-100%); visibility: hidden;
	transition: transform var(--dur-2) var(--ease-quiet), visibility var(--dur-2);
}
#lx-drawer.is-open { transform: none; visibility: visible; }
.lx-drawer__top { display: flex; align-items: center; height: 64px; padding: 0 20px; position: relative; }
.lx-drawer__close { background: none; border: 0; padding: 8px; cursor: pointer; color: var(--text-primary); }
.lx-drawer__title { position: absolute; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: 22px; letter-spacing: 0.04em; color: var(--text-primary); }
.lx-drawer__nav { flex: 1 1 auto; position: relative; overflow: hidden; }
.lx-drawer__menu { list-style: none; margin: 0; padding: 0; }
.lx-drawer__menu > li { border-bottom: 1px solid var(--lx-pearl); }
.lx-drawer__menu a {
	display: flex; align-items: center; justify-content: space-between;
	height: 64px; padding: 0 20px; text-decoration: none;
	font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1;
	color: var(--text-primary);
}
.lx-drawer__menu .menu-item-has-children > a::after {
	content: ""; width: 9px; height: 9px;
	border-top: 1px solid var(--text-primary); border-right: 1px solid var(--text-primary);
	transform: rotate(45deg); flex-shrink: 0; margin-left: 12px;
}
/* drill-down sub-level: slides over from the right, below the top bar */
/* Drill-down via display-swap (robust — no absolute positioning, so no
   fixed/transform containing-block trap). When a parent is open, the menu ul
   gets .has-open: sibling items + the parent's own row hide; only the open
   sub-level (with its injected Back button) shows, with a subtle slide-fade. */
.lx-drawer__menu .sub-menu { list-style: none; margin: 0; padding: 0; display: none; }
.lx-drawer__menu li.lx-open > .sub-menu {
	display: block;
	animation: lx-drawer-slide var(--dur-2) var(--ease-quiet);
}
.lx-drawer__menu.has-open > li:not(.lx-open) { display: none; }
.lx-drawer__menu.has-open > li.lx-open { border-bottom: 0; }
.lx-drawer__menu.has-open > li.lx-open > a { display: none; }
@keyframes lx-drawer-slide { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.lx-drawer__back {
	display: flex; align-items: center; gap: 8px; width: 100%;
	height: 56px; padding: 0 20px; background: none; border: 0;
	border-bottom: 1px solid var(--lx-pearl); cursor: pointer;
	font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--text-secondary); text-align: left;
}
.lx-drawer__back::before {
	content: ""; width: 8px; height: 8px;
	border-bottom: 1px solid currentColor; border-left: 1px solid currentColor;
	transform: rotate(45deg);
}
.lx-drawer__lang { margin-top: auto; padding: 32px 20px 48px; display: flex; justify-content: center; }
.lx-drawer__lang .wpml-ls-native { font-size: 14px; }

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.lx-header, .lx-header.is-sticky, .lx-header__bar, .lx-header__logo-img, .lx-nav__link, .lx-mega, .lx-hdrcart__panel,
	#lx-drawer { transition: none; }
	.lx-drawer__menu li.lx-open > .sub-menu { animation: none; }
}