/* 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. */
html .nl-main-nav .brx-has-megamenu.nl-mega-active > .brx-submenu-toggle > a {
	color: var(--shade-light) !important;
}

@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;
	}
}