/*
 * BBA Mobile Nav — approved mobile header spec (mockups/bba-mobile-nav-mockups-v2.html).
 * REBUILT v2 — one rule drives the whole file: the header's LAYOUT rules are
 * unconditional (they only take effect when the header is displayed), and the
 * display toggles are the only width-scoped rules. That is what makes the
 * Elementor editor demo identical to the phone at every slider value.
 *
 * Three layers:
 *   1. Header layout (unconditional) — band, logo row, ‹ Title row, demo
 *      burger, and the ‹ › arrow positioning (the arrows exist at every
 *      width; the variables cascade base scope >=801px, mobile chain <=800px).
 *   2. Mobile ergonomics (<=800px) — host-container parity, white drawer,
 *      44px tap targets, hamburger positioning. These touch only elements
 *      owned by other snippets, exactly as approved on the live site.
 *   3. Front-end display scoping + editor demo reveal.
 *
 * All variable-driven values are emitted by the widget's render() on :root —
 * base scope (Desktop tab) plus the mobile-first chain inside <=800px —
 * so every control responds on the front end and in the editor demo.
 */

/* ============================================================
   1 · HEADER LAYOUT — unconditional. The band, the collection/
   product logo row and the ‹ Title row are display:none'd above
   800px on the front end, so these rules only ever render where
   the header is actually shown (mobile, or the editor demo).
   ============================================================ */

/* Homepage logo band */
#bba-nav-band {
	display: flex; align-items: center;
	height: var(--bba-home-band-h, 58px);
	background: #fff;
	border-bottom: 1px solid #e3ded7;
	padding: 0 8px;
	position: relative; z-index: 20;
}
#bba-nav-band .bba-nb-logo { flex: 1; display: flex; justify-content: center; }
#bba-nav-band img { height: var(--bba-logo-h-home, 36px); width: auto; }
#bba-nav-band .bba-nb-pad { width: 44px; flex-shrink: 0; }

/* Collection/product logo row — height is content-driven (logo height
   control sets it), exactly as verified live on the approved site. */
#bba-nav-bar {
	display: flex; align-items: center; justify-content: center;
	background: #fff;
	padding: 0 8px;
}
#bba-nav-bar img { height: var(--bba-logo-h-pages, 72px); width: auto; }

/* ‹ Title row — height and outer spacing from the controls. */
#bba-nav-sub {
	display: flex; align-items: center;
	height: var(--bba-title-row-h, 44px);
	background: #fff;
	border-bottom: 1px solid #e3ded7;
	padding: 0 12px 0 0;
	margin-top: var(--bba-title-space-top, 0px);
	margin-bottom: var(--bba-title-space-bottom, 0px);
}
#bba-nav-sub .bba-nb-back {
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; flex-shrink: 0;
	color: #1d1d1b;
}
#bba-nav-sub .bba-nb-title {
	font: 600 11px/1.2 'DM Sans', sans-serif;
	letter-spacing: 2.2px; text-transform: uppercase;
	color: #1d1d1b;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	margin-left: 4px;
}

/* Editor-only demo hamburger — hidden by default everywhere (it must never
   render on the front end, where the real burger is), positioned exactly
   where the real one sits and driven by the same variables. */
.bba-mnav-demo-burger {
	display: none;
	position: fixed;
	top: var(--bba-burger-inset, 16px);
	left: var(--bba-burger-inset, 16px);
	padding: var(--bba-burger-pad, 10px);
	align-items: center; justify-content: center;
	background: #fff;
	z-index: 99991;
}

/* ‹ › product-walk arrows — positioned at EVERY width (they render at
   every width). The variables cascade: base scope >=801px, the mobile
   chain inside <=800px — so the Desktop tab controls wide screens and
   the Mobile/Tablet tabs control the phone, independently. */
.bba-pdetail-nav {
	top: var(--bba-chev-top, 16px) !important;
	right: var(--bba-chev-right, 24px) !important;
}
.bba-pdetail-nav button { padding: var(--bba-chev-pad, 8px) !important; }

/* ============================================================
   2 · MOBILE ERGONOMICS (<=800px). Host-container parity, white
   drawer, 44px tap targets, and the hamburger positioning for the
   elements owned by other snippets — the approved set,
   byte-for-byte.
   ============================================================ */
@media (max-width: 800px) {
	/* The Elementor wrapper container hosting this widget (classes live in
	   the page data: bba-nav-impl-wrap + -bar or -band). Parity with the
	   live implementation: zero spacing, white, sticky on collection/product. */
	.bba-nav-impl-wrap { padding: 0 !important; margin: 0 !important; gap: 0 !important; background: #fff !important; }
	.bba-nav-impl-wrap .elementor-widget { margin: 0 !important; }
	.bba-nav-impl-bar { position: sticky !important; top: 0 !important; z-index: 30 !important; }

	/* White drawer (rail widget's mobile drawer) + 44px rows */
	.bba-side-rail[data-mobile="drawer"] { background: #fff !important; }
	.bba-side-rail[data-mobile="drawer"] .bba-side-rail-menu a,
	.bba-side-rail[data-mobile="drawer"] .bba-side-rail-footermenu a { display: flex; align-items: center; min-height: 44px; }

	/* 44px tap targets (product page buttons + tearsheet) */
	.bba-pinfo-enquiry, .bba-tsm-btn { display: inline-flex; align-items: center; min-height: 44px; }
	.bba-pdetail-nav button { min-width: 44px; min-height: 44px; }

	/* 1 · Hamburger button spacing */
	.bba-side-rail-burger {
		top: var(--bba-burger-inset, 16px) !important;
		left: var(--bba-burger-inset, 16px) !important;
		padding: var(--bba-burger-pad, 10px) !important;
	}

	/* Drawer close button (injected by script.js) */
	.bba-drawer-x {
		position: absolute; top: 10px; right: 8px;
		width: 44px; height: 44px;
		display: flex; align-items: center; justify-content: center;
		background: none; border: 0; padding: 0; cursor: pointer;
	}
}

/* ============================================================
   3 · DISPLAY SCOPING.
   Above 800px the widget and its host container render nothing on
   the live site. In the Elementor editor, though, the demo must be
   visible at any canvas width — that is the whole point of the
   rebuild — so the reveal rules carry a higher-specificity class
   from either the server render (bba-mnav-edit) or the runtime
   editor detection (html.bba-mnav-editor, set by script.js and
   therefore immune to AJAX re-renders).
   ============================================================ */
@media (min-width: 801px) {
	.bba-nav-impl-wrap { display: none !important; }
	.bba-mnav { display: none !important; }

	/* --- Editor demo reveal (server hint and/or runtime class) --- */
	.bba-nav-impl-wrap:has(.bba-mnav-edit),
	html.bba-mnav-editor .bba-nav-impl-wrap {
		display: flex !important;
		padding: 0 !important; margin: 0 !important; gap: 0 !important;
		background: #fff !important;
	}
	.bba-mnav.bba-mnav-edit,
	html.bba-mnav-editor .bba-mnav {
		display: block !important;
		position: fixed;
		top: 0; left: 0; right: 0;
		z-index: 99990;
		background: #fff;
		box-shadow: 0 1px 0 #e3ded7;
	}
	.bba-mnav.bba-mnav-edit .bba-mnav-demo-burger,
	html.bba-mnav-editor .bba-mnav-demo-burger {
		display: inline-flex;
	}
	/* Demo chrome is display-only: never intercept editor clicks. */
	.bba-mnav.bba-mnav-edit .bba-mnav-demo-burger,
	html.bba-mnav-editor .bba-mnav-demo-burger { pointer-events: none; }
}