/*
 * FAR Decoded — Phase 2.1 Styles
 * far-decoded-phase2.css
 *
 * Phase 2.1 changes (2026-05-09 CEO feedback pass):
 *   Fix 1  — Hero eyebrow: bumped from 11px to 15px, tracking increased
 *   Fix 3  — Hierarchical reg indentation (Cornell pattern via CSS selectors)
 *   Fix 5  — Section header titles: bumped from 14px/600 to 24px/700, Oswald
 *   Fix 7c — Sidebar sticky via position:sticky; moot on mobile (stacks below)
 *
 * Scoping strategy: ALL selectors are prefixed with body.single-far_section
 * to achieve specificity (0,2,X) that beats Astra's global body/heading rules
 * which are injected via astra-settings at specificity (0,1,X).
 *
 * CSS custom properties (tokens) are set on :root so they work globally.
 * All font/color/spacing values MUST use these tokens — never hardcode.
 *
 * Source of truth for tokens: memory/brand/design-system/project/tokens.css
 */

/* ─────────────────────────────────────────────────────────────────────────────
   AOA DESIGN TOKENS (canonical — copied from tokens.css, do not modify)
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  --aoa-orange:        #f47321;
  --aoa-orange-hover:  #ff8236;
  --aoa-orange-glow:   rgba(244,115,33,0.55);
  --aoa-orange-tint:   rgba(244,115,33,0.05);
  --aoa-charcoal:      #161312;
  --aoa-charcoal-2:    #211d1c;
  --aoa-text:          #333333;
  --aoa-text-muted:    #6b6663;
  --aoa-soft-bg:       #fbf8f5;
  --aoa-line:          #e6e3e0;
  --aoa-white:         #ffffff;
  --aoa-green:         #4CAF50;
  --aoa-red-anchor:    #c0392b;
  --aoa-f-head:        'Oswald', 'Arial Narrow', sans-serif;
  --aoa-f-body:        'Roboto', system-ui, -apple-system, sans-serif;
  --aoa-f-mono:        'JetBrains Mono', ui-monospace, monospace;
  --aoa-shadow-card:   0 4px 12px -4px rgba(22,19,18,0.08);
  --aoa-shadow-btn:    0 10px 24px -10px rgba(244,115,33,0.55), 0 2px 0 rgba(0,0,0,0.06);
  --aoa-shadow-btn-hover: 0 14px 30px -10px rgba(244,115,33,0.65), 0 2px 0 rgba(0,0,0,0.06);
  --aoa-radius-sm:     4px;
  --aoa-radius-md:     6px;
  --aoa-radius-lg:     10px;
  --aoa-radius-xl:     14px;
  /* AOA Notes callout colors (amber/blue per spec) */
  --aoa-amber-tint:    rgba(244,115,33,0.08);   /* gotcha background */
  --aoa-amber-border:  rgba(244,115,33,0.25);
  --aoa-amber-label:   #b85c00;                  /* gotcha label color */
  --aoa-blue-tint:     rgba(37,99,235,0.07);     /* pro-tip background */
  --aoa-blue-border:   rgba(37,99,235,0.20);
  --aoa-blue-label:    #1d4ed8;                  /* pro-tip label color */
  /* Inline highlight */
  --aoa-highlight-bg:  rgba(244,115,33,0.12);    /* subtle amber, not highlighter */
}


/* ─────────────────────────────────────────────────────────────────────────────
   FAR SECTION HEADER BAND
   (body.single-far_section scope = 0,2,0 — beats Astra's 0,1,X)
   ───────────────────────────────────────────────────────────────────────────── */

body.single-far_section .far-section-header {
  background: var(--aoa-charcoal);
  color: var(--aoa-white);
  padding: 40px 36px;
  border-radius: var(--aoa-radius-xl);
  position: relative;
  overflow: hidden;
  margin-bottom: 0; /* breadcrumb row sits directly below — no gap */
}

body.single-far_section .far-section-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 5px; height: 100%;
  background: var(--aoa-orange);
}

/* FIX 1 — eyebrow: was 11px/600/0.1em — now 15px/700/0.14em for presence */
body.single-far_section .far-section-header .far-section-eyebrow {
  font-family: var(--aoa-f-head) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--aoa-orange) !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
}

body.single-far_section .far-section-header .far-section-title {
  font-family: var(--aoa-f-head) !important;
  font-size: clamp(22px, 3.5vw, 38px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: var(--aoa-white) !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}

body.single-far_section .far-section-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}

body.single-far_section .far-meta-badge {
  font-family: var(--aoa-f-mono) !important;
  font-size: 11px !important;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.75) !important;
  padding: 4px 10px;
  border-radius: var(--aoa-radius-sm);
  text-decoration: none;
}

body.single-far_section .far-meta-badge--updated {
  background: rgba(76,175,80,0.15);
  border-color: rgba(76,175,80,0.35);
  color: #81c784 !important;
}

body.single-far_section .far-meta-badge--link:hover {
  color: var(--aoa-orange) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   FIX 2 — BREADCRUMB ROW
   Sits between the dark hero band and the first content card.
   Subtle, not visually heavy — serves navigation not decoration.
   ───────────────────────────────────────────────────────────────────────────── */

body.single-far_section .far-breadcrumb-row {
  padding: 10px 0 18px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  font-family: var(--aoa-f-body) !important;
  font-size: 13px !important;
  color: var(--aoa-text-muted) !important;
  line-height: 1.4;
}

body.single-far_section .far-breadcrumb-row a {
  color: var(--aoa-text-muted) !important;
  text-decoration: none !important;
  border-bottom: 1px dotted var(--aoa-line);
  transition: color 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* WCAG 2.5.5 tap target */
  padding: 4px 2px;
}

body.single-far_section .far-breadcrumb-row a:hover,
body.single-far_section .far-breadcrumb-row a:focus {
  color: var(--aoa-orange) !important;
  border-bottom-color: var(--aoa-orange);
}

body.single-far_section .far-breadcrumb-sep {
  margin: 0 7px;
  color: var(--aoa-line);
  font-size: 12px;
  user-select: none;
}

body.single-far_section .far-breadcrumb-current {
  color: var(--aoa-text) !important;
  font-weight: 500;
}


/* ─────────────────────────────────────────────────────────────────────────────
   CONTENT LAYER CARDS (Layers 1–5)
   ───────────────────────────────────────────────────────────────────────────── */

body.single-far_section .far-post-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

body.single-far_section .far-layer {
  background: var(--aoa-white);
  border: 1px solid var(--aoa-line);
  border-radius: var(--aoa-radius-lg);
  overflow: hidden;
  box-shadow: var(--aoa-shadow-card);
}

body.single-far_section .far-layer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--aoa-line);
  background: var(--aoa-soft-bg);
}

/* FIX 4 — Layer-N number badge: hidden. Only the title remains visible. */
body.single-far_section .far-layer-number {
  display: none !important;
}

/* FIX 5 — Section titles: was 14px/600/uppercase — now 24px/700/Title Case */
body.single-far_section .far-layer-title {
  font-family: var(--aoa-f-head) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--aoa-charcoal) !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;    /* Title Case, NOT all-caps */
  letter-spacing: 0.01em !important;
  line-height: 1.15 !important;
}

body.single-far_section .far-layer-body {
  padding: 24px;
  font-family: var(--aoa-f-body) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--aoa-text) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   REGULATION TEXT (Layer 1)
   ───────────────────────────────────────────────────────────────────────────── */

body.single-far_section .far-reg-text {
  font-family: var(--aoa-f-body) !important;
  font-size: 15px !important;
  line-height: 1.78 !important;
  color: var(--aoa-text) !important;
}

body.single-far_section .far-reg-text h3 {
  font-family: var(--aoa-f-head) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--aoa-charcoal) !important;
  margin: 0 0 16px 0 !important;
  text-transform: none !important;
  letter-spacing: 0.01em;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FIX 3 — HIERARCHICAL REGULATION INDENTATION (Cornell pattern)
   ─────────────────────────────────────────────────────────────────────────────
   The eCFR XML uses sequential <P> elements with embedded designators.
   The ingest script produces flat <p> tags — e.g.:
     <p>(a) General. A person who applies...</p>
     <p>(1) Hold at least a current private...</p>
     <p>(2) Be able to read, speak, write...</p>
     <p>(i) Three hours of instrument flight training...</p>
     <p>(A) A flight of 250 nautical miles...</p>

   We detect the designator using :has() and attribute-selector tricks where
   supported, AND as a fallback we use the data-far-level attributes that the
   PHP template stamped onto each <p> via the far_apply_hierarchy() helper.

   Level 0 — top-level paragraphs with no designator (intro text)
   Level 1 — (a), (b), (c)... — left margin, bold prefix
   Level 2 — (1), (2), (3)... — 28px indent, bold prefix
   Level 3 — (i), (ii), (iii)... — 56px indent, bold prefix
   Level 4 — (A), (B), (C)... — 84px indent, bold prefix

   The PHP template adds data-far-level="1|2|3|4" and wraps the designator
   in <strong class="far-des"> so we have reliable CSS targets.
   ───────────────────────────────────────────────────────────────────────────── */

/* Base paragraph reset */
body.single-far_section .far-reg-text p {
  margin: 0 0 8px 0 !important;
  padding-left: 0;
}

/* Level 1 — (a)(b)(c) — flush left, bold designator */
body.single-far_section .far-reg-text p[data-far-level="1"] {
  margin-top: 12px !important;
  margin-bottom: 4px !important;
  padding-left: 0 !important;
}

/* Level 2 — (1)(2)(3) — one indent */
body.single-far_section .far-reg-text p[data-far-level="2"] {
  padding-left: 28px !important;
  margin-bottom: 4px !important;
}

/* Level 3 — (i)(ii)(iii) — two indents */
body.single-far_section .far-reg-text p[data-far-level="3"] {
  padding-left: 56px !important;
  margin-bottom: 4px !important;
}

/* Level 4 — (A)(B)(C) — three indents */
body.single-far_section .far-reg-text p[data-far-level="4"] {
  padding-left: 84px !important;
  margin-bottom: 4px !important;
}

/* Designator bold prefix — styled but preserves reading flow */
body.single-far_section .far-reg-text .far-des {
  font-weight: 700 !important;
  font-family: var(--aoa-f-body) !important;
  color: var(--aoa-charcoal) !important;
  /* tight margin-right so designator reads as inline prefix */
  margin-right: 0;
}

/* Citation/docket line at bottom — subtle */
body.single-far_section .far-reg-text p[data-far-level="citation"] {
  padding-left: 0 !important;
  margin-top: 20px !important;
  font-size: 12px !important;
  color: var(--aoa-text-muted) !important;
  line-height: 1.5 !important;
  border-top: 1px solid var(--aoa-line);
  padding-top: 12px !important;
}

/* Mobile: tighten indentation at narrow viewports */
@media (max-width: 480px) {
  body.single-far_section .far-reg-text p[data-far-level="2"] { padding-left: 18px !important; }
  body.single-far_section .far-reg-text p[data-far-level="3"] { padding-left: 36px !important; }
  body.single-far_section .far-reg-text p[data-far-level="4"] { padding-left: 54px !important; }
}

/* Mobile: allow horizontal scroll for complex reg tables */
body.single-far_section .far-reg-text-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Fallback for legacy flat <p> tags (no data-far-level) */
body.single-far_section .far-reg-text p:not([data-far-level]) {
  margin: 0 0 8px 0 !important;
}

/* Existing ol/ul from older ingests */
body.single-far_section .far-reg-text ol,
body.single-far_section .far-reg-text ul {
  padding-left: 22px;
  margin: 0 0 14px 0 !important;
}

body.single-far_section .far-reg-text li {
  margin-bottom: 6px !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   INLINE CALLOUT HIGHLIGHTS (Layer 3 — anchors within reg text)
   ───────────────────────────────────────────────────────────────────────────── */

body.single-far_section .far-note-anchor {
  text-decoration: none !important;
  color: inherit !important;
}

body.single-far_section .far-highlight {
  background: var(--aoa-highlight-bg);
  border-radius: 2px;
  padding: 1px 2px;
  border-bottom: 1.5px dotted var(--aoa-orange);
  text-decoration: none;
  cursor: pointer;
  color: inherit;
}

body.single-far_section .far-note-anchor:hover .far-highlight,
body.single-far_section .far-note-anchor:focus .far-highlight {
  background: rgba(244,115,33,0.18);
  border-bottom-color: var(--aoa-orange);
}

body.single-far_section .far-note-anchor:focus-visible {
  outline: 2px solid var(--aoa-orange);
  outline-offset: 2px;
  border-radius: 2px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   AOA NOTES SECTION (Layer 3 anchor targets at bottom of post body)
   ───────────────────────────────────────────────────────────────────────────── */

body.single-far_section .aoa-notes {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.single-far_section .aoa-notes-header {
  border-bottom: 2px solid var(--aoa-line);
  padding-bottom: 16px;
  margin-bottom: 4px;
}

body.single-far_section .aoa-notes-title {
  font-family: var(--aoa-f-head) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--aoa-charcoal) !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: 0.01em;
}

body.single-far_section .aoa-notes-intro {
  font-family: var(--aoa-f-body) !important;
  font-size: 14px !important;
  color: var(--aoa-text-muted) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

body.single-far_section .aoa-note {
  border-radius: var(--aoa-radius-lg);
  padding: 18px 20px;
  border-left-width: 3px;
  border-left-style: solid;
}

body.single-far_section .aoa-note--gotcha {
  background: var(--aoa-amber-tint);
  border: 1px solid var(--aoa-amber-border);
  border-left: 3px solid var(--aoa-orange);
}

body.single-far_section .aoa-note--pro-tip {
  background: var(--aoa-blue-tint);
  border: 1px solid var(--aoa-blue-border);
  border-left: 3px solid var(--aoa-blue-label);
}

body.single-far_section .aoa-note-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
}

body.single-far_section .aoa-note-type {
  font-family: var(--aoa-f-head) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body.single-far_section .aoa-note--gotcha .aoa-note-type {
  color: var(--aoa-amber-label) !important;
}

body.single-far_section .aoa-note--pro-tip .aoa-note-type {
  color: var(--aoa-blue-label) !important;
}

body.single-far_section .aoa-note-title {
  font-family: var(--aoa-f-head) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--aoa-charcoal) !important;
}

body.single-far_section .aoa-note-body {
  font-family: var(--aoa-f-body) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--aoa-text) !important;
  margin-bottom: 12px;
}

body.single-far_section .aoa-note-body p {
  margin: 0 0 10px 0 !important;
}

body.single-far_section .aoa-note-body p:last-child {
  margin-bottom: 0 !important;
}

body.single-far_section .aoa-note-back {
  font-family: var(--aoa-f-body) !important;
  font-size: 12px !important;
  color: var(--aoa-text-muted) !important;
  text-decoration: none !important;
  border-bottom: 1px dotted var(--aoa-line);
  transition: color 0.15s;
}

body.single-far_section .aoa-note-back:hover {
  color: var(--aoa-orange) !important;
  border-bottom-color: var(--aoa-orange);
}


/* ─────────────────────────────────────────────────────────────────────────────
   EMPTY STATES
   ───────────────────────────────────────────────────────────────────────────── */

body.single-far_section .far-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
  gap: 10px;
}

body.single-far_section .far-empty-icon {
  width: 44px;
  height: 44px;
  background: var(--aoa-soft-bg);
  border: 1.5px solid var(--aoa-line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--aoa-text-muted);
  flex-shrink: 0;
}

body.single-far_section .far-empty-headline {
  font-family: var(--aoa-f-head) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--aoa-charcoal) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 !important;
}

body.single-far_section .far-empty-copy {
  font-family: var(--aoa-f-body) !important;
  font-size: 13px !important;
  color: var(--aoa-text-muted) !important;
  max-width: 420px;
  line-height: 1.6 !important;
  margin: 0 !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   AMENDMENT HISTORY (Layer 5)
   ───────────────────────────────────────────────────────────────────────────── */

body.single-far_section .far-history-list {
  display: flex;
  flex-direction: column;
}

body.single-far_section .far-history-entry {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--aoa-line);
}

body.single-far_section .far-history-entry:last-child {
  border-bottom: none;
}

body.single-far_section .far-history-date {
  font-family: var(--aoa-f-mono) !important;
  font-size: 12px !important;
  color: var(--aoa-text-muted) !important;
  white-space: nowrap;
  min-width: 88px;
  padding-top: 2px;
}

body.single-far_section .far-history-summary {
  font-family: var(--aoa-f-body) !important;
  font-size: 14px !important;
  color: var(--aoa-text) !important;
  line-height: 1.6 !important;
}

body.single-far_section .far-history-id {
  font-family: var(--aoa-f-mono) !important;
  font-size: 11px !important;
  color: var(--aoa-orange) !important;
  margin-top: 4px;
}

body.single-far_section .far-history-diff {
  margin-top: 6px;
  font-size: 13px !important;
  color: var(--aoa-text-muted) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   CFI COMMENTARY GUIDE TEXT (Layer 3 bridge card)
   ───────────────────────────────────────────────────────────────────────────── */

body.single-far_section .far-commentary-note {
  font-family: var(--aoa-f-body) !important;
  font-size: 14px !important;
  color: var(--aoa-text-muted) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  border-left: 3px solid var(--aoa-orange);
  padding-left: 14px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   END-OF-PAGE CTA (bottom of post body)
   ───────────────────────────────────────────────────────────────────────────── */

body.single-far_section .far-footer-cta {
  background: var(--aoa-soft-bg);
  border: 1px solid var(--aoa-line);
  border-radius: var(--aoa-radius-lg);
  padding: 28px 24px;
  text-align: center;
  margin-top: 8px;
}

body.single-far_section .far-footer-cta-label {
  font-family: var(--aoa-f-head) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--aoa-text-muted) !important;
  margin: 0 0 8px 0 !important;
}

body.single-far_section .far-footer-cta-headline {
  font-family: var(--aoa-f-head) !important;
  font-size: clamp(17px, 2.2vw, 24px) !important;
  font-weight: 700 !important;
  color: var(--aoa-charcoal) !important;
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

body.single-far_section .far-footer-btn {
  display: inline-flex;
  align-items: center;
  padding: 13px 26px;
  background: var(--aoa-orange);
  color: var(--aoa-white) !important;
  font-family: var(--aoa-f-head) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--aoa-radius-md);
  text-decoration: none !important;
  min-height: 44px;
  box-shadow: var(--aoa-shadow-btn);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

body.single-far_section .far-footer-btn:hover,
body.single-far_section .far-footer-btn:focus {
  background: var(--aoa-orange-hover) !important;
  transform: translateY(-1px);
  box-shadow: var(--aoa-shadow-btn-hover);
}


/* ─────────────────────────────────────────────────────────────────────────────
   FIX 7 — SIDEBAR
   7a: breathing room above the first widget (margin-top on the widget container)
   7b: slot verification is done in PHP (dynamic_sidebar_before hook)
   7c: sticky sidebar while scrolling reg text
   ───────────────────────────────────────────────────────────────────────────── */

/* Sticky sidebar — the #secondary column stays visible while body scrolls.
   Works on all Astra layouts; moot on mobile (sidebar stacks below content).
   top value accounts for Astra's sticky header (60px) + breathing room (16px). */
body.single-far_section #secondary {
  position: sticky;
  top: 76px;
  align-self: flex-start;
  max-height: calc(100vh - 92px);
  overflow-y: auto;
  /* Custom scrollbar for the sidebar overflow on long regs */
  scrollbar-width: thin;
  scrollbar-color: var(--aoa-line) transparent;
}

body.single-far_section #secondary::-webkit-scrollbar {
  width: 4px;
}
body.single-far_section #secondary::-webkit-scrollbar-track {
  background: transparent;
}
body.single-far_section #secondary::-webkit-scrollbar-thumb {
  background: var(--aoa-line);
  border-radius: 2px;
}

/* Astra's layout wrapper needs to allow sticky children to position relative
   to the viewport. Ensure the content area is not overflow:hidden. */
body.single-far_section .ast-container,
body.single-far_section .site-content,
body.single-far_section #content {
  overflow: visible;
}

/* FIX 7a — breathing room above the first widget.
   The Layer 6 product card is injected at the top of #secondary.
   Add top padding to the sidebar column itself so it doesn't butt up against
   any Astra top margin on #secondary. */
body.single-far_section #secondary .widget:first-child,
body.single-far_section #secondary .far-sidebar-widget:first-child {
  margin-top: 0 !important; /* widget itself has no top margin needed — padding is on #secondary */
}

/* The sidebar column gets the top spacing */
body.single-far_section #secondary {
  padding-top: 4px;
}

/* Mobile: disable sticky (sidebar is below the content in single-column layout) */
@media (max-width: 768px) {
  body.single-far_section #secondary {
    position: static;
    max-height: none;
    overflow-y: visible;
    padding-top: 0;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   LAYER 6 SIDEBAR WIDGET
   ───────────────────────────────────────────────────────────────────────────── */

body.single-far_section .far-sidebar-widget {
  background: var(--aoa-white);
  border: 1px solid var(--aoa-line);
  border-radius: var(--aoa-radius-lg);
  overflow: hidden;
  box-shadow: var(--aoa-shadow-card);
  margin-bottom: 20px;
}

body.single-far_section .far-sidebar-card-header {
  background: var(--aoa-charcoal);
  padding: 14px 18px;
}

body.single-far_section .far-sidebar-eyebrow {
  font-family: var(--aoa-f-head) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--aoa-orange) !important;
  margin: 0 0 5px 0 !important;
  padding: 0 !important;
}

body.single-far_section .far-sidebar-headline {
  font-family: var(--aoa-f-head) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--aoa-white) !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.single-far_section .far-sidebar-body {
  padding: 14px 18px 18px;
}

body.single-far_section .far-sidebar-note {
  font-family: var(--aoa-f-body) !important;
  font-size: 12px !important;
  color: var(--aoa-text-muted) !important;
  line-height: 1.5 !important;
  margin: 0 0 12px 0 !important;
}

body.single-far_section .far-sidebar-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 14px;
  background: var(--aoa-orange);
  color: var(--aoa-white) !important;
  font-family: var(--aoa-f-head) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  text-align: center;
  border-radius: var(--aoa-radius-md);
  text-decoration: none !important;
  transition: background 0.2s, transform 0.15s;
  box-shadow: 0 6px 18px -6px var(--aoa-orange-glow);
  min-height: 44px;
}

body.single-far_section .far-sidebar-cta:hover,
body.single-far_section .far-sidebar-cta:focus {
  background: var(--aoa-orange-hover) !important;
  transform: translateY(-1px);
}


/* ─────────────────────────────────────────────────────────────────────────────
   SUBPART NAVIGATION WIDGET
   ───────────────────────────────────────────────────────────────────────────── */

body.single-far_section .far-nav-widget {
  /* inherits .far-sidebar-widget base */
}

body.single-far_section .far-nav-list-header {
  padding: 11px 18px;
  font-family: var(--aoa-f-head) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--aoa-text-muted) !important;
  border-bottom: 1px solid var(--aoa-line);
  background: var(--aoa-soft-bg);
}

body.single-far_section .far-nav-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.single-far_section .far-nav-list li {
  margin: 0 !important;
  padding: 0 !important;
}

body.single-far_section .far-nav-list li + li {
  border-top: 1px solid var(--aoa-line);
}

body.single-far_section .far-nav-list a {
  display: flex;
  align-items: center;
  padding: 10px 18px;
  font-family: var(--aoa-f-body) !important;
  font-size: 13px !important;
  color: var(--aoa-text) !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s;
  min-height: 44px;
}

body.single-far_section .far-nav-list a:hover,
body.single-far_section .far-nav-list a:focus {
  background: var(--aoa-soft-bg);
  color: var(--aoa-orange) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE AUDIT — 375px, 414px tap targets + no horizontal scroll
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  body.single-far_section .far-section-header {
    padding: 24px 18px;
  }

  body.single-far_section .far-layer-body {
    padding: 18px 16px;
  }

  body.single-far_section .far-footer-cta {
    padding: 22px 16px;
  }

  body.single-far_section .far-sidebar-cta {
    font-size: 13px !important;
    padding: 12px 10px;
  }

  /* Eyebrow slightly smaller on very narrow screens */
  body.single-far_section .far-section-header .far-section-eyebrow {
    font-size: 13px !important;
  }

  body.single-far_section .far-layer-title {
    font-size: 20px !important;
  }

  body.single-far_section .far-breadcrumb-row {
    font-size: 12px !important;
    padding: 8px 0 14px;
  }

  /* Prevent any overflow from reg text at narrow widths */
  body.single-far_section .far-reg-text,
  body.single-far_section .far-post-body {
    overflow-x: hidden;
    word-break: break-word;
  }
}

/* Ensure no horizontal scroll at any width */
body.single-far_section {
  overflow-x: hidden;
}


/* ─────────────────────────────────────────────────────────────────────────────
   TABLET — 768px (Astra sidebar stacks; content goes full-width)
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  body.single-far_section .far-section-header {
    padding: 28px 22px;
  }

  /* Section title slightly smaller on tablet */
  body.single-far_section .far-layer-title {
    font-size: 22px !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   REDUCED MOTION
   ───────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body.single-far_section .far-sidebar-cta,
  body.single-far_section .far-footer-btn,
  body.single-far_section .far-note-anchor,
  body.single-far_section .far-highlight {
    transition: none;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE TAP TARGET FIXES (Phase 2.1 — appended after mobile audit)
   Breadcrumb links and "back to text" links need padding to reach 44px
   tap area on touch screens. Invisible padding technique preserves layout.
   ───────────────────────────────────────────────────────────────────────────── */

/* Breadcrumb links — inline text but needs 44px tap area on mobile */
body.single-far_section .far-breadcrumb-row a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;         /* WCAG 2.5.5 tap target */
  padding-top: 10px;
  padding-bottom: 10px;
}

/* "Back to text" note link — bump minimum height */
body.single-far_section .aoa-note-back {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding-top: 8px;
  padding-bottom: 8px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   FAR DECODED — PHASE 4 HUB PAGE STYLES
   Scoped to body.far-hub-page (set by hub templates via body_class filter).
   Reuses existing tokens defined in :root above (--aoa-orange, etc.)
   Inherits far-breadcrumb-row, far-section-header, far-sidebar-widget,
   far-footer-cta, and far-footer-btn from Phase 2.1 — no duplication.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   HERO BAND — hub pages reuse the same .far-section-header/.far-section-eyebrow/
   .far-section-title/.far-section-meta selectors from Phase 2.1.
   We only need to add the hub scope so they're not restricted to single-far_section.
   ───────────────────────────────────────────────────────────────────────────── */

body.far-hub-page .far-section-header {
  background: var(--aoa-charcoal);
  color: var(--aoa-white);
  padding: 40px 36px;
  border-radius: var(--aoa-radius-xl);
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
}

body.far-hub-page .far-section-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 5px; height: 100%;
  background: var(--aoa-orange);
}

body.far-hub-page .far-section-eyebrow {
  font-family: var(--aoa-f-head) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--aoa-orange) !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
}

body.far-hub-page .far-section-title {
  font-family: var(--aoa-f-head) !important;
  font-size: clamp(22px, 3.5vw, 38px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: var(--aoa-white) !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}

body.far-hub-page .far-section-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}

body.far-hub-page .far-meta-badge {
  font-family: var(--aoa-f-mono) !important;
  font-size: 11px !important;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.75) !important;
  padding: 4px 10px;
  border-radius: var(--aoa-radius-sm);
  text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BREADCRUMB ROW — hub pages (same visual treatment as single-far_section)
   ───────────────────────────────────────────────────────────────────────────── */

body.far-hub-page .far-breadcrumb-row {
  padding: 10px 0 18px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  font-family: var(--aoa-f-body) !important;
  font-size: 13px !important;
  color: var(--aoa-text-muted) !important;
  line-height: 1.4;
}

body.far-hub-page .far-breadcrumb-row a {
  color: var(--aoa-orange) !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* WCAG 2.5.5 tap target */
  padding: 10px 2px;
}

body.far-hub-page .far-breadcrumb-row a:hover,
body.far-hub-page .far-breadcrumb-row a:focus {
  text-decoration: underline !important;
}

body.far-hub-page .far-breadcrumb-sep {
  color: var(--aoa-text-muted);
  padding: 0 8px;
  font-size: 16px;
  line-height: 1;
}

body.far-hub-page .far-breadcrumb-current {
  color: var(--aoa-text-muted) !important;
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HUB SECTION STRUCTURE (shared across all three hub templates)
   ───────────────────────────────────────────────────────────────────────────── */

body.far-hub-page .far-hub-section {
  margin-bottom: 36px;
}

body.far-hub-page .far-hub-section-title {
  font-family: var(--aoa-f-head) !important;
  font-size: clamp(18px, 2.5vw, 24px) !important;
  font-weight: 700 !important;
  color: var(--aoa-charcoal) !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  letter-spacing: 0.01em;
}

body.far-hub-page .far-hub-section-count {
  font-size: 14px;
  font-weight: 400;
  color: var(--aoa-text-muted);
  margin-left: 8px;
}

body.far-hub-page .far-layer-card {
  /* Per CEO 2026-05-11: drop the card chrome on hub pages — text should
     flow as plain article content, not wrapped in white boxes. The "What's
     in Scope Today" featured card retains its orange border because it's
     the primary CTA. */
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  margin-bottom: 32px;
}

body.far-hub-page .far-layer-card p {
  font-family: var(--aoa-f-body) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--aoa-text) !important;
  margin: 0 0 16px 0;
}

body.far-hub-page .far-layer-card p:last-child {
  margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TITLE 14 HUB — Part card
   ───────────────────────────────────────────────────────────────────────────── */

body.far-hub-title14 .far-hub-part-card {
  background: var(--aoa-soft-bg);
  border: 2px solid var(--aoa-orange);
  border-radius: var(--aoa-radius-lg);
  padding: 28px 32px;
}

body.far-hub-title14 .far-hub-part-badge {
  font-family: var(--aoa-f-head) !important;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aoa-orange) !important;
  display: block;
  margin-bottom: 8px;
}

body.far-hub-title14 .far-hub-part-name {
  font-family: var(--aoa-f-head) !important;
  font-size: clamp(20px, 2.5vw, 26px) !important;
  font-weight: 700 !important;
  color: var(--aoa-charcoal) !important;
  margin: 0 0 4px 0 !important;
}

body.far-hub-title14 .far-hub-part-name a {
  color: var(--aoa-charcoal) !important;
  text-decoration: none !important;
}

body.far-hub-title14 .far-hub-part-name a:hover {
  color: var(--aoa-orange) !important;
}

body.far-hub-title14 .far-hub-part-subtitle {
  font-size: 14px !important;
  color: var(--aoa-text-muted) !important;
  margin: 0 0 16px 0 !important;
}

body.far-hub-title14 .far-hub-part-desc {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--aoa-text) !important;
  margin: 0 0 16px 0 !important;
}

body.far-hub-title14 .far-hub-part-stats {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 20px 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.far-hub-title14 .far-hub-part-stats li {
  font-family: var(--aoa-f-mono) !important;
  font-size: 12px !important;
  background: rgba(244,115,33,0.08);
  border: 1px solid rgba(244,115,33,0.2);
  color: var(--aoa-charcoal) !important;
  padding: 4px 10px;
  border-radius: var(--aoa-radius-sm);
  margin: 0 !important;
}

body.far-hub-title14 .far-hub-part-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--aoa-f-head) !important;
  font-size: 15px !important;
  font-weight: 700;
  color: var(--aoa-orange) !important;
  text-decoration: none !important;
  min-height: 44px;
  padding: 8px 0;
}

body.far-hub-title14 .far-hub-part-link:hover {
  color: var(--aoa-orange-hover) !important;
  text-decoration: underline !important;
}

/* Coming list */
body.far-hub-title14 .far-hub-coming-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 16px 0 !important;
}

body.far-hub-title14 .far-hub-coming-list li {
  font-family: var(--aoa-f-body) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--aoa-text) !important;
  padding: 12px 0 12px 20px !important;
  border-bottom: 1px solid var(--aoa-line);
  position: relative;
  margin: 0 !important;
}

body.far-hub-title14 .far-hub-coming-list li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--aoa-orange);
  font-size: 18px;
  line-height: 1.55;
}

body.far-hub-title14 .far-hub-coming-list li:last-child {
  border-bottom: none;
}

body.far-hub-title14 .far-hub-coming-note {
  font-size: 13px !important;
  color: var(--aoa-text-muted) !important;
  font-style: italic;
  margin: 8px 0 0 0 !important;
}

/* Layer explainer */
body.far-hub-title14 .far-hub-layer-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

body.far-hub-title14 .far-hub-layer-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

body.far-hub-title14 .far-hub-layer-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--aoa-orange);
  color: var(--aoa-white) !important;
  font-family: var(--aoa-f-head) !important;
  font-size: 15px !important;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.far-hub-title14 .far-hub-layer-item div {
  font-family: var(--aoa-f-body) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--aoa-text) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PART HUB — Subpart grid
   ───────────────────────────────────────────────────────────────────────────── */

body.far-hub-part .far-subpart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

body.far-hub-part .far-subpart-card {
  display: flex;
  flex-direction: column;
  background: var(--aoa-white);
  border: 1px solid var(--aoa-line);
  border-radius: var(--aoa-radius-lg);
  padding: 22px 24px;
  box-shadow: var(--aoa-shadow-card);
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  min-height: 140px;
  position: relative;
}

body.far-hub-part .far-subpart-card:hover,
body.far-hub-part .far-subpart-card:focus {
  border-color: var(--aoa-orange);
  box-shadow: 0 6px 20px -6px rgba(244,115,33,0.25);
  transform: translateY(-2px);
  text-decoration: none !important;
}

body.far-hub-part .far-subpart-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

body.far-hub-part .far-subpart-label {
  font-family: var(--aoa-f-head) !important;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aoa-orange) !important;
}

body.far-hub-part .far-subpart-count {
  font-family: var(--aoa-f-mono) !important;
  font-size: 11px !important;
  color: var(--aoa-text-muted) !important;
}

body.far-hub-part .far-subpart-name {
  font-family: var(--aoa-f-head) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--aoa-charcoal) !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  line-height: 1.25;
}

body.far-hub-part .far-subpart-desc {
  font-family: var(--aoa-f-body) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--aoa-text-muted) !important;
  margin: 0 0 16px 0 !important;
  flex: 1;
}

body.far-hub-part .far-subpart-arrow {
  font-size: 18px;
  color: var(--aoa-orange);
  align-self: flex-end;
}

/* Related reading card */
body.far-hub-part .far-related-reading-card {
  border-left: 4px solid var(--aoa-orange);
}

body.far-hub-part .far-related-eyebrow {
  font-family: var(--aoa-f-head) !important;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aoa-orange) !important;
  margin: 0 0 8px 0 !important;
}

body.far-hub-part .far-related-title {
  font-family: var(--aoa-f-head) !important;
  font-size: clamp(17px, 2vw, 22px) !important;
  font-weight: 700 !important;
  margin: 0 0 12px 0 !important;
}

body.far-hub-part .far-related-title a {
  color: var(--aoa-charcoal) !important;
  text-decoration: none !important;
}

body.far-hub-part .far-related-title a:hover {
  color: var(--aoa-orange) !important;
}

body.far-hub-part .far-related-link {
  display: inline-flex;
  align-items: center;
  color: var(--aoa-orange) !important;
  font-weight: 700;
  font-size: 14px !important;
  text-decoration: none !important;
  min-height: 44px;
  padding: 8px 0;
}

body.far-hub-part .far-related-link:hover {
  text-decoration: underline !important;
}

/* Recently updated list */
body.far-hub-part .far-hub-recent-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.far-hub-part .far-hub-recent-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--aoa-line);
  margin: 0 !important;
}

body.far-hub-part .far-hub-recent-item:last-child {
  border-bottom: none;
}

body.far-hub-part .far-hub-recent-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  flex: 1;
  min-height: 44px;
  padding: 4px 0;
}

body.far-hub-part .far-hub-recent-title {
  font-family: var(--aoa-f-body) !important;
  font-size: 14px !important;
  color: var(--aoa-charcoal) !important;
}

body.far-hub-part .far-hub-recent-link:hover .far-hub-recent-title {
  color: var(--aoa-orange) !important;
}

body.far-hub-part .far-hub-recent-date {
  font-family: var(--aoa-f-mono) !important;
  font-size: 11px !important;
  color: var(--aoa-text-muted) !important;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SUBPART HUB — Section list
   ───────────────────────────────────────────────────────────────────────────── */

body.far-hub-subpart .far-section-list-card {
  padding: 8px 0;
}

body.far-hub-subpart .far-section-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.far-hub-subpart .far-section-list-item {
  border-bottom: 1px solid var(--aoa-line);
  margin: 0 !important;
}

body.far-hub-subpart .far-section-list-item:last-child {
  border-bottom: none;
}

body.far-hub-subpart .far-section-list-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 24px;
  text-decoration: none !important;
  transition: background 0.12s ease;
  min-height: 64px;
}

body.far-hub-subpart .far-section-list-link:hover {
  background: var(--aoa-soft-bg);
}

body.far-hub-subpart .far-section-list-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.far-hub-subpart .far-section-list-citation {
  font-family: var(--aoa-f-mono) !important;
  font-size: 12px !important;
  font-weight: 700;
  color: var(--aoa-orange) !important;
  background: rgba(244,115,33,0.08);
  border: 1px solid rgba(244,115,33,0.15);
  padding: 2px 8px;
  border-radius: var(--aoa-radius-sm);
}

body.far-hub-subpart .far-section-list-date {
  font-family: var(--aoa-f-mono) !important;
  font-size: 11px !important;
  color: var(--aoa-text-muted) !important;
}

body.far-hub-subpart .far-section-list-title {
  font-family: var(--aoa-f-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--aoa-charcoal) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4;
}

body.far-hub-subpart .far-section-list-link:hover .far-section-list-title {
  color: var(--aoa-orange) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTER CTA — hub pages reuse Phase 2.1 .far-footer-cta/.far-footer-btn
   We only add the hub scope selector so it applies outside single-far_section.
   ───────────────────────────────────────────────────────────────────────────── */

body.far-hub-page .far-footer-cta {
  background: var(--aoa-charcoal);
  color: var(--aoa-white);
  border-radius: var(--aoa-radius-xl);
  padding: 36px 32px;
  text-align: center;
  margin-top: 40px;
}

body.far-hub-page .far-footer-cta-label {
  font-family: var(--aoa-f-head) !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aoa-orange) !important;
  margin: 0 0 10px 0 !important;
}

body.far-hub-page .far-footer-cta-headline {
  font-family: var(--aoa-f-head) !important;
  font-size: clamp(20px, 3vw, 28px) !important;
  font-weight: 700 !important;
  color: var(--aoa-white) !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  line-height: 1.2;
}

body.far-hub-page .far-footer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--aoa-orange);
  color: var(--aoa-white) !important;
  font-family: var(--aoa-f-head) !important;
  font-size: 16px !important;
  font-weight: 700;
  text-decoration: none !important;
  padding: 14px 32px;
  border-radius: var(--aoa-radius-md);
  min-height: 48px;
  min-width: 160px;
  box-shadow: var(--aoa-shadow-btn);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

body.far-hub-page .far-footer-btn:hover,
body.far-hub-page .far-footer-btn:focus {
  background: var(--aoa-orange-hover) !important;
  box-shadow: var(--aoa-shadow-btn-hover);
  transform: translateY(-1px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SIDEBAR — hub pages reuse Phase 2.1 sidebar widget classes
   (far-sidebar-widget, far-sidebar-card-header, etc. already scoped to
   body.single-far_section — we duplicate the key rules for body.far-hub-page)
   ───────────────────────────────────────────────────────────────────────────── */

body.far-hub-page #secondary .far-sidebar-widget:first-child {
  margin-top: 0;
}

body.far-hub-page .far-sidebar-widget {
  background: var(--aoa-white);
  border: 1px solid var(--aoa-line);
  border-radius: var(--aoa-radius-lg);
  overflow: hidden;
  box-shadow: var(--aoa-shadow-card);
  margin-bottom: 24px;
}

body.far-hub-page .far-sidebar-card-header {
  background: var(--aoa-charcoal);
  padding: 20px 20px 16px;
  border-radius: 0;
}

body.far-hub-page .far-sidebar-eyebrow {
  font-family: var(--aoa-f-head) !important;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aoa-orange) !important;
  margin: 0 0 8px 0 !important;
}

body.far-hub-page .far-sidebar-headline {
  font-family: var(--aoa-f-head) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--aoa-white) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3;
}

body.far-hub-page .far-sidebar-body {
  padding: 18px 20px;
}

body.far-hub-page .far-sidebar-note {
  font-size: 13px !important;
  color: var(--aoa-text-muted) !important;
  margin: 0 0 14px 0 !important;
}

body.far-hub-page .far-sidebar-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--aoa-orange);
  color: var(--aoa-white) !important;
  font-family: var(--aoa-f-head) !important;
  font-size: 15px !important;
  font-weight: 700;
  text-decoration: none !important;
  padding: 12px 18px;
  border-radius: var(--aoa-radius-md);
  min-height: 44px;
  text-align: center;
  box-shadow: var(--aoa-shadow-btn);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

body.far-hub-page .far-sidebar-cta:hover,
body.far-hub-page .far-sidebar-cta:focus {
  background: var(--aoa-orange-hover) !important;
  box-shadow: var(--aoa-shadow-btn-hover);
}

/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE — Hub pages (375px and 768px)
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  body.far-hub-page .far-section-header {
    padding: 28px 20px;
  }

  body.far-hub-page .far-layer-card {
    padding: 20px 18px;
  }

  body.far-hub-part .far-subpart-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.far-hub-page .far-footer-cta {
    padding: 28px 20px;
  }

  body.far-hub-page .far-sidebar-cta {
    min-height: 48px;
    padding: 14px 18px;
  }

  body.far-hub-subpart .far-section-list-link {
    padding: 14px 16px;
  }

  body.far-hub-title14 .far-hub-layer-item {
    flex-direction: column;
    gap: 10px;
  }

  body.far-hub-title14 .far-hub-part-card {
    padding: 22px 18px;
  }

  body.far-hub-part .far-hub-recent-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

@media (max-width: 480px) {

  body.far-hub-page .far-section-title {
    font-size: 22px !important;
  }

  body.far-hub-part .far-subpart-card {
    padding: 18px 16px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   FAR HUB PAGES — explicit two-column layout for archive routes
   ─────────────────────────────────────────────────────────────────────────────
   The /far/ landing, /far/part-XX/ Part hubs, and /far/part-XX/subpart-X/
   Subpart hubs are routed via Phase 4's template_include from an Elementor
   page. The Elementor body classes override Astra's native ast-separate-container
   + ast-right-sidebar layout, so the sidebar stacks below content by default.
   We force the proper two-column layout explicitly here.
   ───────────────────────────────────────────────────────────────────────────── */

body.far-hub-page #content .ast-container {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding-top: 24px;
  padding-bottom: 24px;
}

body.far-hub-page #primary {
  flex: 1 1 auto;
  min-width: 0;
  width: calc(100% - 332px); /* 300px sidebar + 32px gap */
  max-width: calc(100% - 332px);
}

body.far-hub-page #secondary {
  flex: 0 0 300px;
  width: 300px;
  max-width: 300px;
  margin-top: 0;
  padding-top: 0;
}

/* Sticky sidebar (same pattern as section pages) */
body.far-hub-page #secondary {
  position: sticky;
  top: 76px;
  align-self: flex-start;
  max-height: calc(100vh - 92px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--aoa-line) transparent;
}

body.far-hub-page #content .ast-container,
body.far-hub-page .site-content,
body.far-hub-page #content {
  overflow: visible;
}

/* Tablet — collapse to single column */
@media (max-width: 1024px) {
  body.far-hub-page #primary,
  body.far-hub-page #secondary {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   FAR HUB PAGES — override grid template (Astra renders .ast-container as
   display:grid; we must use grid-template-columns to place primary + secondary
   side by side, not the flex rules above which were ignored).
   ───────────────────────────────────────────────────────────────────────────── */

body.far-hub-page #content .ast-container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 332px !important;
  gap: 32px !important;
  align-items: start;
  /* Match AOA site's standard container behavior — centered with horizontal
     padding, plus extra top padding to clear the 100px-tall transparent
     site header so the hero band doesn't get covered by it. */
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  padding-top: 120px !important;
  padding-bottom: 60px !important;
}

body.far-hub-page #primary {
  grid-column: 1;
  min-width: 0;
  width: auto !important;
  max-width: 100% !important;
}

body.far-hub-page #secondary {
  grid-column: 2;
  width: 100% !important;
  max-width: 100% !important;
  position: sticky;
  top: 76px;
  align-self: start;
}

@media (max-width: 1024px) {
  body.far-hub-page #content .ast-container {
    grid-template-columns: 1fr !important;
  }
  body.far-hub-page #primary,
  body.far-hub-page #secondary {
    grid-column: 1;
    position: static;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────

@media (max-width: 922px) {
  /* mobile/tablet — Astra HFB header collapses to a smaller hamburger */
  body.far-hub-page #content {
    padding-top: 70px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   FAR HUB PAGES — Top nav menu visibility fix.
   The AOA HFB "Transparent Header" layout configures menu text as light
   (designed to overlay the dark hero band). On hub pages the header now
   sits over white page background (we pushed the hero down to avoid the
   overlap), making the white menu invisible. Force menu text to dark.
   ───────────────────────────────────────────────────────────────────────────── */

html body.far-hub-page #ast-hf-menu-1 .menu-link,
html body.far-hub-page #ast-hf-menu-1 .menu-link:link,
html body.far-hub-page #ast-hf-menu-1 .menu-link:visited,
html body.far-hub-page #ast-hf-menu-1 .menu-item > a,
html body.far-hub-page #ast-desktop-header .main-header-menu .menu-link,
html body.far-hub-page #ast-desktop-header .main-header-menu .menu-link:link {
  color: #161312 !important;
}

html body.far-hub-page #ast-hf-menu-1 .menu-link:hover,
html body.far-hub-page #ast-hf-menu-1 .menu-link:focus,
html body.far-hub-page #ast-desktop-header .main-header-menu .menu-link:hover,
html body.far-hub-page #ast-desktop-header .main-header-menu .menu-link:focus {
  color: #f47321 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FAR DECODED — Glossary term links (auto-linker output) + term page styling
   Inline links pointing to /far/glossary/<term>/ — subtle, not visually heavy
   so a page with 20+ defined terms doesn't look like a sea of links.
   ───────────────────────────────────────────────────────────────────────────── */

a.far-term-link,
a.far-term-link:link,
a.far-term-link:visited {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(244,115,33,0.4);
  transition: border-color 0.15s, color 0.15s;
}

a.far-term-link:hover,
a.far-term-link:focus {
  color: var(--aoa-orange);
  border-bottom-color: var(--aoa-orange);
  border-bottom-style: solid;
}

/* Glossary term page (single-far_term.php) — uses the hub-page CSS as base */

body.far-term-page .far-term-definition p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--aoa-text);
}

body.far-term-page .far-term-source-note {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--aoa-line);
  color: var(--aoa-text-muted);
}

body.far-term-page .far-term-source-note small {
  font-size: 13px;
}

body.far-term-page .far-term-crossref-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

body.far-term-page .far-term-crossref-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--aoa-line);
}

body.far-term-page .far-term-crossref-list li:last-child {
  border-bottom: none;
}

body.far-term-page .far-term-crossref-list a {
  color: var(--aoa-text);
  text-decoration: none;
  display: block;
}

body.far-term-page .far-term-crossref-list a:hover {
  color: var(--aoa-orange);
}

body.far-term-page .far-term-crossref-list a strong {
  font-family: var(--aoa-f-mono);
  font-size: 13px;
  color: var(--aoa-orange);
  margin-right: 8px;
}

body.far-term-page .far-term-crossref-note {
  margin-top: 14px;
  color: var(--aoa-text-muted);
}