/**
 * AMC child theme — foundation stylesheet.
 *
 * Design tokens plus base/foundation rules and the global site shell
 * (header/nav, buttons, section spacing, entry content, footer). Organized
 * into clearly labeled sections in the same order as the Concept C
 * Implementation Handoff Specification's own component inventory (§7), so
 * this file stays auditable against that document as sections are filled
 * in across work packages — see docs/AMC_DECISIONS.md for the "one
 * stylesheet" rationale.
 *
 * Loaded by inc/enqueue.php after GeneratePress's own stylesheet and its
 * inline dynamic CSS, so equal-specificity overrides win without !important.
 */

/* =============================================================================
 * DESIGN TOKENS — Concept C, approved (docs/AMC_DECISIONS.md)
 *
 * Values and names are taken verbatim from the Concept C Implementation
 * Handoff Specification §6 (the spec's own "authoritative table" — no
 * component in this theme should hard-code a value that exists here).
 * Nothing in this block is a placeholder.
 * ========================================================================= */

:root {
	/* --- Color: navy (chrome, dark bands, headings) ------------------------- */
	--amc-navy-900: #0b1f3a;
	--amc-navy-700: #14375e;
	--amc-navy-600: #16304f;
	--amc-navy-line: #23405f;

	/* --- Color: blue (primary action) ---------------------------------------- */
	--amc-blue-800: #103c6e; /* pressed/active on primary */
	--amc-blue-700: #144b88; /* hover on primary, visited links */
	--amc-blue-600: #1b5faa; /* primary action, links, icons, focus ring */
	--amc-blue-100: #d9e6f4; /* pressed tint on rows/secondary buttons */
	--amc-blue-50: #eaf1f9;  /* hover tint on rows/secondary buttons */

	/* --- Color: mist (alternating surfaces) ---------------------------------- */
	--amc-mist: #f5f8fb;       /* alternating section ground, highlighted card */
	--amc-mist-deep: #e8edf3;  /* image container ground before an image loads */

	/* --- Color: sand (guidance band ONLY — one use per page, never a second
	 * warm surface) ------------------------------------------------------------ */
	--amc-sand: #f7f4ef;
	--amc-sand-line: #e5dfd4;

	/* --- Color: ink / slate (text) --------------------------------------------- */
	--amc-ink: #111a26;        /* maximum-contrast body text where needed */
	--amc-ink-700: #3c4858;    /* lede and supporting prose */
	--amc-slate-600: #4c5c70;  /* card and secondary copy */
	--amc-slate-400: #6b7684;  /* eyebrows, meta labels — never body text */

	/* --- Color: hairlines / borders --------------------------------------------- */
	--amc-hairline: #dde4ec;         /* every 1px border/rule on light grounds */
	--amc-hairline-strong: #b9cadb;  /* secondary button border, hover border */

	/* --- Color: on navy ------------------------------------------------------------ */
	--amc-on-navy: #c6d7e8;      /* body text and links on navy */
	--amc-on-navy-dim: #9fb8d2;  /* footer disclosure on navy — dimmest permitted */
	--amc-on-navy-icon: #7fa8d4; /* trust-band and footer icons on navy */

	/* --- Color: feedback / neutral ------------------------------------------------- */
	--amc-red-700: #9e2b2b; /* form errors ONLY — never decorative */
	--amc-white: #ffffff;

	/* --- Typography: families -------------------------------------------------------
	 * Source Serif 4 for h1-h3/card/step titles ONLY; Public Sans everywhere
	 * else. Self-hosted (inc/fonts.php + assets/fonts/), no Google Fonts CDN.
	 */
	--amc-font-heading: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--amc-font-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--amc-weight-body: 400;
	--amc-weight-medium: 500;
	--amc-weight-semibold: 600;
	--amc-weight-bold: 700;
	--amc-weight-heading: 600; /* Source Serif 4 headings are weight 600, never bolder */

	/* --- Typography: type scale — mobile (<768px) values as the base; tablet/
	 * desktop steps redeclare these further down. Each role is exact stepped
	 * values from spec §6.2, not a fluid clamp() approximation.
	 * -------------------------------------------------------------------------- */
	--amc-text-h1: 33px;            --amc-leading-h1: 37px;
	--amc-text-h2: 26px;            --amc-leading-h2: 30px;
	--amc-text-h2-band: 25px;       --amc-leading-h2-band: 29px;
	--amc-text-h3: 19px;            --amc-leading-h3: 24px;
	--amc-text-intent-card: 21px;   --amc-leading-intent-card: 26px;
	--amc-text-lede: 16.5px;        --amc-leading-lede: 26px;
	--amc-text-body: 16px;          --amc-leading-body: 26px;
	--amc-text-card-body: 15px;     --amc-leading-card-body: 23px;
	--amc-text-ui: 16px;            --amc-leading-ui: 1.2;
	--amc-text-intent-row: 16.5px;  --amc-leading-intent-row: 1.4;
	--amc-text-eyebrow: 11.5px;     --amc-leading-eyebrow: 1.2;
	--amc-text-meta: 11px;          --amc-leading-meta: 1.2;
	--amc-text-trust-label: 14.5px; --amc-leading-trust-label: 20px;
	--amc-text-trust-sub: 13px;     --amc-leading-trust-sub: 18px;
	--amc-text-legal: 13.5px;       --amc-leading-legal: 23px; /* mobile hard floor */
	--amc-text-utility: 13px;       --amc-leading-utility: 1.4;

	--amc-letter-spacing-h1: -0.005em;
	--amc-letter-spacing-eyebrow: 0.18em;
	--amc-letter-spacing-meta: 0.14em;
	--amc-letter-spacing-numeral: 0.1em;

	/* --- Layout: canvas, gutters, gaps ------------------------------------------------ */
	--amc-content-max: 1328px;
	--amc-gutter: 16px; /* ≤360px; steps up in the media queries below */
	--amc-gap-card: 20px;
	--amc-gap-hero: 56px;
	--amc-gap-band: 28px;
	--amc-gap-footer: 44px;

	/* --- Layout: section padding (desktop values; mobile override below) ------------- */
	--amc-section-pad-top: 72px;
	--amc-section-pad-bottom: 76px;
	--amc-section-pad-band: 64px;
	--amc-section-pad-guidance: 56px;
	--amc-section-pad-closing: 52px;

	/* --- Borders, radii, shadows ------------------------------------------------------- */
	--amc-border-width: 1px;
	--amc-border-width-emphasis: 2px; /* step top-rule, active-nav underline */
	--amc-border-width-hover-rule: 3px; /* intent-row hover left rule */

	--amc-radius-control: 4px; /* buttons, form controls */
	--amc-radius-card: 6px;    /* cards, intent card, dropdown panel */
	--amc-radius-band: 0;      /* bands, header, footer, trust band */

	--amc-shadow-card: 0 6px 20px rgba(11, 31, 58, 0.06);
	--amc-shadow-dropdown: 0 14px 30px rgba(11, 31, 58, 0.08);

	/* --- Icons -------------------------------------------------------------------------- */
	--amc-icon-stroke-width: 1.7;
	--amc-icon-inline: 15px;
	--amc-icon-row-arrow: 17px;
	--amc-icon-trust: 24px;
	--amc-icon-program: 26px;
	--amc-icon-footer-mark: 32px;

	/* --- Controls, touch targets, focus -------------------------------------------------- */
	--amc-touch-min: 44px;
	--amc-button-height-min: 48px;
	--amc-button-height-mobile: 52px;
	--amc-button-pad-x: 28px;
	--amc-field-height: 48px;

	--amc-focus-color: var(--amc-blue-600);
	--amc-focus-color-on-navy: var(--amc-white);
	--amc-focus-width: 2px;
	--amc-focus-offset: 2px;

	/* --- Motion --------------------------------------------------------------------------- */
	--amc-transition-fast: 150ms;
	--amc-ease-standard: ease;
	--amc-transition-arrow: 4px;

	/* --- Z-index --------------------------------------------------------------------------- */
	--amc-z-header: 100;
	--amc-z-dropdown: 90;
	--amc-z-drawer: 200;
}

/* =============================================================================
 * BREAKPOINTS — convention reference, not machine-readable.
 *
 * CSS custom properties cannot be used inside an @media condition, so these
 * are documented here for consistency and used as literal values in media
 * queries throughout the theme (Concept C spec §6.5):
 *
 *   320-389px  narrow mobile
 *   390-767px  mobile
 *   768-1023px tablet
 *   1024-1279px small desktop
 *   ≥1280px    desktop
 *
 * Navigation switches from the mobile drawer to the desktop dropdown at
 * 1024px.
 * ========================================================================= */

@media (min-width: 768px) {
	:root {
		--amc-text-h1: 40px;            --amc-leading-h1: 44px;
		--amc-text-h2: 30px;            --amc-leading-h2: 35px;
		--amc-text-h2-band: 28px;       --amc-leading-h2-band: 33px;
		--amc-text-h3: 21px;            --amc-leading-h3: 25px;
		--amc-text-intent-card: 22px;   --amc-leading-intent-card: 27px;
		--amc-text-lede: 17.5px;        --amc-leading-lede: 28px;
		--amc-text-card-body: 15.5px;   --amc-leading-card-body: 24px;
		--amc-text-ui: 15.5px;          --amc-leading-ui: 1.2;
		--amc-text-intent-row: 17px;    --amc-leading-intent-row: 1.35;
		--amc-text-eyebrow: 12px;       --amc-leading-eyebrow: 1.2;
		--amc-text-meta: 11.5px;        --amc-leading-meta: 1.2;
		--amc-text-legal: 14px;         --amc-leading-legal: 24px;
		--amc-text-utility: 13.5px;     --amc-leading-utility: 1.4;

		--amc-gutter: 32px;
	}
}

@media (min-width: 1024px) {
	:root {
		--amc-gutter: 40px;
	}
}

@media (min-width: 1280px) {
	:root {
		--amc-text-h1: 48px;            --amc-leading-h1: 52px;
		--amc-text-h2: 34px;            --amc-leading-h2: 39px;
		--amc-text-h2-band: 32px;       --amc-leading-h2-band: 37px;
		--amc-text-h3: 22px;            --amc-leading-h3: 26px;
		--amc-text-intent-card: 24px;   --amc-leading-intent-card: 29px;
		--amc-text-lede: 18.5px;        --amc-leading-lede: 30px;
		--amc-text-eyebrow: 12.5px;     --amc-leading-eyebrow: 1.2;
		--amc-text-meta: 12px;          --amc-leading-meta: 1.2;

		--amc-gutter: 56px;
	}
}

/* =============================================================================
 * WEBFONTS — self-hosted, no Google Fonts CDN request.
 *
 * Files are fetched from their real open-source origin (SIL OFL) into
 * assets/fonts/ — see inc/fonts.php for the above-the-fold preload of the
 * Regular and SemiBold files referenced here. font-display: swap so text
 * renders immediately in the fallback stack and swaps once the real font
 * arrives, rather than blocking (avoids FOIT).
 * ========================================================================= */

@font-face {
	font-family: 'Public Sans';
	src: url('../fonts/public-sans/public-sans-latin-400-normal.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Public Sans';
	src: url('../fonts/public-sans/public-sans-latin-500-normal.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Public Sans';
	src: url('../fonts/public-sans/public-sans-latin-600-normal.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Public Sans';
	src: url('../fonts/public-sans/public-sans-latin-700-normal.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Source Serif 4';
	src: url('../fonts/source-serif-4/source-serif-4-latin-600-normal.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* =============================================================================
 * BASE / FOUNDATION RULES
 * ========================================================================= */

/* Every icon instance (inc/icons.php, amc_child_icon()) — the sprite's
 * <symbol> elements store only bare <path>/<rect>/<circle> data (no
 * fill/stroke attributes of their own), so every visual property comes
 * from here, applied once, rather than repeated per component. Matches
 * Concept C spec §6.4 exactly: stroke 1.7px, fill: none, round caps/joins.
 * An earlier version omitted this rule entirely, which rendered every
 * icon as a solid black silhouette (default SVG fill) — caught live via
 * screenshot, not assumed correct from the markup alone.
 */
.amc-icon {
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: var(--amc-icon-stroke-width);
	stroke-linecap: round;
	stroke-linejoin: round;
}

body {
	color: var(--amc-ink);
	font-family: var(--amc-font-sans);
	font-weight: var(--amc-weight-body);
	font-size: var(--amc-text-body);
	line-height: 1.625;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--amc-font-heading);
	font-weight: var(--amc-weight-heading);
	line-height: 1.15;
	text-wrap: pretty;
}

h1 {
	letter-spacing: var(--amc-letter-spacing-h1);
}

a {
	color: var(--amc-blue-600);
}

a:hover {
	color: var(--amc-blue-700);
}

/* Visible keyboard focus on every interactive element, independent of
 * GeneratePress's own focus styling, so it survives a future template
 * change. Non-negotiable per Concept C spec §11.8/§17 — never suppressed
 * without this replacement.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: var(--amc-focus-width) solid var(--amc-focus-color);
	outline-offset: var(--amc-focus-offset);
}

/* A minimal, reusable container utility, sized to Concept C's max content
 * width and responsive gutter scale.
 */
.amc-container {
	margin-inline: auto;
	max-width: var(--amc-content-max);
	padding-inline: var(--amc-gutter);
}

/* Respect the visitor's OS-level motion preference — applies broadly per
 * Concept C spec §6.5 ("no animation is load-bearing").
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =============================================================================
 * GLOBAL SITE STRUCTURE
 *
 * Styles the shared shell (header, nav, footer, buttons, section spacing,
 * blog archive/single) that every page sits inside.
 *
 * IMPORTANT — verification status: class selectors below that target
 * GeneratePress/WordPress-core-generated markup (anything not prefixed
 * `amc-`) are based on GeneratePress's publicly documented markup and were
 * live-verified against this specific AMC staging install in a prior work
 * package (docs/AMC_DECISIONS.md, DEC-012). The header/footer overrides and
 * new components Concept C requires (utility strip, mega-menu dropdown,
 * mobile drawer, navy footer band) are a separate, not-yet-built work
 * package — this section only re-tokenizes what already renders today, so
 * it does not regress the live-verified state.
 * ========================================================================= */

/* --- Skip link --------------------------------------------------------------
 * GeneratePress (accessibility-ready) already outputs a skip-to-content
 * link; this only re-themes its focused state to use our focus token. No
 * shadow is applied — Concept C permits a shadow only on the intent card
 * and the dropdown panel (spec §6.4), nothing else.
 */
.skip-link.screen-reader-text:focus {
	align-items: center;
	background-color: var(--amc-white);
	border: var(--amc-border-width) solid var(--amc-hairline-strong);
	border-radius: var(--amc-radius-control);
	color: var(--amc-ink);
	display: inline-flex;
	min-height: 44px;
	padding: 8px 16px;
}

/* --- Announcement / licensing strip --------------------------------------------
 * GeneratePress's own native "Top Bar" widget area (register_sidebar id
 * "top-bar", confirmed live in wp-content/themes/generatepress/inc/
 * general.php) — renders only when a widget is placed there
 * (is_active_sidebar() check in generate_top_bar()), so this is dormant
 * until compliance content (NMLS ID, licensed states, phone) is approved
 * — see AMC_PROJECT_STATUS.md, "Pending Client Decisions." Styled now so
 * placing a widget later needs no further CSS work.
 */
.top-bar {
	background-color: var(--amc-navy-900);
	color: var(--amc-on-navy);
}

.inside-top-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--amc-gutter);
	min-height: 40px;
	padding-block: 9px;
	font-size: var(--amc-text-utility);
	line-height: var(--amc-leading-utility);
}

.top-bar a {
	color: var(--amc-white);
}

.top-bar a:hover {
	color: var(--amc-on-navy);
}

@media (max-width: 767px) {
	.inside-top-bar {
		justify-content: center;
		text-align: center;
		font-size: 13px;
	}
}

/* --- Header / primary navigation --------------------------------------------
 * Structure and toggle behavior are GeneratePress's own (verified live on
 * staging, not assumed — see docs/AMC_DECISIONS.md). This applies
 * token-based typography, color, height, and the mega-menu/drawer
 * treatments Concept C's spec requires on top of that existing structure.
 */
.site-header {
	min-height: 64px;
}

@media (min-width: 1024px) {
	.site-header {
		min-height: 86px;
	}
}

.site-header .main-navigation {
	font-family: var(--amc-font-sans);
	font-size: var(--amc-text-ui);
}

.main-navigation a {
	color: var(--amc-navy-600);
}

.main-navigation a:hover {
	color: var(--amc-blue-600);
}

.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a {
	border-bottom: var(--amc-border-width-emphasis) solid var(--amc-blue-600);
}

/* Minimum 44px tap target (WCAG 2.5.8) on the mobile menu toggle button,
 * regardless of its icon's visual size.
 */
.menu-toggle {
	min-height: var(--amc-touch-min);
	min-width: var(--amc-touch-min);
}

.menu-toggle:focus-visible {
	outline: var(--amc-focus-width) solid var(--amc-focus-color);
	outline-offset: var(--amc-focus-offset);
}

/* --- Header CTAs (secondary/primary buttons) -----------------------------------
 * GeneratePress's own native "Header" widget area (register_sidebar id
 * "header", same file as top-bar above) — renders only when populated
 * (tools/setup-header-chrome.php places a Custom HTML widget with the two
 * buttons here). No header.php override needed for this placement.
 *
 * GeneratePress's own inline CSS (confirmed live, not assumed) forces
 * `.has-inline-mobile-toggle .header-widget { flex-basis: 100% }`,
 * wrapping it to its own full-width row below the nav at every width.
 * Overridden back to `auto` at desktop widths using the same selector GP
 * uses, so this wins on source order (this stylesheet loads after GP's)
 * without needing !important.
 */
.header-widget {
	display: flex;
	align-items: center;
	gap: 14px;
}

.header-widget .wp-block-button__link,
.header-widget .amc-button {
	white-space: nowrap;
}

@media (max-width: 1023px) {
	.header-widget {
		display: none;
	}
}

@media (min-width: 1024px) {
	.has-inline-mobile-toggle .header-widget {
		flex-basis: auto;
		margin-inline-start: auto;
	}
}

/* Secondary/outline variant for hand-authored buttons outside the block
 * editor (e.g. tools/setup-header-chrome.php's header CTAs), matching
 * `.is-style-amc-outline .wp-block-button__link`'s token values exactly.
 * Compound selector (.amc-button.amc-button--secondary) so this wins over
 * the later, single-class base `.amc-button` rule regardless of source
 * order — an earlier version relied on cascade order alone and lost.
 */
.amc-button.amc-button--secondary {
	background-color: transparent;
	border: var(--amc-border-width) solid var(--amc-hairline-strong);
	color: var(--amc-navy-700);
}

.amc-button.amc-button--secondary:hover {
	background-color: var(--amc-blue-50);
	border-color: var(--amc-blue-600);
	color: var(--amc-navy-700);
}

.amc-button.amc-button--secondary:active {
	background-color: var(--amc-blue-100);
}

/* --- Loan Programs mega-menu dropdown -------------------------------------------
 * Overrides GeneratePress's default 200px-wide dropdown for items with
 * children (currently only Loan Programs — confirmed live) into a
 * full-width panel per Concept C spec §5.6/§7.3. GP's own hidden/visible
 * mechanism (opacity/pointer-events/height, in its main.css) is left
 * alone; only position/size/layout are added via higher-specificity
 * (ID-anchored) rules so this doesn't depend on matching GP's exact
 * selector specificity. position: fixed with a literal header-height
 * offset is safe here specifically because the header is NOT sticky
 * (Concept C spec) — the dropdown can only be triggered while the header
 * is on-screen at its natural position, so "fixed at 86px from viewport
 * top" and "immediately below the actual header" are the same point.
 */
@media (min-width: 1024px) {
	#site-navigation .main-nav > ul > li.menu-item-has-children > .sub-menu {
		width: 100vw;
		max-width: 100vw;
	}

	#site-navigation:not(.toggled) .main-nav > ul > li.menu-item-has-children:hover > .sub-menu,
	#site-navigation:not(.toggled) .main-nav > ul > li.menu-item-has-children.sfHover > .sub-menu {
		position: fixed;
		top: 86px;
		left: 0;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr);
		gap: 28px;
		padding: 32px var(--amc-gutter) 36px;
		background: var(--amc-white);
		border-bottom: var(--amc-border-width) solid var(--amc-hairline);
		box-shadow: var(--amc-shadow-dropdown);
	}

	#site-navigation .sub-menu .amc-dropdown-program {
		width: auto;
	}

	#site-navigation .sub-menu .amc-dropdown-program > a {
		display: block;
		padding: 0;
		white-space: normal;
	}

	.amc-dropdown-program__icon {
		display: block;
		width: 26px;
		height: 26px;
		margin-bottom: 12px;
		color: var(--amc-blue-600);
	}

	.amc-dropdown-program__title {
		display: block;
		font-family: var(--amc-font-heading);
		font-size: 16.5px;
		font-weight: var(--amc-weight-heading);
		color: var(--amc-navy-600);
		margin-bottom: 6px;
	}

	.amc-dropdown-program__description {
		display: block;
		font-size: 14.5px;
		line-height: 1.35;
		color: var(--amc-slate-600);
	}

	#site-navigation .sub-menu .amc-dropdown-help {
		width: auto;
		background: var(--amc-mist);
		padding: 18px;
		border-radius: var(--amc-radius-control);
		grid-column: 4;
		grid-row: 1 / span 2;
	}

	.amc-dropdown-help__question {
		font-size: 14.5px;
		font-weight: var(--amc-weight-medium);
		color: var(--amc-navy-600);
		margin: 0 0 8px;
	}

	/* Touch-target minimum (§6.5/§8/AC-4.1) — measured live at 36px tall,
	 * short of the 44px absolute minimum, found in work package 5's sweep.
	 */
	.amc-dropdown-help__link {
		display: inline-flex;
		align-items: center;
		font-size: 14.5px;
		font-weight: var(--amc-weight-medium);
		min-height: 44px;
	}
}

/* --- Mobile navigation drawer ---------------------------------------------------
 * Reskins GeneratePress's existing toggle mechanism (its own .toggled/
 * .mobile-menu-open classes, confirmed live in its menu.js) as a
 * full-viewport navy-topped drawer, per Concept C spec §5.8. The
 * accessibility behaviours GP's own JS doesn't provide (dialog semantics,
 * focus trap, Escape-to-close) come from assets/js/navigation.js.
 *
 * The drawer-header bar (inc/navigation.php, amc_child_drawer_header())
 * is always in the DOM at every width — hidden here unconditionally so it
 * never appears at desktop widths, since the toggled-only visibility
 * rule further below only applies inside this same max-width query.
 */
#site-navigation .amc-drawer-header {
	display: none;
}

@media (max-width: 1023px) {
	/* GeneratePress has its own compound-selector rule,
	 * `.has-inline-mobile-toggle #site-navigation.toggled { background-color:
	 * rgba(0,0,0,0.02) }` (2 classes + 1 ID) — confirmed live it beats a
	 * plain `#site-navigation.toggled` (1 class + 1 ID) for that property
	 * even though this stylesheet loads after GP's. Matching GP's own
	 * ancestor-class prefix here guarantees these rules win regardless.
	 */
	.has-inline-mobile-toggle #site-navigation.toggled {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: 0;
		z-index: var(--amc-z-drawer);
		overflow-y: auto;
		background: var(--amc-white);
		width: 100%;
		height: auto;
		opacity: 1;
	}

	html.mobile-menu-open {
		overflow: hidden;
	}

	#site-navigation.toggled .inside-navigation {
		padding: 0;
	}

	/* !important on display only: GeneratePress has a higher-specificity
	 * blanket rule, `.has-inline-mobile-toggle #site-navigation
	 * .inside-navigation > :not(.navigation-search):not(.main-nav) {
	 * display: none }` (confirmed via CDP CSS.getMatchedStylesForNode, not
	 * guessed), that hides every direct child of .inside-navigation except
	 * the search form and the menu itself — exactly where this drawer
	 * header bar lives. Matching or exceeding its specificity would need
	 * an equally contrived selector; this is the third time a plain
	 * `.has-inline-mobile-toggle`-prefixed override has lost to a more
	 * specific GP rule this same work package, so !important here is a
	 * deliberate, narrow, documented exception — not a general habit.
	 */
	.has-inline-mobile-toggle #site-navigation.toggled .amc-drawer-header {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		background: var(--amc-navy-900);
		padding: 14px 18px;
	}

	#site-navigation.toggled .amc-drawer-header .amc-logo-mark {
		height: 28px;
	}

	#site-navigation.toggled .amc-drawer-header .menu-toggle {
		background: transparent;
		color: var(--amc-white);
	}

	#site-navigation.toggled .amc-drawer-header .menu-toggle .amc-icon {
		width: 20px;
		height: 20px;
		color: var(--amc-white);
	}

	#site-navigation.toggled .main-nav {
		background: var(--amc-white);
		width: 100%;
	}

	#site-navigation.toggled .main-nav > ul {
		display: block;
	}

	#site-navigation.toggled .main-nav ul li {
		width: 100%;
	}

	#site-navigation.toggled .main-nav > ul > li {
		border-bottom: var(--amc-border-width) solid var(--amc-hairline);
	}

	#site-navigation.toggled .main-nav > ul > li > a {
		display: block;
		min-height: 48px;
		padding: 14px 18px;
	}

	/* visibility explicitly set (not just opacity/height/overflow): GP's
	 * `.main-navigation.toggled .main-nav ul ul { visibility: hidden }`
	 * (confirmed via CDP, not guessed) has no competing declaration for
	 * this specific property in the rest of this block, so it was winning
	 * by simply being the only rule that set it — the submenu occupied
	 * layout space but rendered invisible, not a specificity contest.
	 */
	#site-navigation.toggled .sub-menu {
		position: static;
		left: auto;
		width: 100%;
		opacity: 1;
		visibility: visible;
		height: auto;
		overflow: visible;
		pointer-events: auto;
		box-shadow: none;
	}

	#site-navigation.toggled .sub-menu .amc-dropdown-program > a {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 44px;
		padding: 10px 18px 10px 34px;
		background: var(--amc-mist);
	}

	#site-navigation.toggled .amc-dropdown-program__icon {
		width: 18px;
		height: 18px;
		color: var(--amc-blue-600);
		flex-shrink: 0;
	}

	#site-navigation.toggled .amc-dropdown-program__title {
		font-size: 15px;
		font-weight: var(--amc-weight-medium);
		color: var(--amc-navy-600);
	}

	#site-navigation.toggled .amc-dropdown-program__description,
	#site-navigation.toggled .amc-dropdown-help {
		display: none;
	}
}

/* --- Buttons ------------------------------------------------------------------
 * Targets the native WordPress Button block so editors get on-token buttons
 * with zero custom blocks or page-builder dependency. `.amc-button` is an
 * equivalent utility class for any other markup (e.g. a GenerateBlocks
 * button) that needs the same treatment applied manually. Primary variant
 * per Concept C spec §5.20/§7.5.
 *
 * GeneratePress ships its own global button color rule in its inline
 * dynamic CSS — `a.wp-block-button__link:not(.has-background)` (specificity
 * 0,2,1; its combined :hover/:active/:focus variant is 0,3,1) — confirmed
 * live via `document.styleSheets` inspection on staging (WP-3), not
 * guessed. It was silently winning over every plain `.wp-block-button__link`
 * rule below despite this stylesheet loading after GP's, because a lower
 * specificity always loses regardless of source order. Every selector here
 * that sets a button background-color is written as
 * `a.wp-block-button__link:not(.has-background)` (matching GP's own
 * prefix, per this file's established convention — see the
 * `.amc-button.amc-button--secondary` comment above) so it ties or beats
 * GP's rule and this stylesheet's later source order decides the tie.
 */
a.wp-block-button__link:not(.has-background),
.amc-button {
	background-color: var(--amc-blue-600);
	border: none;
	border-radius: var(--amc-radius-control);
	color: var(--amc-white);
	display: inline-block;
	font-family: var(--amc-font-sans);
	font-size: var(--amc-text-ui);
	font-weight: var(--amc-weight-medium);
	min-height: var(--amc-button-height-min);
	padding: 13px var(--amc-button-pad-x);
	text-decoration: none;
	transition: background-color var(--amc-transition-fast) var(--amc-ease-standard);
}

a.wp-block-button__link:not(.has-background):hover,
.amc-button:hover {
	background-color: var(--amc-blue-700);
	color: var(--amc-white);
}

a.wp-block-button__link:not(.has-background):active,
.amc-button:active {
	background-color: var(--amc-blue-800);
	color: var(--amc-white);
}

.wp-block-button__link:focus-visible,
.amc-button:focus-visible {
	outline: var(--amc-focus-width) solid var(--amc-focus-color);
	outline-offset: var(--amc-focus-offset);
}

/* Secondary/outline variant, registered as a block style in
 * inc/block-styles.php ("Outline" in the Button block's Styles panel).
 * `.is-style-amc-outline` lands on the wrapping `.wp-block-button` div, not
 * the `<a>` itself, so the descendant selector needs its own `a`+`:not()`
 * qualifier to reach GP's specificity — see comment above.
 */
.is-style-amc-outline a.wp-block-button__link:not(.has-background) {
	background-color: transparent;
	border: var(--amc-border-width) solid var(--amc-hairline-strong);
	color: var(--amc-navy-700);
}

.is-style-amc-outline a.wp-block-button__link:not(.has-background):hover {
	background-color: var(--amc-blue-50);
	border-color: var(--amc-blue-600);
	color: var(--amc-navy-700);
}

.is-style-amc-outline a.wp-block-button__link:not(.has-background):active {
	background-color: var(--amc-blue-100);
}

@media (max-width: 767px) {
	.wp-block-button__link,
	.amc-button {
		min-height: var(--amc-button-height-mobile);
		width: 100%;
	}
}

/* --- Section spacing ----------------------------------------------------------
 * The generic layout-rhythm utility. Individual Concept C sections (hero,
 * step band, guidance band, closing CTA) use their own exact padding once
 * built as patterns — this covers everything else with the spec's
 * "standard" section padding (§6.3).
 */
.amc-section {
	padding-block: 32px;
}

@media (min-width: 768px) {
	.amc-section {
		padding-top: var(--amc-section-pad-top);
		padding-bottom: var(--amc-section-pad-bottom);
	}
}

/* --- Interior page / entry content --------------------------------------------
 * Applies to both a standard Page and a single Post via GeneratePress's
 * shared `.entry-content` wrapper — this is what makes the layout
 * "reusable" across page types without a template override (DEC-002).
 */
.entry-content {
	font-size: var(--amc-text-body);
	line-height: var(--amc-leading-body);
}

.entry-content > * + * {
	margin-top: 24px;
}

.entry-content img {
	border-radius: var(--amc-radius-control);
	height: auto;
	max-width: 100%;
}

.entry-content blockquote {
	border-inline-start: var(--amc-border-width-hover-rule) solid var(--amc-hairline-strong);
	color: var(--amc-ink-700);
	font-style: italic;
	padding-inline-start: 16px;
}

/* --- Blog archive / single ------------------------------------------------------ */
.entry-title {
	font-size: var(--amc-text-h2);
	line-height: var(--amc-leading-h2);
}

.entry-meta {
	color: var(--amc-slate-400);
	font-size: var(--amc-text-meta);
	letter-spacing: var(--amc-letter-spacing-meta);
	text-transform: uppercase;
}

.entry-summary {
	color: var(--amc-slate-600);
	font-size: var(--amc-text-card-body);
	line-height: var(--amc-leading-card-body);
}

.navigation.pagination a,
.navigation.pagination span {
	border-radius: var(--amc-radius-control);
	padding: 8px 12px;
}

/* --- Search form ------------------------------------------------------------------
 * GeneratePress's own `searchform.php` (confirmed by reading it directly
 * on staging, not guessed) — real, already-existing markup that appears
 * on the 404 template and empty search results, not a new component.
 * `.search-submit` is a `<button>` here (GP's flexbox layout path), so it
 * needs the same treatment as every other button on the site.
 */
.search-form {
	align-items: stretch;
	display: flex;
	gap: 8px;
	max-width: 420px;
}

.search-form .search-field {
	background-color: var(--amc-white);
	border: var(--amc-border-width) solid var(--amc-hairline-strong);
	border-radius: var(--amc-radius-control);
	color: var(--amc-ink);
	flex: 1 1 auto;
	font-family: var(--amc-font-sans);
	font-size: var(--amc-text-ui);
	min-height: var(--amc-button-height-min);
	padding: 0 14px;
}

.search-form .search-field:focus-visible {
	border-color: var(--amc-blue-600);
	outline: var(--amc-focus-width) solid var(--amc-focus-color);
	outline-offset: var(--amc-focus-offset);
}

.search-form .search-submit {
	align-items: center;
	background-color: var(--amc-blue-600);
	border: none;
	border-radius: var(--amc-radius-control);
	color: var(--amc-white);
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	min-height: var(--amc-button-height-min);
	padding: 0 18px;
	transition: background-color var(--amc-transition-fast) var(--amc-ease-standard);
}

.search-form .search-submit svg {
	fill: currentColor;
	height: 18px;
	width: 18px;
}

.search-form .search-submit:hover {
	background-color: var(--amc-blue-700);
}

.search-form .search-submit:focus-visible {
	outline: var(--amc-focus-width) solid var(--amc-focus-color);
	outline-offset: var(--amc-focus-offset);
}

/* --- Logo -----------------------------------------------------------------------
 * Sizing only. GeneratePress does NOT render the Custom Logo via core's
 * generic get_custom_logo() markup/class — confirmed by reading the live
 * rendered DOM on staging: it outputs its own `.site-logo` wrapper and
 * `.header-image.is-logo-image` <img> class. An earlier version of this
 * rule targeted `.custom-logo` (a reasonable-sounding guess) and matched
 * nothing, silently leaving the logo unconstrained at its native 1200x317
 * pixel size — exactly the kind of unverified GeneratePress-markup
 * assumption this project's own discipline warns against
 * (docs/AMC_DECISIONS.md, DEC-012). Height-constrained, width auto, so the
 * approved asset (DEC-026) scales down cleanly without distortion at
 * Concept C's header heights (§6.3).
 */
/* `display: inline-flex` so the anchor's own box actually contains the
 * logo image's rendered height rather than collapsing to the inline text
 * line-box (measured live at 19px tall against a 46px image — the click/
 * tap target was a fraction of the visible logo, found in work package
 * 5's touch-target sweep, not assumed correct from the CSS alone).
 * `min-height` on top of that: at the 28px mobile logo height, even a
 * correctly-sized anchor is still short of the spec's absolute 44px
 * touch-target minimum (§6.5/§8/AC-4.1) — there's room for this within
 * the mobile header's own 64px height (§6.3), so the target grows without
 * the visible logo mark growing.
 */
.site-logo a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.site-logo .header-image.is-logo-image {
	height: 28px;
	width: auto;
}

@media (min-width: 1024px) {
	.site-logo .header-image.is-logo-image {
		height: 46px;
	}
}

/* The approved lockup already contains the company name — GeneratePress's
 * separate site-title text next to it is redundant once a logo is set
 * (confirmed live: both render side by side otherwise). Scoped to the
 * `has-amc-logo` body class (inc/setup.php) rather than hidden
 * unconditionally, so unsetting the logo doesn't silently leave the
 * header with no visible site name at all.
 */
.has-amc-logo .site-branding .main-title {
	display: none;
}

/* Icon-only mark (inc/logo.php, amc_child_mark_html()) — used wherever the
 * full horizontal lockup doesn't fit, per the brand package's own README.
 */
.amc-logo-mark {
	height: 32px;
	width: auto;
}

/* --- Footer ---------------------------------------------------------------------
 * GeneratePress's own footer-widgets grid (register_sidebar ids footer-1
 * through footer-5, footer-bar) still owns the actual placement — no
 * footer.php override (docs/AMC_DECISIONS.md, DEC-013/DEC-021). Concept
 * C's navy footer band (§5.18) is implemented here as the background/
 * layout for that existing structure: footer-1/2/3 hold the Programs/
 * Company/Legal link groups (tools/setup-header-chrome.php), footer-bar
 * holds the logo (on its own white plate) and the compliance disclosure.
 * GeneratePress uses flexbox for footer widgets on this install (confirmed
 * live via generate_is_using_flexbox()) — in that mode GP adds no width/
 * grid classes to the widget columns itself, so the grid below is fully
 * this theme's own layout, not an override of one GP already provides.
 */
#footer-widgets {
	background-color: var(--amc-navy-900);
}

.inside-footer-widgets {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--amc-gap-footer);
	max-width: var(--amc-content-max);
	margin-inline: auto;
	padding: 56px var(--amc-gutter);
}

.inside-footer-widgets .widget-title {
	font-family: var(--amc-font-sans);
	font-size: 12.5px;
	font-weight: var(--amc-weight-bold);
	letter-spacing: var(--amc-letter-spacing-meta);
	text-transform: uppercase;
	color: var(--amc-white);
	margin: 0 0 16px;
	border: none;
	padding: 0;
}

/* padding-block raised to 14px (not the original 5px): measured live at
 * 34px total link height, short of the spec's absolute 44px touch-target
 * minimum (§6.5, §8, AC-4.1) — found via a Playwright bounding-rect sweep
 * in work package 5, not assumed correct from the CSS alone.
 */
.inside-footer-widgets a {
	display: block;
	color: var(--amc-on-navy);
	font-size: 15px;
	padding-block: 14px;
}

.inside-footer-widgets a:hover {
	color: var(--amc-white);
}

@media (min-width: 768px) and (max-width: 1279px) {
	.inside-footer-widgets {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.inside-footer-widgets {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 28px 18px;
	}
}

.site-footer,
.site-info {
	background-color: var(--amc-navy-900);
	color: var(--amc-on-navy-dim);
	font-size: var(--amc-text-legal);
	line-height: var(--amc-leading-legal);
}

.site-footer a,
.site-info a {
	color: var(--amc-on-navy);
}

.site-footer a:hover,
.site-info a:hover {
	color: var(--amc-white);
}

/* Touch-target minimum (§6.5/§8/AC-4.1) for the copyright row's links
 * (originally the parent theme's attribution credit, now the legal row's
 * credit and legal links, DEC-042) — measured live at 16px tall with no
 * padding at all, found in work package 5's sweep.
 */
.site-info a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.footer-bar {
	border-top: var(--amc-border-width) solid var(--amc-navy-line);
	padding-block: 22px;
}

.amc-footer-logo-plate {
	display: inline-block;
	background: var(--amc-white);
	padding: 10px 16px;
	border-radius: var(--amc-radius-control);
}

/* Same touch-target fix as .site-logo a above — measured live at 16px
 * tall, well under the wrapping plate's own 10px+10px padding because
 * the anchor's own inline box didn't include the logo image's height.
 */
.amc-footer-logo-plate a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

@media (max-width: 767px) {
	.site-footer,
	.site-info {
		font-size: var(--amc-text-legal);
	}
}

/* --- Compliance block and utility strip (owner-approved content, DEC-035) -------
 * Both are widget-owned (DEC-013): the markup lives in the "Footer bar" and
 * "Top bar" Custom HTML widgets placed by tools/setup-compliance-content.php.
 * Plain-text disclosure in the footer band — no card, no colour cue, legible
 * dimmed-on-navy at the spec's legal size — and a two-part licensing strip.
 */
/* The compliance disclosure is left-aligned running text, full width of the
 * footer band; the logo plate and copyright row sit beneath it, each on its
 * own row, instead of GeneratePress's default side-by-side/centred flow. */
.inside-site-info {
	flex-wrap: wrap;
	justify-content: flex-start;
}

.footer-bar,
.footer-bar-align-right .footer-bar {
	flex: 1 1 100%;
	order: 1;
	text-align: left;
}

.footer-bar .widget {
	margin: 0;
}

.copyright-bar,
.footer-bar-align-right .copyright-bar {
	flex: 1 1 100%;
	order: 2; /* beats GeneratePress's own align-right ordering, which puts it first */
	text-align: left;
	margin: 0;
	padding-bottom: 12px;
}

.footer-bar .amc-compliance {
	max-width: 960px;
	margin: 0 0 24px;
	text-align: left;
}

.amc-compliance p {
	margin: 0 0 14px;
}

.amc-compliance__notice-title {
	margin: 22px 0 10px;
	font-family: var(--amc-font-sans);
	font-size: 12.5px;
	font-weight: var(--amc-weight-bold);
	letter-spacing: var(--amc-letter-spacing-meta);
	text-transform: uppercase;
	color: var(--amc-white);
}

.amc-compliance__notice {
	font-size: 12.5px;
	line-height: 1.55;
}

.amc-compliance a {
	text-decoration: underline;
}

/* Links inside a running sentence stay inline (WCAG 2.2 SC 2.5.8 exempts inline
 * links); forcing the footer-wide 44px box on them splits the legal text. */
.amc-compliance__notice a {
	display: inline;
	min-height: 0;
}

/* --- Footer legal row (DEC-042) -------------------------------------------------
 * Rendered by inc/footer.php inside GeneratePress's .copyright-bar: the AMC
 * copyright line with the NetCoreSolutions credit under it on the left, the
 * legal links on the right; stacks and centres at 768px and below. Mirrors
 * the tribemedspa.com reference legal row, in AMC's own footer palette:
 * --amc-on-navy-dim is the footer's muted text colour (#9fb8d2 on
 * --amc-navy-900 #0b1f3a = 8.07:1, WCAG AA/AAA), hover/focus go to white
 * with an underline. The global blue focus ring is too dark on navy, so
 * these links use --amc-focus-color-on-navy (white) instead.
 */
.amc-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	align-items: center;
	margin-block-start: 1.5rem;
	padding-block-start: 1.5rem;
	border-top: var(--amc-border-width) solid var(--amc-navy-line);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--amc-on-navy-dim);
	text-align: left;
}

.amc-footer__credit a,
.amc-legal-nav__list a {
	color: var(--amc-on-navy-dim);
	text-decoration: none;
}

.amc-footer__credit a:hover,
.amc-footer__credit a:focus-visible,
.amc-legal-nav__list a:hover,
.amc-legal-nav__list a:focus-visible {
	color: var(--amc-white);
	text-decoration: underline;
}

.amc-footer__credit a:focus-visible,
.amc-legal-nav__list a:focus-visible {
	outline-color: var(--amc-focus-color-on-navy);
}

.amc-legal-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
}

.amc-legal-nav__list li {
	margin: 0;
}

@media (max-width: 768px) {
	/* GeneratePress turns .inside-site-info into a centred column here, which
	 * would shrink the copyright bar (and the row's top rule) to its content
	 * width; keep it full width so the rule spans the footer. */
	.copyright-bar,
	.footer-bar-align-right .copyright-bar {
		align-self: stretch;
	}

	.amc-footer__legal {
		flex-direction: column;
		text-align: center;
	}

	.amc-legal-nav__list {
		justify-content: center;
	}
}

.inside-top-bar .widget {
	width: 100%;
	margin: 0;
}

.amc-utility {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--amc-gutter);
}

.amc-utility a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 4px;
	text-decoration: underline;
}

@media (max-width: 767px) {
	.amc-utility {
		flex-direction: column;
		gap: 0;
	}
}

.amc-programs__intro {
	max-width: 720px;
	margin: 0 0 28px;
	color: var(--amc-ink-700);
}

.amc-closing-cta__support {
	margin: 0 0 24px;
	color: var(--amc-on-navy);
	max-width: 640px;
}

/* =============================================================================
 * HOMEPAGE SECTIONS (Concept C work package 3)
 *
 * Section order matches the spec exactly (§5.1): hero+intent → programs →
 * process → questions → guidance → resources → closing. The trust band
 * and utility strip are omitted from the page entirely for now (both
 * render nothing — see inc/shortcodes.php and the announcement-strip
 * section above), not hidden-but-present.
 * ========================================================================= */

/* --- Image container ------------------------------------------------------------
 * Spec §7.17's flat empty-state ground. Kept as the generic empty slot;
 * the approved photography below (P03.W06.T01) replaces it wherever an
 * image has been supplied.
 */
.amc-image-container {
	background-color: var(--amc-mist-deep);
	border: var(--amc-border-width) solid var(--amc-hairline);
	border-radius: var(--amc-radius-control);
}

/* --- Photography ----------------------------------------------------------------
 * One shared component for all 14 approved photographs (inc/images.php).
 * The <figure> owns the box (aspect-ratio, so no layout shift); the <img>
 * fills it with object-fit: cover and a per-image focal point emitted as
 * --amc-focal / --amc-focal-sm (never a blind centre crop). No overlay,
 * filter or tint — text never sits on top of these photographs.
 */
.amc-photo {
	position: relative;
	margin: 0;
	overflow: hidden;
	background-color: var(--amc-mist-deep); /* visible only while the file loads */
	border-radius: var(--amc-radius-card);
}

.amc-photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--amc-focal, 50% 50%);
}

@media (max-width: 767px) {
	.amc-photo img {
		object-position: var(--amc-focal-sm, var(--amc-focal, 50% 50%));
	}
}

/* Homepage hero: beneath the CTAs in the left column (Concept C §2.4).
 * From tablet up the height is capped at the spec's 232px so the intent
 * selector stays the dominant element; below that the ratio keeps the
 * mobile crop from becoming a thin strip. */
.amc-photo--home {
	aspect-ratio: 1.85 / 1;
	margin-top: 24px; /* follows the intent selector when stacked */
}

@media (min-width: 768px) {
	.amc-photo--home {
		max-height: 232px;
	}
}

/* Interior page hero: full content width, below the page title. */
.amc-photo--hero {
	aspect-ratio: 3 / 2;
	margin-bottom: 32px;
}

@media (min-width: 768px) {
	.amc-photo--hero {
		aspect-ratio: 2 / 1;
	}
}

@media (min-width: 1024px) {
	.amc-photo--hero {
		aspect-ratio: 2.2 / 1;
	}
}

/* Supporting figures: two-up on tablet/desktop, stacked on mobile. */
.amc-photo--figure {
	aspect-ratio: 3 / 2;
}

.amc-photo-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin-top: 40px;
}

@media (min-width: 768px) {
	.amc-photo-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Form-side split (Get Started, Contact). Mobile order is content/form
 * first, image after — form usability outranks the image — with the image
 * cropped shorter; from 768px the vertical image sits beside the form at
 * its native 4:5 ratio. Like the hero (DEF-001), WordPress wraps each Group
 * block's children in .wp-block-group__inner-container and GeneratePress
 * pads that wrapper 40px, so the grid lives on the outer group's wrapper and
 * the split groups' wrappers are un-padded. */
.amc-split > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	padding: 0;
}

.amc-split__main > .wp-block-group__inner-container,
.amc-split__media > .wp-block-group__inner-container {
	padding: 0;
}

.amc-photo--split {
	aspect-ratio: 4 / 3;
}

@media (min-width: 768px) {
	.amc-split > .wp-block-group__inner-container {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: 40px;
	}

	.amc-photo--split {
		aspect-ratio: 4 / 5;
	}
}

/* --- Hero -------------------------------------------------------------------------
 * Grid 1.08fr/0.92fr desktop; stacked mobile (copy → CTAs → intent
 * selector → image), matching the spec's mobile section order exactly.
 */
.amc-hero {
	background: linear-gradient(180deg, var(--amc-white), var(--amc-mist));
	padding: 32px var(--amc-gutter);
}

.amc-hero__content {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.amc-hero__eyebrow {
	font-size: var(--amc-text-eyebrow);
	font-weight: var(--amc-weight-bold);
	letter-spacing: var(--amc-letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--amc-slate-400);
	margin: 0;
}

.amc-hero__headline {
	font-size: var(--amc-text-h1);
	line-height: var(--amc-leading-h1);
	color: var(--amc-navy-900);
	margin: 0;
}

.amc-hero__support {
	font-size: var(--amc-text-lede);
	line-height: var(--amc-leading-lede);
	color: var(--amc-ink-700);
	max-width: 560px;
	margin: 0;
}

.amc-hero__ctas {
	gap: 14px;
}

.amc-hero__ctas .wp-block-button__link {
	width: 100%;
	text-align: center;
}

/* WordPress renders a legacy Group block's children inside a
 * .wp-block-group__inner-container, so the two-column grid has to live on
 * that wrapper — on .amc-hero itself it only ever sees one child and the
 * intent selector stacks under the image (DEF-001, found while placing the
 * hero photograph). */
@media (min-width: 1024px) {
	.amc-hero {
		padding: 60px var(--amc-gutter);
	}

	.amc-hero > .wp-block-group__inner-container {
		display: grid;
		grid-template-columns: 1.08fr 0.92fr;
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"content selector"
			"image selector";
		column-gap: var(--amc-gap-hero);
		row-gap: 18px;
		align-items: start;
	}

	.amc-hero__content {
		grid-area: content;
	}

	.amc-hero .amc-intent-selector {
		grid-area: selector;
	}

	.amc-hero .amc-photo--home {
		grid-area: image;
		margin-top: 0;
	}

	.amc-hero__ctas {
		flex-direction: row;
	}

	.amc-hero__ctas .wp-block-button__link {
		width: auto;
	}
}

/* --- Intent selector --------------------------------------------------------------
 * White card, hairline border, card shadow — the one permitted shadow
 * outside the mega-menu dropdown (§6.4). Whole-row links, four states,
 * no selected/persistent state (spec §5.10/§7.8).
 */
.amc-intent-selector {
	background: var(--amc-white);
	border: var(--amc-border-width) solid var(--amc-hairline);
	border-radius: var(--amc-radius-card);
	box-shadow: var(--amc-shadow-card);
	margin-top: 24px;
}

.amc-intent-selector__header {
	padding: 22px 26px 18px;
}

.amc-intent-selector__title {
	font-size: 24px;
	line-height: 29px;
	color: var(--amc-navy-600);
	margin: 0 0 6px;
}

.amc-intent-selector__subtitle {
	font-size: var(--amc-text-card-body);
	color: var(--amc-slate-600);
	margin: 0;
}

.amc-intent-selector__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.amc-intent-selector__row {
	border-top: var(--amc-border-width) solid var(--amc-hairline);
}

.amc-intent-selector__row--last {
	background: var(--amc-mist);
}

.amc-intent-selector__row a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 52px;
	padding: 16px 18px;
	font-size: var(--amc-text-intent-row);
	font-weight: var(--amc-weight-medium);
	color: var(--amc-navy-600);
	border-left: var(--amc-border-width-hover-rule) solid transparent;
	transition: background-color var(--amc-transition-fast) var(--amc-ease-standard), border-color var(--amc-transition-fast) var(--amc-ease-standard);
}

.amc-intent-selector__row a:hover,
.amc-intent-selector__row a:active {
	background: var(--amc-blue-50);
	border-left-color: var(--amc-blue-600);
	color: var(--amc-blue-800);
}

.amc-intent-selector__arrow {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	color: var(--amc-blue-600);
	transition: transform var(--amc-transition-fast) var(--amc-ease-standard);
}

.amc-intent-selector__row a:hover .amc-intent-selector__arrow {
	transform: translateX(4px);
}

@media (min-width: 1024px) {
	.amc-intent-selector {
		margin-top: 0;
	}

	.amc-intent-selector__row a {
		min-height: 58px;
		padding: 19px 26px;
	}
}

/* --- Loan program cards ------------------------------------------------------------ */
.amc-programs {
	padding-top: var(--amc-section-pad-top);
	padding-bottom: var(--amc-section-pad-bottom);
}

.amc-programs__heading {
	font-size: var(--amc-text-h2);
	line-height: var(--amc-leading-h2);
	color: var(--amc-navy-900);
	margin: 0 0 32px;
}

.amc-program-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--amc-gap-card);
}

.amc-program-card {
	border: var(--amc-border-width) solid var(--amc-hairline);
	border-radius: var(--amc-radius-card);
	transition: border-color var(--amc-transition-fast) var(--amc-ease-standard), background-color var(--amc-transition-fast) var(--amc-ease-standard);
}

.amc-program-card:hover {
	border-color: var(--amc-hairline-strong);
	background: #f9fbfd;
}

.amc-program-card > a {
	display: block;
	padding: 18px;
	color: inherit;
	text-decoration: none;
}

.amc-program-card__icon {
	display: block;
	width: 26px;
	height: 26px;
	color: var(--amc-blue-600);
	margin-bottom: 14px;
}

.amc-program-card__title {
	font-size: var(--amc-text-h3);
	line-height: var(--amc-leading-h3);
	color: var(--amc-navy-600);
	margin: 0 0 8px;
}

.amc-program-card__description {
	font-size: var(--amc-text-card-body);
	line-height: 24px;
	color: var(--amc-slate-600);
	margin: 0 0 14px;
}

.amc-program-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--amc-text-ui);
	font-weight: var(--amc-weight-medium);
	color: var(--amc-blue-600);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.amc-program-card__arrow {
	width: 16px;
	height: 16px;
	transition: transform var(--amc-transition-fast) var(--amc-ease-standard);
}

.amc-program-card:hover .amc-program-card__arrow {
	transform: translateX(4px);
}

@media (min-width: 768px) {
	.amc-program-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.amc-program-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.amc-program-card > a {
		padding: 26px;
	}
}

/* --- Three-step process --------------------------------------------------------------
 * The page's #F5F8FB band (distinct from the guidance band's warm sand —
 * spec §6.1 keeps sand reserved for guidance only).
 */
.amc-process {
	background: var(--amc-mist);
	padding: var(--amc-section-pad-band) var(--amc-gutter);
}

.amc-process__heading {
	font-size: var(--amc-text-h2-band);
	line-height: var(--amc-leading-h2-band);
	color: var(--amc-navy-900);
	margin: 0 0 32px;
	text-align: center;
}

.amc-process__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.amc-process-step {
	border-top: var(--amc-border-width-emphasis) solid var(--amc-blue-600);
	padding-top: 16px;
}

.amc-process-step__number {
	display: block;
	font-family: var(--amc-font-sans);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--amc-letter-spacing-numeral);
	font-size: 14px;
	font-weight: var(--amc-weight-bold);
	color: var(--amc-blue-600);
	margin-bottom: 8px;
}

.amc-process-step__title {
	font-size: var(--amc-text-h3);
	line-height: var(--amc-leading-h3);
	color: var(--amc-navy-900);
	margin: 0 0 8px;
}

.amc-process-step__body {
	font-size: var(--amc-text-card-body);
	line-height: 25px;
	color: var(--amc-slate-600);
	margin: 0;
}

@media (min-width: 768px) {
	.amc-process__list {
		grid-template-columns: repeat(3, 1fr);
		gap: 28px;
	}
}

/* --- Borrower question cards ---------------------------------------------------------- */
.amc-questions {
	padding-top: var(--amc-section-pad-top);
	padding-bottom: var(--amc-section-pad-bottom);
}

.amc-questions__heading {
	font-size: var(--amc-text-h2);
	line-height: var(--amc-leading-h2);
	color: var(--amc-navy-900);
	margin: 0 0 32px;
}

.amc-qa-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--amc-gap-card);
}

.amc-qa-card {
	border: var(--amc-border-width) solid var(--amc-hairline);
	border-radius: var(--amc-radius-card);
	padding: 18px;
}

.amc-qa-card__question {
	font-family: var(--amc-font-sans);
	font-size: 18px;
	font-weight: var(--amc-weight-semibold);
	color: var(--amc-navy-900);
	margin: 0 0 10px;
}

.amc-qa-card__answer {
	font-size: var(--amc-text-body);
	line-height: var(--amc-leading-body);
	color: var(--amc-ink-700);
	margin: 0;
}

@media (min-width: 768px) {
	.amc-qa-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.amc-qa-card {
		padding: 26px 28px;
	}
}

/* --- Guidance band ----------------------------------------------------------------------
 * The page's one permitted warm/sand surface (§6.1) — never a second one.
 */
.amc-guidance {
	background: var(--amc-sand);
	border-top: var(--amc-border-width) solid var(--amc-sand-line);
	border-bottom: var(--amc-border-width) solid var(--amc-sand-line);
	padding: 26px 18px;
}

.amc-guidance__inner {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.amc-guidance__heading {
	font-size: 25px;
	line-height: 29px;
	color: var(--amc-navy-900);
	margin: 0;
}

.amc-guidance__support {
	font-size: var(--amc-text-card-body);
	color: var(--amc-ink-700);
	margin: 0;
}

.amc-guidance__ctas .wp-block-button__link {
	width: 100%;
	text-align: center;
}

@media (min-width: 768px) {
	.amc-guidance {
		padding: var(--amc-section-pad-guidance) var(--amc-gutter);
		flex-direction: row;
	}

	.amc-guidance__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.amc-guidance__ctas {
		flex-shrink: 0;
	}

	.amc-guidance__ctas .wp-block-button__link {
		width: auto;
	}
}

/* --- Resources teaser ---------------------------------------------------------------------
 * Built entirely by inc/shortcodes.php's amc_child_resource_cards_shortcode()
 * — renders nothing at all while fewer than 3 posts are published, so
 * this CSS is currently inert on a live page (0 posts exist), not unused.
 */
.amc-resources {
	padding-top: var(--amc-section-pad-top);
	padding-bottom: var(--amc-section-pad-bottom);
}

.amc-resources__heading {
	font-size: var(--amc-text-h2);
	line-height: var(--amc-leading-h2);
	color: var(--amc-navy-900);
	margin: 0 0 32px;
}

.amc-resource-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--amc-gap-card);
}

.amc-resource-card {
	border: var(--amc-border-width) solid var(--amc-hairline);
	border-radius: var(--amc-radius-card);
	overflow: hidden;
}

.amc-resource-card > a {
	display: flex;
	color: inherit;
	text-decoration: none;
}

.amc-resource-card__image,
.amc-resource-card__image--empty {
	width: 104px;
	flex-shrink: 0;
	background-color: var(--amc-mist-deep);
	object-fit: cover;
}

.amc-resource-card__body {
	padding: 20px 22px;
}

.amc-resource-card__title {
	font-size: 19px;
	color: var(--amc-navy-900);
	margin: 0 0 8px;
}

.amc-resource-card__excerpt {
	font-size: 14.5px;
	color: var(--amc-slate-600);
	margin: 0;
}

@media (min-width: 768px) {
	.amc-resource-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.amc-resource-card > a {
		flex-direction: column;
	}

	.amc-resource-card__image,
	.amc-resource-card__image--empty {
		width: 100%;
		aspect-ratio: 4 / 3;
	}
}

/* --- Closing CTA -----------------------------------------------------------------------
 * Navy band — the on-navy button variants below extend the token-defined
 * on-navy button states (spec §5.20) for use outside the header context.
 */
.amc-closing-cta {
	background: var(--amc-navy-900);
	padding: 28px 18px;
}

.amc-closing-cta__inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.amc-closing-cta__heading {
	font-size: 25px;
	line-height: 29px;
	color: var(--amc-white);
	margin: 0;
}

.amc-closing-cta__ctas .wp-block-button__link {
	width: 100%;
	text-align: center;
}

/* `a`+`:not(.has-background)` qualifier needed here too — see the
 * "--- Buttons ---" section comment above for why.
 */
.amc-button--on-navy a.wp-block-button__link:not(.has-background) {
	background-color: var(--amc-white);
	color: var(--amc-navy-900);
}

.amc-button--on-navy a.wp-block-button__link:not(.has-background):hover {
	background-color: var(--amc-on-navy);
}

.amc-button--on-navy .wp-block-button__link:focus-visible {
	outline-color: var(--amc-white);
}

.amc-button--on-navy-outline a.wp-block-button__link:not(.has-background) {
	background-color: transparent;
	border-color: var(--amc-on-navy);
	color: var(--amc-white);
}

.amc-button--on-navy-outline a.wp-block-button__link:not(.has-background):hover {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: var(--amc-white);
	color: var(--amc-white);
}

.amc-button--on-navy-outline .wp-block-button__link:focus-visible {
	outline-color: var(--amc-white);
}

@media (min-width: 768px) {
	.amc-closing-cta {
		padding: var(--amc-section-pad-closing) var(--amc-gutter);
	}

	.amc-closing-cta__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.amc-closing-cta__ctas {
		flex-shrink: 0;
	}

	.amc-closing-cta__ctas .wp-block-button__link {
		width: auto;
	}
}

/* Breadcrumbs — [amc_breadcrumbs], presentation only (CHG-001/DEC-040). */
.amc-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	font-size: 14px;
}

.amc-breadcrumbs li {
	color: var(--amc-slate-600);
}

.amc-breadcrumbs li:not(:last-child)::after {
	content: "\203A";
	margin: 0 8px;
	color: var(--amc-slate-400);
}

.amc-breadcrumbs a {
	color: var(--amc-slate-600);
	text-decoration: underline;
}

.amc-breadcrumbs li[aria-current="page"] {
	color: var(--amc-navy-600);
	font-weight: var(--amc-weight-medium);
}