/* =====================================================================
 * Lifeline — modern responsive (mobile) menu
 *
 * Renders inside the webinane-responsive-header drawer:
 *   .res-menu-wrapper   → header style 1 (dark drawer)
 *   .res-menu-wrapper2  → header style 2 (light drawer)
 * The drawer open/close shell + hamburger button come from the plugin;
 * this file restyles the menu list (.lifeline-res-menu) and powers the
 * accordion + mega panels. Real nav items carry .lifeline-res-item so the
 * layout never leaks into Elementor mega content.
 * ===================================================================== */

/* ---- List reset ---------------------------------------------------- */
.lifeline-res-menu,
.lifeline-res-menu .lifeline-res-submenu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lifeline-res-item {
	position: relative;
	display: block;
}

/* Neutralise the plugin's old depth dots / gradient guides for our menu. */
.lifeline-res-menu ul::before,
.lifeline-res-menu ul::after,
.lifeline-res-item > a::before,
.lifeline-res-item > a::after {
	content: none !important;
}

/* ---- Item links ---------------------------------------------------- */
.lifeline-res-item > a {
	/* !important defeats the theme's Bootstrap `.d-block` link class. */
	display: flex !important;
	align-items: center;
	gap: 8px;
	padding: 13px 16px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.lifeline-res-item.menu-item-has-children > a {
	padding-right: 54px; /* room for the toggle button */
}

.lifeline-res-item .lifeline-menu-label {
	flex: 0 1 auto;
}

.lifeline-res-menu .lifeline-menu-icon {
	font-size: var(--mm-icon-size, 1em);
	color: var(--mm-icon-color, inherit);
}
.lifeline-res-menu .lifeline-menu-icon.mm-icon-left {
	margin-right: var(--mm-icon-gap, 8px);
	order: -1;
}
.lifeline-res-menu .lifeline-menu-icon.mm-icon-right {
	margin-left: auto;
	padding-left: var(--mm-icon-gap, 8px);
}

/* ---- Toggle button (separate from the link) ------------------------ */
.lifeline-res-toggle {
	position: absolute;
	top: 4px;
	right: 6px;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	color: inherit;
	transition: background-color 0.2s ease;
}

.lifeline-res-toggle i {
	font-size: 13px;
	transition: transform 0.3s ease;
}

.lifeline-res-item.is-open > .lifeline-res-toggle i {
	transform: rotate(180deg);
}

/* Cancel the plugin's generic hover padding-shift on our links. */
.res-menu-wrapper .lifeline-res-item:hover > a,
.res-menu-wrapper2 .lifeline-res-item:hover > a {
	padding-left: 16px;
}
.res-menu-wrapper .lifeline-res-item.menu-item-has-children:hover > a,
.res-menu-wrapper2 .lifeline-res-item.menu-item-has-children:hover > a {
	padding-right: 54px;
}

/* ---- Sub-menus (accordion; hidden until toggled) ------------------- */
.lifeline-res-submenu,
.lifeline-res-mega {
	display: none;
	flex-basis: 100%;
	width: 100%;
}

.lifeline-res-submenu {
	padding-left: 14px;
	margin: 4px 0 6px;
}

.lifeline-res-submenu .lifeline-res-item > a {
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 14px;
	font-weight: 500;
}

/* A mega item shows its panel, never a plain sub-menu. */
.lifeline-res-item.lifeline-res-has-mega > .lifeline-res-submenu {
	display: none !important;
}

/* ---- Mega panel (collapsible Elementor template) ------------------- */
.lifeline-res-mega {
	margin: 6px 0 10px;
	padding: 14px;
	border-radius: 10px;
	background: #ffffff;
	overflow: hidden;
}

/* Undo the drawer's blanket "ul ul { display:none }" inside the panel so
 * the Elementor template renders. (Lists nested in a mega template show
 * stacked, same trade-off as the desktop mega menu.) */
.lifeline-res-mega ul,
.lifeline-res-mega ul ul {
	display: block !important;
	padding-left: 0 !important;
	list-style: none;
}
.lifeline-res-mega ul::before,
.lifeline-res-mega ul::after,
.lifeline-res-mega li::before,
.lifeline-res-mega li > a::before {
	content: none !important;
}

/* =====================================================================
 * Colour schemes per drawer style
 * ===================================================================== */

/* ---- Style 1: dark drawer ----------------------------------------- */
.res-menu-wrapper .lifeline-res-menu {
	padding: 4px 0;
}
.res-menu-wrapper .lifeline-res-menu > li.lifeline-res-item + li.lifeline-res-item {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.res-menu-wrapper .lifeline-res-item > a {
	color: #fff;
}
.res-menu-wrapper .lifeline-res-item > a:hover,
.res-menu-wrapper .lifeline-res-item.is-open > a {
	color: var(--theme-primary-color, #00b3ac);
}
.res-menu-wrapper .lifeline-res-toggle {
	color: #fff;
}
.res-menu-wrapper .lifeline-res-toggle:hover {
	background: rgba(255, 255, 255, 0.1);
}
.res-menu-wrapper .lifeline-res-submenu {
	border-left: 2px solid rgba(255, 255, 255, 0.12);
}
.res-menu-wrapper .lifeline-res-submenu .lifeline-res-item > a {
	color: #c8c8c8;
}
.res-menu-wrapper .lifeline-res-submenu .lifeline-res-item > a:hover {
	color: #fff;
}

/* ---- Style 2: light drawer ---------------------------------------- */
.res-menu-wrapper2 .lifeline-res-menu > li.lifeline-res-item {
	background: #fff;
	margin-bottom: 2px;
	border-radius: 8px;
}
.res-menu-wrapper2 .lifeline-res-item > a {
	color: #1c1c1c;
}
.res-menu-wrapper2 .lifeline-res-item > a:hover,
.res-menu-wrapper2 .lifeline-res-item.is-open > a {
	color: var(--theme-primary-color, #00b3ac);
}
.res-menu-wrapper2 .lifeline-res-toggle {
	color: #555;
}
.res-menu-wrapper2 .lifeline-res-toggle:hover {
	background: rgba(0, 0, 0, 0.05);
}
.res-menu-wrapper2 .lifeline-res-submenu {
	border-left: 2px solid rgba(0, 0, 0, 0.08);
}
.res-menu-wrapper2 .lifeline-res-submenu .lifeline-res-item > a {
	color: #555;
}
.res-menu-wrapper2 .lifeline-res-submenu .lifeline-res-item > a:hover {
	color: #1c1c1c;
}