/*
 * sa-styles.css — Swanson Academy for Business & Finance
 * Prefixed "sa-" to avoid collision with BBYM Financial Literacy styles.css
 * in the same directory.
 *
 * Note: nav bar, modal, and footer styles are injected by sa-nav.js via JS.
 * This file covers all page-level layout and component styles.
 */

/* ── IMPORTS ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ── DESIGN TOKENS ───────────────────────────────────────────────────── */
:root {
  --navy:        #0F2550;
  --navy-mid:    #1a3a6e;
  --navy-deep:   #0a1a38;
  --gold:        #C9922A;
  --gold-soft:   #F0C97A;
  --gold-deep:   #A3751E;
  --gold2:       #e8b04a;
  --cream:       #FAF6EE;
  --parchment:   #F3EDE0;
  --paper:       #F8F1DD;
  --slate:       #5a5a6a;
  --line:        rgba(201,146,42,0.18);
  --line-soft:   #e5e7eb;
  --success:     #059669;
  --warn:        #d97706;
  --err:         #dc2626;
  --serif:       'Fraunces', Georgia, serif;
  --sans:        'DM Sans', Arial, sans-serif;
  --mono:        'Courier New', monospace;
  --r-sm:        6px;
  --r-md:        12px;
  --r-lg:        20px;
  --nav-h:       64px;
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.07);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.1);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.14);
}

/* ── RESET ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--cream);
  color: #2a2a35;
  line-height: 1.6;
  overflow-x: hidden;
  padding-top: var(--nav-h); /* offset for sticky top nav injected by sa-nav.js */
  /* Note: sa-nav.js injects padding-bottom on mobile for the bottom tab bar */
}
img { max-width: 100%; display: block; }
a { color: var(--navy); }
h1, h2, h3, h4, h5 { font-family: var(--serif); line-height: 1.2; color: var(--navy); }
h1 { font-size: clamp(1.9rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.45rem, 3vw, 2.2rem); }
h3 { font-size: 1.15rem; }

/* ── LAYOUT ──────────────────────────────────────────────────────────── */
.sa-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.sa-section  { padding: 4rem 0; }
.sa-section-sm { padding: 2.5rem 0; }
.sa-mb-4    { margin-bottom: 1.5rem; }
.sa-mb-6    { margin-bottom: 2.25rem; }
.sa-hidden  { display: none !important; }
.sa-flex    { display: flex; }
.sa-flex-between { display: flex; justify-content: space-between; align-items: center; }
.sa-gap-3   { gap: 0.75rem; }

.sa-grid-2  { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
.sa-grid-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.sa-grid-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 900px) {
  .sa-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .sa-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .sa-grid-2, .sa-grid-3, .sa-grid-4 { grid-template-columns: 1fr; }
}

/* section header with decorative gold bar */
.sa-section-header { text-align: center; margin-bottom: 2.5rem; }
.sa-section-header h2 { margin-bottom: 0.5rem; }
.sa-section-header p  { color: var(--slate); font-size: 0.98rem; }
.sa-gold-bar {
  display: block;
  width: 48px; height: 3px;
  background: var(--gold);
  margin: 1rem auto 0;
  border-radius: 2px;
}

/* ── BUTTONS ─────────────────────────────────────────────────────────── */
.sa-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.6rem 1.3rem;
  border-radius: var(--r-sm);
  font-family: var(--sans); font-weight: 700; font-size: 0.88rem;
  text-decoration: none; transition: all 0.18s;
  cursor: pointer; border: none; white-space: nowrap;
}
.sa-btn-primary {
  background: var(--gold); color: var(--navy);
}
.sa-btn-primary:hover { background: var(--gold-deep); color: white; transform: translateY(-1px); }
.sa-btn-navy {
  background: var(--navy); color: white; border: 1.5px solid var(--navy);
}
.sa-btn-navy:hover { background: var(--navy-mid); }
.sa-btn-outline {
  background: transparent; color: var(--navy);
  border: 1.5px solid var(--navy);
}
.sa-btn-outline:hover { background: var(--navy); color: white; }
.sa-btn-ghost {
  background: transparent; color: var(--slate);
  border: 1.5px solid var(--line-soft);
}
.sa-btn-ghost:hover { border-color: var(--navy); color: var(--navy); }
.sa-btn-lg { padding: 0.8rem 2rem; font-size: 1rem; }
.sa-btn-sm { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
.sa-btn-block { width: 100%; justify-content: center; }

/* ── BADGES ──────────────────────────────────────────────────────────── */
.sa-badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sa-badge-gold  { background: rgba(201,146,42,0.12); color: var(--gold-deep); }
.sa-badge-navy  { background: var(--navy); color: white; }
.sa-badge-blue  { background: rgba(37,99,235,0.1); color: #1d4ed8; }
.sa-badge-green { background: rgba(5,150,105,0.1); color: #065f46; }
.sa-badge-outline { background: transparent; border: 1.5px solid var(--line-soft); color: var(--slate); }

/* ── ALERTS ──────────────────────────────────────────────────────────── */
.sa-alert {
  display: flex; align-items: flex-start; gap: 0.65rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-md);
  font-size: 0.88rem;
}
.sa-alert-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.sa-alert-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.sa-alert-success { background: #d1fae5; border: 1px solid #a7f3d0; color: #065f46; }
.sa-alert-err { background: #fee2e2; border: 1px solid #fecaca; color: #991b1b; }

/* ── CARDS ───────────────────────────────────────────────────────────── */
.sa-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  transition: box-shadow 0.22s, transform 0.22s;
  text-decoration: none; color: inherit; display: block;
}
.sa-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.sa-card-icon { font-size: 2rem; margin-bottom: 0.75rem; }
.sa-card h3   { font-size: 1.05rem; margin-bottom: 0.4rem; color: var(--navy); }
.sa-card p    { font-size: 0.88rem; color: var(--slate); }
.sa-card-tag  {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold-deep);
}
.sa-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

/* card feature variant */
.sa-card-feature {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  transition: box-shadow 0.22s;
}
.sa-card-feature:hover { box-shadow: var(--shadow-md); }

/* ── HERO SECTIONS ───────────────────────────────────────────────────── */
.sa-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 60%, #1e3a7a 100%);
  padding: 5rem 0 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sa-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(201,146,42,0.12) 0%, transparent 65%);
}
.sa-hero-content { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; padding: 0 1.5rem; }
.sa-hero h1       { color: var(--paper); font-size: clamp(2rem, 5vw, 3.2rem); }
.sa-hero p        { color: rgba(248,241,221,0.78); font-size: 1.05rem; margin: 1rem 0 2rem; }
.sa-hero-sub      { color: var(--gold-soft); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.75rem; }
.sa-hero-btns     { display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap; }

/* curriculum hero */
.sa-curriculum-hero {
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  padding: 3rem 0 2.5rem;
}
.sa-curriculum-hero h1 { color: var(--paper); font-size: clamp(1.6rem, 4vw, 2.4rem); }
.sa-curriculum-hero p  { color: rgba(248,241,221,0.7); margin-top: 0.4rem; }

/* games hero */
.sa-games-hero {
  background: linear-gradient(135deg, var(--navy-deep), var(--navy));
  padding: 3rem 0 2.5rem; text-align: center;
}
.sa-games-hero h1 { color: var(--paper); font-size: clamp(1.8rem, 4vw, 2.6rem); }
.sa-games-hero p  { color: rgba(248,241,221,0.72); margin-top: 0.5rem; font-size: 1rem; }

/* calculators hero */
.sa-calc-hero {
  background: linear-gradient(135deg, var(--navy), #1a3a6e);
  padding: 3rem 0 2.5rem; text-align: center;
}
.sa-calc-hero h1 { color: var(--paper); font-size: clamp(1.7rem, 4vw, 2.4rem); }
.sa-calc-hero p  { color: rgba(248,241,221,0.7); margin-top: 0.5rem; }

/* dashboard hero */
.sa-dashboard-hero {
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  padding: 2.5rem 0 2rem;
}
.sa-dashboard-hero h1 { color: var(--paper); font-size: clamp(1.5rem, 3.5vw, 2rem); }
.sa-dashboard-hero p  { color: rgba(248,241,221,0.65); font-size: 0.9rem; margin-top: 0.35rem; }

/* ── PROGRESS BAR ────────────────────────────────────────────────────── */
.sa-progress-wrap { margin-bottom: 1.25rem; }
.sa-progress-label {
  display: flex; justify-content: space-between;
  font-size: 0.82rem; font-weight: 600; color: var(--slate);
  margin-bottom: 0.4rem;
}
.sa-progress-bar {
  height: 8px;
  background: var(--line-soft);
  border-radius: 4px; overflow: hidden;
}
.sa-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* ── CURRICULUM ACCORDION ────────────────────────────────────────────── */
.sa-unit {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  background: white;
  margin-bottom: 0.6rem;
  transition: box-shadow 0.18s;
}
.sa-unit:hover { box-shadow: var(--shadow-sm); }
.sa-unit-header {
  width: 100%;
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem;
  background: none; border: none;
  cursor: pointer; text-align: left;
  transition: background 0.15s;
}
.sa-unit-header:hover { background: #f9fafb; }
.sa-unit-header.open  { background: var(--cream); }
.sa-unit-num {
  width: 36px; height: 36px; flex-shrink: 0;
  background: var(--navy); color: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 0.9rem; font-weight: 700;
}
.sa-unit-num.done {
  background: var(--success);
}
.sa-unit-num.done::after {
  content: "✓";
}
.sa-unit-title h3    { font-size: 0.95rem; color: var(--navy); font-family: var(--sans); font-weight: 700; }
.sa-unit-title p     { font-size: 0.8rem; color: var(--slate); margin-top: 0.15rem; }
.sa-unit-chevron {
  width: 18px; height: 18px; flex-shrink: 0; margin-left: auto;
  color: var(--slate); transition: transform 0.22s;
}
.sa-unit-header.open .sa-unit-chevron { transform: rotate(180deg); }
.sa-unit-body {
  display: none; padding: 0 1.25rem 1.25rem 1.25rem;
  border-top: 1px solid var(--line-soft);
}
.sa-unit-body.open { display: block; }
.sa-unit-topics {
  list-style: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.4rem; margin-bottom: 1.25rem; margin-top: 1rem;
}
.sa-unit-topics li {
  font-size: 0.84rem; color: #374151;
  padding-left: 1.1em; position: relative;
}
.sa-unit-topics li::before {
  content: "›";
  position: absolute; left: 0;
  color: var(--gold); font-weight: 700;
}
.sa-unit-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.sa-unit-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.45rem 1rem;
  border-radius: var(--r-sm);
  font-size: 0.82rem; font-weight: 600;
  text-decoration: none; transition: all 0.18s;
}
.sa-unit-btn-primary {
  background: var(--navy); color: white;
}
.sa-unit-btn-primary:hover { background: var(--navy-mid); }
.sa-unit-btn-outline {
  background: transparent; color: var(--navy);
  border: 1.5px solid var(--line-soft);
}
.sa-unit-btn-outline:hover { border-color: var(--navy); background: #f0f4ff; }

/* ── GAME CARDS ──────────────────────────────────────────────────────── */
.sa-game-card {
  background: white;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow 0.22s, transform 0.22s;
}
.sa-game-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.sa-game-banner {
  height: 100px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.75rem;
}
.sa-game-body { padding: 1.35rem; }
.sa-game-body h3   { font-size: 1rem; color: var(--navy); margin-bottom: 0.4rem; font-family: var(--sans); font-weight: 700; }
.sa-game-body p    { font-size: 0.85rem; color: var(--slate); line-height: 1.5; }

/* ── DASHBOARD STATS ─────────────────────────────────────────────────── */
.sa-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}
.sa-stat-card {
  background: white;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 1.25rem 1rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.sa-stat-num {
  font-family: var(--serif);
  font-size: 2rem; font-weight: 700;
  color: var(--gold-deep);
  line-height: 1;
}
.sa-stat-label {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--slate); margin-top: 0.35rem;
}

/* ── CALCULATOR FIELD ────────────────────────────────────────────────── */
.sa-calc-field { margin-bottom: 0.9rem; }
.sa-calc-field label {
  display: block; font-size: 0.8rem; font-weight: 600;
  color: #374151; margin-bottom: 0.3rem;
}
.sa-calc-field input,
.sa-calc-field select {
  width: 100%; padding: 0.6rem 0.8rem;
  border: 1.5px solid #d1d5db; border-radius: 7px;
  font-family: var(--sans); font-size: 0.9rem; color: #1a1a2e;
  background: #fafafa; transition: border-color 0.18s;
}
.sa-calc-field input:focus,
.sa-calc-field select:focus {
  outline: none; border-color: var(--navy); background: white;
}

/* ── FORM ELEMENTS (shared by old-style calculator pages) ─────────────── */
.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 0.5rem; }
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block; font-size: 0.82rem; font-weight: 600;
  color: #374151; margin-bottom: 0.35rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; padding: 0.6rem 0.8rem;
  border: 1.5px solid #d1d5db; border-radius: var(--r-sm);
  font-family: var(--sans); font-size: 0.9rem;
  background: #fafafa; transition: border-color 0.18s;
}
.form-group input:focus,
.form-group select:focus { outline: none; border-color: var(--navy); background: white; }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }

/* ── RESULT BOX (shared result display) ─────────────────────────────── */
.result-box {
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  color: white; border-radius: var(--r-lg);
  padding: 2rem; text-align: center;
}
.result-label {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold-soft); margin-bottom: 0.5rem;
}
.result-value {
  font-family: var(--serif); font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 700; color: var(--gold); line-height: 1.1;
}
.result-sub   { color: rgba(248,241,221,0.7); font-size: 0.88rem; margin-top: 0.5rem; }
.result-grid  { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.result-item  { background: rgba(255,255,255,0.08); border-radius: var(--r-sm); padding: 0.75rem; }
.ri-label     { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 0.3rem; }
.ri-val       { font-family: var(--serif); font-size: 1.05rem; font-weight: 700; color: var(--gold-soft); }

/* ── TABLE ───────────────────────────────────────────────────────────── */
.sa-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.sa-table thead th {
  padding: 0.6rem 0.9rem;
  background: var(--cream); color: var(--slate);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-align: left; border-bottom: 2px solid var(--line-soft);
}
.sa-table tbody td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line-soft);
  color: #374151;
}
.sa-table tbody tr:last-child td { border-bottom: none; }
.sa-table tbody tr:hover { background: #f9fafb; }

/* ── SHARED UTILITY CLASSES (used by old calculator pages) ────────────── */
.section    { padding: 4rem 0; }
.section-sm { padding: 2.5rem 0; }
.container  { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; }
.card       { background: white; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.75rem; }
.card-feature { background: white; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.75rem; }
.grid-2     { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
.grid-3     { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4     { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
.btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.6rem 1.3rem; border-radius: var(--r-sm);
  font-family: var(--sans); font-weight: 700; font-size: 0.88rem;
  text-decoration: none; transition: all 0.18s;
  cursor: pointer; border: none; white-space: nowrap;
}
.btn-gold   { background: var(--gold); color: var(--navy); border: none; }
.btn-gold:hover { background: var(--gold-deep); color: white; }
.btn-navy   { background: var(--navy); color: white; border: 1.5px solid var(--navy); }
.btn-navy:hover { background: var(--navy-mid); }
.btn-ghost  { background: transparent; color: var(--slate); border: 1.5px solid var(--line-soft); }
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); }
.btn-lg     { padding: 0.8rem 2rem; font-size: 1rem; }
.btn-sm     { padding: 0.38rem 0.85rem; font-size: 0.8rem; }
.btn-block  { width: 100%; justify-content: center; }
.eyebrow {
  display: block; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 0.4rem;
}
.muted      { color: var(--slate); }
.num-accent { font-family: var(--serif); font-size: 2rem; font-weight: 700; color: var(--gold-deep); }
.flex          { display: flex; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.text-center { text-align: center; }
.mb-4   { margin-bottom: 1.5rem; }
.badge  { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 20px; font-size: 0.72rem; font-weight: 700; }
.badge-navy    { background: var(--navy); color: white; }
.badge-outline { background: transparent; border: 1.5px solid var(--line-soft); color: var(--slate); }

/* progress bar (old pages) */
.progress-track { height: 6px; background: var(--line-soft); border-radius: 3px; overflow: hidden; }
.progress-fill  { height: 100%; background: var(--gold); border-radius: 3px; }

/* warn / success colors */
.warn    { color: var(--warn); }
.success { color: var(--success); }
.up      { color: var(--success); }
.down    { color: var(--err); }