/* ── Fullscreen Menu — menu.css ───────────────────────────────────────── */
/* Structural styles only. Colors, typography and spacing are controlled  */
/* via the Elementor Style panel and injected as dynamic CSS.             */

/* Prevent body scroll when menu is open */
body.fem-open {
	overflow: hidden;
}

/* ── Hamburger Button ─────────────────────────────────────────────────── */
.fem-burger {
	position: fixed;
	/* top / right / left / bottom set via inline style from PHP */
	width: 44px;  /* fallback — overridden by Elementor slider */
	height: 44px; /* fallback — overridden by Elementor slider */
	background: none;
	border: none;
	z-index: 10003; /* always on top of wave layer and overlay */
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* The three bars */
.fem-burger span,
.fem-burger span::before,
.fem-burger span::after {
	position: absolute;
	width: 100%;
	height: 2px; /* fallback — overridden by Elementor slider */
	background: #000; /* fallback — overridden by Elementor color */
	content: '';
	left: 0;
	will-change: transform;
	transition: transform .35s cubic-bezier(0.77, 0, 0.175, 1),
	            top .35s cubic-bezier(0.77, 0, 0.175, 1),
	            background .25s;
}

.fem-burger span         { top: 50%; transform: translateY(-50%); }
.fem-burger span::before { top: -10px; }
.fem-burger span::after  { top: 10px;  }

/* Active state: morph into × */
.fem-wrapper.active .fem-burger span {
	background: transparent !important;
}
.fem-wrapper.active .fem-burger span::before {
	transform: rotate(45deg);
	top: 0;
}
.fem-wrapper.active .fem-burger span::after {
	transform: rotate(-45deg);
	top: 0;
}

/* ── Wave Layer ───────────────────────────────────────────────────────── */
/*                                                                        */
/* A single full-height div that GSAP sweeps from below the viewport to  */
/* above it, creating a rising "wave splash" transition effect.          */
/*                                                                        */
/* Structure (z-index order, bottom to top):                             */
/*   10000  .fem-overlay    — the actual menu content                    */
/*   10002  .fem-wave       — the moving wave layer (above menu)         */
/*   10003  .fem-burger     — always on top                              */

.fem-wave {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	/*
	 * Extra height (+ 80px) accommodates the wave crest SVG that sits
	 * 80px above the div's top edge, so no gap appears during the sweep.
	 */
	height: calc(100vh + 80px);
	z-index: 10002;
	pointer-events: none;
	will-change: transform;
	/*
	 * Default position: below the viewport.
	 * GSAP overrides this with yPercent: 110 on animation start,
	 * but this fallback prevents a flash if JS is slow.
	 */
	transform: translateY(calc(100vh + 80px));
}

/*
 * The wave crest SVG — an 80px band that sits directly above the solid
 * fill div, creating the wave-shaped leading edge as the layer rises.
 *
 * `bottom: 100%` aligns the SVG's bottom edge with the div's top edge,
 * so the wave appears to emerge naturally from the solid fill.
 */
.fem-wave-crest {
	position: absolute;
	bottom: 100%;
	left: 0;
	width: 100%;
	height: 80px;
	display: block;
	overflow: visible;
}

/* Inherits the wave colour set dynamically via `color` on the parent */
.fem-wave-path {
	fill: currentColor;
}

/* In waves mode the overlay CSS transition is disabled —                */
/* GSAP manages opacity exclusively via inline styles.                  */
.fem-mode-waves .fem-overlay {
	transition: none !important;
}

/* ── Overlay ──────────────────────────────────────────────────────────── */
.fem-overlay {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	/* Background, blur & transition set by Elementor controls.  */
	/* Fallback values keep it functional without style panel.   */
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s, backdrop-filter .4s;
	z-index: 10000;
	will-change: opacity;
}

.fem-wrapper.active .fem-overlay {
	opacity: 1;
	pointer-events: auto;
}

/* ── Menu List ────────────────────────────────────────────────────────── */
.fem-overlay ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center; /* fallback — overridden by Elementor */
}

/* Items start invisible so GSAP can animate them in */
.fem-overlay li {
	opacity: 0;
}

.fem-overlay a {
	position: relative; /* required for ::after underline */
	display: inline-block;
	text-decoration: none;
	font-size: clamp(28px, 4vw, 60px); /* fallback */
}

/* ── Hover underline sweep ────────────────────────────────────────────── */
/* Hidden by default. Elementor's switcher injects `display: block`     */
/* when the "Hover Underline Sweep" option is turned on.                */
.fem-overlay a::after {
	content: '';
	position: absolute;
	bottom: -3px;
	left: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s cubic-bezier(0.77, 0, 0.175, 1);
	display: none;
}

.fem-overlay a:hover::after {
	transform: scaleX(1);
}

/* ── Social Icons ─────────────────────────────────────────────────────── */
/* Pinned to the horizontal centre of the overlay bottom.               */
.fem-social {
	position: absolute;
	bottom: 60px; /* fallback — overridden by Elementor slider */
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px; /* fallback — overridden by Elementor slider */
	padding: 0 24px;
	flex-wrap: wrap;
}

.fem-social a {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	transition: opacity .2s;
}

.fem-social a:hover {
	opacity: .7;
}

/* ── Editor: Unlicensed Placeholder ──────────────────────────────────── */
.fem-unlicensed {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 40px 24px;
	border: 2px dashed #d0d5dd;
	border-radius: 8px;
	background: #f9fafb;
	text-align: center;
	min-height: 160px;
}

.fem-unlicensed img    { opacity: .5; }
.fem-unlicensed p      { margin: 0; color: #667085; font-size: 13px; }
.fem-unlicensed strong { color: #344054; }

/* ── Accessibility: prefers-reduced-motion ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	/* Hide the wave layer entirely — no animation */
	.fem-wave { display: none; }

	/* Instant overlay toggle */
	.fem-overlay,
	.fem-mode-waves .fem-overlay {
		transition: opacity 0.01s !important;
	}

	/* No bar morph animation */
	.fem-burger span,
	.fem-burger span::before,
	.fem-burger span::after {
		transition: none;
	}

	/* No underline sweep */
	.fem-overlay a::after {
		transition: none;
	}
}