/**
 * Responsive Nav Menu widget — structural styles.
 *
 * Only layout / behaviour / sensible fallbacks live here. All the themeable
 * bits (colours, typography, spacing, radius, etc.) are emitted per-instance by
 * the Elementor widget's control `selectors`, so they override these defaults.
 *
 * The desktop/mobile switch is driven by a JS-toggled class (.is-desktop /
 * .is-mobile) rather than a media query, so each widget instance can use its
 * own custom breakpoint.
 *
 * @package SPX_Mobile_Menu
 */

/* Alignment wrapper. */
.spx-navmenu-widget {
	width: 100%;
}

/* Root. */
.spx-navmenu {
	position: relative;
	display: inline-block;
	max-width: 100%;
	z-index: 9999;
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.spx-navmenu-widget[data-align="stretch"] .spx-navmenu {
	display: block;
}

/* Reset lists. */
.spx-navmenu__list,
.spx-navmenu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.spx-navmenu__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

/* Items + links. */
.spx-navmenu .menu-item {
	position: relative;
	margin: 0;
}
/* Keep a parent's link and its caret toggle on the same line (prevents the
   caret from dropping below the label). The absolute desktop dropdown is out
   of flow, so it is unaffected; the mobile rules below re-enable wrapping. */
.spx-navmenu .menu-item-has-children {
	display: flex;
	align-items: center;
}
.spx-navmenu .menu-item > a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	color: #222222;
	text-decoration: none;
	font-size: 16px;
	line-height: 1.2;
	white-space: nowrap;
	transition: color 0.2s ease, background-color 0.2s ease, padding 0.25s ease;
}
.spx-navmenu .menu-item > a:hover,
.spx-navmenu .menu-item > a:focus-visible {
	color: #8a1518;
}
.spx-navmenu .current-menu-item > a,
.spx-navmenu .current_page_item > a,
.spx-navmenu .current-menu-ancestor > a,
.spx-navmenu a[aria-current="page"] {
	color: #8a1518;
}

/* ---- Pointer / hover indicators ------------------------------------------ */
/* Underline */
.spx-navmenu--pointer-underline .menu-item > a {
	position: relative;
}
.spx-navmenu--pointer-underline .menu-item > a::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 0;
	height: 0;
	border-bottom: 2px solid currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--spx-ul-speed, 0.22s) ease, opacity var(--spx-ul-speed, 0.22s) ease;
}
.spx-navmenu--pointer-underline .menu-item > a:hover::after,
.spx-navmenu--pointer-underline .menu-item > a:focus-visible::after,
.spx-navmenu--pointer-underline .current-menu-item > a::after,
.spx-navmenu--pointer-underline a[aria-current="page"]::after {
	transform: scaleX(1);
}
/* Underline animation style: grow origin (left default / right / center). */
.spx-navmenu--ul-right.spx-navmenu--pointer-underline .menu-item > a::after {
	transform-origin: right center;
}
.spx-navmenu--ul-center.spx-navmenu--pointer-underline .menu-item > a::after {
	transform-origin: center center;
}
/* Fade variant: no scale, animate opacity instead. */
.spx-navmenu--ul-fade.spx-navmenu--pointer-underline .menu-item > a::after {
	transform: none;
	opacity: 0;
}
.spx-navmenu--ul-fade.spx-navmenu--pointer-underline .menu-item > a:hover::after,
.spx-navmenu--ul-fade.spx-navmenu--pointer-underline .menu-item > a:focus-visible::after,
.spx-navmenu--ul-fade.spx-navmenu--pointer-underline .current-menu-item > a::after,
.spx-navmenu--ul-fade.spx-navmenu--pointer-underline a[aria-current="page"]::after {
	transform: none;
	opacity: 1;
}

/* Background pill */
.spx-navmenu--pointer-background .menu-item > a {
	border-radius: 6px;
}

/* ---- Submenu (dropdown) --------------------------------------------------- */
.spx-navmenu .menu-item-has-children > a {
	padding-right: 12px;
}

/* Decorative span injected by JS alongside every parent-item link.
   A span inherits no button styles from themes or the Elementor Kit, so no
   appearance/border/box-shadow resets are needed — only layout and interaction. */
.spx-navmenu__sub-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	margin: 0;
	padding: 6px;
	border-radius: 0;
	/* Follow the menu text colour by default. The "Arrow colour" control overrides
	   this; it intentionally does NOT use --spx-nav-icon-color (for chrome icons
	   on different backgrounds). */
	color: inherit;
	cursor: pointer;
	flex: 0 0 auto;
	line-height: 1;
}
.spx-navmenu__sub-toggle::before {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-top: -3px;
}

/* Desktop dropdown positioning. */
.spx-navmenu.is-desktop .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: #ffffff;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
	border-radius: 6px;
	padding: 6px 0;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.18s var(--spx-nav-ease, ease), transform 0.18s var(--spx-nav-ease, ease), visibility 0.18s;
	/* Hover close delay: applied when transitioning back to hidden. */
	transition-delay: var(--spx-dd-close-delay, 0s);
}
.spx-navmenu.is-desktop .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}
/* Collision flip: a flyout that would overflow the viewport opens leftward.
   Top-level panels align to the parent's right edge; nested flyouts open to
   the left side of their parent instead of the right. */
.spx-navmenu.is-desktop .menu-item-has-children.spx-flyout-left > .sub-menu {
	left: auto;
	right: 0;
}
.spx-navmenu.is-desktop .sub-menu .menu-item-has-children.spx-flyout-left > .sub-menu {
	left: auto;
	right: 100%;
}
/* Dropdown entrance animation variants (closed state transform). */
.spx-navmenu--ddanim-fade.is-desktop .sub-menu {
	transform: none;
}
.spx-navmenu--ddanim-slide-down.is-desktop .sub-menu {
	transform: translateY(-8px);
}
.spx-navmenu--ddanim-scale.is-desktop .sub-menu {
	transform: scale(0.96);
	transform-origin: top center;
}
.spx-navmenu.is-desktop .menu-item-has-children.is-open > .sub-menu,
.spx-navmenu.is-desktop.spx-navmenu--submenu-hover .menu-item-has-children:hover > .sub-menu,
.spx-navmenu.is-desktop.spx-navmenu--submenu-hover .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
/* Hover open delay: applied when transitioning to visible on hover/focus. */
.spx-navmenu.is-desktop.spx-navmenu--submenu-hover .menu-item-has-children:hover > .sub-menu,
.spx-navmenu.is-desktop.spx-navmenu--submenu-hover .menu-item-has-children:focus-within > .sub-menu {
	transition-delay: var(--spx-dd-open-delay, 0s);
}
.spx-navmenu.is-desktop .sub-menu .menu-item > a {
	padding: 9px 18px;
	color: #222222;
	white-space: normal;
}
.spx-navmenu.is-desktop .sub-menu .menu-item > a:hover,
.spx-navmenu.is-desktop .sub-menu .menu-item > a:focus-visible {
	background: rgba(0, 0, 0, 0.05);
}

/* In hover mode the caret is informative only; clicks still navigate. */
.spx-navmenu.is-desktop.spx-navmenu--submenu-hover .spx-navmenu__sub-toggle {
	pointer-events: none;
}

/* Vertical desktop layout. */
.spx-navmenu--vertical.is-desktop .spx-navmenu__list {
	flex-direction: column;
	align-items: stretch;
}
.spx-navmenu--vertical.is-desktop .sub-menu {
	top: 0;
	left: 100%;
}

/* ---- Toggle (hamburger) --------------------------------------------------- */
.spx-navmenu__toggle {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 8px 12px !important;
	border: 0;
	border-radius: 6px;
	background: black;
	color: var(--spx-nav-icon-color, #222222);
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
}
.spx-navmenu__burger {
	position: relative;
	display: inline-block;
	width: 22px;
	height: 16px;
	flex: 0 0 auto;
}
.spx-navmenu__burger::before,
.spx-navmenu__burger::after,
.spx-navmenu__burger span {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease, bottom 0.25s ease;
}
.spx-navmenu__burger::before {
	top: 0;
}
.spx-navmenu__burger span {
	top: 50%;
	transform: translateY(-50%);
}
.spx-navmenu__burger::after {
	bottom: 0;
}
/* Animate to an X when the mobile menu is open. */
.spx-navmenu.is-open .spx-navmenu__toggle .spx-navmenu__burger::before {
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}
.spx-navmenu.is-open .spx-navmenu__toggle .spx-navmenu__burger span {
	opacity: 0;
}
.spx-navmenu.is-open .spx-navmenu__toggle .spx-navmenu__burger::after {
	bottom: auto;
	top: 50%;
	transform: translateY(-50%) rotate(-45deg);
}

/* ---- Mobile state --------------------------------------------------------- */
.spx-navmenu.is-mobile {
	display: block;
}
.spx-navmenu.is-mobile .spx-navmenu__toggle {
	display: inline-flex;
}

/* Collapsible panel. */
.spx-navmenu.is-mobile .spx-navmenu__panel {
	overflow: hidden;
	max-height: 0;
	transition: max-height var(--spx-nav-speed, 0.3s) var(--spx-nav-ease, ease);
}
.spx-navmenu.is-mobile.is-open .spx-navmenu__panel {
	max-height: var(--spx-nav-height, 80vh);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* Stack items on mobile. */
.spx-navmenu.is-mobile .spx-navmenu__list {
	flex-direction: column;
	align-items: stretch;
}
.spx-navmenu.is-mobile .menu-item {
	width: 100%;
	border-top: var(--spx-nav-sep-width, 1px) var(--spx-nav-sep-style, solid) var(--spx-nav-sep, rgba(0, 0, 0, 0.08));
}
.spx-navmenu.is-mobile .menu-item > a {
	flex: 1 1 auto;
	white-space: normal;
}

/* Mobile submenu = accordion (collapsed by default, JS expands). */
.spx-navmenu.is-mobile .sub-menu {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.28s ease;
	background: rgba(0, 0, 0, 0.03);
}
.spx-navmenu.is-mobile .menu-item-has-children.is-open > .sub-menu {
	max-height: none;
}
.spx-navmenu.is-mobile .sub-menu .menu-item > a {
	padding-left: calc(16px + var(--spx-mobile-indent, 16px));
}
.spx-navmenu.is-mobile .sub-menu .sub-menu .menu-item > a {
	padding-left: calc(16px + var(--spx-mobile-indent, 16px) * 2);
}
.spx-navmenu.is-mobile .sub-menu .sub-menu .sub-menu .menu-item > a {
	padding-left: calc(16px + var(--spx-mobile-indent, 16px) * 3);
}

/* On mobile the parent link fills the row so the whole text area is tappable. */
.spx-navmenu.is-mobile .menu-item-has-children > a {
	display: inline-flex;
	flex: 1;
}
.spx-navmenu.is-mobile .menu-item-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.spx-navmenu.is-mobile .menu-item-has-children > .sub-menu {
	flex: 1 0 100%;
}
.spx-navmenu.is-mobile .spx-navmenu__sub-toggle {
	/* 16px padding each side: ~12px icon + padding ≈ 44px tap target (WCAG 2.5.5). */
	padding: 16px;
}

/* Before JS runs: avoid a flash of a giant open menu. */
.spx-js .spx-navmenu:not(.is-desktop):not(.is-mobile) .spx-navmenu__panel {
	max-height: 0;
	overflow: hidden;
}
/* Drawer FOUC: pre-set the same off-screen transform the panel will have once
 * .is-mobile is applied.  When JS adds .is-mobile, the computed transform is
 * identical before and after → the CSS transition sees no change → the panel
 * does not slide into view for 0.3 s on every page load/refresh. */
.spx-js .spx-navmenu--mobile-drawer.spx-navmenu--drawer-left:not(.is-mobile):not(.is-desktop) .spx-navmenu__panel {
	transform: translate3d(-100%, 0, 0);
}
.spx-js .spx-navmenu--mobile-drawer.spx-navmenu--drawer-right:not(.is-mobile):not(.is-desktop) .spx-navmenu__panel {
	transform: translate3d(100%, 0, 0);
}

/* Accessibility: keyboard focus ring on links and action buttons. */
.spx-navmenu a:focus-visible,
.spx-navmenu button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---- Custom icons (hamburger + dropdown arrow) + arrow position ---------- */

/* Custom dropdown arrow: drop the built-in chevron, size the chosen icon. */
.spx-navmenu__sub-toggle.has-custom-arrow::before {
	content: none;
	display: none;
}
.spx-navmenu__sub-toggle.has-custom-arrow {
	font-size: 12px;
	line-height: 1;
}
.spx-navmenu__sub-toggle.has-custom-arrow svg {
	width: 1em;
	height: 1em;
	display: block;
}

/* Arrow position: before the label instead of after. */
.spx-navmenu--arrow-left .menu-item-has-children > .spx-navmenu__sub-toggle {
	order: -1;
}

/* Custom hamburger icon (replaces the three-bar span). */
.spx-navmenu__toggle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
}
.spx-navmenu__toggle-icon svg {
	width: 1em;
	height: 1em;
	display: block;
}
/* Open/close swap (only when a separate "open" icon was provided). */
.spx-navmenu__toggle-icon--close {
	display: none;
}
.spx-navmenu--toggle-swap.is-open .spx-navmenu__toggle-icon--open {
	display: none;
}
.spx-navmenu--toggle-swap.is-open .spx-navmenu__toggle-icon--close {
	display: inline-flex;
}

/* ---- Per-item icons ------------------------------------------------------ */
.spx-navmenu__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 1;
}
.spx-navmenu__icon i,
.spx-navmenu__icon svg {
	width: 1em;
	height: 1em;
	font-size: inherit;
	color: currentColor;
	fill: currentColor;
	display: block;
}
.spx-navmenu--icon-before .spx-navmenu__icon {
	margin-right: var(--spx-icon-gap, 0px);
}
.spx-navmenu--icon-after .spx-navmenu__icon {
	margin-left: var(--spx-icon-gap, 0px);
}

/* ---- Call-to-action button ----------------------------------------------- */
.spx-navmenu__cta-item {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
}
.spx-navmenu__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 18px;
	border-radius: 6px;
	background: var(--spx-nav-accent, #8a1518);
	color: #ffffff;
	text-decoration: none;
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.spx-navmenu__cta-icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}
.spx-navmenu__cta-icon i,
.spx-navmenu__cta-icon svg {
	width: 1em;
	height: 1em;
	font-size: inherit;
	color: currentColor;
	fill: currentColor;
	display: block;
}
/* On mobile the in-menu CTA stretches across the open menu for an easy tap.
   (The bar copy stays auto-width so it doesn't push the hamburger.) */
.spx-navmenu.is-mobile .spx-navmenu__cta-item {
	width: 100%;
}
.spx-navmenu.is-mobile .spx-navmenu__cta-item .spx-navmenu__cta {
	width: 100%;
}
/* Responsive visibility. */
.spx-navmenu--cta-desktop.is-mobile .spx-navmenu__cta-item,
.spx-navmenu--cta-mobile.is-desktop .spx-navmenu__cta-item {
	display: none;
}

/* ---- CTA "in the bar" placement (mobile, next to the hamburger) ---------- */
/* The bar copy only exists on mobile; never show it on desktop. */
.spx-navmenu.is-desktop .spx-navmenu__cta--bar {
	display: none;
}
/* When the CTA is placed in the bar, lay the mobile bar out as a flex row and
   hide the in-menu (list) copy so the button isn't duplicated. */
.spx-navmenu--cta-bar.is-mobile {
	display: flex;
	align-items: center;
	gap: 8px;
}
.spx-navmenu--cta-bar.is-mobile .spx-navmenu__cta-item {
	display: none;
}
/* Honour desktop-only / mobile-only visibility for the bar copy too. */
.spx-navmenu--cta-desktop .spx-navmenu__cta--bar {
	display: none;
}
/* Position of the bar CTA relative to the hamburger. */
.spx-navmenu--cta-pos-before .spx-navmenu__cta--bar {
	order: -1;
}
.spx-navmenu--cta-pos-edge .spx-navmenu__cta--bar {
	margin-left: auto;
}

/* ---- Skip-to-content link (visible only on keyboard focus) --------------- */
.spx-navmenu__skip {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: 100001;
	padding: 10px 16px;
	background: #000000;
	color: #ffffff;
	border-radius: 4px;
	text-decoration: none;
}
.spx-navmenu__skip:focus,
.spx-navmenu__skip:focus-visible {
	left: 8px;
	top: 8px;
	width: auto;
	height: auto;
}

/* ---- Quick style presets (base skins; widget controls override these) ---- */
/* Pill: rounded highlight on hover / current. */
.spx-navmenu--preset-pill .menu-item > a {
	border-radius: 999px;
}
.spx-navmenu--preset-pill .menu-item > a:hover,
.spx-navmenu--preset-pill .current-menu-item > a,
.spx-navmenu--preset-pill a[aria-current="page"] {
	background: rgba(0, 0, 0, 0.06);
}
/* Outline: bordered items. */
.spx-navmenu--preset-outline .menu-item > a {
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 6px;
}
.spx-navmenu--preset-outline.is-desktop .spx-navmenu__list {
	gap: 8px;
}
/* Minimal: tight, no decorations. */
.spx-navmenu--preset-minimal .menu-item > a {
	padding: 6px 10px;
}

/* ---- Item badges (from menu item Descriptions) --------------------------- */
.spx-navmenu__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 6px;
	padding: 2px 6px;
	font-size: 11px;
	line-height: 1;
	font-weight: 600;
	border-radius: 10px;
	background: var(--spx-badge-bg, #e02b2b);
	color: var(--spx-badge-color, #ffffff);
	white-space: nowrap;
}
/* Corner placement: pin to the top-right of the item link. */
.spx-navmenu--badge-corner .menu-item > a {
	position: relative;
}
.spx-navmenu--badge-corner .menu-item > a .spx-navmenu__badge {
	position: absolute;
	top: -6px;
	right: -6px;
	margin-left: 0;
}

@media (prefers-reduced-motion: reduce) {
	.spx-navmenu *,
	.spx-navmenu *::before,
	.spx-navmenu *::after {
		transition: none !important;
	}
}

/* =========================================================================
   Mobile behaviour: speed, scroll-lock, off-canvas drawer, drill-down
   ========================================================================= */

/* Honour the per-instance open speed for the mobile accordion. */
.spx-navmenu.is-mobile .sub-menu {
	transition: max-height var(--spx-nav-speed, 0.28s) var(--spx-nav-ease, ease);
}

/* Page scroll lock while a drawer/menu is open. */
html.spx-nav-noscroll {
	overflow: hidden;
}

/* ---- Off-canvas drawer (mobile only) ------------------------------------ */
.spx-navmenu__overlay {
	position: fixed;
	inset: 0;
	background: var(--spx-nav-overlay, rgba(0, 0, 0, 0.5));
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	-webkit-backdrop-filter: blur(var(--spx-nav-overlay-blur, 0px));
	backdrop-filter: blur(var(--spx-nav-overlay-blur, 0px));
	transition: opacity var(--spx-nav-speed, 0.3s) var(--spx-nav-ease, ease), visibility var(--spx-nav-speed, 0.3s);
}
.spx-navmenu--mobile-drawer.is-desktop .spx-navmenu__overlay {
	display: none;
}
.spx-navmenu--mobile-drawer.is-mobile.is-open .spx-navmenu__overlay {
	opacity: var(--spx-nav-overlay-opacity, 1);
	visibility: visible;
	pointer-events: auto;
}

/* Panel header: only rendered when a logo is set (PHP skips it otherwise).
 * min-height keeps the logo area from collapsing to the image height alone. */
.spx-navmenu--mobile-drawer.is-mobile .spx-navmenu__panel-header {
	min-height: 64px;
	display: flex;
	align-items: center;
}

.spx-navmenu--mobile-drawer.is-mobile .spx-navmenu__panel {
	position: fixed;
	top: var(--spx-drawer-top, 0px);
	bottom: auto;
	height: calc(var(--spx-nav-height, 100vh) - var(--spx-drawer-top, 0px));
	width: var(--spx-nav-drawer-w, 320px);
	max-width: 92vw;
	max-height: none;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--spx-nav-mobile-bg, #ffffff);
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
	z-index: 999;
	transition: transform var(--spx-nav-speed, 0.3s) var(--spx-nav-ease, ease);
}
.spx-navmenu--mobile-drawer.spx-navmenu--drawer-left.is-mobile .spx-navmenu__panel {
	left: 0;
	transform: translate3d(-100%, 0, 0);
}
.spx-navmenu--mobile-drawer.spx-navmenu--drawer-right.is-mobile .spx-navmenu__panel {
	right: 0;
	transform: translate3d(100%, 0, 0);
}
.spx-navmenu--mobile-drawer.is-mobile.is-open .spx-navmenu__panel {
	transform: translate3d(0, 0, 0);
	/* Neutralise the base .is-mobile.is-open rule's 80vh cap (specificity 0,3,1).
	 * Without this, closing removes the cap instantly (no max-height transition
	 * on drawers) causing a visible height jump before the slide-out completes. */
	max-height: none;
}

/* Close (×) button — floats just OUTSIDE the drawer, on the overlay, while open. */
.spx-navmenu__close {
	position: fixed;
	top: 12px;
	width: 40px;
	height: 40px;
	border: 0;
	background: transparent;
	color: var(--spx-nav-icon-color, #ffffff);
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	font-size: 18px;
}
.spx-navmenu--mobile-drawer.is-mobile.is-open .spx-navmenu__close {
	display: inline-flex;
}
/* A subtle backdrop so the ✕ stays visible over the panel OR the overlay.
 * border-radius reads --spx-close-radius so the style-panel control overrides it. */
.spx-navmenu--mobile-drawer.is-mobile .spx-navmenu__close {
	background: var(--spx-nav-close-bg, rgba(0, 0, 0, 0.5));
	border-radius: var(--spx-close-radius, 50%);
}
/* ---- Close button placement ---- *
 * Controlled by the "Close button placement" setting + the gap/top sliders.
 * The button is fixed (in the body portal), so all offsets are vs the viewport.
 * --spx-close-gap defaults to 8px; "top" is set directly by the slider.
 */

/* OUTSIDE (default): just past the drawer edge, clamped on-screen. */
.spx-navmenu--mobile-drawer.spx-navmenu--drawer-left.is-mobile .spx-navmenu__close {
	left: min(calc(var(--spx-nav-drawer-w, 320px) + var(--spx-close-gap, 8px)), calc(100vw - 52px));
	right: auto;
}
.spx-navmenu--mobile-drawer.spx-navmenu--drawer-right.is-mobile .spx-navmenu__close {
	right: min(calc(var(--spx-nav-drawer-w, 320px) + var(--spx-close-gap, 8px)), calc(100vw - 52px));
	left: auto;
}

/* INSIDE: tucked into the drawer's far corner. */
.spx-navmenu--mobile-drawer.spx-navmenu--close-inside.spx-navmenu--drawer-left.is-mobile .spx-navmenu__close {
	left: calc(min(var(--spx-nav-drawer-w, 320px), 92vw) - 40px - var(--spx-close-gap, 8px));
	right: auto;
}
.spx-navmenu--mobile-drawer.spx-navmenu--close-inside.spx-navmenu--drawer-right.is-mobile .spx-navmenu__close {
	right: calc(min(var(--spx-nav-drawer-w, 320px), 92vw) - 40px - var(--spx-close-gap, 8px));
	left: auto;
}

/* SCREEN CORNER: pinned to the viewport's far edge, regardless of drawer width. */
.spx-navmenu--mobile-drawer.spx-navmenu--close-screen.spx-navmenu--drawer-left.is-mobile .spx-navmenu__close {
	left: auto;
	right: var(--spx-close-gap, 12px);
}
.spx-navmenu--mobile-drawer.spx-navmenu--close-screen.spx-navmenu--drawer-right.is-mobile .spx-navmenu__close {
	right: auto;
	left: var(--spx-close-gap, 12px);
}
.spx-navmenu__close span {
	position: relative;
	width: 18px;
	height: 18px;
	display: block;
}
.spx-navmenu__close span::before,
.spx-navmenu__close span::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
}
.spx-navmenu__close span::before {
	transform: translateY(-50%) rotate(45deg);
}
.spx-navmenu__close span::after {
	transform: translateY(-50%) rotate(-45deg);
}

/* ---- Drill-down sub-menus (mobile) -------------------------------------- */
.spx-navmenu--drill.is-mobile .spx-navmenu__panel {
	position: relative;
}
/* Items must NOT be the positioning context, or the absolute sliding sub-menu
   would size to a single row instead of filling the whole panel. */
.spx-navmenu--drill.is-mobile .menu-item {
	position: static;
}
.spx-navmenu--mobile-drawer.spx-navmenu--drill.is-mobile .spx-navmenu__panel {
	position: fixed;
}
/* Give a dropdown-style drill panel a usable height for the sliding layers. */
.spx-navmenu--mobile-dropdown.spx-navmenu--drill.is-mobile.is-open .spx-navmenu__panel {
	min-height: 60vh;
}
.spx-navmenu--drill.is-mobile .sub-menu {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	background: var(--spx-nav-mobile-bg, #ffffff);
	overflow-y: auto;
	max-height: none !important;
	transform: translate3d(100%, 0, 0);
	visibility: hidden;
	transition: transform var(--spx-nav-speed, 0.3s) var(--spx-nav-ease, ease), visibility var(--spx-nav-speed, 0.3s);
	z-index: 1;
}
.spx-navmenu--drill.is-mobile .menu-item-has-children.is-open > .sub-menu {
	transform: translate3d(0, 0, 0);
	visibility: visible;
	z-index: 2;
}

/* ---- Drill-down "Back" link --------------------------------------------- */
.spx-navmenu__back {
	display: none;
	width: 100%;
	border-top: none;
}
.spx-navmenu--drill.is-mobile .spx-navmenu__back {
	display: flex;
	align-items: center;
}
.spx-navmenu__back-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	border: 0;
	background: rgba(0, 0, 0, 0.05);
	color: var(--spx-nav-icon-color, inherit);
	font: inherit;
	font-weight: 600;
	padding: 12px 16px;
	cursor: pointer;
	text-align: left;
}
.spx-navmenu__back-btn:hover,
.spx-navmenu__back-btn:focus-visible {
	background: rgba(0, 0, 0, 0.1);
}
.spx-navmenu__back-arrow {
	width: 9px;
	height: 9px;
	flex: 0 0 auto;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-left: 2px;
}

/* =========================================================================
   Keep our chrome icons visible: strip theme/Elementor <button> styles
   (appearance, shadows) from the hamburger, close and back buttons.
   The dropdown arrow caret is now a <span> — it inherits no button styles
   and needs no reset here.
   ========================================================================= */
.spx-navmenu .spx-navmenu__toggle,
.spx-navmenu .spx-navmenu__close,
.spx-navmenu .spx-navmenu__back-btn {
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	text-shadow: none;
}
.spx-navmenu .spx-navmenu__toggle,
.spx-navmenu .spx-navmenu__close {
	background-color: transparent;
}
/* Custom icon fonts/SVGs: inherit the button colour and a sane size. */
.spx-navmenu__toggle .spx-navmenu__toggle-icon i,
.spx-navmenu__toggle .spx-navmenu__toggle-icon svg {
	font-size: inherit;
	width: 1em;
	height: 1em;
	color: currentColor;
	fill: currentColor;
}
.spx-navmenu__sub-toggle.has-custom-arrow i,
.spx-navmenu__sub-toggle.has-custom-arrow svg {
	color: currentColor;
	fill: currentColor;
}

/* =========================================================================
   Mobile logo + custom close / back icons
   ========================================================================= */
.spx-navmenu__mlogo {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 12px 16px;
}
.spx-navmenu__mlogo img {
	display: block;
	max-width: 100%;
	height: auto;
}
/* Logo only makes sense in the open mobile menu, not the desktop dropdown. */
.spx-navmenu.is-desktop .spx-navmenu__mlogo {
	display: none;
}

/* Custom close icon (drawer) — replaces the built-in ✕. */
.spx-navmenu__close {
	font-size: 18px;
}
.spx-navmenu__close--custom i,
.spx-navmenu__close--custom svg {
	width: 1em;
	height: 1em;
	font-size: inherit;
	color: currentColor;
	fill: currentColor;
}

/* Custom back icon. */
.spx-navmenu__back-icon {
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	line-height: 1;
}
.spx-navmenu__back-icon i,
.spx-navmenu__back-icon svg {
	width: 1em;
	height: 1em;
	font-size: inherit;
	color: currentColor;
	fill: currentColor;
}

/* =========================================================================
   Dropdown "overlay page content" mode — a full-width sheet that drops over
   the page (portaled to <body>; JS sets its top to the bar's bottom edge).
   ========================================================================= */
.spx-navmenu.spx-navmenu--dd-overlay.is-mobile .spx-navmenu__panel {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 100%;
	max-height: var(--spx-nav-height, 80vh);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--spx-nav-mobile-bg, #ffffff);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16);
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity var(--spx-nav-speed, 0.3s) var(--spx-nav-ease, ease),
		transform var(--spx-nav-speed, 0.3s) var(--spx-nav-ease, ease),
		visibility var(--spx-nav-speed, 0.3s);
}
.spx-navmenu.spx-navmenu--dd-overlay.is-mobile.is-open .spx-navmenu__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* =========================================================================
   Full-screen mobile preset — the open panel fills the whole viewport
   (works for both the side-drawer and the dropdown sheet). Placed last so it
   overrides the drawer-width / menu-height rules above.
   ========================================================================= */
.spx-navmenu--fullscreen.is-mobile .spx-navmenu__panel {
	position: fixed;
	inset: 0;
	width: 100vw;
	max-width: 100vw;
	height: 100vh;
	max-height: 100vh;
	border-radius: 0;
}
/* Keep the close button reachable in the top corner when full-screen. */
.spx-navmenu--fullscreen.spx-navmenu--mobile-drawer.is-mobile .spx-navmenu__close {
	left: auto;
	right: var(--spx-close-gap, 12px);
}

/* =========================================================================
   Mobile panel scrollbar — make the scrollbar visible when content overflows
   ========================================================================= */

/* Allow open sub-menus to overflow naturally so the parent panel scrolls them */
.spx-navmenu.is-mobile .menu-item-has-children.is-open > .sub-menu {
	overflow: visible;
}

/* Webkit (Chrome, Safari, Edge, Android) — thin visible scrollbar */
.spx-navmenu.is-mobile.is-open .spx-navmenu__panel::-webkit-scrollbar,
.spx-navmenu.spx-navmenu--dd-overlay.is-mobile .spx-navmenu__panel::-webkit-scrollbar,
.spx-navmenu--mobile-drawer.is-mobile .spx-navmenu__panel::-webkit-scrollbar {
	width: 4px;
}
.spx-navmenu.is-mobile.is-open .spx-navmenu__panel::-webkit-scrollbar-track,
.spx-navmenu.spx-navmenu--dd-overlay.is-mobile .spx-navmenu__panel::-webkit-scrollbar-track,
.spx-navmenu--mobile-drawer.is-mobile .spx-navmenu__panel::-webkit-scrollbar-track {
	background: transparent;
}
.spx-navmenu.is-mobile.is-open .spx-navmenu__panel::-webkit-scrollbar-thumb,
.spx-navmenu.spx-navmenu--dd-overlay.is-mobile .spx-navmenu__panel::-webkit-scrollbar-thumb,
.spx-navmenu--mobile-drawer.is-mobile .spx-navmenu__panel::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.25);
	border-radius: 2px;
}

/* Firefox */
.spx-navmenu.is-mobile.is-open .spx-navmenu__panel,
.spx-navmenu.spx-navmenu--dd-overlay.is-mobile .spx-navmenu__panel,
.spx-navmenu--mobile-drawer.is-mobile .spx-navmenu__panel {
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

/* =========================================================================
   Performance & motion — added 2026-06-25
   ========================================================================= */

/* GPU compositing layer only during open/close animation */
.spx-navmenu__panel.is-animating {
	will-change: transform, opacity;
}

/* Prevent page scroll bleeding through panel edges on mobile */
.spx-navmenu.is-mobile.is-open .spx-navmenu__panel,
.spx-navmenu.spx-navmenu--dd-overlay.is-mobile .spx-navmenu__panel,
.spx-navmenu--mobile-drawer.is-mobile .spx-navmenu__panel {
	overscroll-behavior: contain;
}

/* Respect OS-level reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.spx-navmenu *,
	.spx-navmenu *::before,
	.spx-navmenu *::after,
	.spx-navmenu__panel,
	.spx-navmenu-portal,
	.spx-navmenu-portal * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		transition-delay: 0ms !important;
	}
}

.spx-navmenu--drill.is-mobile .spx-navmenu__panel.is-drilled {
	overflow: hidden;
}