/* =====================================================================
 * Lifeline Native Mega Menu
 * Adds: per-item icons, top-level caret, and full-width Elementor mega
 * panels. Regular sub-menus keep the theme's existing dropdown styling
 * (header nav > ul > li ul) — we only add what that doesn't cover.
 * ===================================================================== */

/* ---- Per-item icon ------------------------------------------------- */
.lifeline-nav-menu .lifeline-menu-icon {
	display: inline-block;
	font-size: var(--mm-icon-size, 0.9em);
	line-height: 1;
	vertical-align: middle;
	color: var(--mm-icon-color, inherit);
}

/* Gap depends on which side of the label the icon sits. */
.lifeline-nav-menu .lifeline-menu-icon.mm-icon-right {
	margin-left: var(--mm-icon-gap, 8px);
}
.lifeline-nav-menu .lifeline-menu-icon.mm-icon-left {
	margin-right: var(--mm-icon-gap, 8px);
}

/* Optional hover colour for the icon. */
.lifeline-nav-menu > li:hover > a .lifeline-menu-icon,
.lifeline-nav-menu > li > a:hover .lifeline-menu-icon,
.lifeline-nav-menu > li > a:focus .lifeline-menu-icon {
	color: var(--mm-icon-hover-color, var(--mm-icon-color, inherit));
}

/* Keep label + icon on one line. */
.lifeline-nav-menu > li > a .lifeline-menu-label {
	vertical-align: middle;
}

/* ---- Top-level caret for items that open a panel/submenu ----------- */
.lifeline-nav-menu > li.menu-item-has-children > a::after {
	content: "\f107"; /* fa-angle-down */
	font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
	font-weight: 900;
	margin-left: 7px;
	font-size: 0.8em;
	display: inline-block;
	transition: transform 0.3s ease;
	vertical-align: middle;
}

.lifeline-nav-menu > li.menu-item-has-children:hover > a::after,
.lifeline-nav-menu > li.menu-item-has-children.is-open > a::after {
	transform: rotate(180deg);
}

/* ---- Full-width mega panel ----------------------------------------- */
.lifeline-nav-menu > li.lifeline-has-mega {
	position: relative;
}

/* A mega item never shows the plain sub-menu list — the panel replaces it. */
.lifeline-nav-menu > li.lifeline-has-mega > ul.sub-menu,
.lifeline-nav-menu > li.lifeline-has-mega > ul {
	display: none !important;
}

.lifeline-mega-panel {
	position: absolute;
	top: 100%;
	left: 0;
	/* width is set to the header container width by JS; this is a fallback. */
	width: 100%;
	min-width: 280px;
	z-index: 999;
	background-color: #fff;
	border-top: 3px solid var(--theme-primary-color, #00b3ac);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(var(--mm-anim-translate, 12px));
	transition:
		opacity var(--mm-anim-speed, 350ms) ease,
		transform var(--mm-anim-speed, 350ms) ease,
		visibility var(--mm-anim-speed, 350ms) ease;
	pointer-events: none;
}

/* Hover / keyboard reveal — disabled when the menu is in click-trigger mode. */
.lifeline-nav-menu:not(.mm-trigger-click) > li.lifeline-has-mega:hover > .lifeline-mega-panel,
.lifeline-nav-menu:not(.mm-trigger-click) > li.lifeline-has-mega:focus-within > .lifeline-mega-panel,
.lifeline-nav-menu > li.lifeline-has-mega.is-open > .lifeline-mega-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.lifeline-mega-inner {
	width: 100%;
	overflow: hidden;
}

/* ---- Reset inherited dropdown styling inside the panel -------------
 * The theme's `header nav > ul > li ul` rules use a descendant combinator,
 * so any <ul> inside an Elementor template would otherwise be positioned
 * absolutely and hidden. Neutralise that within the panel only.
 * ------------------------------------------------------------------- */
.lifeline-mega-panel ul,
.lifeline-mega-panel li {
	position: static !important;
	opacity: 1 !important;
	visibility: visible !important;
	width: auto !important;
	margin: 0;
	background: none;
	border: 0;
}

.lifeline-mega-panel ul {
	list-style: none;
	padding: 0;
}

.lifeline-mega-panel li::before {
	content: none !important;
}

/* Don't let the panel's own descendants trigger the parent caret rules etc. */
.lifeline-mega-panel a::after {
	content: none;
}

/* ---- Click-trigger mode for regular (non-mega) dropdowns ----------
 * The theme reveals sub-menus on :hover. In click mode we suppress that
 * and reveal on .is-open instead (toggled by JS). Higher specificity than
 * the theme rule so it wins.
 * ------------------------------------------------------------------- */
.lifeline-nav-menu.mm-trigger-click > li.menu-item-has-children:hover > ul {
	opacity: 0;
	visibility: hidden;
	margin-top: 30px;
}
.lifeline-nav-menu.mm-trigger-click > li.menu-item-has-children.is-open > ul {
	opacity: 1;
	visibility: visible;
	margin-top: 0;
}

/* ---- Safety: never show the desktop mega panel on mobile ----------
 * The desktop header is already hidden < 980px (responsive header plugin
 * takes over); this is belt-and-suspenders so nothing leaks on tablets.
 * ------------------------------------------------------------------- */
@media (max-width: 991px) {
	.lifeline-mega-panel {
		display: none !important;
	}
}