/* ===========================================================================
   Mobile header + off-canvas drawer (merged header styles only).

   Below GeneratePress's 768px breakpoint the dense desktop header collapses to
   logo / full-width search / nav bar (burger left, cart right). The aside, the
   product-categories sidebar, the inline menu links, and GP's own menu-toggle
   are hidden; a custom drawer (assets/js/drawer.js) holds the nav menu and the
   product categories as push-panels. See tasks/mobile-header-drawer.md.

   Depends on header.css for the :root tokens and the base header cascade.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   The burger: first child of .inside-navigation, hidden until mobile.
   --------------------------------------------------------------------------- */

.j2e-nav-burger {
	display: none;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--j2e-nav-height);
	height: var(--j2e-nav-height);
	padding: 0;
	color: var(--j2e-nav-text);
	background-color: transparent;
	border: 0;
	cursor: pointer;
}

/* Three-bar glyph drawn from the middle bar + its ::before/::after. */
.j2e-nav-burger__bars,
.j2e-nav-burger__bars::before,
.j2e-nav-burger__bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background-color: currentColor;
	border-radius: 2px;
}

.j2e-nav-burger__bars {
	position: relative;
}

.j2e-nav-burger__bars::before,
.j2e-nav-burger__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.j2e-nav-burger__bars::before {
	top: -7px;
}

.j2e-nav-burger__bars::after {
	top: 7px;
}

/* ---------------------------------------------------------------------------
   Mobile layout: engage at GP's 768px breakpoint.
   --------------------------------------------------------------------------- */

@media (max-width: 768px) {
	/* Show the burger; hide GP's own toggle and the inline menu links so the
	   nav bar reads burger | (flex gap) | cart. */
	.j2e-nav-burger {
		display: inline-flex;
	}

	.main-navigation .menu-toggle,
	.main-navigation .main-nav,
	.main-navigation #primary-menu {
		display: none;
	}

	/* Burger pinned left; the language switcher + cart ride together on the
	   right. The switcher claims the bar's free space (margin-left:auto), so the
	   cart sits snug after it rather than each grabbing half the gap. The cart
	   override beats header-merged.css's own `margin-left:auto` (0,2,1). */
	.main-navigation .inside-navigation {
		display: flex;
		align-items: center;
		gap: 1em;
	}

	.j2e-nav-lang {
		margin-left: auto;
	}

	/* The `gap` above already spaces the cart after the switcher; this only
	   cancels the `margin-left:auto` header-merged.css gives the cart (which would
	   otherwise split the free space and detach the cart from the pill). Beats it
	   at 0,4,1. A single-language bar has no switcher sibling, so the `~` selector
	   misses and the cart keeps that auto margin — staying pinned right. */
	body.j2e-header-merged .main-navigation .j2e-nav-lang ~ .j2e-nav-cart {
		margin-left: 0;
	}

	/* Drop the brand-row aside (contact / language / account cluster) and the
	   product-categories sidebar — both live in the drawer or are deferred. */
	.j2e-header-aside,
	#left-sidebar {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   Compact language switcher (mobile nav bar only).

   A segmented pill of 2-letter codes — inc/header/language.php
   just2euro_render_nav_lang_switcher. Hidden on desktop, where the full
   switcher (flags + names) lives in the header aside; revealed on the bar at
   the mobile breakpoint above (display:inline-flex). Colours derive from the
   nav tokens, so it tracks the purple bar like the burger and cart do.
   --------------------------------------------------------------------------- */

.j2e-nav-lang {
	display: none;
}

/* The inner rules re-assert at `.main-navigation` specificity: GeneratePress's
   dynamic mobile CSS hides every nav `ul` and restyles `li`/`a`
   (`.main-navigation ul {display:none}`, `.main-navigation li`,
   `.main-navigation a`, each 0,1,1), which would otherwise clobber the pill. */
.main-navigation .j2e-nav-lang__list {
	display: flex;
	align-items: center;
	gap: 3px;
	margin: 0;
	padding: 3px;
	list-style: none;
	/* A faint track lifts the pill off the bar without a hard border. */
	background-color: color-mix(in srgb, var(--j2e-nav-text) 14%, transparent);
	border-radius: 999px;
}

.main-navigation .j2e-nav-lang__item {
	display: flex;
	width: auto;
	margin: 0;
}

.main-navigation .j2e-nav-lang__option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 36px;
	padding: 0 11px;
	color: color-mix(in srgb, var(--j2e-nav-text) 72%, transparent);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none;
	border-radius: 999px;
	transition: color 0.18s ease, background-color 0.18s ease, transform 0.12s ease;
}

/* Re-assert at .main-navigation specificity: a bare <a> in .inside-navigation
   otherwise picks up GeneratePress's generic nav-link colour. */
.main-navigation a.j2e-nav-lang__option:hover,
.main-navigation a.j2e-nav-lang__option:focus-visible {
	color: var(--j2e-nav-text);
	background-color: color-mix(in srgb, var(--j2e-nav-text) 14%, transparent);
}

a.j2e-nav-lang__option:active {
	transform: scale(0.94);
}

/* Current language: a floating "thumb" (inverted — bar-coloured text on a
   nav-text fill), lifted off the track with a soft iOS-style shadow. Not a
   link, so no hover/active state. */
.main-navigation .j2e-nav-lang__item.is-active .j2e-nav-lang__option {
	color: var(--j2e-nav-bg);
	background-color: var(--j2e-nav-text);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.12);
	cursor: default;
}

.j2e-nav-lang__option:focus-visible {
	outline: 2px solid var(--j2e-cyan);
	outline-offset: 2px;
}

/* Reveal on the bar at the mobile breakpoint. Must follow the `display:none`
   above (equal specificity) to win the cascade. */
@media (max-width: 768px) {
	.j2e-nav-lang {
		display: inline-flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.j2e-nav-lang__option {
		transition: none;
	}

	a.j2e-nav-lang__option:active {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Light bar (merged-light) recolour for the mobile chrome.

   header-light.css repaints the bottom nav white but leaves --j2e-nav-text
   (#fff) and --j2e-nav-bg (purple) untouched, so the white-on-purple burger and
   switcher above would vanish on the white bar. Repaint both to read on the
   light surface: dark burger, dark-on-faint pill, and a solid brand-purple
   active chip — the same accent header-light.css gives the menu underline.
   Scoped to body.j2e-nav-light, so it is inert on the purple bar; the higher
   specificity overrides the purple defaults above regardless of source order.
   --------------------------------------------------------------------------- */

body.j2e-nav-light .j2e-nav-burger {
	color: var(--j2e-heading-2);
}

body.j2e-nav-light .main-navigation .j2e-nav-lang__list {
	background-color: color-mix(in srgb, var(--j2e-heading-2) 9%, transparent);
}

body.j2e-nav-light .main-navigation .j2e-nav-lang__option {
	color: var(--j2e-muted);
}

body.j2e-nav-light .main-navigation a.j2e-nav-lang__option:hover,
body.j2e-nav-light .main-navigation a.j2e-nav-lang__option:focus-visible {
	color: var(--j2e-purple);
	background-color: color-mix(in srgb, var(--j2e-purple) 10%, transparent);
}

body.j2e-nav-light .main-navigation .j2e-nav-lang__item.is-active .j2e-nav-lang__option {
	color: var(--j2e-nav-text); /* #fff on the purple chip */
	background-color: var(--j2e-purple);
	box-shadow: 0 2px 5px rgba(84, 26, 92, 0.22), 0 0 1px rgba(84, 26, 92, 0.18);
}

/* ---------------------------------------------------------------------------
   Scroll lock while the drawer is open.
   --------------------------------------------------------------------------- */

body.j2e-drawer-is-open {
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Drawer shell: dimmed backdrop + right-hand sliding panel. Visibility is
   driven by the body open-class (not the `hidden` attribute) so the panel can
   transition; `visibility` keeps the closed panel out of the tab order.
   --------------------------------------------------------------------------- */

.j2e-drawer__overlay {
	position: fixed;
	inset: 0;
	z-index: 990;
	background-color: rgba(0, 0, 0, 0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.j2e-drawer__panel {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 995;
	display: flex;
	flex-direction: column;
	width: min(360px, 88vw);
	height: 100vh;
	max-height: 100vh;
	color: var(--j2e-text);
	background-color: var(--j2e-bg);
	box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
	text-align: left;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

.j2e-drawer-is-open .j2e-drawer__overlay {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.25s ease;
}

.j2e-drawer-is-open .j2e-drawer__panel {
	transform: translateX(0);
	visibility: visible;
	transition: transform 0.25s ease;
}

.admin-bar .j2e-drawer__panel {
	top: 32px;
	height: calc(100vh - 32px);
}

@media screen and (max-width: 782px) {
	.admin-bar .j2e-drawer__panel {
		top: 46px;
		height: calc(100vh - 46px);
	}
}

/* ---------------------------------------------------------------------------
   Overlay push-panels: stacked absolutely; deeper panels sit later in the DOM
   so they paint above their parents. drawer.js only ever slides the top panel
   (in from the right on drill, off to the right on back) over a stationary
   parent — nothing drifts toward the empty backdrop. Inactive panels carry the
   `hidden` attribute (display:none) so the focus trap can't reach them.
   --------------------------------------------------------------------------- */

.j2e-drawer__view {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	background-color: var(--j2e-bg);
	transform: translateX(100%);
	transition: transform 0.25s ease;
}

.j2e-drawer__view[hidden] {
	display: none;
}

.j2e-drawer__view.is-active {
	transform: translateX(0);
}

.j2e-drawer__view.is-incoming {
	transform: translateX(100%);
}

/* ---------------------------------------------------------------------------
   Panel bar: title or `‹` back control, plus the `×` close control.
   --------------------------------------------------------------------------- */

.j2e-drawer__bar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-height: 56px;
	padding: 0.5rem 1rem 0.5rem 1.5rem;
	color: var(--j2e-nav-text);
	background-color: var(--j2e-nav-bg);
}

.j2e-drawer__bar-title {
	font-family: var(--j2e-font-heading), sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--j2e-nav-text);
}

.j2e-drawer__panel .j2e-drawer__back {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
	padding: 0.25rem 0;
	color: var(--j2e-nav-text);
	background-color: transparent;
	border: 0;
	cursor: pointer;
}

/* Panel-scoped so the colour beats GeneratePress's white global button text
   (the `×` is drawn with currentColor). */
.j2e-drawer__panel .j2e-drawer__close {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--j2e-nav-text);
	background-color: transparent;
	border: 0;
	cursor: pointer;
}

/* Pin the icon size: as a flex child the inline SVG otherwise collapses to
   zero width. */
.j2e-drawer__close-icon {
	flex: none;
	display: block;
	width: 22px;
	height: 22px;
}

/* Chevron glyphs: a rotated box corner. Forward (`›`) for drills, the back
   variant (`‹`) points the other way. */
.j2e-drawer__chevron {
	display: block;
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}

.j2e-drawer__chevron--back {
	transform: rotate(-135deg);
}

/* ---------------------------------------------------------------------------
   Lists: nav menu (root) and category rows share row chrome.
   --------------------------------------------------------------------------- */

.j2e-drawer__nav {
	flex: 1 1 auto;
	overflow-y: auto;
}

.j2e-drawer__categories {
	flex: 1 1 auto;
	overflow-y: auto;
}

.j2e-drawer__menu,
.j2e-drawer__categories {
	margin: 0;
	padding: 0;
	list-style: none;
}

.j2e-drawer__menu li,
.j2e-drawer__category {
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid var(--j2e-border);
}

.j2e-drawer__menu a,
.j2e-drawer__category-link {
	flex: 1 1 auto;
	display: block;
	padding: 0.9rem 1rem;
	color: var(--j2e-text);
	font-size: 0.95rem;
	text-decoration: none;
}

.j2e-drawer__menu a:hover,
.j2e-drawer__menu a:focus-visible,
.j2e-drawer__category-link:hover,
.j2e-drawer__category-link:focus-visible {
	color: var(--j2e-purple);
	background-color: var(--j2e-surface-subtle);
}

.j2e-drawer__drill {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	color: var(--j2e-muted);
	background-color: transparent;
	border: 0;
	border-left: 1px solid var(--j2e-border);
	cursor: pointer;
}

.j2e-drawer__drill:hover,
.j2e-drawer__drill:focus-visible {
	color: var(--j2e-purple);
	background-color: var(--j2e-surface-subtle);
}

/* GeneratePress styles every <button> with a filled background that its
   `:hover`/`:focus` states outrank a bare `background: transparent`. Hold these
   icon buttons transparent through every interaction state (the drill keeps its
   own tint); the keyboard cue is the cyan ring below. */
.j2e-nav-burger,
.j2e-nav-burger:hover,
.j2e-nav-burger:focus,
.j2e-drawer__close,
.j2e-drawer__close:hover,
.j2e-drawer__close:focus,
.j2e-drawer__back,
.j2e-drawer__back:hover,
.j2e-drawer__back:focus {
	background-color: transparent;
}

.j2e-drawer__drill:hover,
.j2e-drawer__drill:focus {
	background-color: var(--j2e-surface-subtle);
}

/* ---------------------------------------------------------------------------
   Visible keyboard focus ring, matching header.css's cyan convention.
   --------------------------------------------------------------------------- */

.j2e-nav-burger:focus-visible,
.j2e-drawer__close:focus-visible,
.j2e-drawer__back:focus-visible,
.j2e-drawer__drill:focus-visible,
.j2e-drawer__menu a:focus-visible,
.j2e-drawer__category-link:focus-visible {
	outline: 2px solid var(--j2e-cyan);
	outline-offset: -2px;
}

/* Respect reduced-motion: keep the show/hide, drop the slide. */
@media (prefers-reduced-motion: reduce) {
	.j2e-drawer__overlay,
	.j2e-drawer__panel,
	.j2e-drawer__view {
		transition: none;
	}
}