/*
 * shared.css — design tokens shared across all Mission ASVAB pages.
 * Extracted from per-page inline <style> :root blocks (identical values,
 * zero conflicts across pages). Linked BEFORE each page's inline <style>
 * so page-specific styles can still override if ever needed.
 */
/* Respect users who prefer reduced motion (applies on every page that links this file) */
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}

:root {
  /* Navy palette */
  --navy-900: #0a1628;
  --navy-800: #132039;
  --navy-700: #1e3a5f;
  --navy-600: #2d5a87;
  /* Gold palette */
  --gold-500: #d4a853;
  --gold-400: #e8c17a;
  --gold-300: #f0d69b;
  /* Accessible gold for TEXT on light (cream/white) backgrounds.
     Brand gold (#d4a853) is only ~2.1:1 on cream — fails WCAG AA. This darker
     token measures 4.76:1 on cream (#faf8f5) and 5.04:1 on white. Use for
     normal-size gold text; keep brand gold for borders, fills, icons and
     large display type. */
  --gold-text: #8a6a22;
  /* Neutrals */
  --cream-100: #faf8f5;
  --cream-200: #f2efe8;
  --white: #ffffff;
  --text-primary: #0a1628;
  --text-secondary: #4a5568;
  /* Status colors */
  --success: #2d8a6e;
  --success-light: #e8f5f0;
  --error: #c53030;
  --error-light: #fef2f2;
  --warning: #b45309;
  --warning-light: #fef3c7;
  --green-500: #22c55e;
  --green-100: #dcfce7;
  --red-500: #ef4444;
  --red-100: #fee2e2;
}

/* ---- Marketing nav (shared by index, about, preview-modern-academy) ---- */
.nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}
.nav-links a {
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}
.nav-cta {
  background: var(--navy-900);
  color: var(--white);
  padding: 0.75rem 1.75rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

/* ---- Mobile menu + hamburger (shared by index, about, study-guide) ---- */
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 0.5rem; }
.hamburger:focus-visible, .mobile-menu-close:focus-visible { outline: 3px solid var(--navy-900); outline-offset: 3px; border-radius: 4px; }
.hamburger span { width: 24px; height: 2px; background: var(--navy-900); transition: all 0.3s; }
.mobile-menu { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--white); z-index: 1000; padding: 1.5rem 5%; flex-direction: column; }
.mobile-menu.open { display: flex; }
.mobile-menu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.mobile-menu-close { background: none; border: none; font-size: 2rem; cursor: pointer; color: var(--navy-900); }
.mobile-menu-links { display: flex; flex-direction: column; gap: 1.5rem; }
.mobile-menu-links a { text-decoration: none; color: var(--navy-900); font-size: 1.25rem; font-weight: 500; padding: 0.5rem 0; border-bottom: 1px solid var(--cream-200); }
.mobile-menu-cta { margin-top: 2rem; background: var(--navy-900); color: var(--white); padding: 1rem 2rem; border-radius: 8px; text-decoration: none; font-weight: 600; text-align: center; }