/* =====================================================================
   Hero Plumbing — Desktop Navigation Dropdowns (hpd)
   ---------------------------------------------------------------------
   WAI-ARIA "Disclosure Navigation Menu" for ≥992px. Independent of
   Webflow's .w-dropdown engine (own markup/CSS/JS). Robust against the
   theme's CSS because:
     • Unique `hpd-` namespace → NO theme selector targets these elements.
     • Scoped under `.topnavbar` with a local reset for inherited element
       rules (a/ul/li) so panel content is fully owned.
     • Loaded LAST (depends on the theme's final stylesheet).
     • Lives inside the sticky header (z-index:9999) → panels render above
       page content; explicit z-index orders them above sibling items.
   Progressive enhancement:
     • No JS  → panels open on :hover / :focus-within (pure CSS).
     • JS on  → html.hpd-js; JS owns open/close via the .hpd-open class
       (hover-intent, click, Escape, arrow keys, click-outside, ARIA).
   ===================================================================== */

@media screen and (min-width: 992px) {

	/* local tokens — self-owned */
	.topnavbar .hpd-dd {
		--hpd-red:   #e10916;
		--hpd-blue:  #0f66bd;
		--hpd-blue-2:#2986ff;
		--hpd-ink:   #14181f;
		--hpd-muted: #5b6472;
		--hpd-tint:  #fef2f2;
		position: relative;
		display: inline-flex;
		align-items: center;
	}

	/* breathing room between the last nav item and the phone CTA */
	.topnavbar .link-block-20 { margin-left: clamp(18px, 2vw, 36px) !important; }

	/* chevron disclosure button (top level) */
	.topnavbar .hpd-toggle {
		-webkit-appearance: none;
		appearance: none;
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		padding: 0;
		margin: 0 0 0 -4px;
		border: 0;
		background: transparent;
		color: #fff;
		cursor: pointer;
		border-radius: 6px;
	}
	.topnavbar .hpd-toggle:hover { background: rgba(255, 255, 255, .16); }
	.topnavbar .hpd-chev { transition: transform .2s ease; }
	.topnavbar .hpd-dd.hpd-open > .hpd-toggle .hpd-chev,
	html:not(.hpd-js) .topnavbar .hpd-dd:hover > .hpd-toggle .hpd-chev,
	html:not(.hpd-js) .topnavbar .hpd-dd:focus-within > .hpd-toggle .hpd-chev { transform: rotate(180deg); }

	/* ---- 2nd-level panel ---- */
	.topnavbar .hpd-panel {
		box-sizing: border-box;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 248px;
		background: #fff;
		border: 1px solid rgba(0, 0, 0, .06);
		border-top: 3px solid var(--hpd-red);
		border-radius: 0 0 8px 8px;
		box-shadow: 0 12px 30px rgba(8, 12, 20, .14);
		padding: 8px 0;
		z-index: 1200;
		max-width: calc(100vw - 16px); /* never exceed the viewport at narrow desktop */
		/* closed */
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
		pointer-events: none;
	}
	/* edge-flip: right-align when the panel would overflow the right edge (JS adds .hpd-flip) */
	.topnavbar .hpd-panel.hpd-flip { left: auto; right: 0; }
	.topnavbar .hpd-dd.hpd-open > .hpd-panel,
	html:not(.hpd-js) .topnavbar .hpd-dd:hover > .hpd-panel,
	html:not(.hpd-js) .topnavbar .hpd-dd:focus-within > .hpd-panel {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity .18s ease, transform .18s ease;
		pointer-events: auto;
	}

	/* scoped reset for panel content — list-style:none !important beats the
	   theme's unscoped `ul > li { list-style-type: circle !important }` */
	.topnavbar .hpd-panel ul,
	.topnavbar .hpd-flyout ul { list-style: none !important; margin: 0; padding: 0; }
	.topnavbar .hpd-panel li,
	.topnavbar .hpd-flyout li { margin: 0; list-style: none !important; }

	.topnavbar .hpd-link {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding: 9px 18px;
		color: var(--hpd-ink);
		text-decoration: none;
		font-family: 'Proxima nova', Proximanova, Montserrat, system-ui, sans-serif;
		font-size: 14.5px;
		font-weight: 500;
		line-height: 1.3;
		letter-spacing: 0;
		text-transform: none;
		white-space: nowrap;
		transition: background .14s ease, color .14s ease;
	}
	.topnavbar .hpd-link:hover,
	.topnavbar .hpd-link:focus-visible { background: var(--hpd-tint); color: var(--hpd-red); }
	/* current dropdown item — red text + left bar + tint (matches mobile menu) */
	.topnavbar .hpd-link.w--current {
		color: var(--hpd-red);
		font-weight: 600;
		background: var(--hpd-tint);
		box-shadow: inset 3px 0 0 var(--hpd-red);
	}

	/* current TOP-LEVEL item — red underline indicator in the blue bar */
	.topnavbar .topnavlink.w--current > strong,
	.topnavbar .hpd-dd.hpd-current > .hpd-toplink > strong { position: relative; }
	.topnavbar .topnavlink.w--current > strong::after,
	.topnavbar .hpd-dd.hpd-current > .hpd-toplink > strong::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -6px;
		height: 3px;
		background: var(--hpd-red, #e10916);
		border-radius: 2px;
	}

	/* 2nd-level item with fly-out */
	.topnavbar .hpd-has-flyout { position: relative; }
	.topnavbar .hpd-row { display: flex; align-items: stretch; }
	.topnavbar .hpd-flyout-link { flex: 1 1 auto; }
	.topnavbar .hpd-subtoggle {
		-webkit-appearance: none;
		appearance: none;
		box-sizing: border-box;
		flex: 0 0 auto;
		width: 42px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border: 0;
		background: transparent;
		color: var(--hpd-muted);
		cursor: pointer;
	}
	.topnavbar .hpd-subtoggle:hover { color: var(--hpd-red); background: var(--hpd-tint); }
	.topnavbar .hpd-has-flyout.hpd-open > .hpd-row .hpd-subtoggle .hpd-chev,
	html:not(.hpd-js) .topnavbar .hpd-has-flyout:hover > .hpd-row .hpd-subtoggle .hpd-chev { transform: rotate(90deg); }

	/* ---- 3rd-level fly-out (opens to the right) ---- */
	.topnavbar .hpd-flyout {
		box-sizing: border-box;
		position: absolute;
		top: -8px;
		left: 100%;
		min-width: 238px;
		background: #fff;
		border: 1px solid rgba(0, 0, 0, .06);
		border-radius: 8px;
		box-shadow: 0 12px 30px rgba(8, 12, 20, .16);
		padding: 8px 0;
		z-index: 1300;
		opacity: 0;
		visibility: hidden;
		transform: translateX(-6px);
		transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
		pointer-events: none;
	}
	.topnavbar .hpd-has-flyout.hpd-open > .hpd-flyout,
	html:not(.hpd-js) .topnavbar .hpd-has-flyout:hover > .hpd-flyout,
	html:not(.hpd-js) .topnavbar .hpd-has-flyout:focus-within > .hpd-flyout {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity .16s ease, transform .16s ease;
		pointer-events: auto;
	}
	/* if a fly-out would overflow the right edge, flip it to the left */
	.topnavbar .hpd-flyout.hpd-flip { left: auto; right: 100%; transform: translateX(6px); }
	.topnavbar .hpd-has-flyout.hpd-open > .hpd-flyout.hpd-flip { transform: none; }

	/* focus ring (keyboard only) */
	.topnavbar .hpd-toggle:focus-visible,
	.topnavbar .hpd-subtoggle:focus-visible,
	.topnavbar .hpd-link:focus-visible,
	.topnavbar .hpd-toplink:focus-visible {
		outline: 3px solid var(--hpd-blue-2);
		outline-offset: -3px;
		border-radius: 4px;
	}
	.topnavbar .hpd-toggle:focus:not(:focus-visible),
	.topnavbar .hpd-subtoggle:focus:not(:focus-visible) { outline: none; }

	@media (prefers-reduced-motion: reduce) {
		.topnavbar .hpd-panel,
		.topnavbar .hpd-flyout,
		.topnavbar .hpd-chev { transition-duration: .01ms !important; }
	}

	@media (forced-colors: active) {
		.topnavbar .hpd-panel,
		.topnavbar .hpd-flyout { border: 1px solid CanvasText; background: Canvas; }
		.topnavbar .hpd-link { color: LinkText; }
		.topnavbar .hpd-link.w--current { color: Highlight; }
		.topnavbar .hpd-toggle:focus-visible,
		.topnavbar .hpd-subtoggle:focus-visible,
		.topnavbar .hpd-link:focus-visible { outline-color: Highlight; }
	}
}