/* Hide Twenty Twenty-One submenu +/- on HFE/Elementor menus (they use their own toggles). */
.hfe-nav-menu .sub-menu-toggle {
	display: none;
}

/*
 * W3C parent-as-toggle fly-outs (href="#" parents only)
 * Match HFE’s visibility/opacity model (avoid display:none fights).
 * https://www.w3.org/WAI/tutorials/menus/flyout/#flyoutnavkbfixed
 */
.aprx-parent-toggle > .sub-menu {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.aprx-parent-toggle.aprx-submenu-open > .sub-menu,
.aprx-parent-toggle:hover > .sub-menu,
.aprx-parent-toggle:focus-within > .sub-menu {
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto;
}

@media (hover: none), (pointer: coarse) {
	.aprx-parent-toggle:hover > .sub-menu {
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
	}

	.aprx-parent-toggle.aprx-submenu-open > .sub-menu,
	.aprx-parent-toggle:focus-within > .sub-menu {
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto;
	}
}

.aprx-parent-toggle > .hfe-has-submenu-container > a.hfe-menu-item:focus-visible {
	outline: 2px solid #5ba3ff;
	outline-offset: 3px;
}

/* ─── Offcanvas / flyout (mobile + tablet) ─────────────────────────── */

@media (min-width: 768px) and (max-width: 1024px) {
	.aprx-mobile-nav.elementor-hidden-tablet {
		display: block !important;
	}
}

html.aprx-flyout-open,
body.aprx-flyout-open {
	overflow: hidden;
}

.hfe-flyout-trigger:focus-visible,
.hfe-flyout-close:focus-visible {
	outline: 2px solid #5ba3ff;
	outline-offset: 3px;
}

.hfe-flyout-wrapper .sub-menu,
.hfe-flyout-wrapper nav.hfe-dropdown,
.hfe-flyout-wrapper nav.hfe-dropdown-expandible {
	background-color: transparent !important;
}

.hfe-flyout-wrapper .menu-item a.hfe-menu-item,
.hfe-flyout-wrapper .sub-menu a.hfe-sub-menu-item {
	color: #ffffff !important;
	min-height: 44px;
	align-items: center;
}

.hfe-flyout-wrapper .menu-item a.hfe-menu-item:hover,
.hfe-flyout-wrapper .menu-item a.hfe-menu-item:focus-visible,
.hfe-flyout-wrapper .sub-menu a.hfe-sub-menu-item:hover,
.hfe-flyout-wrapper .sub-menu a.hfe-sub-menu-item:focus-visible {
	color: #5ba3ff !important;
	background-color: rgba(255, 255, 255, 0.08) !important;
}

.hfe-flyout-wrapper .menu-item a.hfe-menu-item:focus-visible,
.hfe-flyout-wrapper .sub-menu a.hfe-sub-menu-item:focus-visible {
	outline: 2px solid #5ba3ff;
	outline-offset: -2px;
}

.hfe-flyout-wrapper .hfe-nav-menu > li.menu-item {
	border-bottom: 1px solid rgba(208, 213, 221, 0.35);
}

/* Match main flyout separators on nested items (Elementor uses a solid gray). */
.hfe-flyout-wrapper .sub-menu > li.menu-item {
	border-bottom: 1px solid rgba(208, 213, 221, 0.35) !important;
	border-top: 0 !important;
	border-left: 0 !important;
	border-right: 0 !important;
}

.hfe-flyout-wrapper .aprx-parent-toggle.aprx-submenu-open > .sub-menu,
.hfe-flyout-wrapper .menu-item-has-children.menu-active > .sub-menu,
.hfe-flyout-wrapper .menu-item-has-children .sub-menu.sub-menu-open {
	position: relative !important;
	width: 100% !important;
	left: 0 !important;
}

/* Desktop dropdown panel (any submenu under desktop nav). */
@media (min-width: 1025px) {
	.aprx-desktop-nav li.menu-item-has-children {
		position: relative;
	}

	.aprx-desktop-nav li.menu-item-has-children > .sub-menu,
	.aprx-desktop-nav .aprx-parent-toggle > .sub-menu {
		background-color: #081e4e !important;
		width: max-content !important;
		min-width: 11rem !important;
		max-width: min(20rem, 90vw) !important;
		padding: 0.4rem 0 !important;
		margin: 0.15rem 0 0 !important;
		border: 1px solid rgba(255, 255, 255, 0.14) !important;
		border-radius: 4px;
		box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
		position: absolute;
		top: 100%;
		left: 0 !important;
		right: auto !important;
		z-index: 1000;
		list-style: none;
	}

	.aprx-desktop-nav li.menu-item-has-children > .sub-menu > li,
	.aprx-desktop-nav .aprx-parent-toggle > .sub-menu > li {
		margin: 0;
		border: 0 !important;
		border-bottom: none !important;
	}

	.aprx-desktop-nav li.menu-item-has-children > .sub-menu a.hfe-sub-menu-item,
	.aprx-desktop-nav .aprx-parent-toggle > .sub-menu a.hfe-sub-menu-item {
		color: #ffffff !important;
		background-color: transparent !important;
		display: flex !important;
		align-items: center;
		gap: 0;
		box-sizing: border-box;
		width: 100%;
		padding: 0.75rem 1.15rem !important;
		min-height: 2.75rem;
		font-style: normal !important;
		font-weight: 500 !important;
		font-size: 0.9375rem !important;
		line-height: 1.35 !important;
		letter-spacing: 0.01em;
		text-align: left;
		white-space: nowrap;
		border: 0 !important;
		border-radius: 0;
		text-decoration: none;
	}

	.aprx-desktop-nav li.menu-item-has-children > .sub-menu a.hfe-sub-menu-item:hover,
	.aprx-desktop-nav li.menu-item-has-children > .sub-menu a.hfe-sub-menu-item:focus-visible,
	.aprx-desktop-nav .aprx-parent-toggle > .sub-menu a.hfe-sub-menu-item:hover,
	.aprx-desktop-nav .aprx-parent-toggle > .sub-menu a.hfe-sub-menu-item:focus-visible {
		color: #5ba3ff !important;
		background-color: rgba(255, 255, 255, 0.1) !important;
	}

	.aprx-desktop-nav li.menu-item-has-children > .sub-menu a.hfe-sub-menu-item:focus-visible,
	.aprx-desktop-nav .aprx-parent-toggle > .sub-menu a.hfe-sub-menu-item:focus-visible {
		outline: 2px solid #5ba3ff;
		outline-offset: -2px;
	}
}