/**
 * Mega Menu — baseline front-end layout.
 *
 * This is an opt-out baseline so the mega menu works without theme CSS.
 * Disable it with: add_filter('fw:ext:megamenu:enqueue-frontend-css', '__return_false');
 *
 * It targets the markup produced by FW_Ext_Mega_Menu_Walker:
 *   li.menu-item-has-mega-menu > div.mega-menu > ul.mega-menu-row > li.mega-menu-col
 */

/* The top-level item that owns a mega menu panel */
.menu-item-has-mega-menu {
	position: relative;
}

/* Dropdown panel.
   All visual traits are driven by --mm-* custom properties so the theme's
   "Header → Mega Menu" settings can restyle every panel site-wide. Each var
   carries a hard-coded fallback so the extension still looks right with the
   theme's var output disabled (standalone / third-party themes). */
.menu-item-has-mega-menu > .mega-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	/* SIZE TO CONTENT. An absolutely-positioned panel shrink-to-fits against its (narrow) trigger <li>, so a
	   multi-column row had no room and wrapped its columns into a single stack. `max-content` sizes the panel
	   to its columns laid out side-by-side; min-width is the floor, max-width (viewport) the ceiling. */
	width: max-content;
	min-width: var(--mm-panel-min-width, 240px);
	max-width: calc(100vw - 24px);
	padding: var(--mm-panel-pad, 16px);
	background: var(--mm-panel-bg, #fff);
	border: var(--mm-panel-border, 1px solid rgba(0, 0, 0, 0.08));
	border-radius: var(--mm-panel-radius, 0);
	box-shadow: var(--mm-panel-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));
	/* Base font size for the whole panel — items, subtitles, descriptions and
	   rich content all scale from this (em/inherit), so one control resizes the
	   panel. Header → Mega Menu → "Base Font Size". */
	font-size: var(--mm-panel-font-size, 0.95rem);
	line-height: 1.45;
	opacity: 0;
	visibility: hidden;
	transform-origin: top center;
	/* Animation is token-driven (Header → Mega Menu → Animation & Behavior):
	   --mm-anim-transform is the CLOSED offset (fade=none, slide=translateY,
	   zoom=scale); the open state below resets it to none. */
	transform: var(--mm-anim-transform, translateY(6px));
	transition:
		opacity var(--mm-anim-duration, 0.18s) ease,
		transform var(--mm-anim-duration, 0.18s) ease,
		visibility 0s linear var(--mm-anim-duration, 0.18s);
}

/* Invisible hover bridge: keeps :hover alive while the cursor crosses the gap between the
   trigger and the panel, so a slow downward move doesn't close the panel. */
.menu-item-has-mega-menu > .mega-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -18px;
	height: 18px;
}

/* Open on hover or keyboard focus. In click-to-open mode the extension JS adds
   .mm-trigger-click to the parent, which suppresses the hover branch so only a
   click (→ .is-open) or keyboard focus opens the panel. */
.menu-item-has-mega-menu:not(.mm-trigger-click):hover > .mega-menu,
.menu-item-has-mega-menu:focus-within > .mega-menu,
.menu-item-has-mega-menu.is-open > .mega-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	/* Open delay = hover-intent approximation (Header → Mega Menu → Hover Delay). */
	transition-delay: var(--mm-open-delay, 0s);
}

/* Full-width (viewport) panel. position:fixed spans the viewport edge-to-edge; frontend.js sets
   `top` to the trigger's bottom so it sits right under the menu bar (theme-agnostic — no hard-coded
   header height). Side padding insets the columns; the row is capped + centred so columns don't
   stretch on ultra-wide screens. This is what makes a real multi-column mega panel. */
.menu-item-has-mega-menu > .mega-menu.mega-menu-full {
	position: fixed;
	top: auto;
	/* Var-driven so the theme can switch full-width panels between "edge to edge"
	   (defaults below: full-bleed) and "boxed" (a centered card with side margins:
	   --mm-full-inset > 0, --mm-full-max = cap, --mm-full-mx = auto). */
	left: var(--mm-full-inset, 0);
	right: var(--mm-full-inset, 0);
	width: auto;
	max-width: var(--mm-full-max, 100%);
	margin-left: var(--mm-full-mx, 0);
	margin-right: var(--mm-full-mx, 0);
	padding-left: var(--mm-full-pad, clamp(16px, 6vw, 96px));
	padding-right: var(--mm-full-pad, clamp(16px, 6vw, 96px));
}

.mega-menu.mega-menu-full > .mega-menu-row {
	max-width: var(--mm-panel-max-width, 1400px);
	margin-left: auto;
	margin-right: auto;
}

/* Host-theme dropdown NEUTRALIZER (critical).
   The mega panel's own content lives in <ul class="sub-menu …"> elements (the
   row, and each column's link list). Many themes ship a generic closed-dropdown
   rule for nested menu <ul>s — e.g. `.primary-menu li ul { position:absolute;
   opacity:0; visibility:hidden }` — which ALSO matches these internal sub-menus
   and keeps the panel empty even while it's "open". Force them back into normal
   flow and let their visibility/opacity follow the PANEL (via inherit) so the
   closed state still hides everything. !important is warranted: we're overriding
   an unknown host theme's dropdown CSS. */
.menu-item-has-mega-menu > .mega-menu .sub-menu {
	position: static !important;
	inset: auto !important;
	float: none !important;
	opacity: 1 !important;
	visibility: inherit !important;
	transform: none !important;
	box-shadow: none !important;
	background: transparent !important;
	min-width: 0 !important;
	max-height: none !important;
	pointer-events: inherit !important;
	transition: none !important;
}
.menu-item-has-mega-menu > .mega-menu .mega-menu-col > .sub-menu {
	display: block !important;
}

/* A row of columns */
.mega-menu .mega-menu-row {
	display: flex !important;
	flex-wrap: wrap;
	gap: var(--mm-col-gap, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mega-menu .mega-menu-row + .mega-menu-row {
	margin-top: 16px;
}

/* Columns — keep a readable minimum width so multi-column panels wrap instead of
   collapsing to near-zero (which made long titles overflow and overlap neighbours). */
.mega-menu .mega-menu-col {
	flex: 1 1 var(--mm-col-min, 170px);
	min-width: var(--mm-col-min, 170px);
	list-style: none;
	box-sizing: border-box;
}

/* Optional column dividers (Header → Mega Menu → "Column Dividers"). Off by
   default: --mm-col-divider is `0 solid transparent`, so the border is invisible
   and adds no gutter until the theme sets a real width/color. */
.mega-menu .mega-menu-row > .mega-menu-col + .mega-menu-col {
	border-left: var(--mm-col-divider, 0 solid transparent);
	padding-left: var(--mm-col-divider-pad, 0);
}

.mega-menu .mega-menu-col > .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Column heading — the column's own (first) link, emphasised above its items.
   Treatments (underline / accent / uppercase) ride the --mm-heading-* tokens the
   theme's "Header → Mega Menu → Column Headings" settings feed; all default to a
   no-op so the plain bold heading is unchanged until customized. */
.mega-menu .mega-menu-col > a {
	display: inline-block;
	margin-bottom: 6px;
	font-size: var(--mm-heading-size, 1.125rem);
	font-weight: var(--mm-heading-weight, 700);
	color: var(--mm-heading-color, inherit);
	text-transform: var(--mm-heading-transform, none);
	letter-spacing: var(--mm-heading-spacing, normal);
	padding-bottom: var(--mm-heading-pad-bottom, 0);
	border-bottom: var(--mm-heading-border, 0 solid transparent);
}

/* Dropdown items (the column's sub-menu links) + their descriptions. Colors/size
   default to `inherit` so nothing changes until the theme settings set them. */
.mega-menu .mega-menu-col > .sub-menu a {
	color: var(--mm-item-color, inherit);
	font-size: var(--mm-item-size, inherit);
	transition: color 0.15s ease;
}
.mega-menu .mega-menu-col > .sub-menu a:hover,
.mega-menu .mega-menu-col > .sub-menu .current-menu-item > a {
	color: var(--mm-item-hover-color, inherit);
}
/* Vertical rhythm between items — additive margin (default 0), never removes
   existing padding. */
.mega-menu .mega-menu-col > .sub-menu > li + li {
	margin-top: var(--mm-item-gap, 0);
}
/* Item description (from the menu item's Description field). Smaller + muted by
   default so it reads as secondary text beneath the link. */
.mega-menu .mega-menu-desc {
	font-size: var(--mm-desc-size, 0.85em);
	color: var(--mm-desc-color, inherit);
	opacity: 0.85;
}

/* Column width presets (mm-col-<width> from the "Settings" modal).
   Widths are GAP-AWARE: for a fraction a/b in a b-slot row with gap G, the exact
   basis is (a*100% - (b-a)*G) / b — so any --mm-col-gap value fits without wrapping. */
.mega-menu .mega-menu-col.mm-col-1-2 { flex: 0 0 calc((100% - 1 * var(--mm-col-gap, 24px)) / 2); max-width: calc((100% - 1 * var(--mm-col-gap, 24px)) / 2); }
.mega-menu .mega-menu-col.mm-col-1-3 { flex: 0 0 calc((100% - 2 * var(--mm-col-gap, 24px)) / 3); max-width: calc((100% - 2 * var(--mm-col-gap, 24px)) / 3); }
.mega-menu .mega-menu-col.mm-col-2-3 { flex: 0 0 calc((200% - 1 * var(--mm-col-gap, 24px)) / 3); max-width: calc((200% - 1 * var(--mm-col-gap, 24px)) / 3); }
.mega-menu .mega-menu-col.mm-col-1-4 { flex: 0 0 calc((100% - 3 * var(--mm-col-gap, 24px)) / 4); max-width: calc((100% - 3 * var(--mm-col-gap, 24px)) / 4); }
.mega-menu .mega-menu-col.mm-col-3-4 { flex: 0 0 calc((300% - 1 * var(--mm-col-gap, 24px)) / 4); max-width: calc((300% - 1 * var(--mm-col-gap, 24px)) / 4); }
.mega-menu .mega-menu-col.mm-col-1-5 { flex: 0 0 calc((100% - 4 * var(--mm-col-gap, 24px)) / 5); max-width: calc((100% - 4 * var(--mm-col-gap, 24px)) / 5); }
.mega-menu .mega-menu-col.mm-col-1-6 { flex: 0 0 calc((100% - 5 * var(--mm-col-gap, 24px)) / 6); max-width: calc((100% - 5 * var(--mm-col-gap, 24px)) / 6); }
/* Explicit fractions shouldn't inherit the auto column's min-width floor. */
.mega-menu .mega-menu-col[class*="mm-col-"]:not(.mm-col-auto) { min-width: 0; }

/* Column alignment */
.mega-menu .mega-menu-col.mm-col-align-left   { text-align: left; }
.mega-menu .mega-menu-col.mm-col-align-center { text-align: center; }
.mega-menu .mega-menu-col.mm-col-align-right  { text-align: right; }

/* Icon spacing when a sub-menu has icons */
/* Item / trigger icon (rendered as a leading <i class="mega-menu-icon …">).
   Fixed-width box so labels line up regardless of each glyph's intrinsic width. */
.mega-menu-icon {
	display: inline-block;
	width: 1.25em;
	margin-right: 8px;
	text-align: center;
	font-size: var(--mm-icon-size, inherit);
	color: var(--mm-icon-color, inherit);
	line-height: inherit;
	vertical-align: baseline;
}
/* Icon Position: Right — icon after the label. */
.mega-menu a.mm-ipos-right .mega-menu-icon {
	margin-right: 0;
	margin-left: 8px;
}
/* An icon used as an <img> (custom-upload / svg icon-v2 types) sizes to text. */
.mega-menu-icon img,
img.mega-menu-icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	object-fit: contain;
}
/* Icon Position: Stacked-left — a larger icon boxed on the left, vertically
   centered against the title + subtitle (reuses the media flex row). */
.mega-menu-item-iconbox {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2em;
	height: 2.2em;
	font-size: 1.15em;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.05);
}
.mega-menu-item-iconbox .mega-menu-icon {
	width: auto;
	margin: 0;
}
.sub-menu-has-icons .menu-item-has-icon > a [class^="fa-"],
.sub-menu-has-icons .menu-item-has-icon > a [class*=" fa-"],
.sub-menu-has-icons .menu-item-has-icon > a > .fa {
	margin-right: 8px;
	font-size: var(--mm-icon-size, inherit);
	color: var(--mm-icon-color, inherit);
}

/* Per-item image (thumbnail) + subtitle. The !important on display defends the
   flex row against host-theme rules that force menu links to display:block
   (which would stack the thumbnail above the text and drop the subtitle to full
   width). With flex, the thumbnail sits beside a text body; the subtitle (a
   block) then stacks under the title inside that body. */
.menu-item-has-mega-menu > .mega-menu .sub-menu a.mega-menu-item--media {
	display: flex !important;
	align-items: center;
	gap: 12px;
}
.mega-menu-item-img {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	object-fit: cover;
	border-radius: 6px;
}
.mega-menu-item-body {
	min-width: 0;
	flex: 1 1 auto;
}
/* Stacked-right: the boxed icon sits at the right edge (body fills the space). */
.mega-menu a.mega-menu-item--media.mm-iconbox-right .mega-menu-item-iconbox {
	margin-left: auto;
}
.mega-menu-subtitle {
	display: block;
	font-size: 0.8em;
	line-height: 1.3;
	opacity: 0.7;
	font-weight: 400;
}

/* Column content types (image / rich content / widget / raw) */
.mega-menu-content {
	margin-top: 4px;
}
.mega-menu-content--rich {
	font-size: 0.9em;
	line-height: 1.5;
}
.mega-menu-content--rich > :first-child { margin-top: 0; }
.mega-menu-content--rich > :last-child  { margin-bottom: 0; }
.mega-menu-image {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--mm-panel-radius, 0);
}
/* Image content COLUMNS render as uniform cards (crop to a consistent ratio) so
   mixed-aspect source images don't blow the panel height out. */
.mega-menu-content--image .mega-menu-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	height: auto;
}
.mega-menu-image-link {
	display: block;
	overflow: hidden;
	border-radius: var(--mm-panel-radius, 0);
}
.mega-menu-image-link .mega-menu-image {
	transition: transform 0.25s ease;
}
.mega-menu-image-link:hover .mega-menu-image {
	transform: scale(1.04);
}
.mega-menu-content--widget .widget { margin-bottom: 12px; }
.mega-menu-content--widget .widget:last-child { margin-bottom: 0; }

/* Item badge */
.mega-menu-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	font-size: 11px;
	line-height: 1.6;
	font-weight: 600;
	color: #fff;
	background: #e02b51;
	border-radius: 999px;
	vertical-align: middle;
}

/* Mobile toggle button (hidden on desktop, hover drives the panel there) */
.mega-menu-toggle {
	display: none;
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	vertical-align: middle;
}

.mega-menu-toggle > span {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 0.18s ease;
}

.menu-item-has-mega-menu.is-open > .mega-menu-toggle > span {
	transform: rotate(-135deg);
}

/* Mobile: stack columns and switch the panel in-flow (toggle via .is-open) */
@media (max-width: 782px) {
	.mega-menu-toggle {
		display: inline-block;
	}

	.menu-item-has-mega-menu > .mega-menu {
		position: static;
		width: auto;
		min-width: 0;
		box-shadow: none;
		border: 0;
		padding: 8px 0 8px 16px;
		opacity: 1;
		visibility: hidden;
		transform: none;
		display: none;
	}

	.menu-item-has-mega-menu.is-open > .mega-menu {
		display: block;
		visibility: visible;
	}

	/* Hover should not open on touch screens; rely on .is-open instead */
	.menu-item-has-mega-menu:hover > .mega-menu {
		display: none;
	}

	.menu-item-has-mega-menu.is-open:hover > .mega-menu {
		display: block;
	}

	/* Stacked layout — vars let the theme's "Header → Mega Menu → Responsive"
	   settings switch to a 2-up grid, retune the gap, and hide space-hungry bits
	   on small screens. (Media-query CONDITIONS can't read vars, but declaration
	   VALUES inside one can — so the ≤782px breakpoint is fixed while the layout
	   within it is fully token-driven.) */
	.mega-menu .mega-menu-row {
		flex-direction: var(--mm-mobile-dir, column);
		gap: var(--mm-mobile-gap, 8px);
	}

	.mega-menu .mega-menu-col,
	.mega-menu .mega-menu-col[class*="mm-col-"] {
		flex: 1 1 var(--mm-mobile-col-basis, 100%);
		max-width: var(--mm-mobile-col-max, 100%);
	}

	/* Space-saving toggles (default: show). */
	.mega-menu .mega-menu-desc {
		display: var(--mm-mobile-desc-display, block);
	}
	.mega-menu .menu-item-has-icon > a [class^="fa-"],
	.mega-menu .menu-item-has-icon > a [class*=" fa-"],
	.mega-menu .menu-item-has-icon > a > .fa {
		display: var(--mm-mobile-icon-display, inline-block);
	}
}

@media (prefers-reduced-motion: reduce) {
	.menu-item-has-mega-menu > .mega-menu,
	.mega-menu-toggle > span {
		transition: none;
	}
}