/**
 * RWO Side Menu
 *
 * Everything visual is driven by custom properties so Elementor controls can
 * override cleanly without specificity fights.
 */

/*
 * Defaults live on :root, NOT on .rwo-sm. Elementor writes control values onto
 * the widget wrapper, which is an ANCESTOR of .rwo-sm — and a declaration on an
 * element always beats an inherited one. Declaring these on .rwo-sm made it
 * shadow every wrapper-level control silently.
 */
:root {
	--rwo-sm-rail-width: 110px;
	--rwo-sm-panel-width: 400px;
	--rwo-sm-subpanel-width: 400px;
	--rwo-sm-duration: 0.4s;
	--rwo-sm-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--rwo-sm-z: 9999;
	--rwo-sm-offset-top: 0px;
	--rwo-sm-topbar-height: 64px;
	--rwo-sm-topbar-padding: 0 20px 0 16px;
	--rwo-sm-topbar-gap: 12px;
	--rwo-sm-topbar-logo-width: 110px;
	--rwo-sm-topbar-justify: flex-start;
	--rwo-sm-topbar-align: center;
	--rwo-sm-topbar-direction: row;
	--rwo-sm-toggle-colour: #000;
	--rwo-sm-bar-width: 30px;
	--rwo-sm-bar-thickness: 2px;
	--rwo-sm-bar-gap: 9px;
	--rwo-sm-sticky-x: 32px;
	--rwo-sm-sticky-y: 26px;
	--rwo-sm-sticky-z: 998;
}

/* The widget wrapper itself must not occupy layout space. */
.rwo-sm {
	position: static;
}

/* ---------------------------------------------------------------- Rail -- */

.rwo-sm__rail {
	position: fixed;
	top: var(--rwo-sm-offset-top);
	left: 0;
	width: var(--rwo-sm-rail-width);
	height: calc(100vh - var(--rwo-sm-offset-top));
	height: calc(100dvh - var(--rwo-sm-offset-top));
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #fff;
	z-index: calc(var(--rwo-sm-z) + 2);
}

.rwo-sm__logo {
	line-height: 0;
	align-self: stretch;
	display: flex;
	justify-content: center;
	transition: opacity var(--rwo-sm-duration) var(--rwo-sm-ease);
}

/* The link (when present) is the flex item, so it carries the width and
 * justify-content positions it. The image simply fills whatever it gets. */
.rwo-sm__logo > a {
	display: block;
	line-height: 0;
	max-width: 100%;
}

.rwo-sm__logo img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

.rwo-sm--hide-logo-open.is-open .rwo-sm__logo {
	opacity: 0;
	pointer-events: none;
}

/* -------------------------------------------------------------- Toggle -- */

.rwo-sm__toggle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--rwo-sm-toggle-colour);
	cursor: pointer;
	z-index: calc(var(--rwo-sm-z) + 3);
}

.rwo-sm:not(.rwo-sm--has-rail) > .rwo-sm__toggle {
	position: fixed;
	top: 20px;
	left: 20px;
}

.rwo-sm__toggle:hover {
	color: var(--rwo-sm-toggle-colour-hover, var(--rwo-sm-toggle-colour));
}

.rwo-sm__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Animated bars, morphing to an X. */
.rwo-sm__bars,
.rwo-sm__bars::before,
.rwo-sm__bars::after {
	display: block;
	width: var(--rwo-sm-bar-width);
	height: var(--rwo-sm-bar-thickness);
	background-color: currentColor;
	transition: transform var(--rwo-sm-duration) var(--rwo-sm-ease),
		opacity calc(var(--rwo-sm-duration) / 2) var(--rwo-sm-ease),
		background-color var(--rwo-sm-duration) var(--rwo-sm-ease);
}

.rwo-sm__bars {
	position: relative;
}

.rwo-sm__bars::before,
.rwo-sm__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.rwo-sm__bars::before {
	top: calc(var(--rwo-sm-bar-gap) * -1);
}

.rwo-sm__bars::after {
	top: var(--rwo-sm-bar-gap);
}

.rwo-sm.is-open .rwo-sm__bars {
	background-color: transparent;
}

.rwo-sm.is-open .rwo-sm__bars::before {
	top: 0;
	transform: rotate(45deg);
}

.rwo-sm.is-open .rwo-sm__bars::after {
	top: 0;
	transform: rotate(-45deg);
}

/* Icon pair. */
.rwo-sm__toggle-icon {
	position: absolute;
	display: inline-flex;
	line-height: 1;
	color: currentColor;
	transition: opacity var(--rwo-sm-duration) var(--rwo-sm-ease);
}

.rwo-sm__toggle-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.rwo-sm__toggle-icon--close,
.rwo-sm.is-open .rwo-sm__toggle-icon--open {
	opacity: 0;
	pointer-events: none;
}

.rwo-sm.is-open .rwo-sm__toggle-icon--close {
	opacity: 1;
	pointer-events: auto;
}

/* ------------------------------------------------------------- Overlay -- */

.rwo-sm__overlay {
	position: fixed;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--rwo-sm-duration) var(--rwo-sm-ease),
		visibility var(--rwo-sm-duration) var(--rwo-sm-ease);
	z-index: var(--rwo-sm-z);
}

.rwo-sm.is-open .rwo-sm__overlay {
	opacity: 1;
	visibility: visible;
}

/* --------------------------------------------------------------- Panel -- */

.rwo-sm__panel {
	position: fixed;
	top: var(--rwo-sm-offset-top);
	left: 0;
	width: var(--rwo-sm-panel-width);
	height: calc(100vh - var(--rwo-sm-offset-top));
	height: calc(100dvh - var(--rwo-sm-offset-top));
	background: #fff;
	transform: translateX(-100%);
	transition: transform var(--rwo-sm-duration) var(--rwo-sm-ease);
	z-index: calc(var(--rwo-sm-z) + 1);
	overflow: visible;
}

.rwo-sm--has-rail .rwo-sm__panel {
	left: var(--rwo-sm-rail-width);
	transform: translateX(calc(-100% - var(--rwo-sm-rail-width)));
}

.rwo-sm.is-open .rwo-sm__panel {
	transform: translateX(0);
}

.rwo-sm__panel-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
}

.rwo-sm__nav {
	flex: 1 1 auto;
}

.rwo-sm__list,
.rwo-sm__sublist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rwo-sm__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	text-decoration: none;
	color: inherit;
}

.rwo-sm__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.rwo-sm__arrow {
	display: inline-flex;
	line-height: 1;
	flex: 0 0 auto;
	transition: transform var(--rwo-sm-duration) var(--rwo-sm-ease);
}

.rwo-sm__arrow svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.rwo-sm__item.is-open > .rwo-sm__link .rwo-sm__arrow {
	transform: translateX(4px);
}

/* ------------------------------------------------------ Submenu panels -- */

/*
 * .rwo-sm__panel is always transformed (translateX, even at 0), which makes it
 * the containing block for these fixed children. So percentages here resolve
 * against the panel, not the viewport: left:100% is the panel's right edge.
 * That is deliberate — it keeps the sub-panels glued to the panel without
 * having to know the rail width.
 */
.rwo-sm__subpanel {
	position: fixed;
	/*
	 * top:0, NOT the admin-bar offset. The panel is transformed, so it is this
	 * element's containing block and has already applied that offset — adding it
	 * again pushed sub-panels down by the height of the admin bar.
	 */
	top: 0;
	left: 100%;
	width: var(--rwo-sm-subpanel-width);
	height: 100%;
	background: #fff;
	border-left: 1px solid #e5e7ea;
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-12px);
	transition: opacity var(--rwo-sm-duration) var(--rwo-sm-ease),
		transform var(--rwo-sm-duration) var(--rwo-sm-ease),
		visibility var(--rwo-sm-duration) var(--rwo-sm-ease);
	z-index: calc(var(--rwo-sm-z) + 1);
	pointer-events: none;
}

.rwo-sm__subpanel.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
	pointer-events: auto;
}

/* Deeper levels stack further right, still panel-relative. */
.rwo-sm__subpanel--depth-2 {
	left: calc(100% + var(--rwo-sm-subpanel-width));
}

.rwo-sm__subpanel--depth-3 {
	left: calc(100% + (var(--rwo-sm-subpanel-width) * 2));
}

/* Back button is compact-only, matching the reference behaviour. */
.rwo-sm__back {
	display: none;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.rwo-sm__back-icon {
	width: 0.6em;
	height: 0.6em;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

/* ------------------------------------------------------------- Footer -- */

.rwo-sm__footer {
	flex: 0 0 auto;
	margin-top: auto;
}

.rwo-sm__footer-items {
	display: flex;
	flex-direction: column;
}

.rwo-sm__footer-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
}

.rwo-sm__footer-icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	flex: 0 0 auto;
}

.rwo-sm__footer-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.rwo-sm__footer-icon img {
	display: block;
	height: auto;
}

.rwo-sm__cta-wrap {
	display: flex;
	flex-direction: column;
}

.rwo-sm__cta {
	display: inline-block;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--rwo-sm-duration) var(--rwo-sm-ease),
		color var(--rwo-sm-duration) var(--rwo-sm-ease);
}

/* ------------------------------------------------------- Compact mode -- */

.rwo-sm.is-compact .rwo-sm__panel {
	width: calc(100vw - var(--rwo-sm-rail-width));
	left: var(--rwo-sm-rail-width);
	transform: translateX(calc(-100% - var(--rwo-sm-rail-width)));
}

/* No rail: the panel may use the full width. */
.rwo-sm.is-compact:not(.rwo-sm--has-rail) .rwo-sm__panel {
	width: 100vw;
	left: 0;
	transform: translateX(-100%);
}

.rwo-sm.is-compact.is-open .rwo-sm__panel {
	transform: translateX(0);
}

/*
 * The panel is transformed, so it is the containing block for these fixed
 * children. A closed panel at -100% plus a subpanel at +100% cancel out and
 * put the subpanel back at viewport 0 — visible. Transform alone cannot hide
 * them here, so gate visibility explicitly.
 */
.rwo-sm.is-compact .rwo-sm__subpanel,
.rwo-sm.is-compact .rwo-sm__subpanel--depth-2,
.rwo-sm.is-compact .rwo-sm__subpanel--depth-3 {
	left: 0;
	width: 100%;
	border-left: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateX(100%);
	pointer-events: none;
}

.rwo-sm.is-compact .rwo-sm__subpanel.is-active {
	transform: translateX(0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Belt and braces: a closed panel never leaks its children onto the page. */
.rwo-sm.is-compact:not(.is-open) .rwo-sm__subpanel {
	visibility: hidden;
}

.rwo-sm.is-compact .rwo-sm__back {
	display: flex;
}

.rwo-sm.is-compact .rwo-sm__rail {
	z-index: calc(var(--rwo-sm-z) + 3);
}

/* --------------------------------------------------------- Scroll lock -- */

html.rwo-sm-locked,
body.rwo-sm-locked {
	overflow: hidden;
}

/* ------------------------------------------------------ Reduced motion -- */

@media (prefers-reduced-motion: reduce) {
	.rwo-sm,
	.rwo-sm * {
		transition-duration: 0.01ms !important;
	}
}

/* ------------------------------------------------------------- Editor -- */
/*
 * Deliberately no position override here. .elementor-editor-active is on the
 * preview body for ANY document being edited, so forcing absolute positioning
 * dropped the rail and panel into the flow halfway down any page whose header
 * happens to include this widget. Fixed positioning previews correctly and the
 * elements remain selectable, so the editor needs no special case.
 */

/* ------------------------------------------------- WP admin bar offset -- */
/* html gets margin-top from the admin bar, but fixed elements anchor to the
 * viewport and would sit underneath it. Shift them down by the bar height. */

body.admin-bar .rwo-sm {
	--rwo-sm-offset-top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .rwo-sm {
		--rwo-sm-offset-top: 46px;
	}
}

/* --------------------------------------------- Third-party menu items -- */
/* Some themes (UiCore among them) inject their own mobile "back" link into
 * any submenu they find in the DOM. Ours already has a real back button, so
 * hide anything injected inside our panels rather than let it duplicate. */

.rwo-sm__subpanel > li.back,
.rwo-sm__subpanel > li.menu-item.back,
.rwo-sm__sublist > li.back,
.rwo-sm__sublist > li.menu-item.back,
.rwo-sm__panel li.menu-item.back {
	display: none !important;
}

/* ------------------------------------------------- Init transition guard -- */
/*
 * The compact class is added by JS after first paint. Without this, retargeting
 * transform mid-transition leaves the panel stranded on screen (it reads as a
 * permanently open menu). Nothing animates until the widget says it is ready.
 */

.rwo-sm:not(.is-ready) .rwo-sm__panel,
.rwo-sm:not(.is-ready) .rwo-sm__subpanel,
.rwo-sm:not(.is-ready) .rwo-sm__overlay,
.rwo-sm:not(.is-ready) .rwo-sm__rail {
	transition: none !important;
}

/* ------------------------------------------------- Compact: top bar -- */

.rwo-sm--compact-topbar.is-compact .rwo-sm__rail {
	top: var(--rwo-sm-offset-top);
	left: 0;
	width: 100%;
	height: var(--rwo-sm-topbar-height);
	flex-direction: var(--rwo-sm-topbar-direction);
	align-items: var(--rwo-sm-topbar-align);
	justify-content: var(--rwo-sm-topbar-justify);
	flex-wrap: nowrap;
	gap: var(--rwo-sm-topbar-gap);
	padding: var(--rwo-sm-topbar-padding);
	border-right: 0;
}

/* The logo sits beside the toggle rather than under it, and stays put
 * while the panel is open — there is room for it on a bar. */
.rwo-sm--compact-topbar.is-compact .rwo-sm__logo {
	align-self: center;
	width: var(--rwo-sm-topbar-logo-width);
	flex: 0 0 auto;
}

.rwo-sm--compact-topbar.is-compact .rwo-sm__logo > a,
.rwo-sm--compact-topbar.is-compact .rwo-sm__logo > img {
	width: 100%;
}

.rwo-sm--compact-topbar.is-compact.rwo-sm--hide-logo-open.is-open .rwo-sm__logo {
	opacity: 1;
	pointer-events: auto;
}

/* Panel drops below the bar and uses the full width. */
.rwo-sm--compact-topbar.is-compact .rwo-sm__panel {
	top: calc(var(--rwo-sm-offset-top) + var(--rwo-sm-topbar-height));
	left: 0;
	width: 100%;
	height: calc(100vh - var(--rwo-sm-offset-top) - var(--rwo-sm-topbar-height));
	height: calc(100dvh - var(--rwo-sm-offset-top) - var(--rwo-sm-topbar-height));
	transform: translateX(-100%);
}

.rwo-sm--compact-topbar.is-compact.is-open .rwo-sm__panel {
	transform: translateX(0);
}

.rwo-sm--compact-topbar.is-compact .rwo-sm__subpanel {
	left: 0;
	width: 100%;
	height: 100%;
	border-left: 0;
}

.rwo-sm--compact-topbar.is-compact .rwo-sm__overlay {
	top: calc(var(--rwo-sm-offset-top) + var(--rwo-sm-topbar-height));
}

/* ----------------------------------------------- Compact logo swap -- */
/*
 * Both images are in the DOM; CSS picks one. Avoids a src swap on resize
 * (which flashes) and keeps each file cacheable.
 */

.rwo-sm__logo-img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

.rwo-sm__logo--has-compact .rwo-sm__logo-img--compact {
	display: none;
}

.rwo-sm.is-compact .rwo-sm__logo--has-compact .rwo-sm__logo-img--default {
	display: none;
}

.rwo-sm.is-compact .rwo-sm__logo--has-compact .rwo-sm__logo-img--compact {
	display: block;
}

/* ------------------------------------------------- Compact bar spacer -- */
/*
 * The bar is fixed, so it would otherwise sit on top of the page. This
 * in-flow element reserves the same height. Scoped to the widget rather than
 * padding <body>, so nothing leaks into the rest of the site.
 */

.rwo-sm__spacer {
	display: none;
}

.rwo-sm--compact-topbar.rwo-sm--push.is-compact .rwo-sm__spacer {
	display: block;
	width: 100%;
	height: var(--rwo-sm-topbar-height);
	flex: 0 0 auto;
}

/* Padding must count inside the height, or the spacer under-reserves. */
.rwo-sm__rail,
.rwo-sm__spacer {
	box-sizing: border-box;
}

/* --------------------------------------------- Compact: centred logo -- */
/*
 * Two flex items cannot be independently pinned — justify-content moves both.
 * Taking the logo out of flow lets the toggle sit hard left or right while the
 * logo stays optically centred in the bar.
 */

.rwo-sm--compact-topbar.rwo-sm--logo-centre.is-compact .rwo-sm__logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	pointer-events: auto;
}

/* Keep the toggle clickable above the centred logo's box. */
.rwo-sm--compact-topbar.rwo-sm--logo-centre.is-compact .rwo-sm__toggle {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------- Sticky buttons -- */
/*
 * Independent of the menu panel: fixed to the viewport, positioned by a class
 * on the root. Below the breakpoint they can become a full-width bottom bar.
 */

.rwo-sm__sticky {
	position: fixed;
	z-index: var(--rwo-sm-sticky-z);
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

.rwo-sm__sticky-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none;
	line-height: 1;
	box-sizing: border-box;
	transition: background-color var(--rwo-sm-duration) var(--rwo-sm-ease),
		color var(--rwo-sm-duration) var(--rwo-sm-ease),
		transform var(--rwo-sm-duration) var(--rwo-sm-ease);
}

.rwo-sm__sticky-icon {
	display: inline-flex;
	line-height: 0;
}

.rwo-sm__sticky-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* --- placement --- */

.rwo-sm--sticky-top-right .rwo-sm__sticky {
	top: calc(var(--rwo-sm-offset-top) + var(--rwo-sm-sticky-y));
	right: var(--rwo-sm-sticky-x);
}

.rwo-sm--sticky-middle-right .rwo-sm__sticky {
	top: 50%;
	right: var(--rwo-sm-sticky-x);
	transform: translateY(-50%);
}

.rwo-sm--sticky-bottom-right .rwo-sm__sticky {
	bottom: var(--rwo-sm-sticky-y);
	right: var(--rwo-sm-sticky-x);
}

.rwo-sm--sticky-top-left .rwo-sm__sticky {
	top: calc(var(--rwo-sm-offset-top) + var(--rwo-sm-sticky-y));
	left: var(--rwo-sm-sticky-x);
}

.rwo-sm--sticky-middle-left .rwo-sm__sticky {
	top: 50%;
	left: var(--rwo-sm-sticky-x);
	transform: translateY(-50%);
}

.rwo-sm--sticky-bottom-left .rwo-sm__sticky {
	bottom: var(--rwo-sm-sticky-y);
	left: var(--rwo-sm-sticky-x);
}

.rwo-sm--sticky-bottom-centre .rwo-sm__sticky {
	bottom: var(--rwo-sm-sticky-y);
	left: 50%;
	transform: translateX(-50%);
}

/* --- below the breakpoint --- */

.rwo-sm--sticky-compact-hide.is-compact .rwo-sm__sticky {
	display: none;
}

.rwo-sm--sticky-compact-bar.is-compact .rwo-sm__sticky {
	top: auto;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	transform: none;
}

.rwo-sm--sticky-compact-bar.is-compact .rwo-sm__sticky-btn {
	flex: 1 1 0;
}

/* The open panel must sit above the bar, not behind it. */
.rwo-sm.is-open .rwo-sm__sticky {
	z-index: calc(var(--rwo-sm-sticky-z) - 1);
}

/* ------------------------------------------- Compact: non-fixed bar -- */
/*
 * The bar normally stays put while the page scrolls. Turning that off drops it
 * back into the flow, where it scrolls away — and then it needs no spacer,
 * because it occupies its own height already.
 */

.rwo-sm--compact-topbar.rwo-sm--topbar-static.is-compact .rwo-sm__rail {
	/*
	 * relative, not static: it stays in the flow and scrolls away as intended,
	 * but remains the containing block for the centred logo. With static the
	 * logo fell back to the Elementor wrapper and drifted off the bar.
	 */
	position: relative;
	top: auto;
	left: auto;
	width: 100vw;
	max-width: none;
	margin-left: calc(-1 * var(--rwo-sm-bleed, 0px));
}

.rwo-sm--compact-topbar.rwo-sm--topbar-static.is-compact .rwo-sm__spacer {
	display: none;
}

/* A static bar means the panel starts from the top of the viewport again. */
.rwo-sm--compact-topbar.rwo-sm--topbar-static.is-compact .rwo-sm__panel {
	top: var(--rwo-sm-panel-top, var(--rwo-sm-offset-top));
	height: calc(100vh - var(--rwo-sm-panel-top, var(--rwo-sm-offset-top)));
	height: calc(100dvh - var(--rwo-sm-panel-top, var(--rwo-sm-offset-top)));
}

.rwo-sm--compact-topbar.rwo-sm--topbar-static.is-compact .rwo-sm__overlay {
	top: var(--rwo-sm-panel-top, var(--rwo-sm-offset-top));
}

/* --------------------------------------------- Rail: reserve space -- */
/*
 * Set by JS from the measured rail width, so the fixed rail stops sitting on
 * top of page content and the footer. Removed automatically in compact mode.
 */

body.rwo-sm-rail-offset {
	transition: padding-inline-start var(--rwo-sm-duration) var(--rwo-sm-ease);
}