/**
 * Emergence Audio — Engines Mega Menu
 * v1.2.1
 *
 * Styling for the tabbed ENGINES mega menu panel (layout variant C).
 *
 * SCOPING
 * Every rule is scoped to .ea-mega, the class on the outermost element inside
 * the Kadence Element. Nothing targets Kadence's own mega-menu or block classes,
 * so a Kadence update cannot break it.
 *
 * FAIL-SAFE BASE STATE  (changed in 1.2.0 — read this before editing)
 * The BASE state is the stacked, single-column, mobile-friendly layout: every
 * panel visible, tab strip hidden, featured card first, touch-sized links. The
 * three-column tab layout is opt-in, applied only when the script has verified
 * both that the navigation is in desktop mode and that this copy of the panel
 * actually has room for it:
 *
 *   .ea-mega--tabs    three columns, tab strip shown, inactive panels hidden
 *
 * 1.1.x had this the other way round — three columns by default, with a class
 * switching to stacked. Kadence renders the mega content twice (desktop nav plus
 * off-canvas drawer), and the second copy was never reached by the script, so it
 * kept the three-column grid inside a ~300px drawer: tab strip visible, products
 * and featured card pushed off-screen behind a horizontal scrollbar. Inverting
 * it means any copy the script misses degrades to the linear layout, which is
 * usable at any width.
 *
 * So: never add layout that depends on a class being present to be correct.
 *
 * BREAKPOINT
 * There is no nav-breakpoint media query here. The viewport test lives in one
 * place only — matchMedia() in the JS, using the value PHP passes it — because
 * it has to agree with Kadence's own mobile-header setting. The script combines
 * that with a per-instance width measurement, since the off-canvas drawer is
 * narrow regardless of how wide the viewport is.
 *
 * STACKING
 * No z-index anywhere. The panel inherits the Kadence header stacking context
 * (header 11, submenu 1000), which is what keeps it clear of Brizy popups.
 *
 * COLOUR TOKENS
 * Sampled from the live site 2026-07-25. --ea-cyan is Brizy global colour 3,
 * --ea-dark is global colour 1. The Envoy tokens come from the Cadence Engine
 * reveal page and are intentionally different from the site accent.
 */

.ea-mega {
	/* Surfaces */
	--ea-dark: #1c1c1c;
	--ea-dark-raised: #282828;
	--ea-dark-hover: #242424;
	--ea-line: rgba(255, 255, 255, 0.1);

	/* Accents */
	--ea-cyan: #1db7ff;          /* Infinite Motion Engine / site accent */
	--ea-envoy: #dab6a6;         /* Cadence Engine / Envoy accent */
	--ea-envoy-ink: #241d19;     /* readable text on --ea-envoy */
	--ea-cyan-ink: #04263a;      /* readable text on --ea-cyan */

	/* Text */
	--ea-text: #ffffff;
	--ea-text-muted: #a8a8a8;
	--ea-text-dim: #7a7a7a;
	--ea-text-warm: #8b8378;

	/* Type — matches the live nav (Montserrat) and body (Poppins) */
	--ea-font-nav: "Montserrat", sans-serif;
	--ea-font-body: "Poppins", sans-serif;

	--ea-curve: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* =========================================================================
   1. PANEL SHELL — base is single column
   ========================================================================= */

.ea-mega {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	box-sizing: border-box;
	width: 100%;
	max-width: 1500px;
	margin-inline: auto;
	padding: 24px 18px 26px;
	background: var(--ea-dark);

	/*
	 * Base text colour for the whole panel. Without it, anything that does not
	 * set its own colour inherits from the theme — which on a light page means
	 * near-black text on this dark background. Every element currently sets its
	 * own, so this is insurance for anything added later.
	 */
	color: var(--ea-text);
}

.ea-mega *,
.ea-mega *::before,
.ea-mega *::after {
	box-sizing: border-box;
}

/* Grid children: prevent long product names forcing a track wider. */
.ea-mega__tabs,
.ea-mega__panels,
.ea-mega__featured {
	min-width: 0;
}

/* Three columns only once the script confirms there is room. */
.ea-mega--tabs {
	grid-template-columns: 210px minmax(0, 1fr) 300px;
	column-gap: 36px;
	padding: 40px 34px 34px;
}

/* =========================================================================
   2. TAB STRIP — hidden unless the tab widget is live
   ========================================================================= */

.ea-mega__tabs {
	display: none;
}

.ea-mega--tabs .ea-mega__tabs {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding-right: 28px;
	border-right: 1px solid var(--ea-line);
	list-style: none;
}

.ea-mega__tabs li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ea-mega__tab {
	display: block;
	padding: 14px;
	border: 0;
	border-radius: 3px;
	background: transparent;
	font-family: var(--ea-font-nav);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: var(--ea-text);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s var(--ea-curve);
}

.ea-mega__tab:hover,
.ea-mega__tab:focus-visible {
	background: var(--ea-dark-hover);
	text-decoration: none;
}

.ea-mega__tab[aria-selected="true"] {
	background: var(--ea-dark-raised);
}

.ea-mega__tab-name {
	display: block;
	color: inherit;
}

.ea-mega__tab-desc {
	display: block;
	margin-top: 4px;
	font-family: var(--ea-font-body);
	font-weight: 400;
	font-size: 10.5px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ea-text-dim);
}

/*
 * ENGINE ACCENT ON THE SELECTED TAB ONLY  (1.2.1)
 *
 * Each engine's accent appears on its tab while that tab is selected, matching
 * the accent on its panel heading. Unselected tabs stay white.
 *
 * 1.2.0 tinted the Cadence tab permanently and left the others white, on the
 * theory that the warm tint flagged the new engine. Two problems. It read as a
 * bug rather than as hierarchy — the same nav item appeared cyan on mobile,
 * where the tab strip is hidden and the cyan panel heading is what shows, and
 * white on desktop. And permanently colouring one tab fights the selection
 * state: #1db7ff is a vivid saturated cyan while #dab6a6 is a desaturated warm
 * neutral, so an unselected cyan label would out-shout a selected tan one.
 *
 * Tying colour to selection makes it one system instead of two: colour means
 * "you are here, and this is that engine's identity." Losing the permanent
 * Cadence tint costs nothing, because the Envoy featured card is always on
 * screen in full warm tan and flags the new engine far more loudly.
 *
 * Keyed off the panel ID in the href rather than a class, so this needs no
 * change to the authored markup. *= not $= because the script suffixes the
 * off-canvas copy's panel IDs (ea-panel-motion--1).
 */
.ea-mega__tab[href*="ea-panel-cadence"][aria-selected="true"] {
	color: var(--ea-envoy);
}

.ea-mega__tab[href*="ea-panel-motion"][aria-selected="true"] {
	color: var(--ea-cyan);
}

/* =========================================================================
   3. PANELS — all visible in the base state
   ========================================================================= */

/*
 * Stacked, engine groups need a visible boundary or the next eyebrow reads as
 * part of the previous list.
 */
.ea-mega__panel + .ea-mega__panel {
	margin-top: 26px;
	padding-top: 24px;
	border-top: 1px solid var(--ea-line);
}

.ea-mega--tabs .ea-mega__panel {
	display: none;
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.ea-mega--tabs .ea-mega__panel.is-active {
	display: block;
}

.ea-mega__eyebrow {
	margin: 0 0 4px;
	font-family: var(--ea-font-nav);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 2.6px;
	text-transform: uppercase;
}

.ea-mega__eyebrow--cadence {
	color: var(--ea-envoy);
}

.ea-mega__eyebrow--motion {
	color: var(--ea-cyan);
}

.ea-mega__sub {
	margin: 0 0 22px;
	font-family: var(--ea-font-body);
	font-size: 11px;
	color: var(--ea-text-dim);
}

.ea-mega__rule {
	height: 1px;
	margin: 0 0 22px;
	background: var(--ea-line);
	border: 0;
}

/* =========================================================================
   4. PRODUCT FAMILIES
   ========================================================================= */

.ea-mega__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.ea-mega--tabs .ea-mega__cols {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 26px;
}

.ea-mega__fam {
	margin: 0 0 24px;
}

/*
 * Stacked, the last family in one column group sits directly against the first
 * of the next, so the margin is kept and only removed on the final group.
 */
.ea-mega__cols > *:last-child .ea-mega__fam:last-child {
	margin-bottom: 0;
}

.ea-mega--tabs .ea-mega__fam:last-child {
	margin-bottom: 0;
}

.ea-mega__fam-head {
	display: block;
	margin: 0 0 10px;
	font-family: var(--ea-font-nav);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--ea-text);
	text-decoration: none;
	transition: color 0.16s var(--ea-curve);
}

.ea-mega__fam-head:hover,
.ea-mega__fam-head:focus-visible {
	color: var(--ea-cyan);
}

.ea-mega__fam ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ea-mega__fam li {
	margin: 0 0 1px;
	list-style: none;
}

/*
 * Touch-sized by default; tightened only for the pointer-driven tab layout.
 * min-height rather than padding alone, so the target clears the 44px minimum
 * regardless of font metrics — padding maths came out at 39px.
 */
.ea-mega__fam li a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 4px 0;
	font-family: var(--ea-font-body);
	font-weight: 300;
	font-size: 14px;
	color: var(--ea-text-muted);
	text-decoration: none;
	transition: color 0.16s var(--ea-curve), transform 0.16s var(--ea-curve);
}

.ea-mega--tabs .ea-mega__fam li a {
	display: block;
	min-height: 0;
	padding: 4px 0;
	font-size: 13px;
}

.ea-mega__fam li a:hover,
.ea-mega__fam li a:focus-visible {
	color: var(--ea-text);
	transform: translateX(3px);
}

/* Small inline product tags — FREE, ALL-IN, NEW. */
.ea-mega__tag {
	display: inline-block;
	margin-left: 7px;
	padding: 2px 5px;
	border-radius: 2px;
	vertical-align: 1px;
	font-family: var(--ea-font-nav);
	font-weight: 700;
	font-size: 8px;
	letter-spacing: 1px;
	background: var(--ea-cyan);
	color: var(--ea-cyan-ink);
}

.ea-mega__tag--free {
	background: #3ddc84;
	color: #0b3a20;
}

.ea-mega__tag--new {
	background: var(--ea-envoy);
	color: var(--ea-envoy-ink);
}

/* =========================================================================
   5. FEATURED CARD (Envoy)
   -------------------------------------------------------------------------
   order: -1 in the base state puts it above the product lists when stacked.
   .ea-mega owns its own grid partly for this: Kadence Row Layout only offers
   Collapse Order Normal/Reverse, which cannot move one column independently.
   ========================================================================= */

.ea-mega__featured {
	position: relative;
	display: block;
	order: -1;
	margin-bottom: 22px;
	overflow: hidden;
	border: 1px solid rgba(218, 182, 166, 0.28);
	border-radius: 4px;
	background: linear-gradient(155deg, #241d19 0%, #1a1512 55%, #151110 100%);
	text-decoration: none;
	transition: border-color 0.2s var(--ea-curve), transform 0.2s var(--ea-curve);
}

.ea-mega--tabs .ea-mega__featured {
	order: 0;
	align-self: start;
	margin-bottom: 0;
}

.ea-mega__featured:hover,
.ea-mega__featured:focus-visible {
	border-color: rgba(218, 182, 166, 0.55);
	transform: translateY(-2px);
}

/*
 * The card is a single <a>, so its parts are authored as <span> — a <p> inside
 * <a> is invalid and browsers unnest it, which breaks the card. That means every
 * text part needs an explicit display:block or it flows inline and overruns.
 * .ea-mega__cta is intentionally absent: it stays inline-flex so the button
 * hugs its label instead of filling the card width.
 */
.ea-mega__feat-body,
.ea-mega__feat-eyebrow,
.ea-mega__feat-title,
.ea-mega__feat-copy,
.ea-mega__spec {
	display: block;
}

.ea-mega__art {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: linear-gradient(160deg, #2b221d 0%, #1a1512 100%);
}

.ea-mega__art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ea-mega__badge {
	position: absolute;
	top: 11px;
	left: 11px;
	padding: 4px 8px;
	border-radius: 2px;
	font-family: var(--ea-font-nav);
	font-weight: 700;
	font-size: 8.5px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	background: var(--ea-envoy);
	color: var(--ea-envoy-ink);
}

/* Swap to this class at launch — see README step 9. */
.ea-mega__badge--live {
	background: var(--ea-cyan);
	color: var(--ea-cyan-ink);
}

.ea-mega__feat-body {
	padding: 16px 17px 18px;
}

.ea-mega__feat-eyebrow {
	margin: 0 0 7px;
	font-family: "Roboto", var(--ea-font-nav);
	font-weight: 700;
	font-size: 9px;
	letter-spacing: 2.6px;
	text-transform: uppercase;
	color: var(--ea-envoy);
}

.ea-mega__feat-title {
	margin: 0 0 6px;
	font-family: var(--ea-font-nav);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.35;
	letter-spacing: -0.2px;
	color: var(--ea-text);
}

.ea-mega__feat-title em {
	font-style: normal;
	color: var(--ea-envoy);
}

.ea-mega__feat-copy {
	margin: 0 0 13px;
	font-family: var(--ea-font-body);
	font-size: 11.5px;
	line-height: 1.55;
	color: var(--ea-text-warm);
}

/* Full width by default so it clears the 44px minimum touch target. */
.ea-mega__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	padding: 13px 14px;
	border-radius: 2px;
	font-family: var(--ea-font-nav);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	background: var(--ea-envoy);
	color: var(--ea-envoy-ink);
	text-decoration: none;
}

.ea-mega--tabs .ea-mega__cta {
	justify-content: flex-start;
	width: auto;
	padding: 9px 14px;
}

.ea-mega__cta--live {
	background: var(--ea-cyan);
	color: var(--ea-cyan-ink);
}

.ea-mega__spec {
	margin: 12px 0 0;
	font-family: var(--ea-font-nav);
	font-weight: 500;
	font-size: 8.5px;
	line-height: 1.6;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #6b645c;
}

/* =========================================================================
   6. CADENCE COLUMN ITEMS
   ========================================================================= */

.ea-mega__cad-item {
	display: block;
	margin: 0 0 16px;
	padding: 2px 0 2px 12px;
	border-left: 2px solid var(--ea-envoy);
	text-decoration: none;
}

.ea-mega__cad-item strong {
	display: block;
	font-family: var(--ea-font-nav);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.4px;
	color: var(--ea-text);
}

.ea-mega__cad-item span {
	display: block;
	margin-top: 3px;
	font-family: var(--ea-font-body);
	font-size: 11px;
	color: var(--ea-text-warm);
}

.ea-mega__note {
	margin: 0;
	padding-left: 12px;
	border-left: 2px solid #35302c;
	font-family: var(--ea-font-body);
	font-size: 11px;
	font-style: italic;
	line-height: 1.6;
	color: #5f5a55;
}

/* =========================================================================
   7. FOCUS VISIBILITY
   -------------------------------------------------------------------------
   Kadence's default focus ring can disappear against #1c1c1c. No border-radius
   here — setting one would override each component's own radius while focused,
   making corners visibly snap tighter. Outline already follows the element.
   ========================================================================= */

.ea-mega a:focus-visible,
.ea-mega button:focus-visible,
.ea-mega [role="tab"]:focus-visible {
	outline: 2px solid var(--ea-cyan);
	outline-offset: 2px;
}

/* =========================================================================
   8. REDUCED MOTION
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {

	.ea-mega *,
	.ea-mega *::before,
	.ea-mega *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	.ea-mega__featured:hover,
	.ea-mega__fam li a:hover {
		transform: none;
	}
}