/**
 * NSO mega menu.
 *
 * Every value an editor can change in Elementor is a CSS custom property here.
 * The widget's style controls write those properties on {{WRAPPER}} .nso-mm, so
 * the values below are the defaults you get before anyone touches a control.
 *
 * Colours and type default to the Elementor Global Colors / Global Fonts of the
 * kit, with the raw values only as a fallback when the kit CSS is not loaded.
 *
 * Link rules are written as `.nso-mm a.nso-mm__x` on purpose: the Elementor kit
 * ships `.elementor-kit-16 a { color: accent }` (0,1,1) which would otherwise
 * win over a single class selector and paint every menu link pink.
 */

.nso-mm {
	/* colours */
	--nso-mm-fg: var(--e-global-color-primary, #2c354b);
	--nso-mm-fg-invert: var(--e-global-color-9de4cf1, #fff);
	--nso-mm-panel-bg: var(--e-global-color-9de4cf1, #fff);
	--nso-mm-text: var(--e-global-color-text, #394460);
	--nso-mm-border: var(--e-global-color-8e8b764, #cfcfcf);
	--nso-mm-tint: var(--e-global-color-f9ce99a, #f3fbfb);
	--nso-mm-font: var(--e-global-typography-text-font-family, "Open Sans"), sans-serif;

	/* bar */
	--nso-mm-item-pad-x: 1rem;
	--nso-mm-item-pad-y: 0.7rem;
	--nso-mm-item-gap: 0px;

	/* panel */
	--nso-mm-panel-w: var(--content-width, 1280px);
	--nso-mm-cols: 6;
	--nso-mm-col-gap-x: 1.75rem;
	--nso-mm-col-gap-y: 2.25rem;

	/* overlay */
	--nso-mm-overlay-bg: rgba(44, 53, 75, 0.45);

	/* column */
	--nso-mm-thumb-h: 118px;
	--nso-mm-img-fill: 85; /* % of the image height for a square product, see .nso-mm__img--trim */
	--nso-mm-thumb-justify: flex-start;
	--nso-mm-thumb-indent: 12px; /* image sits slightly right of its heading */
	--nso-mm-thumb-gap: 0.85rem;
	--nso-mm-heading-gap: 0.7rem;
	--nso-mm-sublink-gap: 0.35rem;

	position: relative;
	width: 100%;
	font-family: var(--nso-mm-font);
}

/*
 * Inside the header row the panel spans the full window width, so the row is the
 * positioning context and everything between it and the panel goes static.
 */
.nso-mm-row {
	position: relative;
}

.nso-mm-row .e-con-inner,
.nso-mm-row .elementor-widget-nso-megamenu,
.nso-mm-row .elementor-widget-container,
.nso-mm-row .nso-mm,
.nso-mm__item {
	position: static;
}

/* ---------------------------------------------------------------- bar --- */

.nso-mm__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	column-gap: var(--nso-mm-item-gap);
	margin: 0 calc(var(--nso-mm-item-pad-x) * -1);
	padding: 0;
	list-style: none;
}

.nso-mm__item {
	margin: 0;
	list-style: none;
}

.nso-mm a.nso-mm__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: var(--nso-mm-item-pad-y) var(--nso-mm-item-pad-x);
	color: var(--nso-mm-fg);
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.6;
	text-decoration: none;
	border-radius: 3px 3px 0 0;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.nso-mm a.nso-mm__link:hover,
.nso-mm a.nso-mm__link:focus-visible,
.nso-mm .nso-mm__item.is-open > a.nso-mm__link {
	background-color: var(--nso-mm-fg);
	color: var(--nso-mm-fg-invert);
}

.nso-mm a.nso-mm__link:focus-visible {
	outline: 2px solid var(--nso-mm-fg);
	outline-offset: -2px;
}

.nso-mm a.nso-mm__link[data-current] {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

/* The chevron marks that a tab has a panel. It deliberately does not rotate. */
.nso-mm__chevron {
	flex: none;
}

/* -------------------------------------------------------------- panel --- */

.nso-mm__panel {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 90;
	max-height: calc(100vh - 220px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background-color: var(--nso-mm-panel-bg);
	border-top: 1px solid var(--nso-mm-border);
	box-shadow: 0 14px 26px rgba(44, 53, 75, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}

.nso-mm__item.is-open > .nso-mm__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s;
}

/* Panel spans the window, its content lines up with the boxed header above. */
.nso-mm__panel-inner {
	width: min(100% - 2.5rem, var(--nso-mm-panel-w));
	margin-inline: auto;
	padding: 2rem 0 2.5rem;
}

.nso-mm__cols {
	display: grid;
	grid-template-columns: repeat(var(--nso-mm-cols), minmax(0, 1fr));
	gap: var(--nso-mm-col-gap-y) var(--nso-mm-col-gap-x);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nso-mm__col {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

/* ------------------------------------------------------------- column --- */

.nso-mm a.nso-mm__col-head {
	display: block;
	color: var(--nso-mm-fg);
	text-decoration: none;
}

/*
 * The image sits directly above the column heading: bottom aligned so every
 * picture in a row stands on the same line whatever its aspect ratio, and
 * horizontally aligned with the heading and the links below it. Centring the
 * image instead left the narrow portrait shots floating in the middle of a
 * 190px column while the heading started at its left edge.
 */
.nso-mm__thumb {
	display: flex;
	align-items: flex-end;
	justify-content: var(--nso-mm-thumb-justify);
	height: var(--nso-mm-thumb-h);
	padding-left: var(--nso-mm-thumb-indent);
	margin-bottom: var(--nso-mm-thumb-gap);
	overflow: hidden;
	background-color: var(--nso-mm-tint);
	border-radius: 4px;
}

.nso-mm__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 0.2s ease;
}

/*
 * Even out images (widget setting, on by default). The file is already cropped
 * to the product, so its aspect ratio is the product's. The width grows with
 * the square root of that ratio, which gives a long telescope and a small
 * eyepiece about the same area. The caps keep it inside the column and inside
 * the image height; the height follows from the ratio.
 */
.nso-mm .nso-mm__img--trim {
	width: min(
		100%,
		calc(var(--nso-mm-thumb-h) * var(--nso-mm-img-fill) / 100 * var(--nso-mm-ar-sqrt, 1)),
		calc(var(--nso-mm-thumb-h) * var(--nso-mm-ar, 1))
	);
	height: auto;
}

.nso-mm a.nso-mm__col-head:hover .nso-mm__img {
	transform: scale(1.04);
}

.nso-mm__col-title {
	display: block;
	color: var(--nso-mm-fg);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.35;
}

.nso-mm a.nso-mm__col-head:hover .nso-mm__col-title,
.nso-mm a.nso-mm__col-head:focus-visible .nso-mm__col-title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nso-mm a.nso-mm__col-head[data-current] .nso-mm__col-title {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------ level 3 --- */

.nso-mm__sublist {
	margin: var(--nso-mm-heading-gap) 0 0;
	padding: 0;
	list-style: none;
}

.nso-mm__subitem {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nso-mm__subitem + .nso-mm__subitem {
	margin-top: var(--nso-mm-sublink-gap);
}

.nso-mm a.nso-mm__sublink {
	display: inline-block;
	color: var(--nso-mm-text);
	font-size: 0.9rem;
	line-height: 1.5;
	text-decoration: none;
	transition: color 0.15s ease;
}

.nso-mm a.nso-mm__sublink:hover,
.nso-mm a.nso-mm__sublink:focus-visible {
	color: var(--nso-mm-fg);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nso-mm a.nso-mm__sublink[data-current] {
	color: var(--nso-mm-fg);
	font-weight: 600;
}

/* ------------------------------------------------------------ overlay --- */

/*
 * Dims the page while a panel is open. Fixed, with its top edge set by the
 * script to the bottom of the header row, so the header itself is never
 * covered. It sits inside that row, so it inherits the row's stacking context:
 * always above page content, always below the panel (z-index 1 against 90).
 */
.nso-mm__overlay {
	position: fixed;
	top: var(--nso-mm-overlay-top, 100vh);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	background-color: var(--nso-mm-overlay-bg);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.nso-mm.is-any-open .nso-mm__overlay {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.2s ease, visibility 0s;
}

/* --------------------------------------------------------- responsive --- */

/*
 * The column count is a responsive Elementor control, so it is deliberately not
 * set in media queries here: that would override whatever the editor picks.
 */

@media (max-width: 767px) {
	.nso-mm__bar {
		flex-wrap: nowrap;
		overflow-x: auto;
	}

	.nso-mm__panel {
		max-height: 70vh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nso-mm__panel,
	.nso-mm__img,
	.nso-mm__overlay {
		transition: none;
	}

	.nso-mm__panel {
		transform: none;
	}
}