/*
 * Forge & Fusion Academy.
 *
 * Palette: matches the client-provided home page mock exactly (sampled
 * directly from it) — a near black navy (--ff-ink) for the header/hero
 * and a vivid safety orange (--ff-copper, kept its original variable
 * name to avoid touching every usage site, but now holds the mock's
 * orange, not the old muted copper) for every call to action and accent.
 * Circuit teal (--ff-circuit) is kept as a separate, secondary status
 * color only (seat availability, hover feedback) — the mock doesn't show
 * a second accent, so this stays out of the "brand" pairing but is still
 * useful for distinguishing live/interactive UI state from the orange
 * CTA color. Per track accents keep teal/blue for 610/620 for the same
 * reason; only J-STD's (which mirrored the old copper) moves to the new
 * orange so it still reads as "the CTA color" for the first/default track.
 *
 * Type: Archivo (bold, tight tracking) for headlines, IBM Plex Sans for
 * body copy, JetBrains Mono (uppercase, wide tracking) for eyebrows,
 * badges and labels — loaded in functions.php.
 */

:root {
	--ff-ink: #031f35;
	--ff-ink-light: #0b3155;
	--ff-text: #272b33;
	--ff-muted: #5b6270;
	--ff-copper: #ff5800;
	--ff-copper-dark: #cc4600;
	--ff-circuit: #1fb6a6;
	--ff-circuit-dark: #12877a;
	--ff-border: #e1e4e9;
	--ff-bg-alt: #f4f5f7;
	--ff-max-width: 1120px;
	--ff-radius: 8px;

	/* Per track accents. */
	--ff-track-jstd: #ff5800;
	--ff-track-610: #1fb6a6;
	--ff-track-620: #3a5bb8;

	/* Type system. */
	--ff-font-display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--ff-font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--ff-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	font-family: var(--ff-font-body);
}

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

body {
	margin: 0;
	color: var(--ff-text);
	background: #fff;
	line-height: 1.55;
}

h1, h2, h3 {
	color: var(--ff-ink);
	font-family: var(--ff-font-display);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 0 0.6em;
}

h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.15rem; }

/* ---------------------------------------------------------------------
 * Eyebrow label: small square + uppercase, wide-tracked monospace text,
 * used above a section heading to name what the section is about.
 * ------------------------------------------------------------------- */

.ff-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--ff-font-mono);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ff-copper-dark);
	margin: 0 0 0.6em;
}

.ff-eyebrow::before {
	content: '';
	width: 0.6em;
	height: 0.6em;
	background: var(--ff-copper);
	flex-shrink: 0;
}

.ff-section-head {
	max-width: 34ch;
	margin-bottom: 1.75em;
}

p { margin: 0 0 1em; }

a { color: var(--ff-copper-dark); }

.ff-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

svg.ff-icon {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	vertical-align: -0.15em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ff-container {
	max-width: var(--ff-max-width);
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 40px);
}

/* ---------------------------------------------------------------------
 * Header / nav, with a mobile menu toggle and scroll spy active state
 * ------------------------------------------------------------------- */

.ff-header {
	background: var(--ff-ink);
	color: #fff;
	position: sticky;
	top: 0;
	z-index: 20;
}

/* Homepage only (is_front_page() in header.php) — transparent so the
   hero photo shows through behind the nav instead of a solid bar above
   it. body.ff-home sets --ff-header-h (kept in sync with this header's
   actual rendered height at each breakpoint below), which .ff-hero
   uses to pull itself up by exactly that amount. */
.ff-header-overlay {
	background: linear-gradient(180deg, rgba(3, 31, 53, 0.55) 0%, rgba(3, 31, 53, 0) 100%);
}

body.ff-home {
	--ff-header-h: 88px;
}

.ff-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 14px;
}

.ff-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 1.15rem;
}

/* This is a full horizontal lockup (icon + wordmark baked into one wide
   ~2.5:1 image), not a square icon mark, so it's sized by width only —
   height:auto preserves its own aspect ratio rather than the old fixed
   square box, which would have squashed it. Smaller on phones so it
   fits on one row alongside the hamburger toggle and "Enroll Now" CTA;
   scales up at tablet width and up (see the 600px breakpoint below). */
.ff-brand-mark {
	width: 150px;
	height: auto;
	flex-shrink: 0;
}

/* Fallback text only: header.php shows this in place of the image if
   ff_logo_url() ever comes back empty (upload missing/renamed), so it
   needs to just read normally, not visually hidden. */
.ff-brand-name {
	line-height: 1.15;
}

.ff-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 6px;
	color: #fff;
	cursor: pointer;
}

.ff-nav {
	display: flex;
	gap: 22px;
	align-items: center;
}

.ff-nav a {
	position: relative;
	color: #d7dbe3;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	padding-block: 4px;
}

.ff-nav a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 2px;
	background: var(--ff-circuit);
	transform: scaleX(0);
	transition: transform 0.15s ease;
}

.ff-nav a:hover,
.ff-nav a:focus-visible,
.ff-nav a.is-active {
	color: #fff;
}

.ff-nav a:hover::after,
.ff-nav a:focus-visible::after,
.ff-nav a.is-active::after {
	transform: scaleX(1);
}

.ff-header-cta {
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * Courses dropdown: opens on hover or focus at laptop width and up
 * (handled in CSS alone there — no JS needed for the common case), and
 * on tap via assets/js/nav.js everywhere narrower, since touch has no
 * hover to trigger it.
 * ------------------------------------------------------------------- */

.ff-nav-item-has-dropdown {
	position: relative;
}

.ff-nav-dropdown-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	background: none;
	border: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	padding-block: 4px;
}

.ff-nav-dropdown-toggle svg {
	width: 0.7em;
	height: 0.7em;
	transition: transform 0.15s ease;
}

.ff-nav-dropdown {
	margin: 0;
	padding: 10px;
	background: #fff;
	color: var(--ff-text);
	border-radius: var(--ff-radius);
	box-shadow: 0 14px 30px rgba(23, 26, 34, 0.22);
}

.ff-nav-dropdown-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ff-nav-dropdown-group {
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 8px 10px 4px;
	margin: 0;
}

.ff-nav-dropdown a {
	display: block;
	padding: 7px 10px;
	border-radius: 6px;
	color: var(--ff-text);
	font-weight: 500;
	font-size: 0.92rem;
	text-decoration: none;
}

.ff-nav-dropdown a::after {
	display: none;
}

.ff-nav-dropdown a:hover,
.ff-nav-dropdown a:focus-visible {
	background: var(--ff-bg-alt);
	color: var(--ff-ink);
}

/* ---------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------- */

.ff-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.75rem 1.5rem;
	border-radius: var(--ff-radius);
	font-weight: 700;
	text-decoration: none;
	font-size: 1rem;
	cursor: pointer;
	border: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.ff-btn-primary {
	background: var(--ff-copper);
	/* White on this orange is only 3.16:1 (fails WCAG AA even at bold
	   16px); dark ink text clears 5.3:1. */
	color: var(--ff-ink);
}

.ff-btn-primary:hover,
.ff-btn-primary:focus-visible {
	background: var(--ff-copper-dark);
	color: #fff;
}

.ff-btn-secondary {
	background: transparent;
	color: var(--ff-ink);
	border: 2px solid var(--ff-border);
}

.ff-btn-secondary:hover,
.ff-btn-secondary:focus-visible {
	border-color: var(--ff-circuit);
	color: var(--ff-circuit-dark);
}

/* Matches the mock's button treatment: uppercase, wide tracking, arrow
   icon trailing the label. Opt-in modifier rather than the base .ff-btn
   style, since plenty of existing buttons sitewide use sentence case. */
.ff-btn-upper {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.92rem;
}

.ff-btn-upper .ff-icon {
	width: 0.85em;
	height: 0.85em;
}

.ff-header .ff-btn-primary {
	padding: 0.55rem 1.1rem;
	font-size: 0.9rem;
}

a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--ff-circuit);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------- */

.ff-hero {
	background-color: var(--ff-ink);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	color: #fff;
	min-height: min(80vh, 680px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* Pulled up by the overlay header's own height (--ff-header-h, kept
	   in sync with it at each breakpoint below) so the hero's photo and
	   tint run all the way to the top of the page, behind a transparent
	   header, instead of starting below a separate solid-color header
	   bar. .ff-hero only ever appears on the homepage template, so this
	   is safe to apply unconditionally rather than needing its own
	   is_front_page() class. */
	margin-top: calc(-1 * var(--ff-header-h, 0px));
}

/* When a hero photo is set, a left-heavy dark gradient keeps the
   left-aligned text readable over whatever is behind it while letting
   the image itself stay clearly visible on the right. */
.ff-hero-tint {
	position: absolute;
	inset: 0;
	/* rgb(3, 31, 53) is --ff-ink — left as a literal triplet since this
	   needs varying alpha per stop, which var() + a hex color can't
	   express. Was still the pre-rebrand ink color (23, 26, 34) until
	   now, a mismatch against the current brand navy used everywhere
	   else, including the overlay header gradient right above this. */
	background: linear-gradient(90deg, rgba(3, 31, 53, 0.92) 0%, rgba(3, 31, 53, 0.82) 42%, rgba(3, 31, 53, 0.42) 75%, rgba(3, 31, 53, 0.22) 100%);
}

/* Two oversized circles in the brand copper, echoing a solder joint /
   PCB via — a bold graphic accent instead of a photo, cropped off the
   hero's edges so they read as background shapes, not content. */
.ff-hero-circle {
	position: absolute;
	border-radius: 50%;
	background: var(--ff-copper);
	pointer-events: none;
}

.ff-hero-circle-lg {
	width: clamp(260px, 32vw, 460px);
	height: clamp(260px, 32vw, 460px);
	right: clamp(-140px, -7vw, -60px);
	bottom: clamp(-160px, -12vw, -80px);
	opacity: 0.92;
}

.ff-hero-circle-sm {
	width: clamp(60px, 7vw, 100px);
	height: clamp(60px, 7vw, 100px);
	right: clamp(60px, 14vw, 220px);
	top: clamp(30px, 8vw, 90px);
	opacity: 0.4;
}

.ff-hero-content {
	position: relative;
	width: 100%;
	text-align: left;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Top padding adds the overlay header's own height on top of the
	   usual breathing room, so hero copy clears the nav sitting over it
	   instead of starting underneath it. */
	padding-top: calc(var(--ff-header-h, 0px) + clamp(32px, 7vw, 70px));
	padding-bottom: clamp(56px, 11vw, 110px);
}

.ff-hero-bar {
	width: 90px;
	height: 6px;
	background: var(--ff-copper);
	margin-bottom: 1.1em;
}

.ff-hero-eyebrow {
	font-family: var(--ff-font-mono);
	font-size: clamp(0.85rem, 1.4vw, 1rem);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ff-copper);
	margin: 0 0 0.6em;
}

.ff-hero h1 {
	color: #fff;
	font-size: clamp(2.6rem, 6.4vw, 4.4rem);
	text-transform: none;
	line-height: 1.08;
	letter-spacing: -0.01em;
	max-width: 22ch;
}

.ff-hero-h1-accent {
	display: block;
	color: var(--ff-copper);
}

.ff-hero-subhead {
	font-family: var(--ff-font-display);
	font-weight: 700;
	font-size: clamp(1.1rem, 2.2vw, 1.4rem);
	color: #fff;
	margin: 0.3em 0 0.6em;
}

.ff-hero-lead {
	font-size: 1.05rem;
	color: #b9c2cf;
	max-width: 56ch;
}

.ff-hero-actions {
	display: flex;
	gap: 14px;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-top: 1.75em;
}

.ff-hero .ff-btn-secondary {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.4);
}

.ff-hero .ff-btn-secondary:hover,
.ff-hero .ff-btn-secondary:focus-visible {
	border-color: var(--ff-circuit);
	color: #fff;
}

/* Feature strip docked to the hero's bottom edge (the hero's own flex
   column + .ff-hero-content's flex: 1 1 auto push this down rather than
   it being vertically centered with the rest of the hero copy). */
.ff-hero-features {
	position: relative;
	background: rgba(3, 10, 18, 0.55);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(2px);
}

/* One explicit column count per breakpoint (mobile 1, tablet 2, laptop+
   4 — this strip always has exactly 4 items) rather than an auto-fit
   grid, which packed an unpredictable, sometimes-orphaned number of
   columns depending on exact viewport width. Divider borders are set
   fully at each breakpoint rather than layered as deltas, since a 2 up
   grid and a 4 up single row need borders on different children
   (nth-child(even) vs nth-child(n+2)) — easier to read as complete rules
   than as overrides of each other. */
.ff-hero-features-inner {
	display: grid;
	grid-template-columns: 1fr;
	padding-block: 0.4em;
}

.ff-hero-feature {
	display: flex;
	align-items: center;
	gap: 0.9em;
	padding: 0.9em 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.ff-hero-feature:first-child {
	border-top: none;
}

.ff-hero-feature-icon {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
}

.ff-hero-feature-title {
	margin: 0 0 0.2em;
	font-weight: 700;
	font-size: 0.85rem;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.ff-hero-feature-desc {
	margin: 0;
	font-size: 0.82rem;
	color: #b9c2cf;
}

/* ---------------------------------------------------------------------
 * Parallax statement band: a full-bleed photo with a brand-colored tint,
 * scroll-fixed on screens wide enough to show the effect clearly (fixed
 * background-attachment is skipped on narrow/touch screens below, since
 * it's unreliable on mobile Safari and isn't worth the jank there).
 * ------------------------------------------------------------------- */

.ff-parallax {
	position: relative;
	min-height: min(56vh, 440px);
	display: flex;
	align-items: center;
	background-color: var(--ff-ink);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
	overflow: hidden;
}

.ff-parallax-tint {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(23, 26, 34, 0.86), rgba(200, 121, 63, 0.55));
}

.ff-parallax-content {
	position: relative;
	text-align: center;
	padding-block: clamp(48px, 8vw, 80px);
}

.ff-parallax-quote {
	font-size: clamp(1.5rem, 3.6vw, 2.5rem);
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.25;
	max-width: 18ch;
	margin-inline: auto;
}

.ff-parallax-content .ff-hero-bar {
	margin-inline: auto;
}

.ff-parallax-cite {
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #d7dbe3;
	margin: 0;
}

/* ---------------------------------------------------------------------
 * Sections
 * ------------------------------------------------------------------- */

.ff-section {
	padding-block: clamp(40px, 6vw, 72px);
}

.ff-section-alt {
	background: var(--ff-bg-alt);
}

.ff-table-heading {
	margin-top: 2em;
}

.ff-table-heading:first-of-type {
	margin-top: 0.5em;
}

/* ---------------------------------------------------------------------
 * How enrollment works: a 4 step process, the kind of thing an online
 * school's booking flow shows so the path from browsing to a seat is clear.
 * ------------------------------------------------------------------- */

.ff-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin-top: 1.75em;
}

.ff-step {
	background: #fff;
	border: 1px solid var(--ff-border);
	border-radius: var(--ff-radius);
	padding: 1.3em 1.2em;
	position: relative;
}

.ff-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--ff-circuit);
	color: #fff;
	font-weight: 800;
	font-size: 0.95rem;
	margin-bottom: 0.7em;
}

.ff-step-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ff-bg-alt);
	color: var(--ff-circuit-dark);
	margin-bottom: 0.7em;
}

.ff-step-icon svg.ff-icon {
	width: 20px;
	height: 20px;
}

.ff-step h3 {
	font-size: 1rem;
	margin-bottom: 0.3em;
}

.ff-step p {
	font-size: 0.9rem;
	color: var(--ff-muted);
	margin: 0;
}

/* ---------------------------------------------------------------------
 * Split image/text block (About section): stacked on mobile, side by
 * side from tablet up, image first visually either way since it's
 * written first in the markup.
 * ------------------------------------------------------------------- */

.ff-split {
	display: grid;
	gap: 28px;
	align-items: center;
}

.ff-split-image-wrap {
	position: relative;
	padding-bottom: 20px;
	padding-right: 16px;
}

.ff-split-image {
	min-height: 220px;
	background-size: cover;
	background-position: center;
	border-radius: var(--ff-radius);
	position: relative;
}

/* A thin copper bar and a small copper circle break out of the photo's
   corner, the same graphic accent as the hero, tying the two sections
   together without repeating the image itself. */
.ff-split-bar {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 55%;
	height: 14px;
	background: var(--ff-copper);
	border-radius: 3px;
}

.ff-split-circle {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ff-copper);
}

.ff-split-text h2 {
	margin-top: 0;
	font-size: clamp(1.7rem, 3.4vw, 2.3rem);
	text-transform: uppercase;
	color: var(--ff-copper-dark);
	line-height: 1.12;
}

.ff-split-no-image {
	display: block;
}

.ff-group-training-icon {
	display: none;
	color: var(--ff-copper);
	justify-content: center;
}

.ff-group-training-icon svg {
	width: clamp(100px, 14vw, 160px);
	height: clamp(100px, 14vw, 160px);
	stroke-width: 1.25;
}

/* ---------------------------------------------------------------------
 * Find Your Track: a short branching question flow, plain buttons that
 * swap which step/result is visible — no external quiz library.
 * ------------------------------------------------------------------- */

.ff-track-finder {
	max-width: 640px;
	margin-top: 1.75em;
	background: #fff;
	border: 1px solid var(--ff-border);
	border-radius: var(--ff-radius);
	padding: 1.75em;
}

.ff-tf-question {
	font-weight: 700;
	font-size: 1.1rem;
	margin-bottom: 1em;
}

.ff-tf-options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ff-tf-result-label {
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	/* -dark variant: bare --ff-copper only clears 3.16:1 on white, below
	   WCAG AA for text this small. */
	color: var(--ff-copper-dark);
	margin-bottom: 0.3em;
}

.ff-tf-result h3 {
	margin-top: 0;
}

.ff-tf-result .ff-tf-restart {
	margin-left: 8px;
}

/* ---------------------------------------------------------------------
 * FAQ accordion: native <details>/<summary>, no JS required.
 * ------------------------------------------------------------------- */

.ff-faq {
	display: grid;
	gap: 12px;
	margin-top: 1.75em;
	max-width: 760px;
}

.ff-faq-item {
	background: #fff;
	border: 1px solid var(--ff-border);
	border-radius: var(--ff-radius);
	padding: 0.9em 1.2em;
}

.ff-faq-item summary {
	cursor: pointer;
	font-weight: 700;
	list-style: none;
	position: relative;
	padding-right: 1.5em;
}

.ff-faq-item summary::-webkit-details-marker {
	display: none;
}

.ff-faq-item summary::after {
	content: '+';
	position: absolute;
	right: 0;
	top: 0;
	font-size: 1.2em;
	color: var(--ff-copper);
	font-weight: 700;
}

.ff-faq-item[open] summary::after {
	content: '\2212';
}

/* ---------------------------------------------------------------------
 * Student testimonials. Hidden entirely (see ff_render_testimonials())
 * until inc/testimonials.php has real entries.
 * ------------------------------------------------------------------- */

.ff-testimonial-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin-top: 1.75em;
}

.ff-testimonial-card {
	background: #fff;
	border: 1px solid var(--ff-border);
	border-radius: var(--ff-radius);
	padding: 1.3em 1.4em;
}

.ff-testimonial-stars {
	display: flex;
	gap: 2px;
	color: var(--ff-copper);
	margin-bottom: 0.6em;
}

.ff-testimonial-stars svg.ff-icon {
	width: 16px;
	height: 16px;
	stroke: var(--ff-copper);
}

.ff-testimonial-text {
	font-size: 0.95rem;
	margin: 0 0 0.8em;
}

.ff-testimonial-name {
	font-weight: 700;
	margin: 0;
	font-size: 0.9rem;
}

.ff-testimonial-date {
	font-weight: 400;
	color: var(--ff-muted);
}

/* ---------------------------------------------------------------------
 * Blog / Resources: post content typography, the /resources/ card grid,
 * and its pagination.
 * ------------------------------------------------------------------- */

.ff-container-narrow {
	max-width: 760px;
	margin-inline: auto;
}

.ff-entry-content {
	line-height: 1.7;
}

.ff-entry-content h2 {
	margin-top: 1.4em;
	font-size: 1.4rem;
}

.ff-entry-content h3 {
	margin-top: 1.2em;
	font-size: 1.15rem;
}

.ff-entry-content p,
.ff-entry-content ul,
.ff-entry-content ol {
	margin-bottom: 1.1em;
}

.ff-entry-content li {
	margin-bottom: 0.4em;
}

.ff-post-date {
	color: var(--ff-muted);
	font-size: 0.9rem;
	margin-top: -0.6em;
}

.ff-post-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 1.5em;
}

/* ---------------------------------------------------------------------
 * Article content patterns: a direct-answer callout (the main lever for
 * being quoted by AI answer engines and featured snippets — a short,
 * self-contained answer right under the heading it answers), a jump-link
 * table of contents for long articles, a mid-article CTA, and numbered
 * cards for listicle-style posts.
 * ------------------------------------------------------------------- */

.ff-answer-box {
	background: var(--ff-bg-alt);
	border-left: 4px solid var(--ff-copper);
	border-radius: 0 var(--ff-radius) var(--ff-radius) 0;
	padding: 1.1em 1.3em;
	margin: 1.3em 0;
}

.ff-answer-box p {
	margin-bottom: 0;
}

.ff-answer-box-label {
	display: block;
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ff-copper-dark);
	margin-bottom: 0.4em;
}

.ff-toc {
	background: #fff;
	border: 1px solid var(--ff-border);
	border-radius: var(--ff-radius);
	padding: 1.1em 1.4em;
	margin: 1.3em 0;
}

.ff-toc-label {
	font-weight: 800;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 0.6em;
}

.ff-toc ol {
	margin: 0;
	padding-left: 1.2em;
}

.ff-toc li {
	margin-bottom: 0.35em;
}

.ff-content-cta {
	background: var(--ff-ink);
	color: #fff;
	border-radius: var(--ff-radius);
	padding: 1.6em;
	margin: 1.8em 0;
	text-align: center;
}

.ff-content-cta h3 {
	color: #fff;
	margin-top: 0;
}

.ff-content-cta p {
	color: #d7dbe3;
}

.ff-defect-list {
	display: grid;
	gap: 14px;
	margin: 1.5em 0;
	list-style: none;
	padding: 0;
}

.ff-defect-card {
	display: flex;
	gap: 14px;
	background: #fff;
	border: 1px solid var(--ff-border);
	border-radius: var(--ff-radius);
	padding: 1.1em 1.3em;
}

.ff-defect-number {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ff-copper);
	/* White on this orange is only 3.16:1 (fails WCAG AA); dark ink text
	   clears 5.3:1. */
	color: var(--ff-ink);
	font-weight: 800;
}

.ff-defect-card h3 {
	margin: 0 0 0.3em;
}

.ff-defect-card p {
	margin: 0;
}

.ff-post-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 1.5em;
}

.ff-post-search-wrap {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 240px;
	max-width: 320px;
}

.ff-post-search-wrap svg.ff-icon {
	position: absolute;
	left: 12px;
	color: var(--ff-muted);
	pointer-events: none;
}

.ff-post-search {
	width: 100%;
	font: inherit;
	font-size: 0.9rem;
	padding: 0.6em 0.9em 0.6em 2.2em;
	border: 1px solid var(--ff-border);
	border-radius: 999px;
	background: #fff;
	color: var(--ff-text);
}

.ff-post-search:focus-visible {
	outline: 2px solid var(--ff-circuit);
	outline-offset: 1px;
}

.ff-post-controls .ff-course-filter {
	margin-top: 0;
}

.ff-post-card.is-filtered-out {
	display: none;
}

.ff-post-no-results {
	color: var(--ff-muted);
	margin-top: 1.5em;
}

.ff-post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin-top: 1.75em;
}

.ff-post-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--ff-border);
	border-radius: var(--ff-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.ff-post-card:hover,
.ff-post-card:focus-visible {
	box-shadow: 0 10px 24px rgba(23, 26, 34, 0.14);
	transform: translateY(-3px);
}

.ff-post-card-body {
	padding: 1.1em 1.2em 1.3em;
}

.ff-post-card-date {
	display: block;
	color: var(--ff-muted);
	font-size: 0.8rem;
	margin-bottom: 0.4em;
}

.ff-post-card-body h2 {
	font-size: 1.1rem;
	margin-bottom: 0.4em;
}

.ff-post-card-excerpt {
	font-size: 0.9rem;
	color: var(--ff-muted);
	margin: 0 0 0.6em;
}

.ff-post-card-meta {
	color: var(--ff-circuit-dark);
	font-size: 0.85rem;
	font-weight: 700;
}

.ff-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2em;
}

.ff-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding-inline: 0.5em;
	border: 1px solid var(--ff-border);
	border-radius: var(--ff-radius);
	text-decoration: none;
	color: var(--ff-text);
	font-size: 0.9rem;
}

.ff-pagination .page-numbers.current {
	background: var(--ff-ink);
	border-color: var(--ff-ink);
	color: #fff;
}

.ff-pagination a.page-numbers:hover {
	border-color: var(--ff-copper);
	color: var(--ff-copper-dark);
}

/* ---------------------------------------------------------------------
 * Course page additions: "What You'll Learn" checklist, and the
 * Related Courses / FAQ sections reuse .ff-course-grid and .ff-faq as-is.
 * ------------------------------------------------------------------- */

.ff-highlights-list {
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0;
	display: grid;
	gap: 0.6em;
}

.ff-highlights-list li {
	position: relative;
	padding-left: 1.8em;
	line-height: 1.5;
}

.ff-highlights-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.2em;
	height: 1.2em;
	border-radius: 50%;
	background: var(--ff-circuit);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") center / 60% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") center / 60% no-repeat;
}

.ff-faq-item summary:focus-visible {
	outline: 2px solid var(--ff-circuit);
	outline-offset: 3px;
}

.ff-faq-item p {
	margin: 0.75em 0 0.1em;
	color: var(--ff-muted);
}

/* ---------------------------------------------------------------------
 * Course tables (still used if a page embeds one; cards are primary now)
 * ------------------------------------------------------------------- */

.ff-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--ff-border);
	border-radius: var(--ff-radius);
	background: #fff;
}

.ff-course-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 480px;
}

.ff-course-table th,
.ff-course-table td {
	text-align: left;
	padding: 0.85em 1em;
	border-bottom: 1px solid var(--ff-border);
}

.ff-course-table th {
	background: var(--ff-ink);
	color: #fff;
	font-weight: 700;
	font-size: 0.9rem;
}

.ff-course-table tbody tr:last-child td {
	border-bottom: none;
}

.ff-course-table tbody tr:hover {
	background: var(--ff-bg-alt);
}

.ff-prerequisite {
	margin-top: 1em;
	padding: 0.9em 1.1em;
	background: #fdf1e7;
	border: 1px solid #ecc9a4;
	border-radius: var(--ff-radius);
	color: var(--ff-ink);
}

@media (max-width: 560px) {
	.ff-table-wrap {
		overflow-x: visible;
		border: none;
		background: transparent;
	}

	.ff-course-table {
		min-width: 0;
	}

	.ff-course-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.ff-course-table,
	.ff-course-table tbody,
	.ff-course-table tr,
	.ff-course-table td {
		display: block;
		width: 100%;
	}

	.ff-course-table tr {
		margin-bottom: 1em;
		border: 1px solid var(--ff-border);
		border-radius: var(--ff-radius);
		overflow: hidden;
	}

	.ff-course-table td {
		display: flex;
		justify-content: space-between;
		gap: 1em;
		text-align: right;
	}

	.ff-course-table td::before {
		content: attr(data-label);
		font-weight: 700;
		color: var(--ff-ink);
		text-align: left;
	}
}

/* ---------------------------------------------------------------------
 * Contact / footer
 * ------------------------------------------------------------------- */

.ff-phone-link {
	font-size: 1.25rem;
	font-weight: 700;
}

.ff-admin-note {
	margin-top: 1em;
	padding: 0.75em 1em;
	background: #fef3e2;
	border: 1px dashed var(--ff-copper);
	border-radius: var(--ff-radius);
	font-size: 0.9rem;
	color: var(--ff-ink);
}

.ff-footer {
	background: var(--ff-ink);
	color: #b9bfcb;
	text-align: center;
	padding-block: 28px;
	font-size: 0.9rem;
}

.ff-footer a {
	color: #fff;
}

.ff-footer-inner p {
	margin: 0.3em 0;
}

/* Persistent mobile enroll bar: fixed to the bottom of the viewport,
   hidden until the visitor scrolls (see sticky-cta.js), shown only below
   laptop width — above that the header's own CTA is always in view
   already, so a second fixed bar would just be redundant clutter. */
.ff-sticky-enroll {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 19;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
	background: rgba(23, 26, 34, 0.96);
	box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.18);
	transform: translateY(100%);
	transition: transform 0.2s ease;
}

.ff-sticky-enroll.is-visible {
	transform: translateY(0);
}

.ff-sticky-enroll .ff-btn {
	display: block;
	text-align: center;
}

.ff-404 {
	text-align: center;
	padding-block: 40px;
}

/* ---------------------------------------------------------------------
 * Course catalog: filter bar, cards, single course page
 * ------------------------------------------------------------------- */

.ff-course-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 1.5em;
}

.ff-course-filter-btn {
	font-family: var(--ff-font-mono);
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.02em;
	background: #fff;
	color: var(--ff-text);
	border: 1px solid var(--ff-border);
	border-radius: 999px;
	padding: 0.5em 1.1em;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ff-course-filter-btn:hover {
	border-color: var(--ff-copper);
}

.ff-course-filter-btn:focus-visible {
	outline: 2px solid var(--ff-circuit);
	outline-offset: 2px;
}

.ff-course-filter-btn.is-active {
	background: var(--ff-ink);
	border-color: var(--ff-ink);
	color: #fff;
}

.ff-course-card.is-filtered-out {
	display: none;
}

.ff-course-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	margin-block: 1.5em;
}

.ff-course-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--ff-border);
	border-top: 4px solid var(--ff-card-track, var(--ff-copper));
	border-radius: var(--ff-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.ff-course-card:hover,
.ff-course-card:focus-visible {
	box-shadow: 0 10px 24px rgba(23, 26, 34, 0.14);
	transform: translateY(-3px);
}

.ff-course-card-image {
	height: 160px;
	background-size: cover;
	background-position: center;
	background-color: var(--ff-ink);
}

.ff-course-card-body {
	padding: 1em 1.2em 1.3em;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.ff-course-card-body h2,
.ff-course-card-body h3 {
	font-size: 1.1rem;
	margin-bottom: 0.3em;
}

.ff-course-card-excerpt {
	font-size: 0.88rem;
	color: var(--ff-muted);
	margin: 0 0 0.6em;
	flex: 1;
}

.ff-course-card-meta {
	color: var(--ff-muted);
	font-size: 0.85rem;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.4em;
	flex-wrap: wrap;
}

.ff-course-card-price {
	color: var(--ff-copper-dark);
	font-weight: 700;
	margin: 0.4em 0 0;
}

.ff-track-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--ff-font-mono);
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	/* -dark variant: bare --ff-copper only clears 3.16:1 on white, below
	   WCAG AA for text this small (a per track override, when set, is
	   its own color and unaffected). */
	color: var(--ff-card-track, var(--ff-copper-dark));
	margin-bottom: 0.4em;
}

.ff-track-badge::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.ff-catalog-cta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 1.5em;
}

.ff-breadcrumb {
	font-family: var(--ff-font-mono);
	font-size: 0.78rem;
	color: var(--ff-muted);
	margin-bottom: 1em;
}

.ff-breadcrumb a {
	color: var(--ff-muted);
}

.ff-breadcrumb span[aria-hidden] {
	margin: 0 0.4em;
}

.ff-course-hero {
	height: clamp(180px, 30vw, 360px);
	background-size: cover;
	background-position: center;
	position: relative;
	border-bottom: 5px solid var(--ff-card-track, var(--ff-copper));
}

.ff-course-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(23, 26, 34, 0) 50%, rgba(23, 26, 34, 0.55));
}

.ff-course-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 1em 0 1.3em;
}

.ff-fact {
	display: flex;
	align-items: center;
	gap: 0.7em;
	background: var(--ff-bg-alt);
	border: 1px solid var(--ff-border);
	border-radius: var(--ff-radius);
	padding: 0.7em 1em;
	min-width: 130px;
}

.ff-fact-icon {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--ff-card-track, var(--ff-copper));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
}

.ff-fact-text {
	display: block;
}

.ff-fact-text span {
	display: block;
	font-size: 0.75rem;
	color: var(--ff-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 0.2em;
}

/* ---------------------------------------------------------------------
 * Responsive breakpoints.
 *
 * Mobile first base styles above cover phones (< 600px). The tiers below
 * are deliberate, named stops rather than one generic "not mobile"
 * breakpoint: tablet (600-1023px, typically 2 up layouts), laptop
 * (1024-1439px, the 3 up layouts most of the design already defaults
 * to), and desktop (1440px+, slightly roomier spacing and a 4 up catalog).
 * ------------------------------------------------------------------- */

/* Tablet: 600px and up. */
@media (min-width: 600px) {
	.ff-course-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ff-steps {
		grid-template-columns: repeat(2, 1fr);
	}

	body.ff-home {
		--ff-header-h: 124px;
	}

	.ff-hero-features-inner {
		grid-template-columns: repeat(2, 1fr);
	}

	.ff-hero-feature {
		padding: 1em 1.2em;
		border-top: none;
		border-left: none;
	}

	.ff-brand-mark {
		width: 240px;
	}

	.ff-hero-feature:nth-child(even) {
		border-left: 1px solid rgba(255, 255, 255, 0.15);
	}

	.ff-hero-feature:nth-child(n + 3) {
		border-top: 1px solid rgba(255, 255, 255, 0.15);
	}

	.ff-split {
		grid-template-columns: 1fr 1fr;
	}

	.ff-split-image {
		min-height: 320px;
	}

	.ff-group-training-icon {
		display: flex;
	}
}

/* Laptop: 1024px and up. */
@media (min-width: 1024px) {
	.ff-nav-toggle {
		display: none;
	}

	.ff-sticky-enroll {
		display: none;
	}

	body.ff-home {
		--ff-header-h: 140px;
	}

	.ff-brand-mark {
		width: 280px;
	}

	.ff-hero-feature-icon {
		width: 80px;
		height: 80px;
	}

	/* Feature strip: single row of 4 (this strip is always exactly 4
	   items), replacing the tablet 2x2 grid and its dividers. */
	.ff-hero-features-inner {
		grid-template-columns: repeat(4, 1fr);
	}

	.ff-hero-feature {
		border-top: none;
		border-left: none;
	}

	/* Explicit override, not just the plain .ff-hero-feature reset above:
	   the tablet breakpoint's :nth-child(n+3) border-top rule has higher
	   specificity (class + pseudo-class) than that reset (class only),
	   so without a matching :nth-child selector here it kept winning at
	   this width too — items 3 and 4 (which match both breakpoints'
	   rules simultaneously, since min-width queries stack rather than
	   replace each other) stayed stuck with a leftover row-divider
	   border-top the first two items never had. */
	.ff-hero-feature:nth-child(n + 3) {
		border-top: none;
	}

	.ff-hero-feature:nth-child(n + 2) {
		border-left: 1px solid rgba(255, 255, 255, 0.15);
	}

	/* True scroll-fixed parallax only once there's room to notice it and
	   a pointer device likely to be driving the scroll — background-
	   attachment: fixed is unreliable on mobile Safari/Android, so
	   smaller/touch screens just get the plain cover image instead. */
	.ff-parallax {
		background-attachment: fixed;
	}

	.ff-nav {
		position: static;
		flex-direction: row;
		background: none;
		padding: 0;
		box-shadow: none;
	}

	.ff-course-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.ff-steps {
		grid-template-columns: repeat(4, 1fr);
	}

	/* The toggle no longer anchors the panel's horizontal position (see
	   .ff-nav-dropdown below) — .ff-header is the positioning context
	   instead, so this only matters for z-stacking now. */
	.ff-nav-item-has-dropdown {
		position: static;
	}

	/* Courses dropdown as a floating panel centered under the full-width
	   header bar (not under the toggle button itself) — anchoring to the
	   toggle pushed the panel off the right edge of the screen whenever
	   "Courses" sat right of center in the nav, since the panel is wider
	   than the toggle. Opens on hover/focus-within for a fast mouse
	   interaction, and on .is-open (added by nav.js) for click and
	   keyboard activation of the toggle button itself. */
	.ff-nav-dropdown {
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 14px;
		width: min(680px, calc(100vw - 40px));
		display: flex;
		align-items: flex-start;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.12s ease;
	}

	/* One column per certification track, plus a narrower "view all"
	   column, with a vertical rule between them. The track columns share
	   the available width equally and shrink together (min-width: 0
	   lets them go below their text's natural width — course titles wrap
	   onto a second line instead of forcing the panel wider than the
	   screen, which is what made the panel overflow and require a
	   horizontal scrollbar before). */
	.ff-nav-dropdown-col {
		flex: 1 1 0;
		min-width: 0;
		padding: 0 16px;
	}

	.ff-nav-dropdown-col-all {
		flex: 0 0 132px;
	}

	.ff-nav-dropdown-col:first-child {
		padding-left: 0;
	}

	.ff-nav-dropdown-col:last-child {
		padding-right: 0;
	}

	.ff-nav-dropdown-col + .ff-nav-dropdown-col {
		border-left: 1px solid var(--ff-border);
	}

	/* Opening is driven from nav.js (mouseenter/mouseleave with a short
	   close delay — see initDropdown()), not CSS :hover, because the
	   panel is centered under the whole header rather than directly
	   below the toggle and so isn't always physically adjacent to it on
	   screen; a pure :hover chain breaks the instant the cursor crosses
	   that gap. :focus-within stays as a keyboard fallback for tabbing
	   in without JS having run yet. */
	.ff-nav-item-has-dropdown:focus-within .ff-nav-dropdown,
	.ff-nav-item-has-dropdown.is-open .ff-nav-dropdown {
		opacity: 1;
		visibility: visible;
	}

	.ff-nav-item-has-dropdown.is-open .ff-nav-dropdown-toggle svg {
		transform: rotate(180deg);
	}
}

/* Desktop: 1440px and up. */
@media (min-width: 1440px) {
	:root {
		--ff-max-width: 1280px;
	}

	.ff-course-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	body.ff-home {
		--ff-header-h: 156px;
	}

	.ff-brand-mark {
		width: 320px;
	}
}

/* Mobile nav: collapsed by default below the laptop breakpoint, toggled
   open by assets/js/nav.js. */
@media (max-width: 1023px) {
	/* Below laptop width the row is menu, logo, then CTA: group the
	   toggle and brand tight on the left instead of spreading all three
	   evenly (space-between, used at laptop width and up), and push the
	   CTA to the right edge with its own auto margin. */
	.ff-header-inner {
		justify-content: flex-start;
		/* Safety net, not the primary layout: hamburger + logo + CTA
		   fit on one row at normal phone widths, but this keeps very
		   narrow devices (~320px) from overflowing horizontally if
		   they ever don't, by wrapping instead. */
		flex-wrap: wrap;
		row-gap: 8px;
	}

	.ff-header-cta {
		margin-left: auto;
	}

	.ff-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		background: var(--ff-ink-light);
		padding: 10px 20px 16px;
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
	}

	.ff-nav[hidden] {
		display: none;
	}

	.ff-nav a {
		width: 100%;
		padding-block: 10px;
	}

	.ff-nav-dropdown-toggle {
		width: 100%;
		justify-content: space-between;
		padding-block: 10px;
	}

	/* No hover on touch, so the dropdown only opens via .is-open (nav.js),
	   expanding inline within the stacked menu rather than floating. */
	.ff-nav-dropdown {
		display: none;
		box-shadow: none;
		background: rgba(255, 255, 255, 0.06);
		border-radius: 6px;
		padding: 8px 14px 10px 18px;
		margin-top: 4px;
	}

	.ff-nav-item-has-dropdown.is-open .ff-nav-dropdown {
		display: block;
	}

	.ff-nav-item-has-dropdown.is-open .ff-nav-dropdown-toggle svg {
		transform: rotate(180deg);
	}

	.ff-nav-dropdown-col + .ff-nav-dropdown-col {
		margin-top: 8px;
		padding-top: 8px;
		border-top: 1px solid rgba(255, 255, 255, 0.14);
	}

	.ff-nav-dropdown-group {
		color: #b9bfcb;
	}

	.ff-nav-dropdown a {
		color: #d7dbe3;
		white-space: normal;
	}

	.ff-nav-dropdown a:hover,
	.ff-nav-dropdown a:focus-visible {
		background: rgba(255, 255, 255, 0.08);
		color: #fff;
	}

	.ff-nav a::after {
		display: none;
	}
}

/* Google Calendar embed (replaced the custom enroll-request calendar).
   The iframe itself only accepts fixed width/height attributes, so it's
   wrapped and stretched to fill the container instead of trusting those. */
.ff-gcal-embed {
	max-width: 900px;
	margin-inline: auto;
	border: 1px solid var(--ff-border);
	border-radius: var(--ff-radius);
	overflow: hidden;
}

.ff-gcal-embed iframe {
	display: block;
	width: 100%;
	height: 500px;
}

@media (min-width: 600px) {
	.ff-gcal-embed iframe {
		height: 580px;
	}
}

@media (min-width: 1024px) {
	.ff-gcal-embed iframe {
		height: 650px;
	}
}