/* ==========================================================================
   Header v2 — eyebrow strip / brand row / full-width nav
   Rendered by the [erm_header] shortcode - see enqueue-locations-hours.php.
   The nav list itself comes from wp_nav_menu() (Main Menu), so these
   selectors target WordPress's own default menu classes
   (.menu-item-has-children, .sub-menu) rather than custom ones - there is
   no custom Walker. Everything is scoped under .hdr so it can't bleed into
   any other menu output on the page.
   ========================================================================== */

.hdr {
	--hdr-nv: #123772;
	--hdr-bl: #2b6cd4;
	--hdr-paper: #f4f7fb;
	--hdr-line: #d7e0ed;
	--hdr-muted: #5a6a80;
	/* See the matching note on --lh-display in erm-locations.css - "inherit"
	   in a font-family list next to a font name is invalid CSS. */
	--hdr-disp: "Barlow Condensed", sans-serif;
}

.hdr *, .hdr *::before, .hdr *::after { box-sizing: border-box; }
.hdr ul { margin: 0; padding: 0; list-style: none; }

/* The homepage hero (an Elementor container, not ours) has a deliberate
   -40px top margin that's meant to tuck slightly under the header - a
   design choice baked into that page's Elementor settings, not a bug, and
   not something to "fix" by removing the negative margin there. It only
   works if the header actually stacks above it.
   FIRST ATTEMPT AT THIS FIX TARGETED THE WRONG ELEMENT: .site-header is
   hello-elementor's class for the theme's *native* header/footer (Customizer
   built), not what's actually on the page. This header is built with
   Elementor Theme Builder, so the real wrapper is
   <header class="elementor-location-header" data-elementor-type="header">,
   and Elementor gives it no position/z-index of its own (position: static
   by default) - so a z-index-only rule on .site-header matched nothing at
   all, on either class or specificity grounds; it simply never touched the
   right element. Fixing that here: needs BOTH position:relative (z-index
   has no effect on a statically positioned element) AND z-index. Kept the
   .site-header rule too in case a page ever uses the theme's native header
   instead of the Theme Builder one - costs nothing, matches nothing today. */
.site-header,
.elementor-location-header { position: relative; z-index: 100; }


/* --------------------------------------------------------------------------
   Eyebrow strip
   -------------------------------------------------------------------------- */

.hdr-eyebrow { background: var(--hdr-paper); border-bottom: 1px solid var(--hdr-line); }

.hdr-eyebrow-inner {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 28px;
	padding: 8px 24px;
}

/* !important: Elementor's global Kit CSS ships `.elementor-kit-N a { color }`
   at specificity (0,1,1), a tie with this single-class-plus-tag selector -
   ties resolve to source order, which favors the Kit. Same collision as the
   shared atoms in erm-locations.css (see the note there); .hdr-phone below
   already wins on specificity alone since it stacks two classes, so it
   doesn't need this. */
.hdr-eyebrow a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--hdr-muted) !important;
	text-decoration: none;
}

.hdr-eyebrow a:hover { color: var(--hdr-nv) !important; }
.hdr-eyebrow a svg { width: 12px; height: 12px; flex: none; }
.hdr-eyebrow a.hdr-phone { color: var(--hdr-nv) !important; }


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

.hdr-brand { background: #fff; }
.hdr-brand-inner { display: flex; justify-content: center; padding: 14px 24px; }

.hdr-logo { display: flex; align-items: center; text-decoration: none; }

/* Real lockup is 900x200 (4.5:1) — height controls the display size, width
   stays auto so the ratio can't drift. width/height attributes on the <img>
   itself set the intrinsic size so nothing inflates before this loads.
   !important: the actual bug that made this render huge was the stylesheet
   URL being http:// on an https:// page (see the set_url_scheme() fix in
   the enqueue) — this rule was already correct and just wasn't loading
   reliably. Keeping !important anyway as a defensive floor against the
   theme's bare `img{height:auto}` reset, since this class only exists to
   pin one specific brand asset's size and nothing should be able to
   override it by accident. */
.hdr-logo-img { display: block; height: 70px !important; width: auto !important; }


/* --------------------------------------------------------------------------
   Nav row — driven by wp_nav_menu(), WordPress's own default classes
   -------------------------------------------------------------------------- */

.hdr-nav { background: var(--hdr-nv); position: relative; }
.hdr-nav-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; display: flex; align-items: stretch; }

.hdr-menu { display: flex; flex: 1; justify-content: space-evenly; }
.hdr-menu > li { position: relative; }

.hdr-menu > li > a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 14px 16px;
	color: #fff;
	text-decoration: none;
	font-family: var(--hdr-disp);
	font-weight: 600;
	font-size: 15.5px;
	white-space: nowrap;
}

.hdr-menu > li > a:hover,
.hdr-menu > li.drop-open > a { background: rgba(255,255,255,.08); color: #ffffff !important; }

/* CSS-only chevron — wp_nav_menu's default walker can't inject an SVG per
   item without a custom Walker, and a plain triangle avoids needing one. */
.hdr-menu > li.menu-item-has-children > a::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	opacity: .75;
	flex: none;
}

.hdr-menu .sub-menu {
	padding: 8px 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	background: #fff;
	border: 1px solid var(--hdr-line);
	border-top: 2px solid var(--hdr-bl);
	box-shadow: 0 12px 28px rgba(18,55,114,.16);
	display: none;
	z-index: 20;
}

.hdr-menu > li.menu-item-has-children:hover > .sub-menu,
.hdr-menu > li.drop-open > .sub-menu { display: block; }

.hdr-menu .sub-menu a {
	display: block;
	padding: 9px 18px;
	color: var(--hdr-nv);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
}

.hdr-menu .sub-menu a:hover { background: var(--hdr-paper); color: var(--hdr-bl); }

.hdr-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
	color: #fff;
	flex: none;
}
.hdr-burger svg { width: 22px; height: 22px; }


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 880px) {
	.hdr-eyebrow-inner { justify-content: center; gap: 6px 18px; padding: 7px 16px; }
	.hdr-brand-inner { padding: 12px 16px; }
	.hdr-logo-mark { width: 34px; height: 34px; font-size: 9px; }
	.hdr-logo-word { font-size: 16px; }

	.hdr-nav-inner { padding: 0; }
	.hdr-burger { display: flex; margin-left: auto; }

	.hdr-menu {
		display: none;
		flex-direction: column;
		width: 100%;
		position: absolute;
		top: 100%;
		left: 0;
		background: var(--hdr-nv);
		box-shadow: 0 12px 28px rgba(18,55,114,.25);
		z-index: 30;
	}
	.hdr-menu.is-open { display: flex; }

	.hdr-menu > li { width: 100%; }
	.hdr-menu > li > a { padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.12); justify-content: space-between; }
	.hdr-menu > li:first-child > a { border-top: 0; }

	.hdr-menu .sub-menu {
		position: static;
		display: none;
		width: 100%;
		border: 0;
		box-shadow: none;
		background: rgba(255,255,255,.06);
	}
	.hdr-menu > li.drop-open > .sub-menu { display: block; }
	.hdr-menu .sub-menu a { color: #fff; padding: 10px 20px 10px 32px; font-size: 13.5px; }
	.hdr-menu .sub-menu a:hover { background: rgba(255,255,255,.1); color: #fff; }
}