/* ==========================================================================
   Custom Menu Widget
   Desktop: horizontal menu with animated dropdown panels
   Mobile:  off-canvas or full-width dropdown, hamburger toggle
   Motion is driven by GSAP (assets/js/custom-menu.js); CSS only sets
   resting states so nothing flashes before JS runs.
   ========================================================================== */

.cmw-menu {
	--cmw-indicator: #e8365d;
	--cmw-indicator-active: var(--cmw-indicator);
	--cmw-indicator-h: 2px;
	--cmw-indicator-r: 2px;
	--cmw-indicator-inset: 12px;
	--cmw-indicator-offset: 0px;
	--cmw-panel-offset: 12px;
	--cmw-bar-w: 22px;
	--cmw-mpanel-w: 320px;
	position: relative;
	font-family: inherit;
}

.cmw-menu *,
.cmw-menu *::before,
.cmw-menu *::after {
	box-sizing: border-box;
}

/* The list reset has to out-specify the theme and kit, which style lists by
   tag. `.cmw-menu ul` is 0,1,1, exactly tying `.elementor-kit-NNNN ul` and
   `body ul`, so it was decided by stylesheet load order. When the theme won,
   its `ul { margin-bottom: 1em }` left a dead band of empty space under the
   menu inside the widget container. Class-qualified selectors are 0,2,1. */
.cmw-menu ul.cmw-list,
.cmw-menu ul.cmw-sub-list,
.cmw-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cmw-menu li.cmw-item,
.cmw-menu li.cmw-sub-item,
.cmw-menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cmw-menu li.cmw-item::before,
.cmw-menu li.cmw-item::marker,
.cmw-menu li.cmw-sub-item::before,
.cmw-menu li.cmw-sub-item::marker {
	content: none;
}

/* Nothing else in the nav should contribute height on desktop. The indicator
   is an inline span and would add a line box if it ever fell back to static. */
.cmw-nav > .cmw-indicator {
	position: absolute;
}

/* Same specificity trap as the FX Hero buttons: the Elementor kit styles links
   as `.elementor-kit-NNNN a` (0,2,0), which beats `.cmw-menu a` (0,1,1) and
   would drag the kit's link colour and underline into the menu. */
.cmw-menu a.cmw-link,
.cmw-menu a.cmw-sub-link,
.cmw-menu .cmw-logo a {
	text-decoration: none;
	color: inherit;
}

.cmw-menu a {
	text-decoration: none;
	color: inherit;
}

/* --------------------------------------------------------------------------
   Toggle (hidden on desktop)
   -------------------------------------------------------------------------- */
.cmw-toggle-wrap {
	display: none;
}

.cmw-toggle,
.cmw-close {
	position: relative;
	display: none;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.cmw-toggle:focus-visible,
.cmw-close:focus-visible,
.cmw-link:focus-visible,
.cmw-sub-link:focus-visible {
	outline: 2px solid var(--cmw-indicator);
	outline-offset: 2px;
}

.cmw-toggle span,
.cmw-close span {
	position: absolute;
	left: calc(50% - var(--cmw-bar-w) / 2);
	top: calc(50% - 1px);
	width: var(--cmw-bar-w);
	height: 2px;
	border-radius: 2px;
	transform-origin: center;
	background: #0b1e3f;
}

/* Bars 1 and 3 are offset with plain px translates so GSAP can morph them into an X */
.cmw-toggle span:nth-child(1) { transform: translateY(-7px); }
.cmw-toggle span:nth-child(3) { transform: translateY(7px); }

.cmw-close span:nth-child(1) { transform: rotate(45deg); }
.cmw-close span:nth-child(2) { transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   Desktop menu
   -------------------------------------------------------------------------- */
.cmw-nav {
	position: relative;
}

.cmw-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.cmw-item {
	position: relative;
	border-bottom: 1px solid transparent;
}

.cmw-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.cmw-arrow {
	flex: none;
	transition: transform .25s ease;
}

.cmw-item.is-open > .cmw-link .cmw-arrow {
	transform: rotate(180deg);
}

/* Fallback active underline when the sliding indicator is off */
.cmw-menu.cmw-no-indicator .cmw-item.is-active > .cmw-link::after {
	content: "";
	position: absolute;
	left: var(--cmw-indicator-inset);
	right: var(--cmw-indicator-inset);
	bottom: var(--cmw-indicator-offset);
	height: var(--cmw-indicator-h);
	border-radius: var(--cmw-indicator-r);
	background: var(--cmw-indicator-active);
}

/* Sliding indicator (positioned by JS) */
.cmw-indicator {
	position: absolute;
	left: 0;
	bottom: var(--cmw-indicator-offset);
	width: 0;
	height: var(--cmw-indicator-h);
	border-radius: var(--cmw-indicator-r);
	background: var(--cmw-indicator);
	opacity: 0;
	pointer-events: none;
	will-change: transform, width;
}

/* Shape variants. The pill sits at z-index 0 with the links lifted to 1,
   rather than the indicator at -1. A negative z-index would escape .cmw-nav
   (position: relative alone creates no stacking context) and disappear behind
   the section background on some templates. */
.cmw-menu.cmw-ind-pill .cmw-indicator {
	top: 0;
	bottom: auto;
	height: 100%;
	border-radius: var(--cmw-indicator-r);
	z-index: 0;
}

.cmw-menu.cmw-ind-pill .cmw-link {
	z-index: 1;
}

.cmw-menu.cmw-ind-glow .cmw-indicator {
	box-shadow: 0 0 12px 1px var(--cmw-indicator);
}

/* Dropdown panel */
.cmw-sub {
	position: absolute;
	top: calc(100% + var(--cmw-panel-offset));
	left: 0;
	z-index: 50;
	width: 380px;
	max-width: calc(100vw - 32px);
	visibility: hidden;
	opacity: 0;
	transform-origin: top left;
	perspective: 900px;
}

/* Invisible bridge so the cursor can cross the gap without closing */
.cmw-sub::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--cmw-panel-offset) * -1);
	height: var(--cmw-panel-offset);
}

/* Restoring visibility alone left an invisible panel, since .cmw-sub is also
   opacity: 0. Inline styles from a running GSAP timeline still win over this,
   so it does not fight the animation. It is what reveals the panel when the
   effect is set to none, and if GSAP ever fails to load. */
.cmw-item.is-open > .cmw-sub {
	visibility: visible;
	opacity: 1;
	transform: none;
}

.cmw-menu.cmw-effect-none .cmw-sub {
	transition: opacity .18s ease, visibility .18s ease;
}

/* Align the last panels to the right edge when near the viewport edge (set by JS) */
.cmw-item.cmw-flip > .cmw-sub {
	left: auto;
	right: 0;
	transform-origin: top right;
}

.cmw-sub-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cmw-sub-link {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	transition: background-color .2s ease;
}

.cmw-sub-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	color: #0f7f8c;
	background: #e6f4f6;
	font-size: 18px;
	transition: color .25s ease, background-color .25s ease;
	will-change: transform;
}

.cmw-sub-icon svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.cmw-sub-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cmw-sub-title {
	display: block;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	color: #0b1e3f;
	transition: color .2s ease;
}

.cmw-sub-text {
	display: block;
	font-size: 13px;
	line-height: 1.4;
	color: #7a8496;
	transition: color .2s ease;
}

/* --------------------------------------------------------------------------
   Fallback paths.

   .cmw-js is added by the script. Before it runs, or if the script never runs
   at all, the first block below gives a working CSS-only hover menu.
   .cmw-no-motion is added when GSAP is unavailable: the menu is fully
   functional and animates on plain transitions instead.
   -------------------------------------------------------------------------- */

.cmw-menu:not(.cmw-js) .cmw-item--has-sub:hover > .cmw-sub,
.cmw-menu:not(.cmw-js) .cmw-item--has-sub:focus-within > .cmw-sub {
	visibility: visible;
	opacity: 1;
	transform: none;
}

.cmw-menu.cmw-no-motion .cmw-sub {
	transform: translateY(8px);
	transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
}

.cmw-menu.cmw-no-motion .cmw-item.is-open > .cmw-sub {
	visibility: visible;
	opacity: 1;
	transform: none;
}

/* Mobile accordion without GSAP: height is animated by CSS grid rows, which
   is the only way to transition to an unknown height. */
.cmw-menu.cmw-no-motion.is-mobile .cmw-sub {
	height: auto;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .3s ease;
}

.cmw-menu.cmw-no-motion.is-mobile .cmw-sub > * {
	min-height: 0;
	overflow: hidden;
}

.cmw-menu.cmw-no-motion.is-mobile .cmw-item.is-open > .cmw-sub {
	grid-template-rows: 1fr;
}

.cmw-menu.cmw-no-motion.is-mobile.cmw-sub-always-open .cmw-sub {
	grid-template-rows: 1fr;
}

/* Off-canvas panel without GSAP */
.cmw-menu.cmw-no-motion.is-mobile .cmw-nav {
	visibility: visible;
	transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}

.cmw-menu.cmw-no-motion.is-mobile.is-open .cmw-nav {
	transform: none;
}

.cmw-menu.cmw-no-motion.is-mobile.is-open .cmw-backdrop {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.cmw-menu.cmw-no-motion .cmw-backdrop {
	transition: opacity .3s ease, visibility .3s ease;
}

/* Hamburger morphs on CSS alone in the no-motion path */
.cmw-menu.cmw-no-motion .cmw-toggle span {
	transition: transform .3s ease, opacity .2s ease;
}

.cmw-menu.cmw-no-motion.is-open .cmw-toggle span:nth-child(1) { transform: rotate(45deg); }
.cmw-menu.cmw-no-motion.is-open .cmw-toggle span:nth-child(2) { opacity: 0; }
.cmw-menu.cmw-no-motion.is-open .cmw-toggle span:nth-child(3) { transform: rotate(-45deg); }

/* Backdrop (mobile only) */
.cmw-backdrop {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: rgba(11, 30, 63, .55);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Mobile (class added by JS at the chosen breakpoint)
   -------------------------------------------------------------------------- */
.cmw-menu.is-mobile .cmw-toggle-wrap {
	display: flex;
}

.cmw-menu.is-mobile .cmw-toggle {
	display: block;
}

.cmw-menu.is-mobile .cmw-close {
	display: block;
	position: absolute;
	top: 14px;
	right: 14px;
}

.cmw-menu.is-mobile .cmw-indicator {
	display: none;
}

.cmw-menu.is-mobile .cmw-nav {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 9999;
	width: var(--cmw-mpanel-w);
	max-width: 100%;
	padding: 72px 20px 24px;
	background: #fff;
	overflow-y: auto;
	visibility: hidden;
	-webkit-overflow-scrolling: touch;
}

.cmw-menu.is-mobile.cmw-side-right .cmw-nav { right: 0; transform: translateX(100%); }
.cmw-menu.is-mobile.cmw-side-left  .cmw-nav { left: 0;  transform: translateX(-100%); }

/* Full-width dropdown variant */
.cmw-menu.is-mobile.cmw-layout-dropdown .cmw-nav {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	bottom: auto;
	width: auto;
	max-height: calc(100vh - 80px);
	padding-top: 20px;
	transform: translateY(-12px);
	box-shadow: 0 18px 40px -12px rgba(11, 30, 63, .25);
}

.cmw-menu.is-mobile.cmw-layout-dropdown .cmw-close {
	display: none;
}

.cmw-menu.is-mobile .cmw-list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.cmw-menu.is-mobile .cmw-item {
	border-bottom: 1px solid #e9edf3;
}

.cmw-menu.is-mobile .cmw-link {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 14px 4px;
	white-space: normal;
}

.cmw-menu.is-mobile .cmw-sub {
	position: static;
	width: auto !important;
	max-width: none;
	height: 0;
	overflow: hidden;
	padding: 0 !important;
	visibility: visible;
	opacity: 1;
	transform: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent;
}

.cmw-menu.is-mobile .cmw-sub::before {
	display: none;
}

.cmw-menu.is-mobile .cmw-sub-list {
	padding: 4px 0 12px;
}

.cmw-menu.is-mobile.cmw-sub-always-open .cmw-sub {
	height: auto;
}

.cmw-menu.is-mobile.cmw-sub-always-open .cmw-arrow {
	display: none;
}

/* Body scroll lock while the off-canvas panel is open */
body.cmw-lock {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Reduced motion: GSAP is skipped in JS; make sure states are visible.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.cmw-item.is-open > .cmw-sub {
		opacity: 1;
		transform: none;
	}
	.cmw-menu.is-mobile.is-open .cmw-nav {
		visibility: visible;
		transform: none;
	}
	.cmw-menu.is-mobile.is-open .cmw-backdrop {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
	}
}