/* =====================================================================
   Hero Plumbing — Mobile Navigation (hpm)
   ---------------------------------------------------------------------
   Self-contained off-canvas drawer. Engineered so site CSS cannot
   override it:
     • Rendered in the TOP LAYER via <dialog>.showModal() → always above
       page content regardless of any z-index.
     • All rules ID-scoped (#hpm-dialog / #hpm-burger) → specificity (1,0,0)
       beats the theme's class selectors.
     • Self-contained reset → does not inherit theme element styles.
     • Loaded LAST (depends on the theme's final stylesheet).
     • Intentionally UNLAYERED (unlayered CSS outranks @layer'd CSS, and
       the theme is unlayered → we win on source order + specificity).
     • !important used ONLY where we must override Webflow's own
       !important / inline styles (the hide rules + a few layout props).
   Active only ≤991px (Webflow "medium" collapse breakpoint).
   ===================================================================== */

/* ---- Design tokens (scoped to the component) ---- */
#hpm-burger,
#hpm-dialog {
	--hpm-blue:    #0f66bd;   /* --royal-blue  */
	--hpm-blue-2:  #2986ff;   /* --dodger-blue */
	--hpm-red:     #e10916;   /* --red         */
	--hpm-red-dk:  #8d030b;   /* --dark-red    */
	--hpm-ink:     #14181f;
	--hpm-muted:   #5b6472;
	--hpm-line:    #eef1f5;
	--hpm-tint:    #f6f8fb;
	--hpm-tint-2:  #eef3f9;
	--hpm-panel-w: min(360px, 86vw);
	--hpm-dur:     .3s;
	--hpm-ease:    cubic-bezier(.4, 0, .2, 1);
	--hpm-font:    "Proxima Nova", Proximanova, Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* =====================================================================
   1. TRIGGER + WEBFLOW SWAP
   ===================================================================== */

/* Hamburger trigger (lives in the header; white on the blue nav bar). */
/* self-contained box-sizing reset for the trigger subtree (don't rely on
   the theme's global *{box-sizing} — keep the component fully owned) */
#hpm-burger,
#hpm-burger *,
#hpm-burger *::before,
#hpm-burger *::after { box-sizing: border-box; }

#hpm-burger {
	-webkit-appearance: none;
	appearance: none;
	display: none; /* shown ≤991px below, only when JS has enhanced */
	box-sizing: border-box;
	width: 46px;
	height: 46px;
	padding: 11px;
	margin: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	-webkit-tap-highlight-color: transparent;
}
#hpm-burger:hover { background: rgba(255, 255, 255, .14); }
#hpm-burger .hpm-burger-box {
	display: block;
	position: relative;
	width: 24px;
	height: 16px;
}
#hpm-burger .hpm-burger-line {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}
#hpm-burger .hpm-burger-line:nth-child(1) { top: 0; }
#hpm-burger .hpm-burger-line:nth-child(2) { top: 7px; }
#hpm-burger .hpm-burger-line:nth-child(3) { top: 14px; }

@media screen and (min-width: 992px) {
	#hpm-burger { display: none !important; }
}
@media screen and (max-width: 991px) {
	/* Only once JS has enhanced (html.hpm-js) do we show our burger and
	   replace Webflow's hamburger + mobile menu — so the two engines never
	   race. With JS OFF, .hpm-js is absent → none of this applies and the
	   server-rendered Webflow menu stays as the fallback (revealed by the
	   <noscript> block). */
	.hpm-js #hpm-burger { display: inline-flex !important; }
	.hpm-js .topnavbar .menu-button.w-nav-button { display: none !important; }
	.hpm-js .topnavbar .nav-menu-2.w-nav-menu,
	.hpm-js .topnavbar .w-nav-menu { display: none !important; }
}

/* =====================================================================
   2. DIALOG (top-layer drawer) + RESET
   ===================================================================== */

#hpm-dialog {
	/* reset native <dialog> chrome */
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	max-width: none !important;
	max-height: none !important;
	color: var(--hpm-ink);
	font-family: var(--hpm-font);
	font-size: 16px;
	line-height: 1.3;
	/* off-canvas right drawer */
	position: fixed !important;
	inset: 0 0 0 auto !important;
	width: var(--hpm-panel-w) !important;
	height: 100vh;
	height: 100dvh !important;
	background: #fff !important;
	box-shadow: -8px 0 40px rgba(8, 12, 20, .24);
	overflow: hidden !important;
	/* enter/exit animation */
	transform: translateX(100%);
	transition: transform var(--hpm-dur) var(--hpm-ease);
}
#hpm-dialog.hpm-open { transform: translateX(0) !important; }

/* scrim */
#hpm-dialog::backdrop {
	background: rgba(8, 12, 20, 0);
	transition: background var(--hpm-dur) var(--hpm-ease);
}
#hpm-dialog.hpm-open::backdrop { background: rgba(8, 12, 20, .5); }

/* scoped reset for everything inside */
#hpm-dialog *,
#hpm-dialog *::before,
#hpm-dialog *::after { box-sizing: border-box; }
#hpm-dialog ul { list-style: none; margin: 0; padding: 0; }
#hpm-dialog li { margin: 0; }
#hpm-dialog a { text-decoration: none; color: inherit; background: none; }
#hpm-dialog button {
	font: inherit;
	color: inherit;
	margin: 0;
	background: none;
	border: 0;
	cursor: pointer;
}
#hpm-dialog svg { display: block; flex: none; }

/* lock body scroll while open */
html.hpm-lock,
html.hpm-lock body { overflow: hidden !important; }

/* =====================================================================
   3. PANEL LAYOUT
   ===================================================================== */

#hpm-dialog .hpm-panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}

/* sticky header bar */
#hpm-dialog .hpm-bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--hpm-blue);
	color: #fff;
	padding: 14px 16px;
	padding-top: max(14px, env(safe-area-inset-top));
}
#hpm-dialog .hpm-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}
#hpm-dialog .hpm-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -8px -8px -8px 0;
	border-radius: 8px;
	color: #fff;
}
#hpm-dialog .hpm-close:hover { background: rgba(255, 255, 255, .16); }

/* scrollable nav region */
#hpm-dialog .hpm-nav {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

/* =====================================================================
   4. MENU ITEMS
   ===================================================================== */

#hpm-dialog .hpm-item { border-bottom: 1px solid var(--hpm-line); }
#hpm-dialog .hpm-row { display: flex; align-items: stretch; }

#hpm-dialog .hpm-link {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	min-height: 54px;
	padding: 12px 16px;
	color: var(--hpm-ink);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .015em;
	text-transform: uppercase;
}
#hpm-dialog .hpm-link:hover { color: var(--hpm-blue); background: var(--hpm-tint); }

/* disclosure (chevron) button — separate target from the link */
#hpm-dialog .hpm-acc {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	min-height: 54px;
	border-left: 1px solid var(--hpm-line);
	color: var(--hpm-blue);
}
#hpm-dialog .hpm-acc:hover { background: var(--hpm-tint); }
#hpm-dialog .hpm-chev { transition: transform .22s var(--hpm-ease); }
#hpm-dialog .hpm-acc[aria-expanded="true"] .hpm-chev { transform: rotate(180deg); }

/* nested lists — collapsed lists are display:none (out of tab order) */
#hpm-dialog .hpm-sublist { display: none; background: var(--hpm-tint); }
#hpm-dialog .hpm-sublist.hpm-sub-open {
	display: block;
	animation: hpm-reveal .22s var(--hpm-ease);
}
#hpm-dialog .hpm-sublist .hpm-item:last-child { border-bottom: 0; }
#hpm-dialog .hpm-sublist .hpm-sublist { background: var(--hpm-tint-2); }

/* depth-based hierarchy */
#hpm-dialog .hpm-depth-1 .hpm-link {
	padding-left: 28px;
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}
#hpm-dialog .hpm-depth-2 .hpm-link {
	padding-left: 40px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--hpm-muted);
}

/* current item */
#hpm-dialog .hpm-current > .hpm-row > .hpm-link,
#hpm-dialog .hpm-link[aria-current="page"] {
	color: var(--hpm-red);
	box-shadow: inset 4px 0 0 var(--hpm-red);
}

@keyframes hpm-reveal {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* =====================================================================
   5. CTA FOOTER
   ===================================================================== */

#hpm-dialog .hpm-cta {
	flex: 0 0 auto;
	display: grid;
	gap: 10px;
	padding: 14px 16px;
	padding-bottom: max(14px, env(safe-area-inset-bottom));
	border-top: 1px solid var(--hpm-line);
	background: #fff;
}
#hpm-dialog .hpm-cta a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 50px;
	padding: 12px 18px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .02em;
}
#hpm-dialog .hpm-cta-call { background: var(--hpm-red); color: #fff; }
#hpm-dialog .hpm-cta-call:hover { background: var(--hpm-red-dk); }
#hpm-dialog .hpm-cta-book {
	background: #fff;
	color: var(--hpm-blue);
	border: 2px solid var(--hpm-blue);
}
#hpm-dialog .hpm-cta-book:hover { background: var(--hpm-blue); color: #fff; }

/* =====================================================================
   6. FOCUS / A11Y / MOTION / FORCED COLORS
   ===================================================================== */

#hpm-burger:focus-visible,
#hpm-dialog a:focus-visible,
#hpm-dialog button:focus-visible {
	outline: 3px solid var(--hpm-blue-2);
	outline-offset: -3px;
	border-radius: 4px;
}
/* don't show focus ring on the burger's white-on-blue unless keyboard */
#hpm-burger:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
	#hpm-dialog,
	#hpm-dialog *,
	#hpm-dialog::backdrop {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}

@media (forced-colors: active) {
	#hpm-dialog { border-left: 1px solid CanvasText; background: Canvas !important; }
	#hpm-dialog .hpm-bar { background: Canvas; color: CanvasText; border-bottom: 1px solid CanvasText; }
	#hpm-dialog .hpm-link,
	#hpm-dialog .hpm-acc,
	#hpm-dialog .hpm-title { color: CanvasText; }
	#hpm-dialog .hpm-current > .hpm-row > .hpm-link,
	#hpm-dialog .hpm-link[aria-current="page"] { color: LinkText; box-shadow: inset 4px 0 0 Highlight; }
	#hpm-dialog .hpm-cta-call,
	#hpm-dialog .hpm-cta-book { border: 1px solid CanvasText; background: ButtonFace; color: ButtonText; }
	#hpm-burger:focus-visible,
	#hpm-dialog a:focus-visible,
	#hpm-dialog button:focus-visible { outline-color: Highlight; }
}

/* safety: never let the drawer show on desktop */
@media screen and (min-width: 992px) {
	#hpm-dialog[open] { display: none !important; }
}