/* NaturesLens Bricks mega-menu state layer.
   The Bricks panels remain the content source; this file only controls
   the visible panel width, pointer boundary, and wipe animation. */

html .nl-main-nav {
	--nl-mega-shell-height: 0px;
	--nl-mega-top: calc(var(--nl-admin-bar-h, 0px) + var(--nl-header-h, 80px));
}

html body #brx-header #brxe-kuvgow {
	--nl-mega-shell-height: 0px;
	--nl-mega-top: calc(var(--nl-admin-bar-h, 0px) + var(--nl-header-h, 80px));
}

html .nl-main-nav .brx-has-megamenu > .brx-megamenu,
html body #brx-header #brxe-kuvgow .brx-has-megamenu > .brx-megamenu,
html body .nl-mega-ported {
	display: block !important;
	position: fixed !important;
	top: var(--nl-mega-top) !important;
	left: 50% !important;
	z-index: 1002;
	box-sizing: border-box;
	margin: 0 !important;
	width: min(1140px, calc(100vw - 48px)) !important;
	max-width: 1140px !important;
	height: 0;
	max-height: calc(100vh - var(--nl-mega-top) - 24px);
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .08);
	border-top-width: 0 !important;
	opacity: 0;
	visibility: hidden;
	/* Bricks can keep full-width positioning wrappers in the DOM, but only
	   the constrained visible panel should accept pointer interaction. */
	pointer-events: none;
	transform: translate3d(-50%, -6px, 0);
	transform-origin: top center;
	transition:
		height 420ms cubic-bezier(.22,.8,.22,1),
		opacity 180ms ease,
		transform 220ms ease,
		visibility 0s linear 420ms;
	will-change: height;
}

html body #brx-header .nl-main-nav .brx-has-megamenu > .brx-megamenu,
html body #brx-header #brxe-kuvgow .bricks-nav-menu > .brx-has-megamenu > .brx-megamenu,
html body #brx-header #brxe-kuvgow .bricks-nav-menu > .brx-has-megamenu.open > .brx-megamenu,
html body #brx-header #brxe-kuvgow .bricks-nav-menu > .brx-has-megamenu.is-open > .brx-megamenu,
html body .nl-mega-ported {
	right: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	width: min(1140px, calc(100vw - 48px)) !important;
	max-width: 1140px !important;
	transform: translate3d(-50%, -6px, 0) !important;
}

html .nl-main-nav .brx-has-megamenu > .brx-megamenu > * {
	box-sizing: border-box;
	max-height: calc(100vh - var(--nl-mega-top) - 24px);
	overflow: auto;
	overscroll-behavior: contain;
}

html body #brx-header .nl-main-nav .brx-has-megamenu > .brx-megamenu > .brxe-section {
	padding: 0 !important;
}

html body #brx-header #brxe-kuvgow .brx-has-megamenu > .brx-megamenu > .brxe-section {
	padding: 0 !important;
}

html .nl-main-nav.nl-mega-system-open .brx-has-megamenu.nl-mega-active > .brx-megamenu,
html body #brx-header #brxe-kuvgow.nl-mega-system-open .brx-has-megamenu.nl-mega-active > .brx-megamenu,
html body .nl-mega-ported.nl-mega-panel-active {
	height: min(var(--nl-mega-shell-height), calc(100vh - var(--nl-mega-top) - 24px));
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate3d(-50%, 0, 0);
	box-shadow: 0 18px 45px rgba(0, 0, 0, .10);
	transition:
		height 420ms cubic-bezier(.22,.8,.22,1),
		opacity 180ms ease,
		transform 220ms ease,
		visibility 0s linear 0s;
}

html body #brx-header .nl-main-nav.nl-mega-system-open .brx-has-megamenu.nl-mega-active > .brx-megamenu,
html body #brx-header #brxe-kuvgow.nl-mega-system-open .brx-has-megamenu.nl-mega-active > .brx-megamenu,
html body #brx-header #brxe-kuvgow .bricks-nav-menu > .brx-has-megamenu.nl-mega-active.open > .brx-megamenu,
html body #brx-header #brxe-kuvgow .bricks-nav-menu > .brx-has-megamenu.nl-mega-active.is-open > .brx-megamenu,
html body .nl-mega-ported.nl-mega-panel-active {
	transform: translate3d(-50%, 0, 0) !important;
}

html body #brx-header #brxe-kuvgow .bricks-nav-menu > li.brx-has-megamenu > .brx-megamenu,
html body #brx-header #brxe-kuvgow .bricks-nav-menu > li.brx-has-megamenu.open > .brx-megamenu,
html body #brx-header #brxe-kuvgow .bricks-nav-menu > li.brx-has-megamenu.is-open > .brx-megamenu {
	top: var(--nl-mega-top) !important;
	left: 50% !important;
	right: auto !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
	width: min(1140px, calc(100vw - 48px)) !important;
	max-width: 1140px !important;
	transform: translate3d(-50%, -6px, 0) !important;
}

html body #brx-header #brxe-kuvgow.nl-mega-system-open .bricks-nav-menu > li.brx-has-megamenu.nl-mega-active > .brx-megamenu,
html body #brx-header #brxe-kuvgow .bricks-nav-menu > li.brx-has-megamenu.nl-mega-active.open > .brx-megamenu,
html body #brx-header #brxe-kuvgow .bricks-nav-menu > li.brx-has-megamenu.nl-mega-active.is-open > .brx-megamenu {
	transform: translate3d(-50%, 0, 0) !important;
}

html body #brx-header #brxe-kuvgow .brx-megamenu > .brxe-section,
html body #brx-header #brxe-kuvgow .brx-megamenu > .brxe-section > .brxe-container,
html body .nl-mega-ported > .brxe-section,
html body .nl-mega-ported > .brxe-section > .brxe-container {
	margin: 0 !important;
	padding: 0 !important;
}

html .nl-main-nav.nl-mega-system-open.nl-mega-switching .brx-has-megamenu.nl-mega-active > .brx-megamenu {
	transition:
		height 420ms cubic-bezier(.22,.8,.22,1),
		opacity 170ms ease,
		transform 170ms ease,
		visibility 0s linear 0s;
}

html .nl-main-nav .brx-has-megamenu > .brx-megamenu * {
	transform: none;
}

html .nl-main-nav .brx-has-megamenu.nl-mega-active > .brx-submenu-toggle button .menu-item-icon {
	transform: rotate(180deg) !important;
}

/* Keep the top-level link in its "active" colour for as long as its
   mega menu panel is open -- including while the pointer has moved
   off the link and onto the panel itself. Both this rule and the
   chevron rule above key off .nl-mega-active, the single state class
   mega-menu-behaviour.js keeps in sync with the panel's real
   visibility, instead of :hover or [aria-expanded] which only reflect
   the pointer's current position.

   Sibling-dim experiment (2026-09-19): the active item now stays at
   full/normal colour, and its SIBLINGS dim instead (inverted from the
   original single-item self-dim). This was previously var(--shade-light)
   on the active item itself, which is why the hovered item kept dimming
   even after the Bricks-element-level :hover rules were flipped -- this
   !important rule was winning the cascade regardless of specificity. */
html .nl-main-nav .brx-has-megamenu.nl-mega-active > .brx-submenu-toggle > a {
	color: var(--neutral) !important;
}

html .nl-main-nav.nl-mega-system-open .brx-has-megamenu:not(.nl-mega-active) > .brx-submenu-toggle > a {
	color: hsl(0, 0%, 75%) !important; /* between --shade-semi-light (65%) and --shade-light (85%) */
}

/* Plain top-level items with no mega menu (e.g. "News") have no
   .nl-mega-active/.brx-submenu-toggle state to key off, so they were
   only dimmed by the Bricks-element :hover CSS on the nav <ul>. That
   :hover is lost the moment the pointer moves onto an open mega menu
   panel, because mega-menu-behaviour.js ports panels out to
   document.body (fixed-positioned, no longer a DOM descendant of the
   nav), which is why a plain item like News would snap back to full
   colour while another item's panel was open. Key this off the same
   JS-driven .nl-mega-system-open state instead so it stays dimmed for
   as long as any panel is open, matching the megamenu items above. */
html .nl-main-nav.nl-mega-system-open .bricks-nav-menu > li:not(.brx-has-megamenu) > a {
	color: hsl(0, 0%, 75%) !important; /* between --shade-semi-light (65%) and --shade-light (85%) */
}

@media (hover: hover) and (pointer: fine) {
	html .nl-main-nav .brx-has-megamenu > .brx-submenu-toggle {
		cursor: default;
	}
}

@media (max-width: 767px) {
	html .nl-main-nav .brx-has-megamenu > .brx-megamenu,
	html body #brx-header .nl-main-nav .brx-has-megamenu > .brx-megamenu,
	html body #brx-header #brxe-kuvgow .brx-has-megamenu > .brx-megamenu,
	html body .nl-mega-ported {
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		width: auto !important;
		max-width: none !important;
		height: auto !important;
		max-height: none !important;
		transform: none !important;
	}

	html .nl-main-nav .brx-has-megamenu > .brx-megamenu {
		width: auto !important;
	}

	html body #brx-header .nl-main-nav .brx-has-megamenu > .brx-megamenu {
		width: auto !important;
	}

	html body #brx-header #brxe-kuvgow .brx-has-megamenu > .brx-megamenu {
		width: auto !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	html .nl-main-nav .brx-has-megamenu > .brx-megamenu,
	html .nl-main-nav.nl-mega-system-open .brx-has-megamenu.nl-mega-active > .brx-megamenu,
	html .nl-main-nav.nl-mega-system-open.nl-mega-switching .brx-has-megamenu.nl-mega-active > .brx-megamenu,
	html body .nl-mega-ported {
		transition: opacity 80ms linear, visibility 0s linear 80ms;
		transform: translate3d(-50%, 0, 0);
	}

	html body #brx-header .nl-main-nav .brx-has-megamenu > .brx-megamenu,
	html body #brx-header .nl-main-nav.nl-mega-system-open .brx-has-megamenu.nl-mega-active > .brx-megamenu,
	html body #brx-header #brxe-kuvgow .brx-has-megamenu > .brx-megamenu,
	html body #brx-header #brxe-kuvgow.nl-mega-system-open .brx-has-megamenu.nl-mega-active > .brx-megamenu {
		transform: translate3d(-50%, 0, 0) !important;
	}
}