/* ───────────────────────────────────────────────
 * FDM Desktop Mega Menu
 *
 * All knobs below come from CSS variables emitted by
 * fdm_menu_css_vars(). Hard-coded values are fallbacks only.
 *
 *   .fdm-mega__card   — compact floating card (≤ compact_threshold items)
 *   .fdm-mega__panel  — full-width mega panel  (> threshold / columns)
 *
 * Breakpoint for hide-on-mobile / show-on-desktop is NOT a CSS variable
 * (can't use variables in @media queries in current CSS); the mobile-side
 * breakpoint is enforced by the inline trigger stylesheet and body classes.
 * ─────────────────────────────────────────────── */

/* Breakpoint-dependent hide/show and header-replace rules are emitted
 * inline by fdm_menu_css_vars() so they can honor the settings breakpoint
 * (CSS @media rules can't read CSS variables). */


/* ══════════════════════════════════════════════
 * Shell
 * ══════════════════════════════════════════════ */
.fdm-mega {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: var(--fdm-mega-z, 99999);
	font-family: var(--fdm-mega-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	transition: background 0.25s ease, box-shadow 0.25s ease;
}
:is(body, .fdm-menu-preview):not(.fdm-mega-sticky) .fdm-mega {
	position: absolute;
}
body.admin-bar .fdm-mega { top: 32px; }


/* ══════════════════════════════════════════════
 * Bar
 * ══════════════════════════════════════════════ */
.fdm-mega__bar {
	background: var(--fdm-mega-header-bg, #fff);
	border-bottom: 1px solid var(--fdm-mega-header-border, #ebe8e3);
	position: relative;
	z-index: 3;
	transition: background 0.25s ease, border-color 0.25s ease, height 0.25s ease;
}
.fdm-mega__inner {
	display: flex;
	align-items: center;
	max-width: var(--fdm-mega-max-w, 1440px);
	margin: 0 auto;
	padding: 0 var(--fdm-mega-pad-h, 48px);
	height: var(--fdm-mega-h, 80px);
	transition: height 0.25s ease, padding 0.25s ease;
}

/* Shrink on scroll */
:is(body, .fdm-menu-preview).fdm-mega-shrinkable.fdm-mega-scrolled .fdm-mega__inner {
	height: var(--fdm-mega-shrink-h, 60px);
}
body.fdm-mega-shrinkable.fdm-mega-scrolled.fdm-mega-replace-divi #page-container {
	padding-top: var(--fdm-mega-shrink-h, 60px) !important;
}

/* Transparent-over-hero */
:is(body, .fdm-menu-preview).fdm-mega-transparent-top:not(.fdm-mega-scrolled) .fdm-mega__bar {
	background: transparent;
	border-bottom-color: transparent;
}
:is(body, .fdm-menu-preview).fdm-mega-transparent-top:not(.fdm-mega-scrolled) .fdm-mega__nav-btn,
:is(body, .fdm-menu-preview).fdm-mega-transparent-top:not(.fdm-mega-scrolled) a.fdm-mega__nav-link,
:is(body, .fdm-menu-preview).fdm-mega-transparent-top:not(.fdm-mega-scrolled) .fdm-mega__site-name {
	color: var(--fdm-mega-transparent-color, #fff) !important;
}

/* Overlay mode: the .fdm-mega-header-transparent class is set by the
 * "Overlay" checkbox and is used by settings.php to skip the #page-container
 * top padding so the header overlays the hero. It intentionally does NOT
 * force the bar background to transparent — color + opacity handle that. */
:is(body, .fdm-menu-preview).fdm-mega-border-hidden .fdm-mega__bar {
	border-bottom-color: transparent !important;
}


/* ══════════════════════════════════════════════
 * Header Style preset: Floating pill
 *
 * Moves the visible styling from the full-width .fdm-mega__bar onto the
 * inner container, turning it into a centered, rounded, backdrop-blurred
 * capsule. Works best with a translucent dark Header Background color,
 * light Nav Text Color, and Overlay mode on so the pill sits over a hero.
 * ══════════════════════════════════════════════ */
:is(body, .fdm-menu-preview).fdm-mega-style-floating-pill .fdm-mega__bar {
	background: transparent !important;
	border-bottom: 0 !important;
	transition: none;
}
:is(body, .fdm-menu-preview).fdm-mega-style-floating-pill .fdm-mega__inner {
	max-width: min(var(--fdm-mega-max-w, 1100px), calc(100% - 32px));
	margin: 0 auto;
	padding-left: 28px;
	padding-right: 14px; /* right side hugs the CTA */
	border-radius: 999px;
	background: var(--fdm-mega-header-bg, rgba(20,20,20,0.55));
	-webkit-backdrop-filter: blur(var(--fdm-mega-backdrop-blur, 12px)) saturate(140%);
	backdrop-filter: blur(var(--fdm-mega-backdrop-blur, 12px)) saturate(140%);
	border: 1px solid rgba(255,255,255,0.08);
	box-shadow: 0 14px 40px -12px rgba(0,0,0,0.35);
}
/* The card dropdown's arrow + outline reads the header_border color, which
 * is the full-width bar's bottom border and is invisible in pill mode. Hide
 * the arrow so cards don't point at a non-existent bar edge. */
:is(body, .fdm-menu-preview).fdm-mega-style-floating-pill .fdm-mega__card::before {
	display: none;
}
/* Round the compact card normally (standard preset flattens its top because
 * it's anchored to the bar's bottom line — no bar line in pill mode). */
:is(body, .fdm-menu-preview).fdm-mega-style-floating-pill .fdm-mega__card {
	border-radius: 16px;
	margin-top: 12px;
}
/* Detached mega panel to match the pill: floats below with a visible gap,
 * rounded on all corners, centered, no top accent border. The existing
 * translateY-based open/close animation runs relative to this resting
 * position so no transform overrides are needed here. */
:is(body, .fdm-menu-preview).fdm-mega-style-floating-pill .fdm-mega__panel {
	top: calc(100% + 12px);
	left: 16px;
	right: 16px;
	max-width: min(var(--fdm-mega-max-w, 1440px), calc(100% - 32px));
	margin: 0 auto;
	border-top: 0;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 50px -12px rgba(0,0,0,0.25), 0 40px 80px -20px rgba(0,0,0,0.18);
}


/* ── Logo ── */
.fdm-mega__logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	text-decoration: none !important;
	margin-right: 40px;
}
.fdm-mega__logo-img {
	max-height: var(--fdm-mega-logo-max, 50px);
	width: auto;
	display: block;
	transition: max-height 0.25s ease, opacity 0.2s ease;
}
.fdm-mega__logo-img--scrolled {
	display: none;
}
:is(body, .fdm-menu-preview).fdm-mega-shrinkable.fdm-mega-scrolled .fdm-mega__logo-img:not(.fdm-mega__logo-img--scrolled) {
	display: none;
}
:is(body, .fdm-menu-preview).fdm-mega-shrinkable.fdm-mega-scrolled .fdm-mega__logo-img--scrolled {
	display: block;
}
.fdm-mega__site-name {
	font-size: 22px;
	font-weight: 700;
	color: var(--fdm-mega-text, #111);
}


/* ══════════════════════════════════════════════
 * Nav items
 * ══════════════════════════════════════════════ */
.fdm-mega__nav {
	display: flex;
	align-items: stretch;
	flex: 1;
	height: 100%;
	justify-content: var(--fdm-mega-nav-justify, center);
}

a.fdm-mega__nav-link {
	display: flex;
	align-items: center;
	padding: 0 16px;
	font-size: var(--fdm-mega-font-size, 15px);
	font-weight: var(--fdm-mega-font-weight, 500);
	color: var(--fdm-mega-text, #1a1a1a) !important;
	text-decoration: none !important;
	white-space: nowrap;
	letter-spacing: -0.005em;
	transition: color 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
a.fdm-mega__nav-link:hover { color: var(--fdm-mega-hover, #b5985a) !important; }

.fdm-mega__nav-item {
	display: flex;
	align-items: stretch;
	position: relative;
}

.fdm-mega__nav-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 16px;
	height: 100%;
	border: none;
	background: none;
	font-family: inherit;
	font-size: var(--fdm-mega-font-size, 15px);
	font-weight: var(--fdm-mega-font-weight, 500);
	color: var(--fdm-mega-text, #1a1a1a);
	cursor: pointer;
	white-space: nowrap;
	letter-spacing: -0.005em;
	transition: color 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fdm-mega__nav-btn:hover,
.fdm-mega__nav-item.fdm-mega--open .fdm-mega__nav-btn {
	color: var(--fdm-mega-hover, #b5985a);
}

.fdm-mega__chevron {
	flex-shrink: 0;
	opacity: 0.4;
	transition: transform 0.25s ease, opacity 0.15s;
}
.fdm-mega__nav-item.fdm-mega--open .fdm-mega__chevron {
	transform: rotate(180deg);
	opacity: 0.65;
}

/* Active-trigger underline */
.fdm-mega__nav-item.fdm-mega--open::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 16px; right: 16px;
	height: 2px;
	background: var(--fdm-mega-accent, #b5985a);
	border-radius: 2px 2px 0 0;
	z-index: 4;
}
:is(body, .fdm-menu-preview).fdm-mega-underline-hidden .fdm-mega__nav-item.fdm-mega--open::after {
	display: none;
}


/* ══════════════════════════════════════════════
 * CTA buttons
 * ══════════════════════════════════════════════ */
.fdm-mega__actions {
	flex-shrink: 0;
	margin-left: auto;
	padding-left: 24px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.fdm-mega__cta-btn {
	display: inline-flex;
	align-items: center;
	padding: 12px 32px;
	text-decoration: none !important;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.005em;
	border-radius: var(--fdm-mega-cta-radius, 100px);
	white-space: nowrap;
	transition:
		background 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
		color 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
		box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
		border-color 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
		transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
	border: 1px solid transparent;
	will-change: transform;
}
.fdm-mega__cta-btn--filled {
	background: var(--fdm-mega-cta-bg, var(--fdm-mega-accent, #b5985a));
	color: var(--fdm-mega-cta-text, #fff) !important;
	box-shadow:
		0 1px 2px rgba(40, 30, 15, 0.08),
		0 2px 6px -1px rgba(40, 30, 15, 0.10);
}
.fdm-mega__cta-btn--filled:hover {
	transform: translateY(-1px);
	box-shadow:
		0 2px 4px rgba(40, 30, 15, 0.10),
		0 8px 22px -6px rgba(40, 30, 15, 0.22);
}
.fdm-mega__cta-btn--filled:active {
	transform: translateY(0);
	box-shadow:
		0 1px 2px rgba(40, 30, 15, 0.10),
		0 2px 6px -2px rgba(40, 30, 15, 0.14);
	transition-duration: 80ms;
}
.fdm-mega__cta-btn--outline {
	background: transparent;
	color: var(--fdm-mega-cta-bg, var(--fdm-mega-accent, #b5985a)) !important;
	border-color: var(--fdm-mega-cta-bg, var(--fdm-mega-accent, #b5985a));
}
.fdm-mega__cta-btn--outline:hover {
	background: var(--fdm-mega-cta-bg, var(--fdm-mega-accent, #b5985a));
	color: var(--fdm-mega-cta-text, #fff) !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px -6px rgba(40, 30, 15, 0.22);
}
.fdm-mega__cta-btn--outline:active {
	transform: translateY(0);
	transition-duration: 80ms;
}
.fdm-mega__cta-btn--ghost {
	background: transparent;
	color: var(--fdm-mega-cta-bg, var(--fdm-mega-accent, #b5985a)) !important;
}
.fdm-mega__cta-btn--ghost:hover {
	background: rgba(40, 30, 15, 0.045);
}
.fdm-mega__cta-btn--ghost:active {
	background: rgba(40, 30, 15, 0.075);
	transition-duration: 80ms;
}
.fdm-mega__cta-btn--pill    { border-radius: 100px; }
.fdm-mega__cta-btn--rounded { border-radius: 8px; }
.fdm-mega__cta-btn--square  { border-radius: 0; }


/* ══════════════════════════════════════════════
 * Compact card  (≤ threshold items)
 * ══════════════════════════════════════════════ */
.fdm-mega__card {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 280px;
	background: var(--fdm-mega-card-bg, #faf9f6);
	border: 1px solid var(--fdm-mega-header-border, #ebe8e3);
	border-radius: 0 0 16px 16px;
	box-shadow: var(--fdm-mega-shadow, 0 4px 6px rgba(40, 30, 15, 0.04), 0 12px 32px -4px rgba(40, 30, 15, 0.10));
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity var(--fdm-mega-anim-dur, 200ms) cubic-bezier(0.2, 0.8, 0.2, 1),
		transform var(--fdm-mega-anim-dur, 200ms) cubic-bezier(0.2, 0.8, 0.2, 1),
		visibility 0s var(--fdm-mega-anim-dur, 200ms);
	z-index: 10;
}
.fdm-mega__card::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 10px; height: 10px;
	background: var(--fdm-mega-card-bg, #faf9f6);
	border-top: 1px solid var(--fdm-mega-header-border, #ebe8e3);
	border-left: 1px solid var(--fdm-mega-header-border, #ebe8e3);
	border-radius: 2px 0 0 0;
}
.fdm-mega__nav-item.fdm-mega--open .fdm-mega__card {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
	transition:
		opacity var(--fdm-mega-anim-dur, 200ms) cubic-bezier(0.2, 0.8, 0.2, 1),
		transform var(--fdm-mega-anim-dur, 200ms) cubic-bezier(0.2, 0.8, 0.2, 1),
		visibility 0s 0s;
}

/* Card links */
.fdm-mega__card-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	font-size: var(--fdm-mega-card-font-size, 15px);
	font-weight: var(--fdm-mega-card-font-weight, 500);
	color: var(--fdm-mega-card-text, var(--fdm-mega-text, #1a1a1a)) !important;
	text-decoration: none !important;
	border-radius: 10px;
	transition: background 0.15s, color 0.15s;
}
.fdm-mega__card-link:hover {
	background: rgba(0,0,0,0.04);
	color: var(--fdm-mega-card-hover, var(--fdm-mega-hover, #8b7440)) !important;
}
.fdm-mega__card-label { flex: 1; }
.fdm-mega__card-arrow {
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.15s, transform 0.15s;
	color: var(--fdm-mega-accent, #b5985a);
	font-size: 14px;
}
.fdm-mega__card-link:hover .fdm-mega__card-arrow {
	opacity: 0.7;
	transform: translateX(0);
}


/* ══════════════════════════════════════════════
 * Full-width mega panel
 * ══════════════════════════════════════════════ */
.fdm-mega__panel {
	position: absolute;
	top: 100%;
	left: 0; right: 0;
	background: var(--fdm-mega-panel-bg, #f5f2ec);
	border-top: 2px solid var(--fdm-mega-panel-border, #b5985a);
	box-shadow: var(--fdm-mega-panel-shadow, 0 12px 24px -6px rgba(40, 30, 15, 0.06), 0 28px 60px -16px rgba(40, 30, 15, 0.10));
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-8px);
	transition:
		opacity var(--fdm-mega-anim-dur, 220ms) cubic-bezier(0.2, 0.8, 0.2, 1),
		transform var(--fdm-mega-anim-dur, 220ms) cubic-bezier(0.2, 0.8, 0.2, 1),
		visibility 0s var(--fdm-mega-anim-dur, 220ms);
	z-index: 1;
	max-height: var(--fdm-mega-panel-max-vh, 80vh);
	overflow-y: auto;
	scroll-behavior: smooth;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(40, 30, 15, 0.18) transparent;
}
.fdm-mega__panel::-webkit-scrollbar { width: 10px; }
.fdm-mega__panel::-webkit-scrollbar-track { background: transparent; }
.fdm-mega__panel::-webkit-scrollbar-thumb {
	background: rgba(40, 30, 15, 0.16);
	border-radius: 10px;
	border: 3px solid transparent;
	background-clip: padding-box;
}
.fdm-mega__panel::-webkit-scrollbar-thumb:hover {
	background: rgba(40, 30, 15, 0.28);
	background-clip: padding-box;
}
body.admin-bar .fdm-mega__panel {
	max-height: calc(var(--fdm-mega-panel-max-vh, 80vh) - 32px);
}
.fdm-mega__panel.fdm-mega--open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition:
		opacity var(--fdm-mega-anim-dur, 220ms) cubic-bezier(0.2, 0.8, 0.2, 1),
		transform var(--fdm-mega-anim-dur, 220ms) cubic-bezier(0.2, 0.8, 0.2, 1),
		visibility 0s 0s;
}

/* Slide-animation variant */
:is(body, .fdm-menu-preview).fdm-mega-anim-slide .fdm-mega__panel { transform: translateY(-16px); }
:is(body, .fdm-menu-preview).fdm-mega-anim-slide .fdm-mega__panel.fdm-mega--open { transform: translateY(0); }
:is(body, .fdm-menu-preview).fdm-mega-anim-none  .fdm-mega__panel,
:is(body, .fdm-menu-preview).fdm-mega-anim-none  .fdm-mega__card { transition: none !important; }

/* Two-zone layout: links + featured card.
 * align-items: center so asymmetric pairs (short video card next to
 * tall feature card) share a visual baseline instead of top-anchoring.
 * This is NOT "stretch" — items keep their natural height, they just
 * sit on a common y-axis. No risk of the feature card ballooning to
 * fill an oversized link list. */
.fdm-mega__panel-body {
	display: flex;
	/* Top-align so the column dividers and the feature panel share a
	 * baseline regardless of how tall the columns get. Centering only
	 * looked balanced when column height happened to match feature
	 * height; on tall menus the feature would float down past the
	 * dividers and read as misaligned. */
	align-items: flex-start;
	max-width: var(--fdm-mega-max-w, 1400px);
	margin: 0 auto;
	padding: 28px var(--fdm-mega-pad-h, 48px) 32px;
	gap: 56px;
}
/* Per-item override: feature column on the left instead of the right. */
.fdm-mega__panel-body--feature-left { flex-direction: row-reverse; }
.fdm-mega__panel-main {
	flex: 1;
	min-width: 0;
}

/* ── Featured zone (right side) ──
 * One-or-more featured panels, stacked vertically. Each panel can optionally
 * show an image on the left; text block stays fluid next to it. */
.fdm-mega__panel-feature {
	flex-shrink: 0;
	/* 300px gives enough inner width for common 2-3-word serif titles at
	 * 32px + tight tracking to sit on a single line (e.g. "What are funds?").
	 * text-wrap: balance on the title still handles longer headlines gracefully. */
	width: 300px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* On wide viewports the panel hits its max-width and .fdm-mega__panel-main
 * (flex:1) absorbs all leftover horizontal space, stretching the columns
 * grid past what its content needs. Letting the feature grow a bit pulls
 * that dead space into the card instead — kept modest (max 380) so the
 * three link columns still get ~285px of track width each, enough for
 * labels like "Adoption & Foster Care Crisis" to stay on one line. */
@media (min-width: 1400px) {
	.fdm-mega__panel-feature {
		flex: 1 1 300px;
		width: auto;
		max-width: 380px;
	}
}
.fdm-mega__feature-panel {
	display: flex;
	gap: 16px;
	align-items: stretch;
	background: var(--fdm-mega-feature-bg, #ece5d6);
	border-radius: 16px;
	overflow: hidden;
}
.fdm-mega__feature-panel--with-image {
	/* Image left, text right — double the default width for breathing room. */
	width: 520px;
}
.fdm-mega__feature-image {
	flex: 0 0 200px;
	align-self: stretch;
	background: rgba(0,0,0,0.04);
	overflow: hidden;
}
.fdm-mega__feature-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.fdm-mega__feature-inner {
	flex: 1;
	background: transparent;
	border-radius: 0;
	padding: 26px 28px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* When a panel has no image, it fills its own card (legacy single-panel behavior). */
.fdm-mega__feature-panel:not(.fdm-mega__feature-panel--with-image) .fdm-mega__feature-inner {
	width: 100%;
}
.fdm-mega__feature-eyebrow {
	display: block;
	font-family: var(--fdm-mega-feature-eyebrow-font, inherit);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--fdm-mega-feature-eyebrow-color, #9a8a6c);
	margin-bottom: 8px;
}
.fdm-mega__feature-title {
	font-family: var(--fdm-mega-feature-title-font, Georgia, "Times New Roman", Times, serif);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.15;
	color: var(--fdm-mega-feature-title-color, #2a2318);
	margin: 0;
	letter-spacing: -0.015em;
	text-wrap: balance;
}
.fdm-mega__feature-body {
	font-family: var(--fdm-mega-feature-body-font, inherit);
	font-size: 13px;
	line-height: 1.6;
	color: var(--fdm-mega-feature-body-color, #5a5144);
	margin: -8px 0 20px;
	text-wrap: pretty;
}
.fdm-mega__feature-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--fdm-mega-feature-body-font, inherit);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--fdm-mega-accent, #b5985a) !important;
	text-decoration: none !important;
	/* No top margin — the title's (or body's) margin-bottom defines the
	 * spacing, so title→CTA is a single 20px gap, not 20+20=40. */
	margin-top: 0;
	align-self: flex-start;
	transition:
		color 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
		gap 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
	position: relative;
	padding-bottom: 2px;
}
.fdm-mega__feature-cta::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: 100%;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
	opacity: 0.45;
}
.fdm-mega__feature-cta:hover {
	gap: 10px;
}
.fdm-mega__feature-cta:hover::after {
	transform: scaleX(1);
}
.fdm-mega__feature-line {
	width: 48px;
	height: 2px;
	background: var(--fdm-mega-accent, #b5985a);
	border-radius: 2px;
	margin-top: 0;
}


/* ── Backdrop ──
 * Blurs page content behind the open dropdown. Uses backdrop-filter so the
 * blur is compositor-accelerated and doesn't touch the page DOM. Covers the
 * viewport while any dropdown (compact card OR mega panel) is open. */
.fdm-mega__backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,var(--fdm-mega-backdrop-op, 0.1));
	-webkit-backdrop-filter: blur(var(--fdm-mega-backdrop-blur, 8px));
	backdrop-filter: blur(var(--fdm-mega-backdrop-blur, 8px));
	z-index: -1;
	transition: opacity 0.2s ease;
}
.fdm-mega.fdm-mega--panel-open .fdm-mega__backdrop,
.fdm-mega.fdm-mega--card-open  .fdm-mega__backdrop {
	display: block;
}


/* ══════════════════════════════════════════════
 * Grid links
 * ══════════════════════════════════════════════ */
.fdm-mega__grid-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	font-size: var(--fdm-mega-card-font-size, 15px);
	font-weight: var(--fdm-mega-card-font-weight, 500);
	color: var(--fdm-mega-card-text, #2a2318) !important;
	text-decoration: none !important;
	background: transparent;
	border: 0;
	border-radius: 8px;
	transition: background 0.15s, color 0.15s;
	line-height: 1.35;
}
.fdm-mega__grid-link > span:first-child { flex: 1; }
.fdm-mega__grid-link:hover {
	background: rgba(0,0,0,0.04);
	color: var(--fdm-mega-card-hover, var(--fdm-mega-hover, #8b7440)) !important;
}

.fdm-mega__arrow {
	flex-shrink: 0;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.15s, transform 0.15s;
	color: var(--fdm-mega-accent, #b5985a);
	font-size: 14px;
}
.fdm-mega__grid-link:hover .fdm-mega__arrow {
	opacity: 0.7;
	transform: translateX(0);
}


/* ══════════════════════════════════════════════
 * Auto-grid layout
 * ══════════════════════════════════════════════ */
.fdm-mega__panel-grid {
	display: grid;
	grid-template-columns: repeat(var(--fdm-mega-grid-cols, 3), 1fr);
	gap: 8px;
}

/* When the grid contains image-card children, auto-fit the columns to the
 * actual item count so 2 cards don't stretch across 3 wide tracks (which
 * leaves an empty cell). Minimum card width keeps images readable. */
.fdm-mega__panel-grid--cards {
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 20px;
}


/* ══════════════════════════════════════════════
 * Explicit columns
 * ══════════════════════════════════════════════ */
.fdm-mega__panel-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px 32px;
}
/* Mixed panels ONLY when a feature zone is present:
 * text columns + video/image card column + feature sidebar is where the
 * default equal-1fr grid squeezes the card too small. Switch to flex so
 * text columns shrink to their content width and the card column claims
 * leftover space. Panels without a feature zone (all-cards panels like
 * Video Stories) stay on the grid layout so cards can use full panel
 * width — otherwise they'd get capped and leave dead space on the right. */
.fdm-mega__panel-body:has(.fdm-mega__panel-feature .fdm-mega__feature-panel) .fdm-mega__panel-columns:has(.fdm-mega__grid-link--card) {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}
.fdm-mega__panel-body:has(.fdm-mega__panel-feature .fdm-mega__feature-panel) .fdm-mega__panel-columns:has(.fdm-mega__grid-link--card) > .fdm-mega__col {
	flex: 0 1 auto;
	min-width: 180px;
	max-width: 260px;
}
.fdm-mega__panel-body:has(.fdm-mega__panel-feature .fdm-mega__feature-panel) .fdm-mega__panel-columns:has(.fdm-mega__grid-link--card) > .fdm-mega__col:has(.fdm-mega__grid-link--card) {
	flex: 1 1 320px;
	min-width: 320px;
	max-width: 440px;
}
.fdm-mega__col-heading {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
	color: var(--fdm-mega-col-heading-color, #8a7a5c);
	margin: 0 0 10px;
	padding: 0 18px 10px;
	border-bottom: 1px solid var(--fdm-mega-col-divider-color, rgba(40, 30, 15, 0.08));
}
/* Empty heading — keep the divider line and height so columns line up. */
.fdm-mega__col-heading--empty {
	color: transparent;
	user-select: none;
}
.fdm-mega__col .fdm-mega__grid-link {
	padding: 9px 18px;
}

/* Card variant — image on top, title below (Athleats-style article tile). */
.fdm-mega__grid-link--card {
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	padding: 0;
	border-radius: 12px;
	background: transparent;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.15s;
}
.fdm-mega__grid-link--card:hover {
	background: transparent;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -6px rgba(0,0,0,0.12);
}
.fdm-mega__grid-link-image {
	display: block;
	aspect-ratio: 16 / 9;
	background: rgba(0,0,0,0.04);
	border-radius: 10px;
	overflow: hidden;
}
.fdm-mega__grid-link-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.fdm-mega__grid-link--card:hover .fdm-mega__grid-link-image img {
	transform: scale(1.03);
}
.fdm-mega__grid-link-label {
	padding: 0 4px 12px;
	font-size: var(--fdm-mega-card-font-size, 15px);
	font-weight: 600;
	line-height: 1.35;
	color: var(--fdm-mega-card-text, #2a2318);
}


/* ══════════════════════════════════════════════
 * Video cards — play-button overlay + lightbox
 * ══════════════════════════════════════════════ */
.fdm-mega__grid-link-image {
	position: relative;
}
/* Default: thumbnail shows clean, no overlay or play button. The whole
 * overlay layer (gradient + play ring) fades in on hover so the editorial
 * thumbnail reads first and the "this is a video" affordance arrives only
 * when the user signals intent. */
.fdm-mega__video-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.55) 100%);
	opacity: 0;
	transition: opacity 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
	pointer-events: none;
}
.fdm-mega__play-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: transparent;
	border: 3px solid #fff;
	color: #fff;
	box-shadow: none;
	transform: scale(0.88);
	transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fdm-mega__play-btn svg {
	width: 32px;
	height: 32px;
	margin-left: 4px; /* optical centering — play triangle is right-heavy */
}
.fdm-mega__grid-link--video:hover .fdm-mega__video-overlay {
	opacity: 1;
}
.fdm-mega__grid-link--video:hover .fdm-mega__play-btn {
	transform: scale(1);
}

/* Lightbox modal */
.fdm-mega-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0, 0, 0, 0.85);
	opacity: 0;
	transition: opacity 0.2s ease;
}
.fdm-mega-lightbox.is-open {
	opacity: 1;
}
.fdm-mega-lightbox__frame {
	position: relative;
	width: min(1080px, 100%);
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.fdm-mega-lightbox__frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.fdm-mega-lightbox__close {
	position: absolute;
	top: -44px;
	right: 0;
	width: 36px;
	height: 36px;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	opacity: 0.85;
	transition: opacity 0.15s ease;
}
.fdm-mega-lightbox__close:hover {
	opacity: 1;
}
body.fdm-mega-lightbox-open {
	overflow: hidden;
}


/* ══════════════════════════════════════════════
 * Link subtext (optional description under label)
 * ══════════════════════════════════════════════ */
.fdm-mega__link-text {
	display: block;
}
.fdm-mega__link-subtext {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--fdm-mega-card-subtext, rgba(42, 35, 24, 0.6));
}


/* ══════════════════════════════════════════════
 * Icons
 * ══════════════════════════════════════════════ */
.fdm-mega__icon,
.fdm-mega__nav-icon,
.fdm-mega__link-icon {
	flex-shrink: 0;
	vertical-align: middle;
}
.fdm-mega__nav-icon { width: 18px; height: 18px; margin-right: 4px; opacity: 0.6; }
.fdm-mega__link-icon { width: 16px; height: 16px; margin-right: 6px; opacity: 0.45; }
.fdm-mega__grid-link:hover .fdm-mega__link-icon,
.fdm-mega__card-link:hover .fdm-mega__link-icon { opacity: 0.7; }

/* PNG icons ship pre-colored (gold); recolor them to pure black by
 * zeroing brightness on visible pixels (alpha channel untouched). */
.fdm-mega__icon--img {
	opacity: 1 !important;
	object-fit: contain;
	display: inline-block;
	filter: brightness(0);
}


/* ══════════════════════════════════════════════
 * Tablet range
 * ══════════════════════════════════════════════ */
@media (min-width: 981px) and (max-width: 1280px) {
	.fdm-mega__inner {
		padding: 0 var(--fdm-mega-pad-h-tablet, 28px);
		height: var(--fdm-mega-h-tablet, 72px);
	}
	body.fdm-mega-active.fdm-mega-replace-divi #page-container {
		padding-top: var(--fdm-mega-h-tablet, 72px) !important;
	}
	a.fdm-mega__nav-link,
	.fdm-mega__nav-btn {
		padding: 0 11px;
		font-size: calc(var(--fdm-mega-font-size, 15px) - 1.5px);
	}
	.fdm-mega__cta-btn {
		padding: 10px 24px;
		font-size: 13px;
	}
	.fdm-mega__logo { margin-right: 20px; }
	.fdm-mega__logo-img { max-height: var(--fdm-mega-logo-max-tablet, 42px); }
	.fdm-mega__panel-body {
		padding: 32px var(--fdm-mega-pad-h-tablet, 28px) 36px;
		gap: 28px;
	}
	.fdm-mega__panel-feature { width: 260px; }
	.fdm-mega__feature-title { font-size: 26px; }
	.fdm-mega__panel-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 981px) and (max-width: 1080px) {
	a.fdm-mega__nav-link,
	.fdm-mega__nav-btn {
		padding: 0 8px;
		font-size: calc(var(--fdm-mega-font-size, 15px) - 2px);
	}
	.fdm-mega__logo { margin-right: 12px; }
	.fdm-mega__panel-feature { display: none; }
}


/* ══════════════════════════════════════════════
 * Focus states (accessibility)
 *
 * Keyboard-only focus indicators, inset so the ring stays inside the
 * bar/card without clipping. Uses the accent hue so it reads as brand.
 * ══════════════════════════════════════════════ */
.fdm-mega :is(a, button, [tabindex]):focus { outline: none; }

a.fdm-mega__nav-link:focus-visible,
.fdm-mega__nav-btn:focus-visible {
	color: var(--fdm-mega-hover, #b5985a);
	box-shadow: inset 0 0 0 2px var(--fdm-mega-accent, #b5985a);
	border-radius: 6px;
}
.fdm-mega__cta-btn:focus-visible {
	outline: 2px solid var(--fdm-mega-accent, #b5985a);
	outline-offset: 3px;
}
.fdm-mega__card-link:focus-visible,
.fdm-mega__grid-link:focus-visible {
	background: rgba(40, 30, 15, 0.05);
	box-shadow: inset 0 0 0 1.5px var(--fdm-mega-accent, #b5985a);
}
.fdm-mega__feature-cta:focus-visible::after {
	transform: scaleX(1);
	opacity: 0.9;
}
.fdm-mega__logo:focus-visible {
	outline: 2px solid var(--fdm-mega-accent, #b5985a);
	outline-offset: 4px;
	border-radius: 4px;
}


/* ══════════════════════════════════════════════
 * Mobile — hamburger trigger + full-screen drawer
 *
 * Below the configured breakpoint the desktop nav collapses out of the pill
 * and a hamburger trigger reveals a full-screen drawer that renders the
 * same items array — accordions for sections, sublabels under links, image
 * cards for video stories, and a per-section feature card. Aesthetic mirrors
 * the floating pill: dark translucent surface, gold accents, white type.
 *
 * Hide-by-default → show via @media so desktop is never affected. Drawer
 * is always emitted; visibility is gated through the .is-open class +
 * mobile media query, so the markup costs nothing visually on desktop.
 * ══════════════════════════════════════════════ */
.fdm-mega__mobile-trigger { display: none; }
.fdm-mega__mobile-drawer  { display: none; }

@media (max-width: 980px) {

	/* ── Pill bar in mobile: logo + hamburger (and CTA on wider phones). ── */
	.fdm-mega__inner {
		height: var(--fdm-mega-h-mobile, 64px);
		padding-left: 18px;
		padding-right: 6px;
		gap: 4px;
	}
	:is(body, .fdm-menu-preview).fdm-mega-style-floating-pill .fdm-mega__inner {
		padding-left: 22px;
		padding-right: 6px;
		max-width: calc(100% - 24px);
	}
	/* Solid (non-transparent) mobile header: the parent rule in fdm_menu_css_vars
	 * adds desktop-height top padding to #page-container. Override it to the
	 * mobile bar height so content doesn't slide underneath. Transparent /
	 * overlay configs already get zero padding from the gated parent rule. */
	body.fdm-mega-active.fdm-mega-replace-divi:not(.fdm-mega-header-transparent):not(.fdm-mega-transparent-top) #page-container {
		padding-top: 64px !important;
	}
	.fdm-mega__nav                        { display: none !important; }
	.fdm-mega__cta-btn--secondary         { display: none !important; }
	.fdm-mega__logo                       { margin-right: 0; flex: 0 0 auto; }
	.fdm-mega__logo-img                   { max-height: var(--fdm-mega-logo-mobile, 36px); }

	/* Primary CTA — hidden on small phones, compact pill on wider mobiles. */
	.fdm-mega__actions .fdm-mega__cta-btn:not(.fdm-mega__cta-btn--secondary) {
		display: none;
	}

	/* ── Hamburger trigger ── */
	.fdm-mega__mobile-trigger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		margin-left: 4px;
		background: transparent;
		border: 0;
		border-radius: 999px;
		cursor: pointer;
		color: var(--fdm-mega-transparent-color, var(--fdm-mega-text, #fff));
		-webkit-tap-highlight-color: transparent;
		transition: background 0.18s ease, transform 0.18s ease;
	}
	.fdm-mega__mobile-trigger:hover,
	.fdm-mega__mobile-trigger:focus-visible {
		background: rgba(255, 255, 255, 0.08);
	}
	.fdm-mega__mobile-trigger:focus-visible {
		outline: 2px solid var(--fdm-mega-accent, #b5985a);
		outline-offset: 2px;
	}
	.fdm-mega__mobile-trigger:active { transform: scale(0.94); }

	/* Three-line icon. Each span is positioned absolutely inside the
	 * 22×16 box so the X-state transform pivots correctly. */
	.fdm-mega__mobile-trigger-icon {
		position: relative;
		display: block;
		width: 22px;
		height: 16px;
	}
	.fdm-mega__mobile-trigger-icon span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background: currentColor;
		border-radius: 2px;
		transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
		            opacity 0.18s ease,
		            top 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
	}
	.fdm-mega__mobile-trigger-icon span:nth-child(1) { top: 0; }
	.fdm-mega__mobile-trigger-icon span:nth-child(2) { top: calc(50% - 1px); }
	.fdm-mega__mobile-trigger-icon span:nth-child(3) { top: calc(100% - 2px); }

	.fdm-mega__mobile-trigger[aria-expanded="true"] .fdm-mega__mobile-trigger-icon span:nth-child(1) {
		top: calc(50% - 1px);
		transform: rotate(45deg);
	}
	.fdm-mega__mobile-trigger[aria-expanded="true"] .fdm-mega__mobile-trigger-icon span:nth-child(2) {
		opacity: 0;
		transform: scaleX(0.4);
	}
	.fdm-mega__mobile-trigger[aria-expanded="true"] .fdm-mega__mobile-trigger-icon span:nth-child(3) {
		top: calc(50% - 1px);
		transform: rotate(-45deg);
	}

	/* ══════════════════════════════════════════════
	 * Drawer
	 * ══════════════════════════════════════════════ */
	.fdm-mega__mobile-drawer {
		display: block;
		position: fixed;
		inset: 0;
		z-index: calc(var(--fdm-mega-z, 99999) + 1);
		visibility: hidden;
		pointer-events: none;
		font-family: var(--fdm-mega-font-family, inherit);
	}
	.fdm-mega__mobile-drawer.is-open {
		visibility: visible;
		pointer-events: auto;
	}

	/* ── Backdrop layer (fades in) ── */
	.fdm-mega__mobile-drawer-bg {
		position: absolute;
		inset: 0;
		background: rgba(8, 8, 8, 0.55);
		-webkit-backdrop-filter: blur(10px) saturate(140%);
		backdrop-filter: blur(10px) saturate(140%);
		opacity: 0;
		transition: opacity 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
	}
	.fdm-mega__mobile-drawer.is-open .fdm-mega__mobile-drawer-bg { opacity: 1; }

	/* ── Panel layer (slides + fades) ──
	 * Sits over the backdrop; carries the dark translucent surface that
	 * mirrors the pill aesthetic. Inset 12px on all sides + rounded so it
	 * reads as a "card on top of a blurred page" rather than a hard wall. */
	.fdm-mega__mobile-drawer-panel {
		position: absolute;
		top: 12px;
		right: 12px;
		bottom: 12px;
		left: 12px;
		display: flex;
		flex-direction: column;
		background: rgba(14, 14, 14, 0.92);
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 22px;
		box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
		opacity: 0;
		transform: translateY(8px) scale(0.985);
		transition:
			opacity 0.30s cubic-bezier(0.2, 0.8, 0.2, 1),
			transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
		overflow: hidden;
		color: var(--fdm-mega-text, #fff);
	}
	.fdm-mega__mobile-drawer.is-open .fdm-mega__mobile-drawer-panel {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	body.admin-bar .fdm-mega__mobile-drawer-panel { top: 44px; }

	/* ── Drawer head (logo + close) ── */
	.fdm-mega__mobile-head {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 18px 18px 14px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	}
	.fdm-mega__mobile-logo-link {
		display: inline-flex;
		align-items: center;
		text-decoration: none !important;
	}
	.fdm-mega__mobile-logo {
		display: block;
		max-height: 36px;
		width: auto;
	}
	.fdm-mega__mobile-site-name {
		font-size: 18px;
		font-weight: 700;
		color: var(--fdm-mega-text, #fff);
	}
	.fdm-mega__mobile-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		background: rgba(255, 255, 255, 0.04);
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 999px;
		color: var(--fdm-mega-text, #fff);
		cursor: pointer;
		transition: background 0.15s ease, transform 0.18s ease, border-color 0.15s ease;
	}
	.fdm-mega__mobile-close:hover {
		background: rgba(255, 255, 255, 0.10);
		border-color: rgba(255, 255, 255, 0.14);
	}
	.fdm-mega__mobile-close:active { transform: scale(0.94); }
	.fdm-mega__mobile-close:focus-visible {
		outline: 2px solid var(--fdm-mega-accent, #b5985a);
		outline-offset: 2px;
	}

	/* ── Scroll body (the nav) ── */
	.fdm-mega__mobile-nav {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding: 6px 14px 14px;
		scrollbar-width: thin;
		scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
	}
	.fdm-mega__mobile-nav::-webkit-scrollbar { width: 8px; }
	.fdm-mega__mobile-nav::-webkit-scrollbar-track { background: transparent; }
	.fdm-mega__mobile-nav::-webkit-scrollbar-thumb {
		background: rgba(255, 255, 255, 0.14);
		border-radius: 8px;
		border: 2px solid transparent;
		background-clip: padding-box;
	}

	/* ── Top-level direct links ── */
	.fdm-mega__mobile-toplink {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 18px 8px;
		font-size: 18px;
		font-weight: 700;
		letter-spacing: -0.005em;
		color: var(--fdm-mega-text, #fff) !important;
		text-decoration: none !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
		transition: color 0.18s ease, padding 0.18s ease;
	}
	.fdm-mega__mobile-toplink:active { color: var(--fdm-mega-accent, #b5985a) !important; }
	.fdm-mega__mobile-toplink-arrow {
		display: inline-flex;
		opacity: 0.4;
		transition: transform 0.22s ease, opacity 0.18s ease;
		color: var(--fdm-mega-accent, #b5985a);
	}
	.fdm-mega__mobile-toplink:hover .fdm-mega__mobile-toplink-arrow {
		opacity: 1;
		transform: translateX(3px);
	}

	/* ── Section accordions ── */
	.fdm-mega__mobile-section {
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	}
	.fdm-mega__mobile-section-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		padding: 18px 8px;
		background: transparent;
		border: 0;
		font-family: inherit;
		font-size: 18px;
		font-weight: 700;
		letter-spacing: -0.005em;
		color: var(--fdm-mega-text, #fff);
		text-align: left;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: color 0.18s ease;
	}
	.fdm-mega__mobile-section-toggle:focus-visible {
		outline: 2px solid var(--fdm-mega-accent, #b5985a);
		outline-offset: 2px;
		border-radius: 6px;
	}
	.fdm-mega__mobile-section-chevron {
		display: inline-flex;
		opacity: 0.55;
		transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.18s ease;
		color: var(--fdm-mega-accent, #b5985a);
	}
	.fdm-mega__mobile-section-toggle[aria-expanded="true"] {
		color: var(--fdm-mega-accent, #b5985a);
	}
	.fdm-mega__mobile-section-toggle[aria-expanded="true"] .fdm-mega__mobile-section-chevron {
		transform: rotate(180deg);
		opacity: 1;
	}

	/* Section body — JS manages [hidden] removal + height for animation. */
	.fdm-mega__mobile-section-body {
		overflow: hidden;
		padding: 4px 0 14px;
	}
	.fdm-mega__mobile-section-body[hidden] {
		display: none;
	}

	/* ── Group inside a section (column → mobile group) ── */
	/* Gold hairline divider between consecutive groups so the editorial
	 * structure (e.g. "About Funds" → "Current Funds") reads as separate
	 * blocks instead of running together. Only between groups — no line
	 * above the first or below the last. */
	.fdm-mega__mobile-group + .fdm-mega__mobile-group {
		margin-top: 22px;
		padding-top: 22px;
		border-top: 1px solid var(--fdm-mega-accent, #b5985a);
	}
	.fdm-mega__mobile-group-heading {
		margin: 8px 0 6px;
		padding: 0 10px;
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.14em;
		color: var(--fdm-mega-accent, #b5985a);
		opacity: 0.78;
	}

	/* ── Sublinks ── */
	.fdm-mega__mobile-sublink {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 10px;
		text-decoration: none !important;
		color: var(--fdm-mega-text, #fff) !important;
		border-radius: 10px;
		transition: background 0.15s ease, padding 0.18s ease;
	}
	.fdm-mega__mobile-sublink:hover,
	.fdm-mega__mobile-sublink:active {
		background: rgba(255, 255, 255, 0.05);
	}
	.fdm-mega__mobile-sublink-icon {
		flex-shrink: 0;
		width: 18px;
		height: 18px;
		opacity: 0.7;
	}
	/* PNG icons render pre-colored gold and the desktop CSS recolors them to
	 * pure black via filter: brightness(0) — invisible on the dark drawer.
	 * Invert to white on mobile so they stay legible against the dark surface. */
	.fdm-mega__mobile-sublink .fdm-mega__icon--img {
		filter: brightness(0) invert(1) !important;
	}
	.fdm-mega__mobile-sublink:hover .fdm-mega__mobile-sublink-icon {
		opacity: 1;
	}
	.fdm-mega__mobile-sublink-text {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}
	.fdm-mega__mobile-sublink-label {
		font-size: 15.5px;
		font-weight: 600;
		line-height: 1.3;
		letter-spacing: -0.005em;
	}
	.fdm-mega__mobile-sublink-sub {
		font-size: 12.5px;
		font-weight: 400;
		line-height: 1.35;
		color: rgba(255, 255, 255, 0.55);
	}
	.fdm-mega__mobile-sublink-arrow {
		flex-shrink: 0;
		font-size: 14px;
		opacity: 0;
		color: var(--fdm-mega-accent, #b5985a);
		transform: translateX(-4px);
		transition: opacity 0.18s ease, transform 0.18s ease;
	}
	.fdm-mega__mobile-sublink:hover .fdm-mega__mobile-sublink-arrow {
		opacity: 0.8;
		transform: translateX(0);
	}

	/* ── Image / video cards inside a section ── */
	.fdm-mega__mobile-card {
		display: block;
		position: relative;
		margin: 8px 4px;
		border-radius: 14px;
		overflow: hidden;
		text-decoration: none !important;
		color: var(--fdm-mega-text, #fff) !important;
		background: rgba(255, 255, 255, 0.04);
		border: 1px solid rgba(255, 255, 255, 0.06);
		transition: transform 0.22s ease, border-color 0.18s ease;
	}
	.fdm-mega__mobile-card:hover {
		border-color: rgba(255, 255, 255, 0.14);
		transform: translateY(-1px);
	}
	.fdm-mega__mobile-card-image {
		display: block;
		position: relative;
		aspect-ratio: 16 / 9;
		background: rgba(0, 0, 0, 0.3);
		overflow: hidden;
	}
	.fdm-mega__mobile-card-image img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.4s ease;
	}
	.fdm-mega__mobile-card:hover .fdm-mega__mobile-card-image img {
		transform: scale(1.04);
	}
	.fdm-mega__mobile-card-play {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: transparent;
	}
	.fdm-mega__mobile-card-play::before {
		content: "";
		display: block;
		width: 48px;
		height: 48px;
		border-radius: 999px;
		border: 2.5px solid #fff;
	}
	.fdm-mega__mobile-card-play svg {
		position: absolute;
		width: 18px;
		height: 18px;
		margin-left: 3px;
		color: #fff;
	}
	.fdm-mega__mobile-card-label {
		display: block;
		padding: 12px 14px 14px;
		font-size: 14.5px;
		font-weight: 600;
		line-height: 1.35;
		letter-spacing: -0.005em;
		text-wrap: pretty;
	}

	/* ── Feature panel (per-section editorial card) ── */
	.fdm-mega__mobile-feature {
		margin: 14px 4px 4px;
		padding: 18px 18px 20px;
		border-radius: 16px;
		background: var(--fdm-mega-feature-bg, #ece5d6);
		color: #2a2318;
		overflow: hidden;
	}
	.fdm-mega__mobile-feature-image {
		margin: -18px -18px 14px;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		background: rgba(0, 0, 0, 0.06);
	}
	.fdm-mega__mobile-feature-image img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.fdm-mega__mobile-feature-eyebrow {
		display: block;
		font-family: var(--fdm-mega-feature-eyebrow-font, inherit);
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.14em;
		color: #9a8a6c;
		margin-bottom: 8px;
	}
	.fdm-mega__mobile-feature-title {
		font-family: var(--fdm-mega-feature-title-font, Georgia, "Times New Roman", Times, serif);
		font-size: 24px;
		font-weight: 400;
		line-height: 1.18;
		color: #2a2318;
		margin: 0;
		letter-spacing: -0.01em;
		text-wrap: balance;
	}
	.fdm-mega__mobile-feature-text {
		margin: 8px 0 14px;
		font-size: 13.5px;
		line-height: 1.55;
		color: #5a5144;
		text-wrap: pretty;
	}
	.fdm-mega__mobile-feature-cta {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: 13.5px;
		font-weight: 700;
		color: var(--fdm-mega-accent, #b5985a) !important;
		text-decoration: none !important;
		transition: gap 0.22s ease;
	}
	.fdm-mega__mobile-feature-cta:hover { gap: 10px; }

	/* ── Drawer footer (CTA) ── */
	.fdm-mega__mobile-foot {
		flex-shrink: 0;
		padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid rgba(255, 255, 255, 0.06);
		display: flex;
		flex-direction: column;
		gap: 10px;
		background: linear-gradient(180deg, rgba(14, 14, 14, 0) 0%, rgba(14, 14, 14, 0.6) 100%);
	}
	.fdm-mega__mobile-cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 16px 24px;
		font-size: 15px;
		font-weight: 700;
		letter-spacing: -0.005em;
		color: var(--fdm-mega-cta-text, #fff) !important;
		background: var(--fdm-mega-cta-bg, var(--fdm-mega-accent, #b5985a));
		border-radius: 999px;
		text-decoration: none !important;
		transition: transform 0.18s ease, gap 0.22s ease, box-shadow 0.18s ease;
		box-shadow: 0 8px 24px -8px rgba(181, 152, 90, 0.55);
	}
	.fdm-mega__mobile-cta:hover { gap: 12px; }
	.fdm-mega__mobile-cta:active { transform: scale(0.98); }
	.fdm-mega__mobile-cta--secondary {
		color: var(--fdm-mega-text, #fff) !important;
		background: transparent;
		border: 1px solid rgba(255, 255, 255, 0.18);
		box-shadow: none;
	}
	.fdm-mega__mobile-cta--secondary:hover {
		background: rgba(255, 255, 255, 0.06);
	}

	/* ── Body lock when drawer is open (added by JS) ── */
	body.fdm-mega-mobile-locked {
		overflow: hidden;
		touch-action: none;
	}

	/* ── Suppress desktop dropdown panels & cards on mobile ──
	 * The desktop hover/click panels live in the same DOM but should never
	 * appear on mobile — the drawer is now the sole entry point. */
	.fdm-mega__panel,
	.fdm-mega__card,
	.fdm-mega__backdrop {
		display: none !important;
	}

	/* ── Touch-only override ──
	 * iOS Safari fires `:hover` when the user merely scrolls past an item,
	 * leaving the row visually "stuck" highlighted. On hover-less devices
	 * we cancel every drawer hover effect so feedback only comes from real
	 * taps via `:active`. The desktop hover styles still fire on mouse
	 * pointers, and keyboard `:focus-visible` rules are untouched. */
	@media (hover: none) {
		/* Top-level direct links */
		.fdm-mega__mobile-toplink:hover { color: var(--fdm-mega-text, #fff) !important; }
		.fdm-mega__mobile-toplink:hover .fdm-mega__mobile-toplink-arrow {
			opacity: 0.4;
			transform: none;
		}

		/* Sublinks (the row that was getting stuck on scroll) */
		.fdm-mega__mobile-sublink:hover {
			background: transparent;
			color: var(--fdm-mega-text, #fff) !important;
		}
		.fdm-mega__mobile-sublink:hover .fdm-mega__mobile-sublink-icon {
			opacity: 0.7;
		}
		.fdm-mega__mobile-sublink:hover .fdm-mega__mobile-sublink-arrow {
			opacity: 0;
			transform: translateX(-4px);
		}

		/* Image / video cards */
		.fdm-mega__mobile-card:hover {
			background: rgba(255, 255, 255, 0.04);
			border-color: rgba(255, 255, 255, 0.06);
			transform: none;
		}
		.fdm-mega__mobile-card:hover .fdm-mega__mobile-card-image img {
			transform: none;
		}

		/* Trigger / close / footer CTAs — :active still fires on tap below. */
		.fdm-mega__mobile-trigger:hover,
		.fdm-mega__mobile-close:hover,
		.fdm-mega__mobile-cta--secondary:hover {
			background: transparent;
		}
		.fdm-mega__mobile-close:hover { background: rgba(255, 255, 255, 0.04); }
		.fdm-mega__mobile-cta:hover { gap: 8px; }
		.fdm-mega__mobile-feature-cta:hover { gap: 6px; }
	}
}

/* CTA-on-bar threshold for mobile/tablet.
 *
 * Below this width the bar stays logo + hamburger only (the "Give Together"
 * CTA still lives at the bottom of the drawer). At/above this width the bar
 * shows the CTA in compact form. Adjust both queries together to retune.
 *
 * 300px is effectively "always show" — every real-world phone is wider than
 * this (smallest mainstream device is the iPhone SE / Galaxy Fold cover at
 * 320-360). Only kept as a safety floor for genuinely tiny viewports where
 * the CTA would force overflow. */
@media (max-width: 299px) {
	.fdm-mega__actions .fdm-mega__cta-btn:not(.fdm-mega__cta-btn--secondary) {
		display: none !important;
	}
}

@media (min-width: 300px) and (max-width: 980px) {
	.fdm-mega__actions .fdm-mega__cta-btn:not(.fdm-mega__cta-btn--secondary) {
		display: inline-flex;
		padding: 9px 18px;
		font-size: 13px;
	}
}


/* ══════════════════════════════════════════════
 * Motion preferences
 *
 * Respect users who've asked the OS for reduced motion.
 * ══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.fdm-mega *,
	.fdm-mega *::before,
	.fdm-mega *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.fdm-mega__cta-btn--filled:hover,
	.fdm-mega__cta-btn--outline:hover,
	.fdm-mega__grid-link--card:hover {
		transform: none !important;
	}
}

/* ══════════════════════════════════════════════
 * Square-corner modifier
 * ──────────────────────────────────────────────
 * Applied when settings.panel_corner_style === 'square'. Zeros out the
 * border-radius on the outer dropdown surfaces — compact card, full
 * mega panel, and the feature panel that sits beside it. Internal link
 * cards and grid hover targets keep their small radii since those
 * still read as buttons, not panel surfaces.
 *
 * The selector includes the .fdm-menu-preview wrapper used by the
 * shortcode + admin live preview so the editing experience matches the
 * frontend exactly.
 * ══════════════════════════════════════════════ */
:is(body, .fdm-menu-preview).fdm-mega-corners-square .fdm-mega__card,
:is(body, .fdm-menu-preview).fdm-mega-corners-square .fdm-mega__panel,
:is(body, .fdm-menu-preview).fdm-mega-corners-square .fdm-mega__feature-panel,
/* Square mode also flattens media: card-style grid-link wrappers and the
 * 16:9 image holders inside (Latest Video thumb, post-card thumbs). */
:is(body, .fdm-menu-preview).fdm-mega-corners-square .fdm-mega__grid-link--card,
:is(body, .fdm-menu-preview).fdm-mega-corners-square .fdm-mega__grid-link-image,
:is(body, .fdm-menu-preview).fdm-mega-corners-square .fdm-mega__feature-image {
	border-radius: 0 !important;
}
/* The compact card's tail arrow uses a small rounded corner to look
 * like a soft tab — flatten it too so the seam stays consistent. */
:is(body, .fdm-menu-preview).fdm-mega-corners-square .fdm-mega__card::before {
	border-radius: 0 !important;
}
/* When the floating-pill header is enabled alongside square corners,
 * its compact card override (line ~120, .fdm-mega-style-floating-pill
 * .fdm-mega__card) forces border-radius: 16px back on. Re-flatten. */
:is(body, .fdm-menu-preview).fdm-mega-corners-square.fdm-mega-style-floating-pill .fdm-mega__card,
:is(body, .fdm-menu-preview).fdm-mega-corners-square.fdm-mega-style-floating-pill .fdm-mega__panel {
	border-radius: 0 !important;
}