/* ── SF Mega Menu ─────────────────────────────────────────────────────────
   Styles for the custom mega menu rendered by includes/mega-menu.php.
   One DOM serves desktop and mobile; layout switches at 992px (BB medium
   breakpoint). Open/close state is driven by js/mega-menu.js via [hidden],
   aria-expanded, and .is-open. The header bar itself stays 87px tall —
   .top-bg heroes site-wide depend on it (style.css). */

.sf-mega-nav {
	--sf-nav-dark: rgba(8, 12, 20, 0.98); /* near-solid: page text ghosts through lower alphas */
	--sf-orange: #f47c33;
	--sf-blue: #2196f3;
	font-family: Roboto, sans-serif;
}

/* Belt-and-suspenders: some resets/frameworks unhide [hidden].
   pointer-events matters during the close transition, when the
   allow-discrete display transition briefly keeps the panel visible. */
.sf-mega-nav [hidden] {
	display: none !important;
	pointer-events: none;
}

.sf-mega-nav .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sf-mega-nav button {
	/* Neutralize the theme's global green button styling (style.css) */
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	text-transform: none;
	color: #fff;
	font: inherit;
	cursor: pointer;
}

.sf-mega-nav a {
	color: #fff;
	text-decoration: none;
}

.sf-mega-nav button:focus-visible,
.sf-mega-nav a:focus-visible {
	outline: 2px solid #7ddae9;
	outline-offset: 2px;
}

/* BB's skin CSS sets color:#000 on header descendants via a universal
   selector, which beats inheritance and turns currentColor icons
   black-on-black. It matches the svg AND its shapes (rect/path), so
   restore inheritance on the whole svg subtree — currentColor then
   resolves to the parent button's white. */
.sf-mega-nav svg,
.sf-mega-nav svg * {
	color: inherit;
}

/* Same BB skin cascade problem as the icons above, now for the mega panel's
   text. The theme's `.fl-page-header * { color:#000 }` matches every panel
   element directly (beating the white it would inherit from .sf-mega-nav),
   `.fl-page-header a *` forces #fff onto spans inside links (overriding the
   dim numbered index), and the base `h1-h6 { font-family:"Prompt" }` overrides
   the inherited Roboto on the panel's real <h3> titles. Re-assert color + font
   here, scoped under .sf-mega-nav so specificity clears the header rules at
   every breakpoint — the layout media queries below only set size/spacing. */
.sf-mega-nav .mm-num__title,
.sf-mega-nav .mm-num__feature-title {
	color: #fff;
	font-family: Roboto, sans-serif;
	font-weight: 700;
}

.sf-mega-nav .mm-num__blurb {
	color: rgba(255, 255, 255, 0.7);
}

.sf-mega-nav .mm-num__list a {
	color: #fff;
}

.sf-mega-nav .mm-num__index {
	color: rgba(255, 255, 255, 0.4);
}

.sf-mega-nav .mm-num__label {
	color: #fff;
	font-weight: 600;
}

.sf-mega-nav .mm-num__list a:hover .mm-num__label {
	color: #7ddae9;
}

.sf-mega-nav .mm-num__cta,
.sf-mega-nav .mm-num__cta:hover {
	color: #fff;
}

.sf-chevron {
	transition: transform 0.2s ease;
	margin-left: 6px;
	flex: 0 0 auto;
}

/* The split-button rule is anchored to .sf-mega-nav__item: plain
   `.is-open .sf-splitbtn__toggle` also matched through
   .sf-mega-nav__menu.is-open, so opening the mobile menu flipped the
   Donate chevron to "expanded" while its dropdown was still closed. The
   other two use a child combinator and were never exposed to that. */
.is-open > .sf-mega-nav__toggle .sf-chevron,
.sf-mega-nav__item.is-open .sf-splitbtn__toggle .sf-chevron,
.is-open > .sf-nav-btn .sf-chevron {
	transform: rotate(180deg);
}

/* Hamburger → X. The three bars are <rect>s in the inline SVG
   (includes/mega-menu.php), at y=0/9.5/19 with height 3, so their centers
   are 1.5/11/20.5 in a 28x22 viewBox rendered 1:1 — the outer two travel
   9.5px to meet the middle, then rotate about themselves.
   transform-box: fill-box makes transform-origin resolve against each bar
   rather than the SVG viewport. (Previously this state rotated the whole
   icon 180deg, which is invisible: the glyph is vertically symmetric.) */
.sf-mega-nav__hamburger .sf-hamburger-icon rect {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 200ms ease, opacity 150ms ease;
}

.sf-mega-nav__hamburger[aria-expanded="true"] .sf-hamburger-icon rect:nth-child(1) {
	transform: translateY(9.5px) rotate(45deg);
}

.sf-mega-nav__hamburger[aria-expanded="true"] .sf-hamburger-icon rect:nth-child(2) {
	opacity: 0;
}

.sf-mega-nav__hamburger[aria-expanded="true"] .sf-hamburger-icon rect:nth-child(3) {
	transform: translateY(-9.5px) rotate(-45deg);
}

/* Pill buttons. Scoped under .sf-mega-nav so they out-rank the
   `.sf-mega-nav button` reset above (which would otherwise strip the
   padding/background off <button> pills like Membership). */
.sf-mega-nav .sf-nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 26px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
	white-space: nowrap;
}

.sf-mega-nav .sf-nav-btn--orange {
	background: var(--sf-orange);
}

.sf-mega-nav .sf-nav-btn--orange:hover {
	background: #d96a26;
}

.sf-mega-nav .sf-nav-btn--blue {
	background: var(--sf-blue);
}

.sf-mega-nav .sf-nav-btn--blue:hover {
	background: #1976d2;
}

/* Split button: two segments sharing one pill silhouette */
.sf-splitbtn {
	display: inline-flex;
	align-items: stretch;
}

.sf-splitbtn .sf-splitbtn__main {
	border-radius: 999px 0 0 999px;
	padding-right: 18px;
}

.sf-splitbtn .sf-splitbtn__toggle {
	border-radius: 0 999px 999px 0;
	padding: 10px 14px 10px 12px;
	border-left: 1px solid rgba(255, 255, 255, 0.35);
}

.sf-splitbtn .sf-splitbtn__toggle .sf-chevron {
	margin-left: 0;
}

/* Sticky bar. The mega panels / mobile menu are absolutely positioned
   inside .fl-page-header-container, so they travel with the stuck bar
   automatically. z-index above page content (BB rows use low z values;
   theme uses 10-20, symposium subnav 200 — adjusted below). */
.fl-page-header-primary {
	position: sticky;
	top: 0;
	z-index: 100;
	/* Background lives on the in-flow header element, NOT the
	   absolutely-positioned .fl-page-header-container. The container
	   paints in a later layer, so on load the near-white page body
	   (#f2f2f2) flashed through the header strip before the dark bar
	   painted. Near-opaque (0.94) so the bar never washes out to a
	   light/"white" look over pale content — matching the design's
	   solid dark bar. */
	background-color: rgba(0, 0, 0, 0.94);
	transition: background-color 200ms ease, box-shadow 200ms ease;
}

/* Win over the theme's `.home .fl-page-header { background: none }`
   (style.css) so the homepage bar is dark too. Fold into style.css in
   the cleanup pass. */
.home .fl-page-header-primary {
	background-color: rgba(0, 0, 0, 0.94);
}

/* Drop the old translucent container background so it doesn't stack on
   top of the header's; the container is now just the panel positioning
   context. Also fill the full 87px header height (it's absolutely
   positioned and otherwise hugs its ~48px content, top-aligned) and
   flex-center the row so logo + nav sit centered in the bar. Symmetric
   horizontal gutters via clamp scale with viewport (20px .. 44px). */
.fl-page-header-primary .fl-page-header-container {
	background-color: transparent;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	padding-left: clamp(20px, 4vw, 44px);
	padding-right: clamp(20px, 4vw, 44px);
}

/* Offset the sticky bar below the WordPress admin bar for logged-in
   users. Desktop (>782px): #wpadminbar is position:fixed at 32px tall,
   so stick below it. Mobile (<=782px): the admin bar is position:absolute
   and scrolls away, so top:0 is correct — the header simply pins to the
   viewport once the admin bar has scrolled off.

   Not inside the Beaver Builder editor: BB keeps the admin-bar body class
   and the #wpadminbar markup but hides the bar (opacity 0, rotated away)
   and drops the 32px html margin, so without this guard the header pins
   32px below the top of the layout iframe once scrolled, and jumps by 32px
   when Preview toggles the admin-bar class. BB adds fl-builder-edit to
   body while editing and removes it together with admin-bar in Preview,
   so this selector is right in every editor state. (Same guard on the
   symposium subnav and the mobile menu height below.) */
body.admin-bar:not(.fl-builder-edit) .fl-page-header-primary {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar:not(.fl-builder-edit) .fl-page-header-primary {
		top: 0;
	}
}

/* Once scrolled, go fully opaque and add a shadow to lift the bar off
   the page. .sf-nav-stuck is toggled by js/mega-menu.js. */
.fl-page-header-primary.sf-nav-stuck,
.home .fl-page-header-primary.sf-nav-stuck {
	background-color: #0b0f17;
	box-shadow: 0 6px 18px rgb(0 0 0 / 35%);
}

/* The Live from Symposium template has its own sticky subnav at top:0
   z:200 — tuck it under the now-sticky 87px main bar instead. */
body.admin-bar:not(.fl-builder-edit) .symposium-sticky-nav {
	top: 119px; /* 32px admin bar + 87px main header */
}

@media screen and (max-width: 782px) {
	body.admin-bar:not(.fl-builder-edit) .symposium-sticky-nav {
		top: 87px; /* admin bar scrolls away on mobile */
	}
}

.symposium-sticky-nav {
	top: 87px;
	z-index: 90;
}

/* Migrated Symposium pages carry a Beaver Builder row with a per-page
   negative top margin (margin-top: -43px on .fl-node-XXX >
   .fl-row-content-wrap) that was authored to tuck the page's secondary
   nav up under the *classic* header. The unified header is a sticky 87px
   bar, so that pull drags the subnav 33px up into it instead. Zero it on
   the unified path only — the classic render (what the public still gets
   pre-launch) needs the original offset. Scoped via the .sub-nav module
   class those pages already use so unrelated rows are untouched; only
   margin-top is reset, leaving the row's horizontal bleed intact.
   Specificity 0,3,0 beats BB's per-node 0,2,0 rule, so no !important.
   NB: this is not the admin bar. WP offsets that with html{margin-top},
   which moves the header and the content together. */
.sf-unified .fl-row-content-wrap:has(.sub-nav) {
	margin-top: 0;
}

/* Layout shim: flex the BB header row so logo + nav center vertically
   in the 87px bar at all widths. Scoped to the primary header only.
   nowrap keeps logo + nav on one line at every width — mobile shows
   logo left, hamburger right, inside the same 87px bar. */
.fl-page-header-primary .fl-page-header-row {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	width: 100%; /* fill the now-flex container */
	/* Zero Bootstrap's .row negative gutters so content aligns exactly
	   to the container's padding (else logo/nav bleed 15px past it). */
	margin-left: 0;
	margin-right: 0;
}

/* The old design zeroed the homepage header below 768px because the
   homepage had no mobile nav there. The mega menu is the nav everywhere
   now, so the bar has to come back — but that rule exists twice, and the
   copy that decided the outcome is not in this repo.

   style.css carries `.home .fl-page-header { height: 0px }`, and so does
   the Customizer's Additional CSS, which WordPress prints as
   <style id="wp-custom-css"> in the <head> after every enqueued
   stylesheet. Both are (0,2,0) — and so was the override that used to sit
   here. With specificity tied, source order decides, and the inline block
   is always last, so it won: below 768px the homepage header computed to
   height: 0, the 87px bar collapsed, the logo and hamburger spilled out
   over the page content, and the first content row slid up under them.

   Adding .sf-unified — the body class from the same sf_show_unified()
   gate as the nav itself — makes this 0,3,0, so it wins on specificity
   instead of on order. Scoping to the unified path is also correct on its
   own terms: the legacy render is still what the public gets pre-launch
   and it does still want a 0px homepage header, having no mobile nav to
   put in one.

   Editing the Customizer CSS instead would be a database change hitting
   both renders, so it stays; retire all three rules together in the
   style.css cleanup pass after go-live. */
@media (max-width: 767px) {
	.sf-unified.home .fl-page-header {
		height: 87px;
	}
}

.fl-page-header-primary .fl-page-header-logo-col {
	flex: 0 0 auto;
	float: none;
	width: auto;
	/* Zero Bootstrap's 15px col gutters — the container padding above
	   provides the edge spacing, so the logo aligns to it. */
	padding-left: 0;
	padding-right: 0;
}

.fl-page-header-primary .fl-page-nav-col {
	flex: 1 1 auto;
	float: none;
	width: auto;
	padding-left: 0;
	padding-right: 0;
	/* Bootstrap gives every .col-* position:relative, which would make
	   this narrow column the containing block for the absolutely
	   positioned mega panel / mobile menu. Static lets them position
	   against .fl-page-header-container (absolute, full width). */
	position: static;
}

/* Focus backdrop: blurs + slightly dims the rest of the viewport while a
   panel / mobile menu is open. z-index sits below the sticky header (100)
   and its panels but above page content, so the bar and the open panel
   stay sharp while everything behind them softens. backdrop-filter only
   affects what paints behind this element, which is exactly the page body.
   Toggled by js/mega-menu.js via [hidden]; same fade timing as the panels
   (@starting-style + display allow-discrete). Also catches outside clicks
   to dismiss (the pointerdown handler treats it as outside the nav). */
.sf-nav-backdrop {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(0, 0, 0, 0.12);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: opacity 180ms ease, display 180ms allow-discrete;
}

.sf-nav-backdrop[hidden] {
	display: none;
	opacity: 0;
	pointer-events: none;
	transition-duration: 140ms; /* close slightly faster than open, like the panels */
}

@starting-style {
	.sf-nav-backdrop:not([hidden]) {
		opacity: 0;
	}
}

/* ── Mega panel: numbered list + split feature ───────────────────────────
   Rendered by sf_mega_panel_numbered(). Three regions: an intro (title +
   blurb + CTA), a numbered link list, and a feature image.

   Authored mobile-first — this is the small-screen layout, and the ≥992px
   block below adds the grid and larger type. These rules used to live
   inside that desktop query, which left the whole component unstyled
   under 992px (bare text links instead of CTA buttons, an uncovered
   background image, doubled list numbering).

   Scoped under .sf-mega-nav for the same reason as the color rules at the
   top of this file: the BB skin's `.fl-page-header *` and its bare h1-h6
   rules would otherwise out-rank a plain class selector. */
.sf-mega-nav .mm-num {
	/* Gutter matches .sf-mega-panel__cards — .sf-mega-panel__inner is
	   padding: 4px 0 at this width, so the component supplies its own. */
	padding: 4px 24px 24px;
}

.sf-mega-nav .mm-num__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.sf-mega-nav .mm-num__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.sf-mega-nav .mm-num__blurb {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
}

/* Rectangular CTA — orange in both states, darkens slightly on hover. */
.sf-mega-nav .mm-num__cta {
	display: inline-block;
	padding: 12px 26px;
	background: var(--sf-orange);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.sf-mega-nav .mm-num__cta:hover {
	background: #d96a26;
}

.sf-mega-nav .mm-num__list {
	/* The element is an <ol>; without this the UA's decimal markers render
	   alongside the zero-padded .mm-num__index spans. */
	list-style: none;
	margin: 20px 0 0;
	padding: 20px 0 0;
	display: flex;
	flex-direction: column;
	/* Small, because each link below carries 11px of its own vertical
	   padding to reach a 44px touch target — that supplies most of the
	   separation the old 16px gap was providing. */
	gap: 4px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* 11px above and below a 22px line box makes every row exactly 44px, the
   minimum comfortable touch target. Previously the links were 22px tall —
   the text and nothing else — which is half a target on the one layout
   that is driven by thumbs.

   Padding rather than min-height: the row is baseline-aligned (the 13px
   index sits on the 16px label's baseline), and min-height grows the box
   downward only, which would strand the text at the top of a 44px row.
   The ≥992px block zeroes this — a pointer does not need the extra 22px,
   and the desktop grid's rhythm was authored without it. */
.sf-mega-nav .mm-num__list a {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 11px 0;
	text-decoration: none;
}

.sf-mega-nav .mm-num__index {
	flex: 0 0 auto;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.sf-mega-nav .mm-num__label {
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

/* Feature tile. aspect-ratio rather than the desktop min-height keeps it a
   predictable band on narrow screens, matching .sf-mega-card__media. */
.sf-mega-nav .mm-num__feature {
	position: relative;
	aspect-ratio: 16 / 9;
	margin-top: 20px;
	border-radius: 10px;
	overflow: hidden;
	background-color: rgba(255, 255, 255, 0.08);
	background-size: cover;
	background-position: center;
}

.sf-mega-nav .mm-num__feature-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 14px;
	padding: 20px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent 60%);
}

.sf-mega-nav .mm-num__feature-title {
	margin: 0;
	font-size: 19px;
	line-height: 1.15;
	text-transform: uppercase;
}

/* ── Desktop ≥992px ─────────────────────────────────────────────────── */
@media (min-width: 992px) {
	.sf-mega-nav__hamburger {
		display: none;
	}

	/* Everything between .fl-page-header-container (position:absolute,
	   full width — the containing block for the mega panel) and the mega
	   <li> must be static so the panel spans the full viewport width. */
	.sf-mega-nav,
	.sf-mega-nav__menu,
	.sf-mega-nav__list,
	.sf-mega-nav__item--mega {
		position: static;
	}

	.sf-mega-nav__list {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 28px;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.sf-mega-nav__toggle,
	.sf-mega-nav__link {
		display: inline-flex;
		align-items: center;
		font-size: 16px;
		padding: 8px 0;
	}

	.sf-mega-nav__toggle:hover,
	.sf-mega-nav__link:hover {
		color: #7ddae9;
	}

	/* Open/close motion: fade + drop. @starting-style +
	   `display ... allow-discrete` animates straight from display:none
	   (the [hidden] attribute) with no JS involvement; browsers without
	   support simply snap open/closed. */
	.sf-mega-panel,
	.sf-dropdown {
		transition: opacity 180ms ease, translate 180ms ease, display 180ms allow-discrete;
	}

	.sf-mega-panel[hidden],
	.sf-dropdown[hidden] {
		opacity: 0;
		translate: 0 -10px;
		transition-duration: 140ms; /* close slightly faster than open */
	}

	@starting-style {
		.sf-mega-panel:not([hidden]),
		.sf-dropdown:not([hidden]) {
			opacity: 0;
			translate: 0 -10px;
		}
	}

	/* Full-width mega panel under the 87px bar. top is the bar height,
	   not 100%: the containing .fl-page-header-container is absolute and
	   hugs its content (~48px), shorter than the visual 87px bar. */
	.sf-mega-panel {
		position: absolute;
		top: 87px;
		left: 0;
		right: 0;
		background: var(--sf-nav-dark);
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		box-shadow: 0 20px 30px rgb(0 0 0 / 40%);
		z-index: 5;
	}

	.sf-mega-panel__inner {
		max-width: 1680px; /* wide enough for a full row of cards */
		margin: 0 auto;
		padding: 56px 62px;
	}

	/* Image-card row. Each child menu item is a card: rounded media tile
	   with an uppercase label pinned bottom-left. Cards spread to even
	   widths across the row; a small flex-basis lets a long menu (e.g.
	   Programs, 7 items) still fit one row on wide screens. When they do
	   wrap, max-width stops a leftover card from ballooning to full width
	   and justify-content centers the partial row. */
	.sf-mega-panel__cards {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 28px;
	}

	.sf-mega-card {
		flex: 1 1 160px;
		max-width: 320px;
		min-width: 0;
	}

	.sf-mega-card__link {
		display: block;
	}

	/* Media tile. Placeholder surface until an image is wired in — set a
	   background-image on this element (or nest an <img>) to fill it. */
	.sf-mega-card__media {
		position: relative;
		display: block;
		aspect-ratio: 1 / 1;
		border-radius: 16px;
		background-color: rgba(255, 255, 255, 0.08);
		background-size: cover;
		background-position: center;
		overflow: hidden;
		transition: transform 200ms ease, box-shadow 200ms ease;
	}

	/* Bottom scrim keeps the light label legible over real images. */
	.sf-mega-card__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 45%);
		pointer-events: none;
	}

	.sf-mega-card__link:hover .sf-mega-card__media {
		transform: translateY(-4px);
		box-shadow: 0 16px 30px rgb(0 0 0 / 45%);
	}

	.sf-mega-card__label {
		position: absolute;
		z-index: 1; /* above the scrim */
		left: 16px;
		right: 16px;
		bottom: 16px;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.9);
	}

	/* ── Mega panel: numbered list + split feature (≥992px) ──────────────
	   Base styles are unscoped above, mobile-first; this block adds only
	   the three-column grid, the rules dividing the regions, and the larger
	   desktop type. Scoped under .sf-mega-nav to match the base's
	   specificity — source order then lets these win. */
	.sf-mega-nav .mm-num {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
		padding: 0; /* .sf-mega-panel__inner supplies the gutter here */
	}

	.sf-mega-nav .mm-num__intro {
		gap: 18px;
		padding-right: 48px;
	}

	.sf-mega-nav .mm-num__title {
		font-size: 26px;
		line-height: 1.1;
	}

	.sf-mega-nav .mm-num__list {
		margin: 0;
		padding: 0 48px;
		gap: 20px;
		border-top: 0;
		border-left: 1px solid rgba(255, 255, 255, 0.15);
	}

	.sf-mega-nav .mm-num__list a {
		gap: 18px;
		padding: 0; /* the 44px touch target is a mobile concern */
	}

	.sf-mega-nav .mm-num__index {
		font-size: 14px;
	}

	.sf-mega-nav .mm-num__label {
		font-size: 19px;
	}

	/* Fills the grid row instead of holding its own ratio. */
	.sf-mega-nav .mm-num__feature {
		aspect-ratio: auto;
		min-height: 340px;
		margin-top: 0;
		margin-left: 48px;
	}

	.sf-mega-nav .mm-num__feature-overlay {
		gap: 16px;
		padding: 28px;
	}

	.sf-mega-nav .mm-num__feature-title {
		font-size: 24px;
	}

	/* Small dropdowns (Membership pill, Donate split) */
	.sf-mega-nav__item--pill,
	.sf-mega-nav__item--split {
		position: relative;
	}

	.sf-dropdown {
		position: absolute;
		top: calc(100% + 8px);
		right: 0;
		min-width: 220px;
		background: var(--sf-nav-dark);
		border: 1px solid rgba(255, 255, 255, 0.15);
		border-radius: 6px;
		box-shadow: 0 12px 24px rgb(0 0 0 / 40%);
		z-index: 6;
	}

	.sf-dropdown__links {
		list-style: none;
		margin: 0;
		padding: 8px 0;
	}

	.sf-dropdown__links a {
		display: block;
		padding: 10px 18px;
		font-size: 15px;
	}

	.sf-dropdown__links a:hover {
		background: rgba(255, 255, 255, 0.08);
		color: #7ddae9;
	}
}

/* Page scroll lock while the mobile menu is open, toggled on <html> by
   js/mega-menu.js. Not inside the mobile media query: the class is only
   ever applied below 992px, and JS drops it when the breakpoint changes,
   so gating it again here would only hide the mechanism.

   The root element only. Adding overflow:hidden to <body> as well — the
   belt-and-suspenders version of this lock — makes <body> a scroll
   container, and the sticky header then sticks to *that* scrollport
   rather than the viewport: with the page scrolled, opening the menu
   snapped the bar back to its static offset, taking the menu positioned
   inside it several hundred pixels off the top of the screen. Measured
   at 390px scrolled to 300: header y=0 with the root locked, y=-254 with
   <body> locked too.

   overflow rather than the `position: fixed` body trick for a related
   reason: fixed re-lays-out the document at scroll offset 0, so the page
   jumps to the top behind the menu and back again on close. */
.sf-nav-scroll-locked {
	overflow: hidden;
}

/* ── Mobile <992px ──────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
	.sf-mega-nav {
		display: flex;
		justify-content: flex-end;
	}

	/* Scoped under .sf-mega-nav (0,2,0) for exactly the reason the row
	   toggles below are: `.sf-mega-nav button { padding: 0 }` at the top of
	   this file is 0,1,1 and was winning, so the hamburger's padding never
	   applied and its hit area was the bare 28×22 SVG. 11px/10px around
	   that glyph gives 48×44. */
	.sf-mega-nav .sf-mega-nav__hamburger {
		display: inline-flex;
		align-items: center;
		padding: 11px 10px;
	}

	.sf-mega-nav__menu {
		display: none;
		position: absolute;
		top: 87px; /* bar height — container hugs content and is shorter */
		left: 0;
		right: 0;
		background: #0b0f17; /* near-solid: hero images ghosted through rgba black */
		/* dvh tracks the collapsing mobile URL bar; vh is the *large*
		   viewport, which let a long menu run underneath it. vh first as a
		   fallback for anything without dvh support. */
		max-height: calc(100vh - 87px);
		max-height: calc(100dvh - 87px);
		overflow-y: auto;
		/* Don't chain the scroll to the page once the menu hits its end. */
		overscroll-behavior: contain;
		z-index: 5;
		opacity: 0;
		translate: 0 -8px;
		transition: opacity 200ms ease, translate 200ms ease, display 200ms allow-discrete;
	}

	.sf-mega-nav__menu.is-open {
		display: block;
		opacity: 1;
		translate: 0 0;
	}

	/* Logged-in: leave room for the admin bar. Pre-launch the mega nav is
	   gated to editors (sf_show_unified), so this is the common path here,
	   not an edge case. 783-991px: a fixed 32px strip the sticky header
	   sits below. ≤782px: a 46px absolute strip that scrolls away, so this
	   sizes for the scroll-top worst case. Guarded against the Beaver
	   Builder editor like the sticky-bar offset above: no visible admin
	   bar there, so the menu would be clipped short in responsive modes. */
	body.admin-bar:not(.fl-builder-edit) .sf-mega-nav__menu {
		max-height: calc(100dvh - 87px - 32px);
	}

	@media (max-width: 782px) {
		body.admin-bar:not(.fl-builder-edit) .sf-mega-nav__menu {
			max-height: calc(100dvh - 87px - 46px);
		}
	}

	@starting-style {
		.sf-mega-nav__menu.is-open {
			opacity: 0;
			translate: 0 -8px;
		}
	}

	/* Accordion bodies fade only — they're in normal flow here, so
	   vertical motion would shove the items below them around. */
	.sf-mega-panel,
	.sf-dropdown {
		transition: opacity 150ms ease, display 150ms allow-discrete;
	}

	.sf-mega-panel[hidden],
	.sf-dropdown[hidden] {
		opacity: 0;
	}

	@starting-style {
		.sf-mega-panel:not([hidden]),
		.sf-dropdown:not([hidden]) {
			opacity: 0;
		}
	}

	.sf-mega-nav__list {
		list-style: none;
		margin: 0;
		padding: 12px 0 24px;
	}

	.sf-mega-nav__item {
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	/* Scoped under .sf-mega-nav (0,2,0) so the padding survives the
	   `.sf-mega-nav button { padding: 0 }` reset at the top of this file,
	   which is 0,1,1 and was otherwise flattening every <button> toggle to
	   a zero-gutter, zero-height row while the <a> ones kept their inset. */
	.sf-mega-nav .sf-mega-nav__toggle,
	.sf-mega-nav .sf-mega-nav__link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 16px 24px;
		font-size: 17px;
		text-align: left;
	}

	/* Panels/dropdowns become in-flow accordion bodies */
	.sf-mega-panel,
	.sf-dropdown {
		position: static;
		background: rgba(255, 255, 255, 0.05);
	}

	.sf-mega-panel__inner {
		padding: 4px 0;
	}

	.sf-dropdown__links {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.sf-dropdown__links a {
		display: block;
		padding: 12px 24px; /* same gutter as .mm-num and the top-level items */
		font-size: 15px;
		color: rgba(255, 255, 255, 0.85);
	}

	/* Cards stack into a single column inside the accordion body. */
	.sf-mega-panel__cards {
		list-style: none;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding: 12px 24px 20px;
	}

	.sf-mega-card__link {
		display: block;
	}

	.sf-mega-card__media {
		position: relative;
		display: block;
		aspect-ratio: 16 / 9;
		border-radius: 12px;
		background-color: rgba(255, 255, 255, 0.08);
		background-size: cover;
		background-position: center;
		overflow: hidden;
	}

	.sf-mega-card__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 45%);
		pointer-events: none;
	}

	.sf-mega-card__label {
		position: absolute;
		z-index: 1;
		left: 14px;
		right: 14px;
		bottom: 14px;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.9);
	}

	/* A stacked panel is the numbered list and nothing else. Both of the
	   other regions are dropped here.

	   The feature is the tallest thing in the panel — a 16/9 tile plus its
	   overlay — and on a phone it buried the list and everything below it.
	   The intro's <h3> repeats the accordion trigger's own label verbatim
	   ("About" opening a panel headed "About") and its blurb is empty for
	   every menu item today.

	   Both CTAs go with them, by decision rather than by side effect: they
	   are the same href and the same fallback label as each other, and they
	   resolve to the URL the panel's own trigger already stands for. Worth
	   knowing what that costs — the top-level row is a <button> that opens
	   the panel rather than a link, so with both regions gone there is no
	   route from a stacked panel to its section landing page. Only the
	   children are reachable. If that needs to change, the fix belongs in
	   sf_mega_panel_numbered() (a link as the panel's last row) rather than
	   in reinstating either region. */
	.sf-mega-nav .mm-num__feature,
	.sf-mega-nav .mm-num__intro {
		display: none;
	}

	/* The list's top border and spacing divided it from the intro. With the
	   intro gone that would open the panel with a stray rule and a 40px gap.
	   (The desktop block already zeroes these for its grid.) */
	.sf-mega-nav .mm-num__list {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	/* Zeroing the list's own spacing above left the first child 8px under
	   the trigger, the panel's 4px being all that remained; 12px matches
	   what the cards panel already uses, so both panel types open with the
	   same breathing room. */
	.sf-mega-nav .mm-num {
		padding-top: 12px;
	}

	/* An open row's divider sat between the trigger and its OWN panel, so it
	   read as a cut rather than a grouping -- and against the panel's lighter
	   background (rgba(255,255,255,.05)) it became the heaviest line in the
	   menu. Sibling rows keep their divider; the open row merges with the
	   panel it owns. Colour rather than `border: none` so the row does not
	   shift by 1px as it opens. */
	.sf-mega-nav__item.is-open {
		border-bottom-color: transparent;
	}


	/* Membership / Donate as stacked, equal-width, centred buttons. The inset
	   lives on the control, not the <li>: an <li> inset also indents the
	   in-flow dropdown beneath it, which made that dropdown read as a floating
	   slab rather than a full-width band like the mega panels.

	   display:flex alone is NOT enough to make these match. Membership is a
	   <button> and Donate is a <div>; a <button>'s `width: auto` resolves to
	   its intrinsic (shrink-to-fit) size whatever its display type, so the
	   pill hugged its label while the split button filled the row. An explicit
	   width is what actually equalises them.

	   calc(100% - 48px) makes them span exactly the row content box — the
	   same 24px..24px the top-level labels and their chevrons occupy — so
	   the controls line up with the menu above them instead of floating
	   inside it. There is deliberately no max-width now: an earlier 320px
	   cap centred the pair and left them visibly narrower than every row
	   above once the viewport passed ~368px, which is most of the range
	   this block covers (it runs to the 991.98px hamburger breakpoint). */
	.sf-mega-nav__item--pill,
	.sf-mega-nav__item--split {
		border-bottom: none;
	}

	.sf-mega-nav__item--pill > .sf-nav-btn,
	.sf-mega-nav__item--split > .sf-splitbtn {
		display: flex;
		box-sizing: border-box;
		width: calc(100% - 48px);
		/* 10px of padding over a 18px line box is 38px, under the 44px
		   touch minimum. The pill centres its label already and the split
		   button's segments stretch, so a min-height is all this needs. */
		min-height: 44px;
		margin: 10px auto 0;
	}

	.sf-splitbtn .sf-splitbtn__main {
		flex: 1 1 auto;
	}
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.sf-mega-nav .sf-chevron,
	.sf-mega-nav .sf-hamburger-icon rect,
	.sf-mega-nav__menu,
	.sf-mega-panel,
	.sf-dropdown,
	.sf-nav-backdrop {
		transition: none;
	}
}