/* ============================================================
   POP Interactive — Mobile Mega Menu (Full-Screen Overlay)
   ============================================================
   Step 2 of Responsive System v1 retrofit (2026-04-26).
   Pattern locked by Andie+Wendy joint call (Apr 25): full-screen
   overlay, type-forward, Spark mascot integration, code-syntax
   coral corner frame, "Menu" word label on trigger.

   Sources:
   - Andie's visual treatment (board post 2026-04-25)
   - Wendy's build feasibility (board post 2026-04-25)
   - Alice's WCAG validation (Token Pack §8 — focus mgmt, skip-link)
   - Rachel's responsive research §6 (full-screen overlay convention,
     "Menu" word label per NN/G discoverability research)

   Trigger visible at <1024px (tablet + mobile per Commitment 1).
   Mega menu hidden at <768px per existing per-page CSS — overlay
   replaces, does not compress, the desktop mega menu.
   ============================================================ */


/* ============================================================
   TRIGGER BUTTON — visible only on mobile + tablet
   Positioned fixed to viewport top-right so it works on every
   page template without per-page nav surgery. Sits above the
   site nav z-stack but below the overlay itself.
   ============================================================ */

.mobile-menu-trigger {
	/* Hidden on desktop — set to inline-flex via @media (max-width: 1023px) below */
	display: none;

	/* Reset button defaults */
	background: rgba(255, 255, 255, 0.92);
	border: 0;
	margin: 0;
	padding: 8px 14px;
	cursor: pointer;
	border-radius: 100px;
	backdrop-filter: blur(8px);

	/* Visual */
	font-family: "Space Grotesk", system-ui, sans-serif;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #1B2A4A; /* navy */

	/* Touch target — 2.75rem = 44px at 16px root */
	min-height: 2.75rem;
	min-width: 2.75rem;

	/* Fixed position — top right of viewport */
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 9997; /* below overlay (9998) and skip-link (9999) */

	align-items: center;
	gap: 10px;

	box-shadow: 0 2px 12px rgba(27, 42, 74, 0.08);
	transition: color 0.2s ease, background 0.2s ease;
}

.mobile-menu-trigger:hover {
	color: #D33E26; /* coral-deeper */
}

.mobile-menu-trigger .mobile-menu-trigger-icon {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	width: 18px;
}

.mobile-menu-trigger .mobile-menu-trigger-icon span {
	display: block;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Show trigger on tablet + mobile (per Commitment 1: < 1024px) */
@media (max-width: 1023px) {
	.mobile-menu-trigger {
		display: inline-flex;
	}
}


/* ============================================================
   OVERLAY CONTAINER — full-viewport, fixed, hidden by default
   ============================================================ */

.mobile-menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 9998; /* below skip-link (9999), above everything else */
	background: #1B2A4A; /* navy */
	overflow-y: auto;

	/* Hidden by default */
	visibility: hidden;
	opacity: 0;
	transform: translateY(8px);

	/* Animation: 250ms fade-in + slide-up.
	   Reduced-motion fallback handled via global block in
	   theme-accessibility.css — sets transition-duration 0.01ms. */
	transition: opacity 0.25s ease-out,
	            transform 0.25s ease-out,
	            visibility 0s linear 0.25s;
}

.mobile-menu-overlay[aria-hidden="false"] {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.25s ease-out,
	            transform 0.25s ease-out,
	            visibility 0s linear 0s;
}

/* When body has the open class, prevent scroll behind overlay */
body.mobile-menu-open {
	overflow: hidden;
}


/* ============================================================
   OVERLAY INNER LAYOUT
   ============================================================ */

.mobile-menu-overlay-inner {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh; /* dynamic viewport height — better on mobile */
	/* Top padding reserves space for the absolutely-positioned close
	   button (top: 16px + 44px button height + 16px breathing room = 76px).
	   Sides match the coral bracket inset (clamp 1.5–3rem). */
	padding: 4.75rem clamp(1.5rem, calc(1.07rem + 2.14vw), 3rem) clamp(1.5rem, calc(1.21rem + 1.43vw), 2.5rem);
	display: flex;
	flex-direction: column;
}


/* ============================================================
   CODE-SYNTAX FRAME — coral corner brackets (echoes hero framing)
   ============================================================ */

.mobile-menu-overlay::before,
.mobile-menu-overlay::after {
	content: "";
	position: absolute;
	width: 32px;
	height: 32px;
	border: 2px solid #E85D4A; /* coral */
	pointer-events: none;
}

.mobile-menu-overlay::before {
	top: 16px;
	left: 16px;
	border-right: 0;
	border-bottom: 0;
}

.mobile-menu-overlay::after {
	bottom: 16px;
	right: 16px;
	border-left: 0;
	border-top: 0;
}


/* ============================================================
   CLOSE BUTTON — paired to top-right corner.
   Positioned absolute relative to .mobile-menu-overlay (which is
   position: fixed) so it sits at viewport top-right at exactly
   16px inset, mirroring the coral L-bracket inset for symmetry.
   Sits outside .mobile-menu-overlay-inner; .mobile-menu-overlay-inner
   reserves top padding (4.75rem) so menu items don't underlap.
   ============================================================ */

.mobile-menu-close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 1; /* above bracket pseudo-elements within overlay */

	background: transparent;
	border: 0;
	margin: 0;
	padding: 8px 12px;
	cursor: pointer;

	min-height: 2.75rem;
	min-width: 2.75rem;

	display: inline-flex;
	align-items: center;
	gap: 8px;

	font-family: "Space Grotesk", system-ui, sans-serif;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #FFFFFF;

	transition: color 0.2s ease;
}

.mobile-menu-close:hover {
	color: #FF7A6A; /* coral-light */
}

.mobile-menu-close-x {
	display: inline-block;
	width: 24px;
	height: 24px;
	position: relative;
}

.mobile-menu-close-x::before,
.mobile-menu-close-x::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
}

.mobile-menu-close-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.mobile-menu-close-x::after  { transform: translate(-50%, -50%) rotate(-45deg); }


/* ============================================================
   MENU ITEMS — type-forward, hero-l scale (40 → 76px)
   Per Andie's visual treatment + Wendy's 320px verification math.
   Floor calibrated to fit "AI-Powered Services" at 320px viewport.
   ============================================================ */

.mobile-menu-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(0.75rem, calc(0.61rem + 0.71vw), 1.25rem);
}

.mobile-menu-list-item a,
.mobile-menu-list-item button {
	display: block;
	width: 100%;
	padding: 0.5rem 0;
	/* !important needed to beat Kadence's default button palette
	   variable which fills generic buttons with coral. The menu
	   buttons must always be transparent — visual state is
	   indicated by color shift, not background fill. */
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-align: left;
	cursor: pointer;

	font-family: "Inter", system-ui, sans-serif;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.05;
	color: #FFFFFF;
	text-decoration: none;

	/* Type-forward menu items, calibrated across viewports.
	   Slope tuned 2026-04-26 — original 8vw read as shouting at
	   tablet widths. New formula: floor 2rem (32px) for 320–500px,
	   linear scale through tablet, cap 3.5rem (56px) at desktop edge.
	   - 320px: 32px (floor)
	   - 375px: 32px (floor)
	   - 820px: 49px (calm, type-forward, not shouting)
	   - 1023px: 56px (cap)
	   WCAG 1.4.4 zoom-safe: rem min/max, max ≤ 2× min (3.5/2 = 1.75). */
	font-size: clamp(2rem, 1rem + 4vw, 3.5rem);

	min-height: 2.75rem;
	transition: color 0.2s ease;
}

.mobile-menu-list-item a:hover,
.mobile-menu-list-item button:hover {
	color: #FF7A6A; /* coral-light */
}

/* Italic Playfair accent on hover — echoes site's serif italic accent system */
.mobile-menu-list-item a em,
.mobile-menu-list-item button em {
	font-family: "Playfair Display", Georgia, serif;
	font-style: italic;
	font-weight: 400;
	color: #E85D4A; /* coral */
}


/* ============================================================
   SUB-ITEMS — Services group (accordion-within-overlay).
   Per Rachel's research: 2-level hierarchy expands inline.
   ============================================================ */

.mobile-menu-list-item.has-children {
	display: flex;
	flex-direction: column;
}

.mobile-menu-list-item.has-children > button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.mobile-menu-list-item.has-children > button .mobile-menu-chevron {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	transition: transform 0.25s ease;
}

.mobile-menu-list-item.has-children[aria-expanded="true"] > button .mobile-menu-chevron {
	transform: rotate(180deg);
}

/* Expanded-state indicator: coral-light text on parent button.
   Subtle, type-only — no background fill. Reads as "this item is
   currently expanded" without dominating the layout. */
.mobile-menu-list-item.has-children[aria-expanded="true"] > button {
	color: #FF7A6A; /* coral-light */
}

.mobile-menu-sublist {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0 0 0 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	border-left: 2px solid rgba(232, 93, 74, 0.3); /* coral 30% */

	/* Hidden by default — opened via aria-expanded on parent */
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.mobile-menu-list-item.has-children[aria-expanded="true"] > .mobile-menu-sublist {
	max-height: 600px; /* generous; collapses cleanly under content */
}

.mobile-menu-sublist a {
	display: block;
	padding: 0.5rem 0;
	font-family: "Space Grotesk", system-ui, sans-serif;
	font-size: 1.125rem;
	font-weight: 600;
	color: #FFFFFF;
	text-decoration: none;
	letter-spacing: 0;
	line-height: 1.3;
	min-height: 2.75rem;
	transition: color 0.2s ease;
}

.mobile-menu-sublist a:hover {
	color: #FF7A6A;
}


/* ============================================================
   FOOTER ROW — repeats primary nav links + Spark mascot corner
   Per Commitment 6: primary nav repeated for users who can't
   open the menu. Spark mascot per Andie's visual treatment.
   ============================================================ */

.mobile-menu-overlay-footer {
	margin-top: auto;
	padding-top: clamp(2rem, calc(1.71rem + 1.43vw), 3rem);
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1rem;
}

.mobile-menu-footer-text {
	font-family: "Space Grotesk", system-ui, sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.mobile-menu-spark {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	opacity: 0.85;
}


/* ============================================================
   FORCED-COLORS / HIGH CONTRAST HANDLING
   The coral corner frame is decorative; opt out so it doesn't
   become a system-color rectangle. Trigger button + close
   button get button borders for boundary visibility.
   ============================================================ */

@media (forced-colors: active) {
	.mobile-menu-trigger,
	.mobile-menu-close {
		border: 1px solid ButtonText;
	}

	.mobile-menu-overlay::before,
	.mobile-menu-overlay::after {
		forced-color-adjust: none;
	}

	.mobile-menu-spark {
		forced-color-adjust: none;
	}
}