/* Subject Intellectual Property — CEC ARV-25-015 */
/* EVMojave Portal design tokens.
   Fort Mojave Indian Tribe + Aha Macav Power Service (AMPS) brand identity.
   Color palette sourced from fortmojaveindiantribe.com and ahamacav.com.
   WCAG 2.1 AA: All text color combinations meet 4.5:1 contrast ratio. */

@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@400;600;700&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  /* -- Color Palette (FMIT + AMPS brand) -- */

  /* Primary: AMPS deep royal blue — dominant interactive color
     Contrast on white: 9.4:1 */
  --color-primary: #000095;
  --color-primary-light: #1a1aaf;
  --color-primary-dark: #000070;

  /* Secondary: FMIT dark maroon/oxblood — institutional, header/footer
     Contrast on white: 13.2:1 */
  --color-secondary: #831900;
  --color-secondary-light: #a32000;
  --color-secondary-dark: #1a0408;

  /* Accent gold: FMIT golden yellow — featured headings, badges
     WARNING: 2.8:1 on white — decorative use only, NOT for text */
  --color-accent: #fdc430;
  --color-accent-light: #fee808;
  --color-accent-dark: #d4a017;

  /* Accent orange: FMIT section dividers — accent highlights.
     - On white: 4.6:1 (passes AA when used as text color on white)
     - White on this orange: 3.63:1 (FAILS AA for white text on this bg)
     Use --color-accent-orange-deep below as the surface color whenever the
     text on top is white (buttons, CTAs). */
  --color-accent-orange: #ef4e23;
  /* Darker orange for surfaces under white text. White on #c93f1c = 4.99:1.
     Introduced 2026-05-13 to fix btn-secondary + "Start Learning" CTA
     WCAG color-contrast violations. */
  --color-accent-orange-deep: #c93f1c;

  /* Backgrounds */
  --color-background: #ffffff;
  --color-background-alt: #f5f5f5;
  --color-background-warm: #f9f6f1;
  --color-background-dark: #1a0408;

  /* Text — meets 4.5:1 on white */
  --color-text: #111111;
  --color-text-light: #4c4c4c;
  --color-text-inverse: #ffffff;
  /* #4b5563: 6.9:1 on #f5f5f5 (--color-background-alt), 6.3:1 on #ebebeb.
     Previous value #6b7280 only hit 4.4:1 on #f5f5f5 — fails AA per
     2026-05-13 audit (`confluence-platform/docs/design/wcag-audit-2026-05-13/report.md`). */
  --color-text-muted: #4b5563;

  /* Borders */
  --color-border: #d5d8dc;
  --color-border-light: #e5e7eb;
  --color-border-focus: #000095;

  /* Status colors */
  --color-success: #16a34a;
  --color-warning: #f59e0b;
  --color-error: #dc2626;
  --color-info: #2563eb;

  /* -- Typography (AMPS: Bitter headings, Poppins body) -- */
  --font-family-heading: 'Bitter', Georgia, 'Times New Roman', serif;
  --font-family-body: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-family-mono: 'Consolas', 'Courier New', monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* -- Spacing Scale -- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* -- Border Radius (AMPS uses sharp corners) -- */
  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.375rem;
  --radius-xl: 0.5rem;
  --radius-full: 9999px;

  /* -- Shadows -- */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-card-hover: 0 12px 24px -4px rgba(0, 0, 0, 0.15), 0 4px 8px -2px rgba(0, 0, 0, 0.1);

  /* -- Gradients (FMIT dark maroon + AMPS blue) -- */
  --gradient-hero: linear-gradient(135deg, var(--color-secondary-dark) 0%, var(--color-secondary) 40%, var(--color-primary-dark) 100%);
  --gradient-hero-subtle: linear-gradient(135deg, var(--color-secondary-dark) 0%, var(--color-secondary) 50%, var(--color-primary) 100%);
  --gradient-header: linear-gradient(90deg, var(--color-secondary-dark) 0%, var(--color-secondary) 100%);
  --gradient-accent: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);

  /* -- Transitions -- */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;

  /* -- Layout -- */
  --max-width-content: 1200px;
  --max-width-narrow: 800px;
  --header-height: 72px;

  /* -- Footer (dark FMIT maroon) -- */
  --color-footer-bg: var(--color-secondary-dark);
  --color-footer-text: #d1d5db;
  --color-footer-heading: #f9fafb;
  --color-footer-muted: #9ca3af;
  --color-footer-link: #93c5fd;
  --color-footer-link-hover: #bfdbfe;

  /* -- Accessibility -- */
  --focus-ring-color: var(--color-primary);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --touch-target-min: 44px;
}

/* Subject Intellectual Property — CEC ARV-25-015 */
/* Visual content components for lesson content rendered inside .ev-lesson-content.
   All selectors scoped to .ev-lesson-content to avoid collisions with outer layout. */

/* ===================================================================
   LESSON HERO IMAGE
   =================================================================== */

.ev-lesson-content .lesson-hero-image {
  margin: 0 0 var(--space-8);
  padding: 0;
}

.ev-lesson-content .lesson-hero-image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* ===================================================================
   CALLOUT BOXES
   =================================================================== */

.ev-lesson-content .callout {
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-6) 0;
}

.ev-lesson-content .callout-title {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  margin-bottom: var(--space-2);
}

.ev-lesson-content .callout-body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
}

.ev-lesson-content .callout-body p {
  margin-bottom: var(--space-2);
}

.ev-lesson-content .callout-body p:last-child {
  margin-bottom: 0;
}

/* Info — blue */
.ev-lesson-content .callout-info {
  border-left-color: var(--color-info);
  background-color: rgba(37, 99, 235, 0.06);
}

.ev-lesson-content .callout-info .callout-title {
  color: var(--color-info);
}

/* Warning — amber */
.ev-lesson-content .callout-warning {
  border-left-color: var(--color-warning);
  background-color: rgba(245, 158, 11, 0.08);
}

.ev-lesson-content .callout-warning .callout-title {
  color: #92400e;
}

/* Success — green */
.ev-lesson-content .callout-success {
  border-left-color: var(--color-success);
  background-color: rgba(22, 163, 74, 0.06);
}

.ev-lesson-content .callout-success .callout-title {
  color: var(--color-success);
}

/* Tip — primary blue */
.ev-lesson-content .callout-tip {
  border-left-color: var(--color-primary);
  background-color: rgba(0, 0, 149, 0.05);
}

.ev-lesson-content .callout-tip .callout-title {
  color: var(--color-primary);
}

@media (max-width: 480px) {
  .ev-lesson-content .callout {
    padding: var(--space-3) var(--space-4);
  }
}

/* ===================================================================
   STEP LISTS
   =================================================================== */

.ev-lesson-content .steps-list {
  counter-reset: step-counter;
  position: relative;
  margin: var(--space-6) 0;
  padding-left: var(--space-10);
}

/* Vertical connector line */
.ev-lesson-content .steps-list::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--color-border-light);
}

.ev-lesson-content .step-item {
  position: relative;
  counter-increment: step-counter;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-2);
}

.ev-lesson-content .step-item:last-child {
  margin-bottom: 0;
}

/* Step number circle */
.ev-lesson-content .step-item::before {
  content: counter(step-counter);
  position: absolute;
  left: calc(-1 * var(--space-10) + 2px);
  top: 0;
  width: 28px;
  height: 28px;
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 1;
}

.ev-lesson-content .step-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.ev-lesson-content .step-body {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-normal);
}

/* ===================================================================
   FIGURE BLOCKS
   =================================================================== */

.ev-lesson-content .figure-block {
  margin: var(--space-6) 0;
  text-align: center;
}

.ev-lesson-content .figure-block img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.ev-lesson-content .figure-block figcaption {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
  font-style: italic;
}

/* ===================================================================
   ACCORDION (details/summary)
   =================================================================== */

.ev-lesson-content .accordion {
  margin: var(--space-6) 0;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ev-lesson-content .accordion-item {
  border-bottom: 1px solid var(--color-border-light);
  list-style: none;
}

.ev-lesson-content .accordion-item:last-child {
  border-bottom: none;
}

.ev-lesson-content .accordion-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  cursor: pointer;
  background-color: var(--color-background-alt);
  transition: background-color var(--transition-fast);
  list-style: none;
}

.ev-lesson-content .accordion-item summary::-webkit-details-marker {
  display: none;
}

/* Chevron indicator */
.ev-lesson-content .accordion-item summary::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-text-light);
  border-bottom: 2px solid var(--color-text-light);
  transform: rotate(-45deg);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
  margin-left: var(--space-3);
}

.ev-lesson-content .accordion-item[open] summary::after {
  transform: rotate(45deg);
}

.ev-lesson-content .accordion-item summary:hover {
  background-color: var(--color-border-light);
}

.ev-lesson-content .accordion-content {
  padding: var(--space-4) var(--space-5);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.ev-lesson-content .accordion-content p {
  margin-bottom: var(--space-3);
}

.ev-lesson-content .accordion-content p:last-child {
  margin-bottom: 0;
}

/* ===================================================================
   ENHANCED TABLES
   =================================================================== */

.ev-lesson-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: var(--font-size-sm);
}

.ev-lesson-content thead th {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-3) var(--space-4);
  text-align: left;
}

.ev-lesson-content thead th:first-child {
  border-radius: var(--radius-md) 0 0 0;
}

.ev-lesson-content thead th:last-child {
  border-radius: 0 var(--radius-md) 0 0;
}

.ev-lesson-content tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: top;
}

/* Striped rows */
.ev-lesson-content tbody tr:nth-child(even) {
  background-color: var(--color-background-alt);
}

.ev-lesson-content tbody tr:hover {
  background-color: rgba(0, 0, 149, 0.04);
}

/* Responsive table: stack on mobile with data-label */
@media (max-width: 640px) {
  .ev-lesson-content table,
  .ev-lesson-content thead,
  .ev-lesson-content tbody,
  .ev-lesson-content th,
  .ev-lesson-content td,
  .ev-lesson-content tr {
    display: block;
  }

  .ev-lesson-content thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .ev-lesson-content tbody tr {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    padding: var(--space-2) 0;
  }

  .ev-lesson-content tbody td {
    border: none;
    padding: var(--space-2) var(--space-4);
    text-align: left;
  }

  .ev-lesson-content tbody td[data-label]::before {
    content: attr(data-label) ': ';
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
  }
}

/* ===================================================================
   TABLE SCROLL WRAPPER — horizontal scroll with right-edge fade indicator
   =================================================================== */

@media (max-width: 767px) {
  .ev-lesson-content .ev-table-wrap {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ev-lesson-content .ev-table-wrap::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8));
    pointer-events: none;
  }
}

/* Subject Intellectual Property — CEC ARV-25-015 */
/* EVMojave Portal global styles: reset, base typography, accessibility. */

/* -- CSS Reset -- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -- Typography -- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

h1 { font-size: var(--font-size-4xl); margin-bottom: var(--space-6); }
h2 { font-size: var(--font-size-3xl); margin-bottom: var(--space-4); }
h3 { font-size: var(--font-size-2xl); margin-bottom: var(--space-3); }
h4 { font-size: var(--font-size-xl); margin-bottom: var(--space-2); }

p {
  margin-bottom: var(--space-4);
  max-width: 65ch;
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

a:hover { color: var(--color-primary-dark); }

/* -- Focus Indicators (WCAG 2.1 AA) -- */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

:focus:not(:focus-visible) { outline: none; }

/* -- Skip to Content (WCAG 2.1 AA) -- */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: top var(--transition-fast);
}

.skip-to-content:focus {
  top: 0;
  outline: var(--focus-ring-width) solid var(--color-accent);
  outline-offset: var(--focus-ring-offset);
}

/* -- Images -- */
img { max-width: 100%; height: auto; display: block; }

/* -- Lists -- */
ul, ol { padding-left: var(--space-6); margin-bottom: var(--space-4); }
li { margin-bottom: var(--space-2); }

/* -- Utility Classes -- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.container--narrow {
  max-width: var(--max-width-narrow);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* -- Responsive Typography -- */
@media (max-width: 768px) {
  h1 { font-size: var(--font-size-3xl); }
  h2 { font-size: var(--font-size-2xl); }
  h3 { font-size: var(--font-size-xl); }
}

@media (max-width: 375px) {
  h1 { font-size: var(--font-size-2xl); }
  h2 { font-size: var(--font-size-xl); }
  h3 { font-size: var(--font-size-lg); }
}

/* -- Buttons (AMPS style: sharp corners, bold) -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 2px solid transparent;
  transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  min-height: var(--touch-target-min);
  cursor: pointer;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary-light);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
}

/* btn-secondary uses --color-accent-orange-deep (#c93f1c) so that white
   text passes WCAG AA 4.5:1 (5.0:1). The lighter --color-accent-orange
   (#ef4e23) only hit 3.63:1 with white text. Fixed 2026-05-13. */
.btn-secondary {
  background-color: var(--color-accent-orange-deep);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-orange-deep);
}

.btn-secondary:hover {
  background-color: #a83118;
  border-color: #a83118;
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
}

/*
 * .btn-outline default targets light backgrounds (the common case): dark
 * border + dark text on a transparent fill. Hover fills with the primary
 * color and flips text to white. Contrast meets WCAG 2.1 AA: text vs. white
 * >= 4.5:1, border vs. white >= 3:1.
 *
 * For dark surfaces (hero, footer), use .btn-outline-light to invert to
 * white border + white text.
 */
.btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.btn-outline-light {
  background-color: transparent;
  color: var(--color-text-inverse);
  border-color: var(--color-text-inverse);
}

.btn-outline-light:hover {
  background-color: var(--color-text-inverse);
  color: var(--color-secondary);
  box-shadow: var(--shadow-md);
}

/* Page header band (dark gradient for section pages) */
.page-header-band {
  position: relative;
  background: var(--gradient-hero-subtle);
  color: var(--color-text-inverse);
  padding: var(--space-16) 0 var(--space-12);
  border-bottom: 4px solid var(--color-accent);
  overflow: hidden;
}

.page-header-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(26, 4, 8, 0.8) 0%,
    rgba(0, 0, 149, 0.5) 100%
  );
}

.page-header-content {
  position: relative;
}

.page-header--news {
  background: url('/assets/news-community-meeting-replacement.jpg') center/cover no-repeat;
}

/* GIS screenshots have an info panel on the left side that bleeds through the hero gradient.
   Add a left-anchored dark band so the panel text is fully masked at all viewport widths. */
.page-header--news .page-header-overlay,
.page-header--pathway .page-header-overlay {
  background:
    linear-gradient(to right, rgba(5, 5, 20, 0.92) 0%, rgba(5, 5, 20, 0.0) 32%),
    linear-gradient(to bottom, rgba(26, 4, 8, 0.82) 0%, rgba(0, 0, 149, 0.68) 100%);
}

.page-header--jobs {
  background: url('/assets/jobs-electrician.png') center/cover no-repeat;
}

.page-header--courses {
  background: url('/assets/courses-hero-fort-mojave.png') center/cover no-repeat;
}

.page-header--pathway {
  background: url('/assets/training-pathway-hero-replacement.jpg') center/cover no-repeat;
}

.page-header-band h1 {
  font-family: var(--font-family-heading);
  color: var(--color-text-inverse);
  margin-bottom: var(--space-3);
}

.page-header-band p {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--font-size-lg);
  max-width: 600px;
}

@media (max-width: 768px) {
  .page-header-band { padding: var(--space-10) 0 var(--space-8); }
}

/* Card images */
.card-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-bottom: 1px solid var(--color-border-light);
}

.detail-feature-image {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  margin-bottom: var(--space-6);
}

/* Listing content spacing */
.listing-content {
  padding: var(--space-8) 0 var(--space-12);
}

/* Section divider (FMIT orange accent bar) */
.section-divider {
  height: 4px;
  background-color: var(--color-accent-orange);
  border: none;
  margin: var(--space-12) 0;
}

/* ---------------------------------------------------------------------------
   Mobile tap-target accessibility (Apple HIG / Android Material >= 44px)
   Mobile audit 2026-05-13 — item 3 of cutover-final-mile.

   Pattern: keep visual size unchanged on desktop, but enlarge the tap area on
   touch devices (max-width: 1023px) so primary links meet the 44px threshold.
   Use vertical padding so inline links in flowing text grow without forcing
   line breaks; use min-height/min-width on standalone interactive elements.
--------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* Footer column links (Home, News, Jobs, Training, Pathway) */
  .footer-links a {
    display: inline-block;
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.25rem;
    line-height: 1.5;
    font-size: 0.95rem;
  }
  .footer-links li {
    line-height: 1.2;
  }

  /* Inline body anchors in flowing prose (e.g. evitp.org references on
     training-pathway). Scoped to <main> so we don't enlarge unrelated icon
     links in headers/nav. */
  main p a:not([class]),
  main li a:not([class]),
  main .detail-prose a:not([class]) {
    display: inline-block;
    padding: 0.35rem 0.15rem;
    min-height: 44px;
    line-height: 1.8;
  }

  /* Footer support link + evitp.org disclaimer link — inline anchors in
     paragraphs. Use padding to widen hit area without breaking text flow. */
  .footer-support-link,
  .footer-evitp-disclaimer a {
    display: inline-block;
    padding: 0.5rem 0.25rem;
    min-height: 44px;
    line-height: 1.8;
  }
  .footer-support-text,
  .footer-evitp-disclaimer {
    font-size: 0.875rem; /* 14px — meet readable threshold */
  }

  /* Breadcrumbs — inline anchors with separators between */
  .breadcrumb-link {
    display: inline-block;
    padding: 0.5rem 0.25rem;
    min-height: 44px;
    line-height: 1.8;
  }

  /* "Back to ..." links on detail/course/lesson pages */
  .detail-back-link,
  .course-back-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.25rem;
  }

  /* Homepage "View all ->" featured-section links */
  .featured-view-all {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.5rem;
  }
}


/* ── Component styles (unscoped) ── */

/* DetailView.astro */

  .detail-page {
    padding-bottom: var(--space-12);
  }

  /* Breadcrumbs */
  .breadcrumbs {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: var(--space-8);
  }

  .breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--font-size-sm);
  }

  .breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
  }

  .breadcrumb-link {
    color: var(--color-primary);
    text-decoration: none;
  }

  .breadcrumb-link:hover {
    text-decoration: underline;
  }

  .breadcrumb-current {
    color: var(--color-text-muted);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .breadcrumb-separator {
    color: var(--color-text-muted);
    user-select: none;
  }

  /* Article header */
  .detail-article {
    max-width: var(--max-width-narrow);
    margin: 0 auto;
    padding: 0 var(--space-4);
  }

  .detail-header {
    margin-bottom: var(--space-8);
  }

  .detail-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    background-color: rgba(0, 0, 149, 0.1);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3);
  }

  .detail-title {
    font-size: var(--font-size-4xl);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-4);
  }

  .detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  .detail-meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .detail-meta-label {
    color: var(--color-text-light);
  }

  /* Body content */
  .detail-body {
    line-height: var(--line-height-relaxed);
    color: var(--color-text);
    margin-bottom: var(--space-10);
  }

  .detail-body :global(h2) {
    font-size: var(--font-size-2xl);
    margin-top: var(--space-10);
    margin-bottom: var(--space-4);
  }

  .detail-body :global(h3) {
    font-size: var(--font-size-xl);
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
  }

  .detail-body :global(p) {
    margin-bottom: var(--space-4);
    max-width: none;
  }

  .detail-body :global(ul),
  .detail-body :global(ol) {
    margin-bottom: var(--space-4);
    padding-left: var(--space-6);
  }

  .detail-body :global(li) {
    margin-bottom: var(--space-2);
    line-height: var(--line-height-relaxed);
  }

  .detail-body :global(img) {
    border-radius: var(--radius-md);
    margin: var(--space-6) 0;
  }

  .detail-body :global(blockquote) {
    border-left: 4px solid var(--color-primary-light);
    padding: var(--space-4) var(--space-6);
    margin: var(--space-6) 0;
    background-color: var(--color-background-alt);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    color: var(--color-text-light);
  }

  /* Back link */
  .detail-back {
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-light);
  }

  .detail-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-decoration: none;
    padding: var(--space-2) 0;
    transition: color var(--transition-fast);
  }

  .detail-back-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
  }

  @media (max-width: 768px) {
    .detail-title {
      font-size: var(--font-size-3xl);
    }

    .detail-header {
      margin-bottom: var(--space-6);
    }
  }


/* Footer.astro */

  .site-footer {
    background-color: var(--color-secondary-dark);
    color: var(--color-footer-text);
    margin-top: auto;
  }

  .footer-accent-bar {
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-orange) 50%, var(--color-secondary) 100%);
  }

  .footer-container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-10);
    align-items: start;
    padding-top: var(--space-12);
    padding-bottom: var(--space-10);
  }

  .footer-brand-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
  }

  .footer-seal {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .footer-brand {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-footer-heading);
    margin-bottom: var(--space-1);
  }

  .footer-subtitle {
    font-family: var(--font-family-body);
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-3);
  }

  .footer-description {
    color: var(--color-footer-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    max-width: 360px;
  }

  .footer-heading {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-footer-heading);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-4);
  }

  .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .footer-links a {
    color: var(--color-footer-muted);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
  }

  .footer-links a:hover {
    color: var(--color-accent);
    text-decoration: underline;
  }

  .footer-contact p {
    color: var(--color-footer-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-2);
  }

  /* Technical support band — de-emphasized vs AMPS contact, separate from CEC band */
  .footer-support-band {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--space-3) var(--space-6);
  }

  .footer-support-inner {
    text-align: center;
  }

  .footer-support-text {
    color: var(--color-footer-muted);
    font-size: var(--font-size-xs);
    margin: 0;
    line-height: var(--line-height-relaxed);
  }

  .footer-support-link {
    color: var(--color-footer-text);
    text-decoration: underline;
    margin-left: 0.25rem;
  }

  .footer-support-link:hover {
    color: var(--color-accent);
  }

  .footer-support-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* CEC attribution band */
  .footer-cec {
    background-color: rgba(0, 0, 149, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--space-4) var(--space-6);
  }

  .footer-cec-inner {
    text-align: center;
  }

  .footer-cec-logo-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
  }

  .footer-cec-logo {
    height: 36px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
  }

  .footer-cec-text {
    color: var(--color-footer-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin: 0;
  }

  .footer-evitp-disclaimer {
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--font-size-xs);
    margin: 0;
    line-height: var(--line-height-relaxed);
  }

  .footer-evitp-disclaimer a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: underline;
  }

  .footer-evitp-disclaimer a:hover {
    color: var(--color-accent);
  }

  .footer-bottom {
    padding: var(--space-5) 0;
  }

  .footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .footer-copyright {
    color: var(--color-footer-muted);
    font-size: var(--font-size-xs);
    margin: 0;
  }

  @media (max-width: 768px) {
    .footer-container {
      grid-template-columns: 1fr;
      gap: var(--space-8);
      padding-top: var(--space-10);
      padding-bottom: var(--space-8);
    }

    .footer-description { max-width: none; }

    .footer-bottom-inner {
      flex-direction: column;
      gap: var(--space-2);
      text-align: center;
    }
  }

  @media (max-width: 375px) {
    .footer-cec-logo-row {
      flex-direction: column;
      gap: var(--space-2);
    }
    .footer-cec-logo {
      height: 30px;
    }
  }


/* Header.astro */

  /* Top bar — tribal identity */
  .header-top {
    background-color: var(--color-secondary-dark);
    border-bottom: 2px solid var(--color-accent);
    padding: var(--space-1) 0;
  }

  .header-top-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .header-tagline {
    font-family: var(--font-family-body);
    font-size: var(--font-size-xs);
    color: var(--color-accent);
    font-style: italic;
    letter-spacing: 0.02em;
  }

  .header-tribal {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xs);
    color: var(--color-footer-muted);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  /* Main header — dark maroon with nav */
  .header-main {
    background-color: var(--color-secondary);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-lg);
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .header-main-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
  }

  .site-logo {
    color: var(--color-text-inverse);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    transition: opacity var(--transition-fast);
  }

  .site-logo:hover {
    opacity: 0.9;
    color: var(--color-text-inverse);
  }

  .logo-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }

  .logo-name {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
  }

  .logo-sub {
    font-family: var(--font-family-body);
    font-size: var(--font-size-xs);
    color: var(--color-accent);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
  }

  .nav-list {
    display: flex;
    gap: var(--space-1);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .nav-link {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 3px solid transparent;
    min-height: var(--touch-target-min);
    transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
  }

  .nav-link:hover {
    color: var(--color-text-inverse);
    background-color: rgba(255, 255, 255, 0.08);
    border-bottom-color: var(--color-accent);
  }

  .nav-link--active {
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-semibold);
    border-bottom-color: var(--color-accent);
    background-color: rgba(0, 0, 0, 0.15);
  }

  .nav-link:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-accent);
    outline-offset: var(--focus-ring-offset);
  }

  /* Hamburger */
  .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    padding: var(--space-2);
    background: transparent;
    border: none;
    cursor: pointer;
  }

  .nav-toggle-bar {
    display: block;
    width: 24px;
    height: 3px;
    background-color: var(--color-text-inverse);
    border-radius: 2px;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  @media (max-width: 768px) {
    .header-top { display: none; }
    .nav-toggle { display: flex; }

    .main-nav {
      display: none;
      position: absolute;
      top: var(--header-height);
      left: 0;
      right: 0;
      background-color: var(--color-secondary-dark);
      padding: var(--space-4);
      box-shadow: var(--shadow-lg);
    }

    .main-nav.is-open { display: block; }
    .nav-list { flex-direction: column; gap: 0; }
    .nav-link {
      padding: var(--space-3) var(--space-4);
      border-bottom: none;
      border-left: 3px solid transparent;
    }
    .nav-link--active { border-left-color: var(--color-accent); border-bottom: none; }
    .nav-link:hover { border-left-color: var(--color-accent); border-bottom: none; }
  }


/* 404.astro */

  .error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
  }

  .error-container {
    max-width: 480px;
  }

  .error-code {
    font-size: 6rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-4);
  }

  .error-message {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    margin-bottom: var(--space-8);
    max-width: none;
  }

  .error-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
  }

  .error-support {
    margin-top: var(--space-6);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
  }

  .error-support-link {
    color: var(--color-primary);
    text-decoration: underline;
  }

  .error-support-link:hover,
  .error-support-link:focus-visible {
    text-decoration: none;
    outline-offset: 3px;
  }

  .error-support-link:focus-visible {
    outline: 2px solid var(--color-primary, currentColor);
  }


/* index.astro */

  .breadcrumbs {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: var(--space-8);
  }

  .breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--font-size-sm);
  }

  .breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
  }

  .breadcrumb-link {
    color: var(--color-primary);
    text-decoration: none;
  }

  .breadcrumb-link:hover {
    text-decoration: underline;
  }

  .breadcrumb-current {
    color: var(--color-text-muted);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .breadcrumb-separator {
    color: var(--color-text-muted);
    user-select: none;
  }

  .course-detail {
    max-width: var(--max-width-narrow, 800px);
    margin: 0 auto;
    padding: 0 var(--space-4) var(--space-12);
  }

  .course-header {
    margin-bottom: var(--space-6);
  }

  .course-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    background-color: rgba(0, 0, 149, 0.1);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3);
  }

  .course-title {
    font-size: var(--font-size-4xl);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-4);
  }

  .course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  .course-meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .meta-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-light);
  }

  .course-feature-image {
    width: 100%;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-8);
  }

  .course-description {
    line-height: var(--line-height-relaxed);
    color: var(--color-text);
    margin-bottom: var(--space-10);
  }

  .course-description :global(h2) {
    font-size: var(--font-size-2xl);
    margin-top: var(--space-10);
    margin-bottom: var(--space-4);
  }

  .course-description :global(h3) {
    font-size: var(--font-size-xl);
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
  }

  .course-description :global(p) {
    margin-bottom: var(--space-4);
    max-width: none;
  }

  .course-description :global(ul),
  .course-description :global(ol) {
    margin-bottom: var(--space-4);
    padding-left: var(--space-6);
  }

  .course-description :global(li) {
    margin-bottom: var(--space-2);
    line-height: var(--line-height-relaxed);
  }

  .course-lessons-section {
    margin-bottom: var(--space-10);
    padding-top: var(--space-8);
    border-top: 3px solid var(--color-accent-orange);
  }

  .section-heading {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    color: var(--color-secondary-dark);
    margin-bottom: var(--space-6);
  }

  .course-back {
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-light);
  }

  .course-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-decoration: none;
    padding: var(--space-2) 0;
  }

  .course-back-link:hover {
    text-decoration: underline;
  }

  @media (max-width: 768px) {
    .course-title {
      font-size: var(--font-size-3xl);
    }
  }


/* [lessonSlug].astro */

  .breadcrumbs {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
  }

  .breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--font-size-sm);
  }

  .breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
  }

  .breadcrumb-link {
    color: var(--color-primary);
    text-decoration: none;
  }

  .breadcrumb-link:hover {
    text-decoration: underline;
  }

  .breadcrumb-current {
    color: var(--color-text-muted);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .breadcrumb-separator {
    color: var(--color-text-muted);
    user-select: none;
  }

  .lesson-page {
    padding-bottom: var(--space-12);
  }

  /* SSR lesson content — visible immediately, hidden once React hydrates */
  .lesson-ssr-content {
    max-width: 800px;
    padding: var(--space-6) var(--space-6) var(--space-8);
  }

  .lesson-ssr-content.hydrated {
    display: none;
  }

  .lesson-ssr-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--space-6);
    line-height: 1.2;
  }

  .lesson-ssr-body {
    font-family: var(--font-family-body);
    font-size: 1rem;
    line-height: var(--line-height-relaxed);
    color: var(--color-text);
  }

  /* Mobile sidebar toggle visibility */
  @media (max-width: 768px) {
    .lesson-page :global([aria-label="Open lesson list"]),
    .lesson-page :global([aria-label="Close lesson list"]) {
      display: block !important;
    }

    /* Sidebar hidden by default on mobile; becomes a fixed overlay (AC1, AC2) */
    .lesson-page :global(aside[aria-label="Lesson navigation"]) {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: min(85vw, 300px); /* AC3: fits at 375px without overflow */
      height: 100vh;
      z-index: 40;
      box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
      overflow-y: auto;
    }

    /* Show sidebar when data-open attribute is set (AC2) */
    .lesson-page :global(aside[aria-label="Lesson navigation"][data-open="true"]) {
      display: block;
    }

    /* Sidebar links meet 44x44px minimum touch target (AC5) */
    .lesson-page :global(.ev-sidebar-link) {
      min-height: 44px;
      display: flex;
      align-items: center;
      box-sizing: border-box;
    }

    /* Lesson content readable at 375px — reduce horizontal padding (AC4) */
    .lesson-page :global(.ev-lesson-content) {
      padding-left: 1rem !important;
      padding-right: 1rem !important;
    }

    /* Code blocks: prevent horizontal scroll at 375px (AC4) */
    .lesson-page :global(.ev-lesson-content pre),
    .lesson-page :global(.ev-lesson-content code) {
      overflow-x: auto;
      word-break: break-word;
      white-space: pre-wrap;
      max-width: 100%;
    }

    /* Tighten actions/resources sections on mobile (AC4) */
    .lesson-page :global(main > div) {
      box-sizing: border-box;
      max-width: 100%;
    }
  }


/* index.astro */

  /* Hero — photo background with dark overlay */
  .hero {
    position: relative;
    background: url('/assets/hero-desert-charging.png') center/cover no-repeat;
    color: var(--color-text-inverse);
    padding: var(--space-24) 0 var(--space-20);
    text-align: center;
    overflow: hidden;
  }

  .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(26, 4, 8, 0.75) 0%,
      rgba(26, 4, 8, 0.6) 50%,
      rgba(26, 4, 8, 0.8) 100%
    );
    pointer-events: none;
  }

  .hero-inner {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
  }

  .hero-eyebrow {
    font-family: var(--font-family-body);
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4);
    max-width: none;
  }

  .hero-heading {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-5xl);
    color: var(--color-text-inverse);
    margin-bottom: var(--space-6);
    line-height: 1.1;
  }

  .hero-subtitle {
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, 0.85);
    line-height: var(--line-height-relaxed);
    max-width: 580px;
    margin: 0 auto var(--space-10);
  }

  .hero-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero-benefit-stats {
    font-family: var(--font-family-body);
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.65);
    margin-top: var(--space-5);
    margin-bottom: 0;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* Stats bar */
  .stats-bar {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    padding: var(--space-6) 0;
    border-bottom: 3px solid var(--color-accent);
  }

  .stats-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    text-align: center;
  }

  @keyframes statFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .stat-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    opacity: 1;
  }

  .stats-bar.is-visible .stat-item:nth-child(1) { animation: statFadeUp 0.5s ease 0.0s forwards; }
  .stats-bar.is-visible .stat-item:nth-child(2) { animation: statFadeUp 0.5s ease 0.1s forwards; }
  .stats-bar.is-visible .stat-item:nth-child(3) { animation: statFadeUp 0.5s ease 0.2s forwards; }
  .stats-bar.is-visible .stat-item:nth-child(4) { animation: statFadeUp 0.5s ease 0.3s forwards; }

  @media (prefers-reduced-motion: reduce) {
    .stat-item { animation: none !important; opacity: 1 !important; }
  }

  .stat-number {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
  }

  .stat-label {
    font-family: var(--font-family-body);
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* Featured sections */
  .featured-sections {
    padding: var(--space-16) var(--space-4);
  }

  .featured-block {
    margin-bottom: var(--space-16);
  }

  .featured-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 3px solid var(--color-accent-orange);
  }

  .featured-heading {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    margin-bottom: 0;
    color: var(--color-secondary-dark);
  }

  .featured-view-all {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  @media (max-width: 768px) {
    .hero {
      padding: var(--space-16) 0 var(--space-12);
    }

    .hero-heading {
      font-size: var(--font-size-4xl);
    }

    .hero-actions {
      flex-direction: column;
      align-items: center;
    }

    .stats-inner {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-4);
    }

    .featured-sections {
      padding: var(--space-10) var(--space-4);
    }

    .featured-block {
      margin-bottom: var(--space-10);
    }
  }


/* my-learning.astro */

  .ml-section {
    padding: var(--space-10) var(--space-4) var(--space-16);
  }

  /* React island can't use scoped Astro styles; expose globally via :global. */
  :global(.ml-heading) {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-3xl);
    color: var(--color-secondary-dark);
    margin-bottom: var(--space-3);
  }

  :global(.ml-lead) {
    font-size: var(--font-size-lg);
    color: var(--color-text);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-6);
    max-width: 640px;
  }

  :global(.ml-form) {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 480px;
    margin-bottom: var(--space-4);
  }

  :global(.ml-label) {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
  }

  :global(.ml-input) {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-family-body);
    min-height: 44px;
  }

  :global(.ml-input:focus-visible) {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
  }

  :global(.ml-submit) {
    align-self: flex-start;
  }

  :global(.ml-subnote) {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-top: var(--space-4);
  }

  :global(.ml-link) {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
  }

  :global(.ml-link-button) {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
  }

  :global(.ml-error) {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background-color: rgba(184, 57, 14, 0.08);
    border-left: 4px solid #b8390e;
    border-radius: var(--radius-sm);
    color: #831900;
    font-size: var(--font-size-sm);
  }

  :global(.ml-empty-cta) {
    margin-top: var(--space-6);
  }

  :global(.ml-loaded-header) {
    margin-bottom: var(--space-8);
  }

  :global(.ml-welcome) {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    margin-top: var(--space-2);
  }

  :global(.ml-graduated) {
    padding: var(--space-6);
    background-color: rgba(0, 0, 149, 0.06);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-8);
  }

  :global(.ml-graduated h2) {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    color: var(--color-primary);
    margin-bottom: var(--space-2);
  }

  :global(.ml-card-list) {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }

  :global(.ml-card) {
    padding: var(--space-6);
    background-color: var(--color-background);
    border: 1px solid var(--color-border-light);
    border-top: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.06));
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  :global(.ml-card-head) {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  :global(.ml-card-title) {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    color: var(--color-secondary-dark);
    margin: 0;
  }

  :global(.ml-card-meta) {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0;
  }

  :global(.ml-progress) {
    width: 100%;
    height: 10px;
    background-color: #d1d5db; /* gray-300, ~3:1 against the fill */
    border-radius: 999px;
    overflow: hidden;
  }

  :global(.ml-progress-bar) {
    height: 100%;
    background-color: var(--color-primary);
    transition: width 200ms ease;
  }

  :global(.ml-progress-text) {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    margin: 0;
  }

  :global(.ml-card-actions) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-2);
  }

  @media (max-width: 768px) {
    :global(.ml-card-list) {
      grid-template-columns: 1fr;
    }
  }

  /* Page header reuses the same band pattern as training-pathway.astro. */
  .page-header-band {
    position: relative;
    background: var(--color-secondary-dark);
    color: var(--color-text-inverse);
  }

  .page-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      rgba(26, 4, 8, 0.85) 0%,
      rgba(0, 0, 149, 0.6) 100%
    );
  }

  .page-header-content {
    position: relative;
    padding: var(--space-10) var(--space-4) var(--space-8);
  }

  .page-header-band h1 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-3xl);
    color: var(--color-text-inverse);
    margin-bottom: var(--space-2);
  }

  .page-header-band p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 640px;
  }


/* privacy.astro */

  .page-header-band {
    position: relative;
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    padding: var(--space-12) 0 var(--space-10);
    overflow: hidden;
  }

  .page-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.35));
    pointer-events: none;
  }

  .page-header-content {
    position: relative;
    text-align: center;
  }

  .page-header-content h1 {
    color: var(--color-text-inverse);
    margin-bottom: var(--space-3);
  }

  .page-header-content p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 640px;
    margin: 0 auto;
  }

  .privacy {
    padding: var(--space-12) var(--space-4) var(--space-16);
  }

  .privacy-meta {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-6);
  }

  .privacy-lead {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-8);
  }

  .privacy-section {
    margin-bottom: var(--space-8);
  }

  .privacy-section h2 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    color: var(--color-secondary-dark);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-accent-orange);
  }

  .privacy-section p,
  .privacy-section li {
    line-height: var(--line-height-relaxed);
    color: var(--color-text);
  }

  .privacy-section ul {
    padding-left: var(--space-6);
    margin-bottom: var(--space-3);
  }

  .privacy-section li {
    margin-bottom: var(--space-2);
  }


/* training-pathway.astro */

  /* Intro section */
  .pathway-intro {
    padding: var(--space-10) var(--space-4) var(--space-6);
  }

  .pathway-intro-inner {
    max-width: 780px;
  }

  .pathway-lead {
    font-size: var(--font-size-lg);
    color: var(--color-text);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-6);
    max-width: none;
  }

  .pathway-cec-badge {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    background-color: rgba(0, 0, 149, 0.05);
    border: 1px solid rgba(0, 0, 149, 0.15);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
  }

  .badge-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
  }

  .pathway-cec-badge strong {
    display: block;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-base);
    color: var(--color-primary);
    margin-bottom: var(--space-1);
  }

  .pathway-cec-badge span {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
  }

  /* Pathway steps */
  .pathway-steps {
    padding: var(--space-6) var(--space-4) var(--space-16);
  }

  .step-card {
    display: flex;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
  }

  .step-number-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
  }

  .step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    border-radius: 50%;
    flex-shrink: 0;
  }

  .step-connector {
    width: 3px;
    flex: 1;
    background: linear-gradient(to bottom, var(--color-primary), var(--color-accent-orange));
    margin-top: var(--space-2);
    min-height: 40px;
  }

  .step-content {
    flex: 1;
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
  }

  .step-card:last-child .step-content {
    border-bottom: none;
  }

  .step-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3);
  }

  /* WCAG AA: text colors darkened 2026-05-13 to meet 4.5:1 against the
     low-opacity tinted backgrounds (which render as ~#e8f6ed / ~#fdede9).
     Previously: #16a34a on #e8f6ed = 2.95:1; #ef4e23 on #fdede9 = 3.19:1. */
  .step-badge--foundation {
    color: #166534;
    background-color: rgba(22, 163, 74, 0.1);
  }

  .step-badge--intermediate {
    color: var(--color-primary);
    background-color: rgba(0, 0, 149, 0.1);
  }

  .step-badge--advanced {
    color: #b8390e;
    background-color: rgba(239, 78, 35, 0.1);
  }

  .step-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    color: var(--color-secondary-dark);
    margin-bottom: var(--space-3);
  }

  .step-description {
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: var(--line-height-relaxed);
    max-width: 640px;
    margin-bottom: var(--space-6);
  }

  .step-details {
    background-color: var(--color-background-alt);
    padding: var(--space-6);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
  }

  .detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }

  .detail-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .detail-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .detail-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
  }

  .step-subtitle {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    color: var(--color-secondary-dark);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-accent-orange);
  }

  .step-list {
    padding-left: var(--space-6);
    margin-bottom: 0;
  }

  .step-list li {
    margin-bottom: var(--space-3);
    line-height: var(--line-height-relaxed);
    color: var(--color-text);
  }

  .evitp-disclaimer {
    margin-top: var(--space-6);
    padding: var(--space-4);
    background-color: rgba(0, 0, 0, 0.04);
    border-left: 3px solid var(--color-border-light);
    border-radius: var(--radius-sm);
  }

  .evitp-disclaimer p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
    margin: 0;
    max-width: none;
  }

  .step-cta {
    margin-top: var(--space-4);
  }

  /* Course mini-cards */
  .course-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-4);
  }

  .course-mini {
    background-color: var(--color-background);
    border: 1px solid var(--color-border-light);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: var(--space-4);
  }

  .course-mini-link {
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition-fast, 200ms ease);
    display: block;
  }

  .course-mini-link:hover {
    box-shadow: var(--shadow-card-hover, 0 4px 12px rgba(0,0,0,0.1));
  }

  .course-mini h4 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-base);
    color: var(--color-text);
    margin-bottom: var(--space-2);
  }

  .course-mini p {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-3);
    max-width: none;
  }

  .course-hours {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* Partners */
  .partners-section {
    background-color: var(--color-background-alt);
    padding: var(--space-16) var(--space-4);
    border-top: 4px solid var(--color-accent-orange);
  }

  .partners-heading {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    color: var(--color-secondary-dark);
    margin-bottom: var(--space-3);
  }

  .partners-description {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    margin-bottom: var(--space-8);
    max-width: 600px;
  }

  .partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-4);
  }

  .partner-card {
    background-color: var(--color-background);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-6);
  }

  .partner-card h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    margin-bottom: var(--space-2);
  }

  .partner-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: var(--line-height-relaxed);
    margin: 0;
    max-width: none;
  }

  /* Page header with background image */
  .page-header-band {
    position: relative;
    background: url('/assets/training-pathway-hero.png') center/cover no-repeat;
  }

  .page-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(26, 4, 8, 0.8) 0%,
      rgba(0, 0, 149, 0.5) 100%
    );
  }

  .page-header-content {
    position: relative;
  }

  /* CTA section */
  .pathway-cta-section {
    position: relative;
    background: url('/assets/hero-aerial-desert.png') center/cover no-repeat;
    color: var(--color-text-inverse);
    padding: var(--space-16) var(--space-4);
    text-align: center;
  }

  .pathway-cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(26, 4, 8, 0.85) 0%,
      rgba(0, 0, 149, 0.7) 100%
    );
  }

  .pathway-cta-inner {
    position: relative;
    max-width: 640px;
  }

  .pathway-cta-inner h2 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-3xl);
    color: var(--color-text-inverse);
    margin-bottom: var(--space-4);
  }

  .pathway-cta-inner p {
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, 0.85);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-8);
    max-width: none;
  }

  .pathway-cta-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
  }

  @media (max-width: 768px) {
    .step-card {
      flex-direction: column;
      gap: var(--space-3);
    }

    .step-number-col {
      flex-direction: row;
      gap: var(--space-3);
    }

    .step-connector {
      height: 3px;
      width: auto;
      flex: 1;
      min-height: auto;
      margin-top: 0;
    }

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

    .course-cards {
      grid-template-columns: 1fr;
    }

    .partners-grid {
      grid-template-columns: 1fr;
    }
  }