/*
 * BBWAB Global Header
 * Applied via .bbwab-global-header on the Elementor Theme Builder header template.
 * Reference: position:sticky top:0 bg:rgba(2,1,34,.86) backdrop-filter:blur(12px) h:72px
 */

/* ── Outer header shell ─────────────────────────────────────────── */
/* `backdrop-filter` on an element makes it a new CONTAINING BLOCK for any
   `position:fixed` descendant (CSS Filter Effects spec, same as `filter`
   and `transform`). The header's own child — the mobile sticky-CTA HTML
   widget — is `position:fixed; bottom:0`, so with backdrop-filter directly
   on `.bbwab-global-header` that "bottom:0" resolved against the 73px-tall
   header box instead of the viewport, pinning the CTA near the TOP of the
   page instead of the bottom. Moving the blur to a `::before` layer keeps
   the visual effect while leaving the real header element filter-free, so
   position:fixed descendants correctly escape to the viewport. Verified via
   CDP device-metrics emulation (true narrow viewport, not --dump-dom's
   ~500px floor), which is what first surfaced the top-pinned CTA. */
.bbwab-global-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(2, 1, 34, 0.86);
	border-bottom: 1px solid var(--bbwab-color-border);
}
.bbwab-global-header::before {
	content: "";
	position: absolute;
	inset: 0;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	z-index: -1;
	pointer-events: none;
}

/* Admin bar offset — logged-in users */
.admin-bar .bbwab-global-header {
	top: 32px;
}
@media screen and (max-width: 782px) {
	.admin-bar .bbwab-global-header {
		top: 46px;
	}
}

/* ── Inner constraint row ───────────────────────────────────────────
   The header is built from Elementor Flexbox Containers, so every layout
   rule here needs to outrank Elementor's own `.e-con` (0,1,0) — hence the
   `.bbwab-global-header` scope on each selector (0,2,0).
   Reference: inner row 1120px wide, 24px gutters, 72px tall, nowrap. */
.bbwab-global-header .e-con {
	/*padding: 0;*/
	--container-max-width: none;
}

/* The header container itself must not add a flex gap: its second child is the
   mobile sticky-CTA widget, which is hidden on desktop but still a flex item,
   so Elementor's default 20px gap would inflate the header by 20px. */
.bbwab-global-header.e-con {
	gap: 0;
}
/* Hide the mobile CTA widget wrapper (not just its inner div) above the
   mobile breakpoint so it contributes no box at all. */
.bbwab-global-header > .elementor-widget-html {
	display: none;
}
@media (max-width: 820px) {
	.bbwab-global-header > .elementor-widget-html { display: block; }
}

/* `.e-con` is included in these selectors (0,3,0) so they outrank the
   `.bbwab-home .e-con { padding: 0 }` reset in home.css, which loads later. */
.bbwab-global-header .e-con.bbwab-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	width: 100%;
	max-width: var(--bbwab-max);
	margin-inline: auto;
	padding-inline: 24px;
	min-height: 72px;
	gap: var(--bbwab-space-xl);
}

/* Logo and CTA size to content; the nav takes the remaining space. */
.bbwab-global-header .e-con.bbwab-header-logo,
.bbwab-global-header .e-con.bbwab-header-cta {
	flex: 0 0 auto;
	width: auto;
}
.bbwab-global-header .e-con.bbwab-header-nav {
	flex: 1 1 auto;
	width: auto;
}

/* ── Logo ───────────────────────────────────────────────────────── */
.bbwab-header-logo img,
.bbwab-global-header .elementor-widget-image img {
	height: 42px;
	width: auto;
	display: block;
}
.bbwab-header-logo a,
.bbwab-global-header .elementor-widget-image a {
	display: inline-flex;
	align-items: center;
}

/* ── Nav menu (Elementor nav-menu widget) ───────────────────────────
   SPECIFICITY: Elementor emits
     .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item  (0,3,0)
   from the Kit, which sets the global display font + global text colour.
   These rules use four classes (0,4,0) so they win outright — no !important.
   Reference: Montserrat 13.5px / 600 / .04em / steel, white on hover+current. */
.bbwab-global-header .bbwab-header-nav .elementor-nav-menu {
	display: flex;
	flex-wrap: nowrap;          /* reference keeps all four links on one line */
	gap: 32px;                  /* measured reference column-gap */
	align-items: center;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bbwab-global-header .bbwab-header-nav .elementor-nav-menu li { white-space: nowrap; }
.bbwab-global-header .bbwab-header-nav .elementor-nav-menu .elementor-item {
	color: var(--bbwab-color-text-muted);
	text-decoration: none;
	font-family: var(--bbwab-font-body);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.65;
	text-transform: none;
	padding: 4px 0;
	fill: currentColor;
	transition: color var(--bbwab-transition-fast);
}
.bbwab-global-header .bbwab-header-nav .elementor-nav-menu .elementor-item:hover,
.bbwab-global-header .bbwab-header-nav .elementor-nav-menu .elementor-item.elementor-item-active,
.bbwab-global-header .bbwab-header-nav .elementor-nav-menu .current-menu-item > .elementor-item,
.bbwab-global-header .bbwab-header-nav .elementor-nav-menu .current-menu-ancestor > .elementor-item {
	color: var(--bbwab-color-text);
}
/* Focus state for keyboard nav */
.bbwab-global-header .bbwab-header-nav .elementor-nav-menu .elementor-item:focus-visible {
	outline: 3px solid var(--bbwab-color-accent);
	outline-offset: 3px;
	border-radius: 3px;
}

/* ── CTA button ─────────────────────────────────────────────────── */
.bbwab-global-header .bbwab-header-cta .elementor-button,
.bbwab-header-cta .elementor-button {
	/* Reference: Montserrat 13.5/700, ls .02em, sentence case (NOT uppercase),
	   inline-flex pill with no trailing arrow (the hero CTA has the arrow).
	   Background uses --bbwab-color-primary-hover (not -primary) rather than
	   the site's usual primary orange: at this compact 13.5px size white text
	   on --bbwab-orange is ~3.7:1, below the 4.5:1 required for non-large
	   text (axe-core: color-contrast, serious). The deeper hover shade
	   clears ~5.0:1 while staying an existing design token, not a new color. */
	display: inline-flex;
	align-items: center;
	background: var(--bbwab-color-primary-hover);
	color: var(--bbwab-color-text);
	font-family: var(--bbwab-font-body);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.65;
	letter-spacing: 0.02em;
	text-transform: none;
	padding: 12px 24px;
	border-radius: 999px;
	border: none;
	text-decoration: none;
	transition: filter var(--bbwab-transition-fast), transform var(--bbwab-transition-fast);
	white-space: nowrap;
}
.bbwab-header-cta .elementor-button:hover,
.bbwab-global-header .bbwab-header-cta .elementor-button:hover {
	filter: brightness(0.9);
	transform: translateY(-1px);
}
.bbwab-header-cta .elementor-button:focus-visible,
.bbwab-global-header .bbwab-header-cta .elementor-button:focus-visible {
	outline: 3px solid var(--bbwab-color-accent);
	outline-offset: 3px;
}

/* ── Mobile dropdown ───────────────────────────────────────────── */
/* Elementor's own `.elementor-nav-menu--dropdown` panel is no longer styled
   as a standalone top-anchored overlay here — `header-drawer.js` moves it
   into `.bbwab-drawer-nav-slot` on every page load (see the drawer section
   below), which is where its actual positioning/list/link styling now
   lives. This selector previously duplicated that styling for the pre-move
   state, but the move happens unconditionally on load, so keeping both
   would just be two owners for the same properties with a fragile
   specificity tie between them (both end up at the same 0,2,0 either way,
   letting one silently win only through of source order — not a bet worth
   making on prod). Nothing here needs a base rule pre-move: without any
   position/display rule at all, the still-in-place-for-a-moment dropdown
   simply inherits normal static flow inside its widget, invisible anyway
   since the widget's toggle is itself display:none until the ≤1024px
   breakpoint below applies. */

/* ── Hamburger toggle button (base state: hidden — the ≤1024px media query
   below overrides this to display:flex). This base rule MUST come before
   that media query in source order: with equal specificity (0,2,0) on both,
   CSS resolves ties by source order regardless of the media condition, so
   having this after the media query silently made the toggle permanently
   display:none at every viewport width — the mobile menu was never
   reachable. Verified via Chrome DevTools Protocol device-metrics
   emulation (true viewport, not the ~500px floor of --dump-dom). ────── */
.bbwab-global-header .elementor-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 1px solid var(--bbwab-color-border);
	border-radius: var(--bbwab-radius);
	cursor: pointer;
	color: var(--bbwab-color-text);
	transition: border-color var(--bbwab-transition-fast), background var(--bbwab-transition-fast);
}
.bbwab-global-header .elementor-menu-toggle:hover {
	background: var(--bbwab-color-background-alt);
	border-color: var(--bbwab-color-text-muted);
}
.bbwab-global-header .elementor-menu-toggle:focus-visible {
	outline: 3px solid var(--bbwab-color-accent);
	outline-offset: 3px;
}
.bbwab-global-header .elementor-menu-toggle i {
	font-size: 18px;
}

/* ── Mobile: hamburger toggle visible, nav links hidden ─────────── */
/* IMPORTANT: `.bbwab-header-nav` is the Elementor CONTAINER wrapping the whole
   nav-menu widget — the horizontal link list, the toggle button, AND the
   dropdown panel are all children of that one widget. Hiding the container
   itself (as this rule previously did) hides the toggle button too, so the
   "mobile menu" had no visible way to open at any width. Target only the
   horizontal menu list (`.elementor-nav-menu--main`), which leaves the
   toggle button — a sibling in the same widget — visible and functional.
   BREAKPOINT: 1024px, not the 820px this used previously. The nav-menu
   widget's own "dropdown" responsive setting hides `.elementor-nav-menu--main`
   via Elementor Pro's own widget-nav-menu.min.css at its "tablet" breakpoint,
   which resolves to the Kit's `breakpoint_tablet` (1024px) — a value baked
   into Elementor's shipped CSS, not something this stylesheet controls. At
   820px the two were out of sync: the horizontal menu was already hidden by
   Elementor's own CSS from 1024px down, but the toggle didn't appear until
   820px, leaving an 820–1024px dead zone with no visible way to navigate at
   all. Matching this breakpoint to 1024px closes that gap. */
@media (max-width: 1024px) {
	.bbwab-global-header .elementor-nav-menu--main {
		display: none;
	}
	/* Hamburger toggle visible at this breakpoint */
	.bbwab-global-header .elementor-menu-toggle {
		display: flex;
	}
}

/* ── Tablet/mobile header row: toggle far right, header CTA hidden.
   Same 1024px breakpoint as the toggle/main-menu switch above — this row
   only makes sense once the toggle has replaced the horizontal menu. The
   mobile sticky CTA (bbwab-mobile-sticky-cta, still on its own ≤820px
   breakpoint) already gives every narrow-viewport visitor an Apply
   button, and the drawer (below) carries its own full-width Apply button
   too, so the inline header CTA is redundant here — hidden rather than
   fighting the toggle for space. `.bbwab-header-nav` is flex:1 auto and,
   once the horizontal menu list and CTA are both hidden, the toggle is
   its only visible child; justify-content:flex-end pushes that child to
   the far right edge of the header row instead of leaving it centred in
   the flex-1 space. ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.bbwab-global-header .bbwab-header-cta {
		display: none !important;
	}
	/* `.bbwab-header-nav` is an Elementor Container with its own native,
	   per-breakpoint Flex Direction setting — at this tablet/mobile
	   breakpoint that resolves to `column`, so `justify-content` acts on
	   the vertical axis, not the horizontal one. That never mattered
	   before: with only one visible child either way, column vs row
	   produced the same single-item layout. It matters now that the goal
	   is specifically horizontal right-alignment, so `flex-direction: row`
	   is forced here rather than fighting the vertical axis with
	   `align-items` instead. */
	.bbwab-global-header .bbwab-header-nav {
		flex-direction: row;
		justify-content: flex-end;
	}
}

/* ══════════════════════════════════════════════════════════════════
   LEFT NAVIGATION DRAWER (tablet/mobile) — replaces the old top-anchored
   dropdown. Structure: `.bbwab-drawer-overlay` and `.bbwab-drawer` are
   Elementor Containers nested inside `.bbwab-global-header` (so they stay
   in scope for all header-prefixed selectors) but styled here as
   `position:fixed`, which escapes the header's own box entirely — same
   technique already proven for the mobile sticky-CTA widget (see the
   backdrop-filter note at the top of this file: `.bbwab-global-header`
   itself carries no filter/transform, so it never becomes a containing
   block for fixed descendants).

   The drawer's nav LINKS are not a new menu: `header-drawer.js` moves
   (reparents, not clones) Elementor's own `.elementor-nav-menu--dropdown`
   — the exact same accessible list the nav-menu widget already builds
   from the toggle — into `.bbwab-drawer-nav-slot` once on load. That is
   also why none of the positioning/sizing rules that used to target the
   dropdown as a standalone top-anchored panel apply anymore once it's
   inside the drawer: the rules below reset it back to static, full-width,
   vertical flow.

   Open/closed state is driven entirely by `header-drawer.js` toggling a
   `bbwab-drawer-open` class on `<html>`, itself driven by a
   MutationObserver on the toggle's own `aria-expanded` attribute — so any
   trigger (click, the Escape handler in site.js, a future change) stays
   in sync automatically without a second source of truth. Keyboard focus
   on drawer content while closed is prevented by the `inert` attribute
   the same script manages — not CSS — because `inert` is the only
   reliable way to pull a `position:fixed` (not display:none) subtree out
   of both the tab order and the accessibility tree at once.
   ══════════════════════════════════════════════════════════════════ */

.bbwab-drawer-overlay,
.bbwab-drawer {
	display: none;
}

@media (max-width: 1024px) {
	.bbwab-drawer-overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(2, 1, 34, 0.6);
		z-index: 1100;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s ease;
	}
	.bbwab-drawer {
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0;
		bottom: 0;
		width: min(86vw, 380px);
		max-width: 100vw;
		background: var(--bbwab-color-background);
		z-index: 1200;
		box-shadow: 8px 0 32px rgba(0, 0, 0, 0.45);
		transform: translateX(-100%);
		transition: transform 0.3s ease;
		overflow-y: auto;
		padding: var(--bbwab-space-lg);
		gap: var(--bbwab-space-lg);
	}

	/* Admin-bar offset — matches the header's own top offset above. */
	.bbwab-drawer-overlay,
	.bbwab-drawer {
		top: 0;
	}
	.admin-bar .bbwab-drawer-overlay,
	.admin-bar .bbwab-drawer {
		top: 32px;
	}
	@media screen and (max-width: 782px) {
		.admin-bar .bbwab-drawer-overlay,
		.admin-bar .bbwab-drawer {
			top: 46px;
		}
	}

	html.bbwab-drawer-open .bbwab-drawer-overlay {
		opacity: 1;
		pointer-events: auto;
	}
	html.bbwab-drawer-open .bbwab-drawer {
		transform: translateX(0);
	}
	html.bbwab-drawer-open {
		overflow: hidden;
	}

	/* ── Brand mark ──────────────────────────────────────────────── */
	.bbwab-drawer-brand {
		flex: 0 0 auto;
		padding-bottom: var(--bbwab-space-md);
		border-bottom: 1px solid var(--bbwab-color-border);
	}
	.bbwab-drawer-brand-img img {
		height: 36px;
		width: auto;
		display: block;
	}

	/* ── Reused nav-menu dropdown, restyled as the drawer's vertical
	   nav list instead of a standalone top-anchored panel. ────────── */
	.bbwab-drawer-nav-slot {
		flex: 1 1 auto;
	}
	.bbwab-drawer-nav-slot .elementor-nav-menu--dropdown {
		position: static;
		max-height: none;
		box-shadow: none;
		border-top: 0;
		background: transparent;
		padding: 0;
		overflow: visible;
	}
	.bbwab-drawer-nav-slot .elementor-nav-menu--dropdown .elementor-nav-menu {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}
	.bbwab-drawer-nav-slot .elementor-nav-menu--dropdown a {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: 12px var(--bbwab-space-sm);
		color: var(--bbwab-color-text);
		font-family: var(--bbwab-font-body);
		font-size: 16px;
		font-weight: 600;
		letter-spacing: 0.02em;
		border-radius: var(--bbwab-radius);
		text-decoration: none;
		transition: background var(--bbwab-transition-fast), color var(--bbwab-transition-fast);
	}
	.bbwab-drawer-nav-slot .elementor-nav-menu--dropdown a:hover {
		background: var(--bbwab-color-background-alt);
	}
	.bbwab-drawer-nav-slot .elementor-nav-menu--dropdown a:focus-visible {
		outline: 3px solid var(--bbwab-color-accent);
		outline-offset: -3px;
	}
	/* Active-page state — same signal the desktop nav already uses. */
	.bbwab-drawer-nav-slot .elementor-nav-menu--dropdown .elementor-item-active,
	.bbwab-drawer-nav-slot .elementor-nav-menu--dropdown .current-menu-item > a,
	.bbwab-drawer-nav-slot .elementor-nav-menu--dropdown .current-menu-ancestor > a {
		background: var(--bbwab-color-background-alt);
		color: var(--bbwab-orange);
		font-weight: 700;
	}

	/* ── CTAs ────────────────────────────────────────────────────── */
	.bbwab-drawer-ctas {
		flex: 0 0 auto;
		display: flex;
		flex-direction: column;
		gap: var(--bbwab-space-sm);
		padding-top: var(--bbwab-space-md);
		border-top: 1px solid var(--bbwab-color-border);
	}
	.bbwab-drawer-apply-btn .elementor-button:focus-visible,
	.bbwab-drawer-macro-btn .elementor-button:focus-visible {
		outline: 3px solid var(--bbwab-color-accent);
		outline-offset: 3px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bbwab-drawer,
	.bbwab-drawer-overlay {
		transition: none;
	}
}

/* ── Prevent header from overflowing viewport ────────────────────── */
.bbwab-global-header {
	max-width: 100%;
	overflow: visible;
}
/* Keep Elementor widget column flex contained */
.bbwab-global-header .elementor-widget-wrap {
	flex-wrap: nowrap;
	align-items: center;
}