/* =========================================================================
   Product mega menu: three-column cascade with fading panels
   Applies to the Elementor Nav Menu widget with CSS class "mc-mega-nav".

   Column 1 = Level 1 (Human Primary Cells, Animal Primary Cells...)
   Column 2 = Level 2 (Human Immune Cells, Human Hepatic Cells...)
   Column 3 = Level 3 (Mononuclear Cells, T Cells...)

   Hovering a column 1 item fades in its column 2.
   Hovering a column 2 item fades in its column 3.
   With nothing hovered, the first item in each column shows as active.
   ========================================================================= */

.mc-mega-nav {
	--mc-navy: #1b2f5e;
	--mc-text: #1a1a1a;
	--mc-line: #e5e7eb;
	--mc-col1: 220px;           /* Level 1 column width */
	--mc-col2: 260px;           /* Level 2 column width */
	--mc-col3: 340px;           /* Level 3 column width */
	--mc-height: 460px;         /* Raise if a level 3 list gets clipped */
	width: 100% !important;
}

/* Everything positions against the nav, so columns line up at the top. */
.mc-mega-nav .elementor-nav-menu--main {
	position: relative;
	width: 100%;
	min-height: var(--mc-height);
}

.mc-mega-nav .elementor-nav-menu--main > .elementor-nav-menu,
.mc-mega-nav .elementor-nav-menu--main > .elementor-nav-menu > li,
.mc-mega-nav .elementor-nav-menu--main .sub-menu li {
	position: static !important;
	margin: 0;
	border: 0 !important;
}

.mc-mega-nav .sub-arrow {
	display: none !important;
}

.mc-mega-nav a[href="#"] {
	cursor: default;
}

/* ---- Column 1: Level 1 tabs ------------------------------------------- */

.mc-mega-nav .elementor-nav-menu--main > .elementor-nav-menu {
	width: var(--mc-col1);
	min-height: var(--mc-height);
	padding: 24px 0 !important;
}

.mc-mega-nav .elementor-nav-menu--main > .elementor-nav-menu > li > a {
	position: relative;
	display: block;
	padding: 12px 24px 12px 16px !important;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	white-space: normal;
	color: var(--mc-text) !important;
	background: none !important;
	transition: color .2s ease;
}

.mc-mega-nav .elementor-nav-menu--main > .elementor-nav-menu > li > a::after {
	content: "";
	position: absolute;
	top: 6px;
	bottom: 6px;
	right: 0;
	width: 4px;
	background: var(--mc-navy);
	opacity: 0;
	transition: opacity .2s ease;
}

.mc-mega-nav .elementor-nav-menu--main > .elementor-nav-menu > li:hover > a,
.mc-mega-nav .elementor-nav-menu--main > .elementor-nav-menu > li:focus-within > a,
.mc-mega-nav .elementor-nav-menu--main > .elementor-nav-menu:not(:hover):not(:focus-within) > li:first-child > a {
	color: var(--mc-navy) !important;
	font-weight: 500;
}

.mc-mega-nav .elementor-nav-menu--main > .elementor-nav-menu > li:hover > a::after,
.mc-mega-nav .elementor-nav-menu--main > .elementor-nav-menu > li:focus-within > a::after,
.mc-mega-nav .elementor-nav-menu--main > .elementor-nav-menu:not(:hover):not(:focus-within) > li:first-child > a::after {
	opacity: 1;
}

/* ---- Column 2: Level 2 list ------------------------------------------- */

.mc-mega-nav .elementor-nav-menu--main > .elementor-nav-menu > li > .sub-menu {
	display: block !important;
	position: absolute !important;
	top: 0 !important;
	bottom: 0 !important;
	left: var(--mc-col1) !important;
	right: auto !important;
	width: var(--mc-col2) !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 24px 0 !important;           /* No side padding: items must touch column 3 */
	background: transparent !important;
	border: 0 !important;
	border-left: 1px solid var(--mc-line) !important;
	box-shadow: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none;
	transform: translateY(6px);
	transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}

.mc-mega-nav .elementor-nav-menu--main > .elementor-nav-menu > li:hover > .sub-menu,
.mc-mega-nav .elementor-nav-menu--main > .elementor-nav-menu > li:focus-within > .sub-menu,
.mc-mega-nav .elementor-nav-menu--main > .elementor-nav-menu:not(:hover):not(:focus-within) > li:first-child > .sub-menu {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto;
	transform: none;
	transition: opacity .25s ease, transform .25s ease, visibility 0s;
}

.mc-mega-nav .elementor-nav-menu--main > .elementor-nav-menu > li > .sub-menu > li > a {
	display: block;
	padding: 12px 24px !important;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	white-space: normal;
	color: var(--mc-text) !important;
	background: none !important;
	border: 0 !important;
	transition: color .2s ease;
}

.mc-mega-nav .elementor-nav-menu--main > .elementor-nav-menu > li > .sub-menu > li:hover > a,
.mc-mega-nav .elementor-nav-menu--main > .elementor-nav-menu > li > .sub-menu > li:focus-within > a,
.mc-mega-nav .elementor-nav-menu--main > .elementor-nav-menu > li > .sub-menu:not(:hover):not(:focus-within) > li:first-child > a {
	color: var(--mc-navy) !important;
	font-weight: 500;
}

/* ---- Column 3: Level 3 list ------------------------------------------- */

.mc-mega-nav .elementor-nav-menu--main .sub-menu .sub-menu {
	display: block !important;
	position: absolute !important;
	top: 0 !important;
	bottom: 0 !important;
	left: 100% !important;                 /* Directly beside column 2 */
	right: auto !important;
	width: var(--mc-col3) !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 24px 36px !important;
	overflow-y: auto;
	background: transparent !important;
	border: 0 !important;
	border-left: 1px solid var(--mc-line) !important;
	box-shadow: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none;
	transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

/* "inherit" rather than "visible": a column 3 must never show while its
   column 2 is hidden behind a different tab. */
.mc-mega-nav .elementor-nav-menu--main .sub-menu > li:hover > .sub-menu,
.mc-mega-nav .elementor-nav-menu--main .sub-menu > li:focus-within > .sub-menu,
.mc-mega-nav .elementor-nav-menu--main .sub-menu:not(:hover):not(:focus-within) > li:first-child > .sub-menu {
	opacity: 1 !important;
	visibility: inherit !important;
	pointer-events: auto;
	transform: none;
	transition: opacity .2s ease, transform .2s ease, visibility 0s;
}

.mc-mega-nav .elementor-nav-menu--main .sub-menu .sub-menu a {
	display: block;
	padding: 9px 0 !important;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	white-space: normal;
	color: var(--mc-text) !important;
	background: none !important;
	border: 0 !important;
	transition: color .2s ease;
}

.mc-mega-nav .elementor-nav-menu--main .sub-menu .sub-menu a:hover,
.mc-mega-nav .elementor-nav-menu--main .sub-menu .sub-menu a:focus-visible,
.mc-mega-nav .elementor-nav-menu--main .sub-menu .sub-menu a.elementor-item-active {
	color: var(--mc-navy) !important;
}