/**
 * Fixes the header nav dropdown "stuck open" / "won't switch" bug on the
 * Header & Footer Elementor (HFE) Nav Menu widget used by the site header
 * (Elementor template post 111, widget .elementor-element-d6c4024) and any
 * other HFE nav menu on the site.
 *
 * Root cause: each top-level item's .sub-menu is opened/closed purely via
 * ":hover" (see header-footer-elementor/inc/widgets-css/frontend.css). The
 * close transition fades opacity over 300ms, and per the CSS spec a
 * visibility:hidden transition is deferred until the transition ends -- so
 * a closing dropdown stays visibility:visible (i.e. still hit-testable)
 * for the whole 300ms. Every .sub-menu also shares the same static
 * z-index:9999 regardless of hover state. Because each dropdown is a fixed
 * 220px box position:absolute; left:0 anchored to its own (often narrower)
 * trigger <li>, it can extend past that trigger and spatially overlap a
 * neighboring top-level item. While it's fading out, that overlapping,
 * still-interactive panel intercepts the pointer before it ever reaches
 * the neighboring item's own trigger -- so hovering "Resources" while
 * "Property Management" is closing can re-hit Property Management's own
 * fading panel instead, making the new dropdown appear not to open and
 * the old one appear stuck.
 *
 * Fix: a closed/closing .sub-menu is not interactive by default, so the
 * pointer passes through it to whatever is actually underneath. It only
 * regains pointer-events once its own trigger is genuinely active --
 * :hover/:focus for desktop's CSS-only mode, or the plugin's own
 * JS-applied "sub-menu-open" / "menu-active" state used at
 * tablet/mobile/click breakpoints. Generic (".hfe-nav-menu" / ".sub-menu"),
 * not scoped to any specific menu item, so it applies dynamically to every
 * dropdown this widget renders, now and for any future menu item added.
 * Doesn't touch color, spacing, typography, transition timing, or any
 * existing display/opacity/visibility rule -- only pointer-events, which
 * nothing else on the site currently sets on these elements.
 */

.hfe-nav-menu .sub-menu {
	pointer-events: none !important;
}

.hfe-nav-menu .menu-item-has-children:hover > .sub-menu,
.hfe-nav-menu .menu-item-has-children:focus > .sub-menu,
.hfe-nav-menu .menu-item-has-children.focus > .sub-menu,
.hfe-nav-menu .sub-menu.sub-menu-open,
.hfe-nav-menu .menu-item.menu-active > .sub-menu {
	pointer-events: auto !important;
}

/*
 * Dropdown hover uses the brand orange->amber gradient, matching every
 * other CTA/accent surface on the site. HFE's own hover-background control
 * only accepts a flat color, so the real gradient has to be forced here.
 */
.hfe-nav-menu .sub-menu a.hfe-sub-menu-item:hover {
	background: var(--brand-gradient, linear-gradient(90deg, #FF3A00 0%, #FFAA00 100%)) !important;
}