/* =============================================================================
   Header Standard Block (Theme B)

   Fully namespaced (`le-hs-*`) and self-contained. Reuses none of the existing
   header's classes/CSS/JS, so it cannot affect the live (Premium) header.
   All colors/sizes flow through brand tokens.
   ========================================================================== */

/* --- Utility bar: per-item desktop / mobile-bar visibility ------------------ */
@media (max-width: 639px) {
	.le-header-standard-block .le-ub-hide-mobile { display: none; }
}
@media (min-width: 640px) {
	.le-header-standard-block .le-ub-hide-desktop { display: none; }
}

/* Utility-bar phone link — ADA: don't signal hover by color change alone.
   Keep the text white and underline on hover/focus instead. The link is
   inline-flex (icon + text), so text-decoration won't render on the <a>; target
   the inner text span so the underline actually shows. */
.le-header-standard-block .le-hs-ub-phone:hover,
.le-header-standard-block .le-hs-ub-phone:focus-visible {
	color: #fff;
}
.le-header-standard-block .le-hs-ub-phone:hover span,
.le-header-standard-block .le-hs-ub-phone:focus-visible span {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Google rating stars (gold fill via brand token; remainder muted). */
.le-header-standard-block .le-hs-star {
	fill: var(--color-star);
}
.le-header-standard-block .le-hs-star--empty {
	fill: rgba(255, 255, 255, 0.25);
}

/* --- Primary menu (desktop horizontal row) ---------------------------------- */
.le-header-standard-block .le-hs-menu {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.le-header-standard-block .le-hs-item {
	position: relative;
}

/* Keep each top-level item's link + chevron together on one line. */
.le-header-standard-block .le-hs-menu > .le-hs-item {
	display: flex;
	align-items: center;
}

.le-header-standard-block .le-hs-menu > .le-hs-item > .le-hs-link {
	white-space: nowrap;
}

.le-header-standard-block .le-hs-link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.5rem 0.75rem;
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: var(--font-weight-medium);
	line-height: 1.25rem;
	color: var(--color-text);
	text-decoration: none;
	transition: color 150ms ease;
}

/* --color-nav-hover, set by the "Navigation Link — Hover" field in Dealer Branding
   (Text & Contrast). It DEFAULTS to --color-primary, so this is a no-op for every
   dealer who leaves the field blank — the token exists to give a single site an
   independent nav hover without touching Primary, which would repaint headings and
   every other `text-primary` surface.

   Task 40975344: Arrow's Primary is a bright yellow, so this rule rendered a yellow
   hover while its buttons showed a mustard — buttons paint --color-primary-cta,
   which le_adjust_surface_for_ink() had already darkened so white button text could
   pass contrast. Same brand color, one corrected and one not.

   🔴 Contrast is now the field-setter's responsibility. These links are 14px/500 —
   NORMAL text under WCAG, needing 4.5:1 on the white header bar — and the default
   passes the raw brand color straight through, which does not reach that for most
   dealers (#6876B8 = 4.31:1, Canyon State's #4a8b2c = 4.18:1, Central's #6e8cc2 =
   3.39:1). That is pre-existing, deliberately left as-is so this change moves no
   existing site, and is what the field is there to fix per dealer. The parent's
   Premium nav solves the same problem automatically via --color-hint. */
.le-header-standard-block .le-hs-link:hover {
	color: var(--color-nav-hover);
}

/* Chevron toggle button for parent items. */
.le-header-standard-block .le-hs-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem;
	margin-left: -0.25rem;
	color: var(--color-text);
	background: none;
	border: 0;
	cursor: pointer;
}

/* Matches the link it sits beside — the chevron and its label must not diverge. */
.le-header-standard-block .le-hs-submenu-toggle:hover {
	color: var(--color-nav-hover);
}

.le-header-standard-block .le-hs-chevron {
	transition: transform 200ms ease;
}

.le-header-standard-block .le-hs-has-children.is-open > .le-hs-submenu-toggle .le-hs-chevron {
	transform: rotate(180deg);
}

/* --- Dropdown panel (desktop) ----------------------------------------------- */
.le-header-standard-block .le-hs-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	width: 24rem;
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 0.5rem; /* rounded-lg */
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
	overflow: hidden; /* clip the section header bands to the rounded corners */
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

/* Per-dropdown width overrides — add `le-hs-narrow` or `le-hs-wide` to a
   top-level menu item via Appearance → Menus → CSS Classes. */
.le-header-standard-block .le-hs-item.le-hs-narrow > .le-hs-submenu {
	width: 12rem;
}
.le-header-standard-block .le-hs-item.le-hs-wide > .le-hs-submenu {
	width: 28rem;
}

/* Open via JS click, pointer hover, or keyboard focus. */
.le-header-standard-block .le-hs-has-children.is-open > .le-hs-submenu,
.le-header-standard-block .le-hs-has-children:focus-within > .le-hs-submenu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

@media (min-width: 768px) {
	.le-header-standard-block .le-hs-has-children:hover > .le-hs-submenu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	/* On short viewports a tall dropdown would overflow below the fold with no
	   way to reach the lower items (the wheel scrolls the page instead). Cap it
	   to the viewport and give it its own scroll; `overscroll-behavior: contain`
	   keeps the wheel inside the dropdown once it has a scrollbar. overflow-x
	   stays hidden so the section-header bands still clip to the rounded corners.
	   When the menu fits, there's no scrollbar and nothing changes. */
	.le-header-standard-block .le-hs-submenu {
		max-height: calc(100vh - 9rem);
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* Section (header band + its link list). */
.le-header-standard-block .le-hs-section {
	list-style: none;
}

.le-header-standard-block .le-hs-section-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Non-clickable section header band: first section primary, rest muted.
   Uses the BODY font (Inter by default) rather than the serif heading font —
   these are small uppercase category labels, not headings. Token-driven so it
   still adapts to the dealer's configured body font. */
.le-header-standard-block .le-hs-section-header {
	padding: 1.05rem 1.5rem;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.le-header-standard-block .le-hs-section-header--primary {
	background: var(--color-primary);
	color: var(--color-on-primary);
}
.le-header-standard-block .le-hs-section-header--muted {
	background: var(--color-background);
	color: var(--color-gray);
}

/* Dropdown links: bold title + muted description. */
.le-header-standard-block .le-hs-sublink {
	display: block;
	position: relative;
	padding: 0.75rem 1.5rem;
	transition: background-color 150ms ease;
}

/* Item dividers are inset (don't reach the panel edges); the full-width
   colored header bands provide the section separation instead. */
.le-header-standard-block .le-hs-section-list .le-hs-item:not(:last-child) .le-hs-sublink::after,
.le-header-standard-block .le-hs-submenu > .le-hs-item:not(:last-child) .le-hs-sublink::after {
	content: "";
	position: absolute;
	left: 1.5rem;
	right: 1.5rem;
	bottom: 0;
	border-bottom: 1px solid var(--color-border);
}

.le-header-standard-block .le-hs-sublink:hover {
	background: var(--color-background);
}

.le-header-standard-block .le-hs-sublink-title {
	display: block;
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
}

/* Same token as the top-level links above. Note this row's hover background is
   --color-background (the off-white), NOT the header's white, so a value chosen
   against white is not automatically safe here: #8C7430 measures 4.51:1 on white
   but 4.14:1 on #F7F5F2. Check both surfaces when setting the field. */
.le-header-standard-block .le-hs-sublink:hover .le-hs-sublink-title {
	color: var(--color-nav-hover);
}

.le-header-standard-block .le-hs-sublink-desc {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.75rem;
	line-height: 1.1rem;
	color: var(--color-muted);
}

/* --- Mobile panel ----------------------------------------------------------- */
.le-header-standard-block .le-hs-mobile-panel .le-hs-menu {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.le-header-standard-block .le-hs-mobile-panel .le-hs-item {
	position: static;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--color-border);
}

/* Top-level rows (Propane Services, About, …): bold, py-3. */
.le-header-standard-block .le-hs-mobile-panel .le-hs-menu > .le-hs-item > .le-hs-link {
	flex: 1 1 auto;
	padding: 0.875rem 0.5rem;
	font-weight: var(--font-weight-semibold);
}

/* Submenus are fully expanded on mobile (no accordion) — flat & full width. */
.le-header-standard-block .le-hs-mobile-panel .le-hs-submenu {
	position: static;
	display: block;
	flex-basis: 100%;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow: visible;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* No accordion toggles on mobile — everything shows expanded on open. */
.le-header-standard-block .le-hs-mobile-panel .le-hs-submenu-toggle {
	display: none;
}

/* Section headers are plain, indented grey labels on mobile (no colored bands). */
.le-header-standard-block .le-hs-mobile-panel .le-hs-section-header {
	background: transparent;
	color: var(--color-gray);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.05em;
	padding: 0.5rem 0.5rem 0.25rem 1.5rem;
}

/* Nested sublink rows: indented, muted, single-line (no descriptions), and no
   per-item dividers between siblings. */
.le-header-standard-block .le-hs-mobile-panel .le-hs-submenu .le-hs-item {
	display: block;
	border-bottom: 0;
}
.le-header-standard-block .le-hs-mobile-panel .le-hs-sublink {
	padding: 0.75rem 0.5rem 0.75rem 1.5rem;
}
.le-header-standard-block .le-hs-mobile-panel .le-hs-sublink::after {
	display: none;
}
.le-header-standard-block .le-hs-mobile-panel .le-hs-sublink-title {
	font-weight: var(--font-weight-normal);
	color: var(--color-muted);
}
.le-header-standard-block .le-hs-mobile-panel .le-hs-sublink-desc {
	display: none;
}

/* Lines only at section boundaries: between stacked sections within a dropdown
   (e.g. WHO WE SERVE → SERVICES). Top-level item borders separate the rest. */
.le-header-standard-block .le-hs-mobile-panel .le-hs-section:not(:first-child) {
	border-top: 1px solid var(--color-border);
}

/* Mobile Contact (outline) button: a slightly more prominent resting border than
   the default `border-border`. Kept at low specificity (2 classes) so the
   centralized `.le-btn.border-border:hover` rule still wins on hover. */
.le-hs-mobile-ctas .border-border {
	border-color: color-mix(in srgb, var(--color-border) 80%, var(--color-gray) 20%);
}

/* --- Open mobile menu: fixed, self-scrolling overlay -----------------------
   In flow the panel scroll-chains to the page behind it (you reach the bottom
   of the page before the bottom of the menu). When open we pin it as a fixed
   overlay from just under the header to the viewport bottom, give it its own
   scroll, and `overscroll-behavior: contain` so scrolling never bleeds to the
   page. JS sets `top` (the header's bottom) and locks page scroll via
   `.le-hs-scroll-lock` on <html>. */
.le-header-standard-block.le-hs-menu-open .le-hs-mobile-panel {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	/* top is set inline by the JS to the header's bottom edge. */
	z-index: 60;
	background: #fff;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

/* `overflow: hidden` is enough to lock the background; the panel scrolls itself
   and `overscroll-behavior: contain` keeps scrolling out of the page. Avoid
   `touch-action: none` here — on some browsers it also blocks touch panning
   inside the fixed panel (a descendant of <html>), defeating its self-scroll. */
html.le-hs-scroll-lock {
	overflow: hidden;
}

/* --- Reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.le-header-standard-block .le-hs-chevron,
	.le-header-standard-block .le-hs-submenu,
	.le-header-standard-block .le-hs-link {
		transition: none;
	}
}

/* Navigation logo width — Dealer Branding → "Navigation Logo Size".
   --le-logo-width is injected by branding-css-vars.php ONLY when a dealer has
   explicitly picked Large or Extra Large. Left unset, this falls back to 7rem, which
   is exactly what the `w-28` utility on the <img> already produces — so a dealer who
   never touches the setting gets identical rendering and no extra CSS variable.
   Unlayered so it wins over Tailwind's layered w-28 when the variable IS set. */
.le-hs-logo img {
    width: var(--le-logo-width, 7rem);
    height: auto;
}