/**
 * NSO mobile menu: drill-down navigation in the off-canvas panel.
 *
 * One screen per level. The root screen is a single continuous list - product
 * categories first, then Brands and Help - with no rule and no gap between the
 * two sources, because they are the same kind of thing to the person using it:
 * places to go. Tapping a row with children slides its own screen in from the
 * right; the back button in that screen's header slides it back out.
 *
 * 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-mmm,
 * so the values below are the defaults you get before anyone touches a control.
 *
 * Colours and type default to the Elementor kit's Global Colors and Global
 * Fonts, with the raw values only as a fallback when the kit CSS is not loaded.
 *
 * Note on specificity: `.elementor-kit-16 a` and `.elementor-kit-16 button`
 * (0,1,1) paint every link and button on this site, so every rule that touches
 * one carries two classes to win without !important.
 *
 * The panel is about 220px wide once the popup's padding is off, so rows wrap
 * rather than truncate and nothing here depends on horizontal room.
 *
 * @package NightSkyOptics
 */

.nso-mmm {
	/* colours */
	--nso-mmm-fg: var(--e-global-color-primary, #2c354b);
	--nso-mmm-active: var(--e-global-color-50b1913, #508f8d);
	--nso-mmm-separator: rgba(44, 53, 75, 0.1);
	--nso-mmm-chevron: rgba(44, 53, 75, 0.35);
	--nso-mmm-title: var(--e-global-color-primary, #2c354b);
	--nso-mmm-back-bg: var(--e-global-color-f9ce99a, #f3fbfb);
	--nso-mmm-back-fg: var(--e-global-color-primary, #2c354b);
	--nso-mmm-all: var(--e-global-color-50b1913, #508f8d);
	--nso-mmm-all-bg: transparent;
	--nso-mmm-focus: var(--e-global-color-secondary, #69c5c2);
	--nso-mmm-screen-bg: var(--e-global-color-9de4cf1, #fff);
	--nso-mmm-font: var(--e-global-typography-text-font-family, "Open Sans"), sans-serif;

	/* metrics */
	--nso-mmm-row-h: 48px;
	--nso-mmm-thumb: 32px;
	--nso-mmm-slide: 280ms;
	--nso-mmm-ease: cubic-bezier(0.4, 0, 0.2, 1);

	width: 100%;
	font-family: var(--nso-mmm-font);
}

/* --------------------------------------------------------------- screens -- */

.nso-mmm__viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/*
 * The root screen stays in the flow so the menu has a natural height before the
 * script runs and if it never runs. Every other screen is taken out of the flow
 * and parked to the right.
 */
.nso-mmm__panel {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.nso-mmm__panel--root {
	position: relative;
}

.nso-mmm__panel:focus {
	outline: none;
}

/*
 * Enhanced state. Without it the child screens keep their `hidden` attribute and
 * the menu is a plain list of top level links, each of which still goes
 * somewhere sensible.
 */
.nso-mmm.is-enhanced .nso-mmm__viewport {
	transition: height var(--nso-mmm-slide) var(--nso-mmm-ease);
}

/*
 * `visibility` deliberately does NOT transition. A transitioned visibility stays
 * at its old value for the whole duration, which means the screen arriving is
 * still computed as hidden while it slides in - and nothing inside a hidden
 * subtree can take focus, so moving focus with the screen silently failed. It
 * flips instantly here instead, and the screen leaving is held visible by
 * .is-leaving until its slide is over.
 */
.nso-mmm.is-enhanced .nso-mmm__panel {
	transform: translateX(100%);
	visibility: hidden;
	transition: transform var(--nso-mmm-slide) var(--nso-mmm-ease);
}

/* The screen you came from: parked just off to the left, so going back reads as
 * coming back rather than as a new screen arriving. */
.nso-mmm.is-enhanced .nso-mmm__panel.is-behind {
	transform: translateX(-25%);
}

/*
 * The screen being left. Held visible for the length of its slide, and faded
 * out over the first stretch of it: the two screens overlap while they move,
 * and without the fade the tail of the old one is still legible under the new
 * one. Dropped by the script once the slide is over.
 *
 * Declared before .is-active so a screen re-opened mid-slide wins.
 */
.nso-mmm.is-enhanced .nso-mmm__panel.is-leaving {
	visibility: visible;
	opacity: 0;
	transition: transform var(--nso-mmm-slide) var(--nso-mmm-ease), opacity 160ms var(--nso-mmm-ease);
}

.nso-mmm.is-enhanced .nso-mmm__panel.is-active {
	transform: none;
	visibility: visible;
	opacity: 1;
}

/*
 * Opaque, but only while a slide is running. Two transparent screens sliding
 * across each other read as one block of doubled text; an opaque screen simply
 * covers the one it replaces. The class is dropped the moment the slide ends,
 * so at rest the popup's own background still shows through the menu exactly
 * as it did before.
 */
.nso-mmm.is-sliding .nso-mmm__panel {
	background-color: var(--nso-mmm-screen-bg, #fff);
}

/* ---------------------------------------------------------------- header -- */

.nso-mmm__head {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	min-height: var(--nso-mmm-row-h);
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--nso-mmm-separator);
}

.nso-mmm .nso-mmm__back {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--nso-mmm-back-bg);
	color: var(--nso-mmm-back-fg);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.nso-mmm .nso-mmm__back:hover,
.nso-mmm .nso-mmm__back:focus-visible {
	background-color: var(--nso-mmm-back-bg);
	color: var(--nso-mmm-active);
}

.nso-mmm .nso-mmm__back:focus-visible {
	outline: 2px solid var(--nso-mmm-focus);
	outline-offset: 2px;
}

.nso-mmm .nso-mmm__title {
	min-width: 0;
	color: var(--nso-mmm-title);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
}

/* ------------------------------------------------------------------ rows -- */

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

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

.nso-mmm .nso-mmm__item + .nso-mmm__item {
	border-top: 1px solid var(--nso-mmm-separator);
}

.nso-mmm a.nso-mmm__row {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	min-height: var(--nso-mmm-row-h);
	padding: 0.5rem 0;
	color: var(--nso-mmm-fg);
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: color 0.15s ease;
}

.nso-mmm a.nso-mmm__row:hover,
.nso-mmm a.nso-mmm__row:focus-visible {
	color: var(--nso-mmm-active);
}

.nso-mmm a.nso-mmm__row:focus-visible {
	outline: 2px solid var(--nso-mmm-focus);
	outline-offset: -2px;
}

.nso-mmm .nso-mmm__label {
	flex: 1 1 auto;
	min-width: 0;
}

/* The page the visitor is on, at whatever level it sits. */
.nso-mmm a.nso-mmm__row[data-current] {
	color: var(--nso-mmm-active);
	font-weight: 700;
}

/* ------------------------------------------------------ the parent's page -- */

/*
 * A row with children opens its own screen, so this is the only way to reach
 * the category page itself. It leads its screen, in the accent colour with a
 * forward arrow, so it does not read as just another child.
 */
.nso-mmm a.nso-mmm__row--all {
	color: var(--nso-mmm-all);
	font-weight: 600;
	background-color: var(--nso-mmm-all-bg);
}

.nso-mmm a.nso-mmm__row--all:hover,
.nso-mmm a.nso-mmm__row--all:focus-visible {
	color: var(--nso-mmm-all);
	text-decoration: underline;
}

.nso-mmm__arrow {
	flex: 0 0 auto;
	margin-left: auto;
	transition: transform 0.15s ease;
}

.nso-mmm a.nso-mmm__row--all:hover .nso-mmm__arrow {
	transform: translateX(3px);
}

/* -------------------------------------------------------------- chevrons -- */

.nso-mmm__chevron--right {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--nso-mmm-chevron);
	transition: transform 0.15s ease;
}

.nso-mmm a.nso-mmm__row--parent:hover .nso-mmm__chevron--right {
	transform: translateX(2px);
}

.nso-mmm__chevron--left {
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------- images -- */

.nso-mmm .nso-mmm__thumb {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--nso-mmm-thumb);
	height: var(--nso-mmm-thumb);
	border-radius: 4px;
	background-color: #fff;
	overflow: hidden;
}

.nso-mmm .nso-mmm__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* ------------------------------------------------------------------ misc -- */

@media (prefers-reduced-motion: reduce) {
	.nso-mmm.is-enhanced .nso-mmm__viewport,
	.nso-mmm.is-enhanced .nso-mmm__panel,
	.nso-mmm.is-enhanced .nso-mmm__panel.is-leaving,
	.nso-mmm a.nso-mmm__row,
	.nso-mmm .nso-mmm__back,
	.nso-mmm__arrow,
	.nso-mmm__chevron--right {
		transition: none;
	}
}