/* AP Gov Site — Page Styles: unit pages, case pages, doc pages, unit color system */

/* ═══════════════════════════════════════════════════════════
   MULTI-PAGE ARCHITECTURE — shared nav, unit pages, case/doc pages
   ═══════════════════════════════════════════════════════════ */

/* Nav links for multi-page (replace data-tab with hrefs) */
.nav-link {
  display: block;
  font-family: 'Public Sans', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.48);
  padding: 13px 16px; cursor: pointer;
  border-bottom: 3px solid transparent;
  white-space: nowrap; text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
  user-select: none;
}
.nav-link:hover { color: rgba(255,255,255,0.82); }
.nav-link.active { color: var(--white); border-bottom-color: var(--crimson); }
.nav-inner > .nav-link { display: flex; align-items: center; }
.nav-link-foundations {
  margin-left: auto;
  color: rgba(255,255,255,0.48);
  border-bottom: 3px solid transparent;
}
.nav-link-foundations:hover { color: rgba(255,255,255,0.82); }
.nav-link-foundations.active { color: white; border-bottom-color: var(--skill-orange, #e8742c); }
.nav-dropdown .nav-link {
  border-bottom: none;
  color: rgba(255,255,255,0.55);
  font-size: 11px; letter-spacing: 0.08em;
}
.nav-dropdown .nav-link:hover { color: white; background: rgba(255,255,255,0.06); }
.nav-dropdown .nav-link.active {
  color: white;
  background: rgba(178,34,52,0.2);
  border-left: 3px solid var(--crimson);
  padding-left: 13px;
}

@media (max-width: 700px) {
  .nav-inner > .nav-link,
  .nav-group-label {
    width: 100%; min-height: 44px; padding: 11px 12px;
    text-align: left; justify-content: space-between;
    border-bottom-width: 0;
  }
  .nav-link-foundations { margin-left: 0; }
  .nav-link.active,
  .nav-group.has-active > .nav-group-label {
    border-left: 3px solid var(--crimson);
    background: rgba(255,255,255,0.06);
  }
  .nav-dropdown .nav-link {
    min-height: 42px; padding: 10px 14px;
    display: flex; align-items: center;
  }
}

/* ── Page layout wrapper ── */
.page-main {
  max-width: 1140px;
  margin: 0 auto;
  padding: 24px 1.5rem 60px;
}

/* ── Page hero (unit/case/doc) — currently only used by letter-birmingham-jail.html ── */
.page-hero {
  background: #0a0a0a;
  border-radius: var(--radius);
  padding: 32px 36px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; right: -30px; top: -30px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(255,255,255,0.04);
  pointer-events: none;
}
.page-hero-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: #b3b3b3; margin-bottom: 8px;
}
.page-hero-title {
  font-size: 34px; color: white;
  line-height: 1.15; margin-bottom: 10px;
}
.page-hero-sub {
  font-size: 15px; color: rgba(255,255,255,0.65);
  line-height: 1.6; max-width: 680px; margin-bottom: 16px;
}
/* ── Section blocks ── */
.page-section {
  margin-bottom: 36px;
}
.page-section-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px; padding-bottom: 10px;
  border-bottom: 2px solid var(--cream-dark);
}
.page-section-title {
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--navy);
}
.page-section-count {
  font-size: 10px; font-weight: 700; background: var(--navy-xlight);
  color: var(--navy); padding: 2px 8px; border-radius: 99px;
}

/* ── Concept cards ── */
.concepts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.concept-card {
  background: white; border-radius: var(--radius-sm);
  border: 1px solid var(--cream-dark); padding: 18px 20px;
}
.concept-card-title {
  font-size: 13px; font-weight: 800; color: var(--navy);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em;
}
.concept-card-body {
  font-size: 13px; line-height: 1.7; color: var(--gray-700);
}

/* ── Case preview cards ── */
.case-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}
.case-preview-card {
  background: white; border-radius: var(--radius-sm);
  border: 1px solid var(--cream-dark);
  overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s;
  text-decoration: none; display: block;
}
.case-preview-card:hover {
  border-color: var(--navy); box-shadow: var(--shadow-sm);
}
.case-preview-header {
  background: var(--navy); padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.case-preview-name {
  font-family: 'Public Sans', sans-serif;
  font-size: 15px; font-weight: 700; color: white;
}
.case-preview-year {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; color: rgba(255,255,255,0.5);
}
.case-preview-body { padding: 14px 16px; }
.case-preview-question {
  font-size: 13px; font-weight: 600; color: var(--navy);
  line-height: 1.5; margin-bottom: 8px;
}
.case-preview-ruling {
  font-size: 12px; color: var(--gray-600); line-height: 1.6;
}
.case-preview-footer {
  padding: 10px 16px; border-top: 1px solid var(--cream-dark);
  display: flex; align-items: center; justify-content: space-between;
}
.case-preview-amend {
  font-size: 10px; font-weight: 700; color: var(--crimson);
  background: var(--crimson-light); padding: 2px 8px; border-radius: 4px;
}
.case-preview-link {
  font-size: 11px; font-weight: 700; color: var(--navy);
}

/* ── Document preview cards ── */
.doc-preview-card {
  background: white; border-radius: var(--radius-sm);
  border: 1px solid var(--cream-dark); padding: 16px 20px;
  display: flex; align-items: flex-start; gap: 14px;
  text-decoration: none; transition: border-color 0.15s;
  margin-bottom: 10px;
}
.doc-preview-card:hover { border-color: var(--navy); }
.doc-preview-icon {
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--navy-xlight); display: flex;
  align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.doc-preview-info { flex: 1; }
.doc-preview-title {
  font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 4px;
}
.doc-preview-meta {
  font-size: 11px; color: var(--gray-400); margin-bottom: 6px;
}
.doc-preview-desc {
  font-size: 12px; color: var(--gray-600); line-height: 1.6;
}
.doc-preview-arrow {
  font-size: 18px; color: var(--gray-300); align-self: center;
}

/* ── Amendment row ── */
.amend-row {
  display: flex; gap: 14px; padding: 14px 0;
  border-bottom: 1px solid var(--cream-dark);
  align-items: flex-start;
}
.amend-row:last-child { border-bottom: none; }
.amend-row-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; font-weight: 700; color: var(--navy);
  background: var(--navy-xlight); padding: 3px 10px;
  border-radius: 4px; flex-shrink: 0; margin-top: 2px;
  min-width: 50px; text-align: center;
}
.amend-row-content { flex: 1; }
.amend-row-title {
  font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 4px;
}
.amend-row-plain {
  font-size: 12px; color: var(--gray-600); line-height: 1.6;
}
.amend-row-tag {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px;
  background: var(--crimson-light); color: var(--crimson); margin-top: 6px;
  display: inline-block;
}

/* ── Glossary term pills ── */
.glossary-pill-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.glossary-pill {
  padding: 6px 14px; border-radius: 99px;
  background: var(--navy-xlight); color: var(--navy);
  font-size: 12px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; transition: all 0.15s;
  text-decoration: none;
}
.glossary-pill:hover { background: var(--navy); color: white; }

/* ── FRQ mini cards ── */
.frq-mini-card {
  background: white; border-radius: var(--radius-sm);
  border: 1px solid var(--cream-dark); padding: 14px 16px;
  margin-bottom: 10px;
}
.frq-mini-type {
  font-size: 9px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--crimson); margin-bottom: 4px;
}
.frq-mini-title {
  font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 6px;
}
.frq-mini-preview {
  font-size: 12px; color: var(--gray-600); line-height: 1.6;
}

/* ── CASE PAGE STYLES ── */
.case-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px; align-items: start;
}
.case-main {}
.case-sidebar { position: sticky; top: 80px; }

.case-block {
  background: white; border-radius: var(--radius);
  border: 1px solid var(--cream-dark); overflow: hidden;
  margin-bottom: 20px;
}
.case-block-header {
  background: var(--gray-50); padding: 12px 20px;
  border-bottom: 1px solid var(--cream-dark);
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--navy);
}
.case-block-body { padding: 20px; }
.case-block-body p {
  font-size: 14px; line-height: 1.8; color: var(--gray-700);
  margin-bottom: 14px;
}
.case-block-body p:last-child { margin-bottom: 0; }

.case-ruling-box {
  background: var(--cream); border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 20px; margin-bottom: 16px;
  font-size: 14px; line-height: 1.7; color: var(--navy);
  font-weight: 600;
}
.case-vote {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; color: var(--gray-400); margin-bottom: 6px;
}
.case-dissent-box {
  background: #fef3cd; border-left: 4px solid #f59e0b;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px; margin-top: 14px;
  font-size: 13px; line-height: 1.7; color: #78350f;
}
.case-dissent-label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: #92400e; margin-bottom: 6px;
}

.case-sidebar-card {
  background: white; border-radius: var(--radius);
  border: 1px solid var(--cream-dark); padding: 18px;
  margin-bottom: 14px;
}
.case-sidebar-label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--crimson);
  margin-bottom: 10px;
}
.case-sidebar-item {
  font-size: 13px; line-height: 1.6; color: var(--gray-700);
  padding: 6px 0; border-bottom: 1px solid var(--cream-dark);
}
.case-sidebar-item:last-child { border-bottom: none; }
.case-related-link {
  display: block; text-decoration: none; color: var(--navy);
  font-size: 12px; font-weight: 600; padding: 7px 0;
  border-bottom: 1px solid var(--cream-dark);
  transition: color 0.15s;
}
.case-related-link:last-child { border-bottom: none; }
.case-related-link:hover { color: var(--crimson); }

.case-exam-tip {
  background: var(--navy-dark); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-top: 6px;
  font-size: 12px; line-height: 1.7; color: rgba(255,255,255,0.8);
}
.case-exam-tip-label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 6px;
}

/* ── DOCUMENT PAGE STYLES ── */
.doc-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px; align-items: start;
}
.doc-sidebar { position: sticky; top: 80px; }
.doc-sidebar-nav { }
.doc-sidebar-section {
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gray-400);
  padding: 6px 8px; margin-top: 10px; margin-bottom: 4px;
}
.doc-sidebar-link {
  display: block; padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; color: var(--gray-600);
  text-decoration: none; transition: background 0.12s;
  border-left: 3px solid transparent;
}
.doc-sidebar-link:hover { background: var(--cream); color: var(--navy); }
.doc-sidebar-link.active {
  background: var(--navy-xlight); color: var(--navy);
  border-left-color: var(--crimson);
}

.doc-main {}
.doc-context-box {
  background: var(--cream); border-radius: var(--radius);
  border: 1px solid var(--cream-dark); padding: 20px 24px;
  margin-bottom: 24px;
}
.doc-context-label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
}
.doc-context-text {
  font-size: 14px; line-height: 1.8; color: var(--gray-700);
}
.doc-context-text p { margin-bottom: 12px; }
.doc-context-text p:last-child { margin-bottom: 0; }

.doc-section {
  margin-bottom: 32px;
}
.doc-section-title {
  font-size: 18px; color: var(--navy);
  margin-bottom: 6px; padding-bottom: 8px;
  border-bottom: 2px solid var(--crimson);
}
.doc-section-omit {
  font-size: 12px; color: var(--gray-400); font-style: italic;
  margin-bottom: 16px; padding: 8px 12px;
  background: var(--gray-50); border-radius: var(--radius-sm);
  border-left: 3px solid var(--gray-200);
}

.doc-paragraph {
  margin-bottom: 20px;
}
.doc-paragraph-text {
  font-size: 15px; line-height: 1.9; color: var(--text);
  margin-bottom: 0;
  font-family: 'Public Sans', sans-serif;
}
.doc-paragraph-text .highlight-key {
  background: #fef08a; padding: 1px 3px; border-radius: 3px;
  font-weight: 600;
}
.doc-annotation {
  margin-top: 10px; border-left: 3px solid var(--navy-xlight);
  padding-left: 16px;
}
.doc-annotation-toggle {
  font-size: 11px; font-weight: 700; color: var(--navy);
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0; margin-bottom: 6px;
}
.doc-annotation-toggle:hover { color: var(--crimson); }
.doc-annotation-body { display: none; }
.doc-annotation-body.open { display: block; }
.doc-annotation-row {
  margin-bottom: 8px;
}
.doc-annotation-label {
  font-size: 9px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--crimson); margin-bottom: 3px;
}
.doc-annotation-text {
  font-size: 13px; line-height: 1.65; color: var(--gray-700);
}
.doc-annotation-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.doc-annotation-tag {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px;
  background: var(--navy-xlight); color: var(--navy);
}
.doc-annotation-tag.case-tag {
  background: var(--crimson-light); color: var(--crimson);
}

@media (max-width: 860px) {
  .case-layout { grid-template-columns: 1fr; }
  .case-sidebar { position: static; }
  .doc-layout { grid-template-columns: 1fr; }
  .doc-sidebar { position: static; }
}

/* ═══════════════════════════════════════════════════════════
   UNIT COLOR SYSTEM
   Each unit has its own identity: palette, hero, accents.
   Applied via .unit-1 through .unit-5 on <body> or wrapper.
   ═══════════════════════════════════════════════════════════ */

/* ── UNIT 1: Foundations — Aged Parchment & Ink ── */
.unit-1 {
  background: var(--unit-bg);
  --unit-heading-font: 'Newsreader', sans-serif;
  --unit-heading-weight: 900;
  --unit-heading-transform: uppercase;
  --unit-bg:       #f5ead6;
  --unit-dark:     #2c1810;
  --unit-mid:      #5c3d2e;
  --unit-accent:   #b8952a;
  --unit-accent2:  #8b6914;
  --unit-light:    #fdf6e8;
  --unit-border:   #d4b896;
  --unit-hero-bg:  #2c1810;
  --unit-tag-bg:   rgba(184,149,42,0.2);
  --unit-tag-color: #b8952a;
}
.unit-1 .unit-jumpbar { background: #fdf6e8; border-color: #d4b896; }
.unit-1 .unit-jump-link.active { color: #b8952a; border-bottom-color: #b8952a; }
.unit-1 .concept-row-num { background: #2c1810; }
.unit-1 .concept-row-header:hover { background: #fdf6e8; }
.unit-1 .case-row-year { background: #2c1810; }
.unit-1 .amend-pill-num { background: #2c1810; }
.unit-1 .unit-sidebar-head { background: #2c1810; }
.unit-1 .unit-sidebar-link.active { color: #b8952a; border-left-color: #b8952a; background: #fdf6e8; }
.unit-1 .unit-sidebar-link:hover { background: #fdf6e8; }
.unit-1 .exam-guide { background: #2c1810; }
.unit-1 .exam-guide-tab.active { color: #b8952a; border-bottom-color: #b8952a; }
.unit-1 .frq-row-type.ca { background: #b8952a; color: #f5ead6; }
.unit-1 .doc-bento-top { background: #2c1810; }
.unit-1 body { background: #f5ead6; }

/* ── UNIT 2: Branches — White Marble & Gold ── */
.unit-2 {
  background: var(--unit-bg);
  --unit-heading-font: 'Oswald', sans-serif;
  --unit-heading-weight: 600;
  --unit-heading-transform: uppercase;
  --unit-bg:       #f5f5f4;
  --unit-dark:     #2d2d30;
  --unit-mid:      #6b6b6b;
  --unit-accent:   #c8a951;
  --unit-accent2:  #9ca3af;
  --unit-light:    #ffffff;
  --unit-border:   #d8d8d8;
  --unit-hero-bg:  #f5f5f4;
  --unit-tag-bg:   rgba(200,169,81,0.15);
  --unit-tag-color: #8a6d1f;
}
.unit-2 .unit-jumpbar { background: white; border-color: #d8d8d8; }
.unit-2 .unit-jump-link.active { color: #8a6d1f; border-bottom-color: #c8a951; }
.unit-2 .concept-row-num { background: #2d2d30; }
.unit-2 .concept-row-header:hover { background: #f5f5f4; }
.unit-2 .case-row-year { background: #2d2d30; }
.unit-2 .amend-pill-num { background: #2d2d30; }
.unit-2 .unit-sidebar-head { background: #2d2d30; }
.unit-2 .unit-sidebar-link.active { color: #8a6d1f; border-left-color: #c8a951; background: #f5f5f4; }
.unit-2 .exam-guide { background: #2d2d30; }
.unit-2 .exam-guide-tab.active { color: #c8a951; border-bottom-color: #c8a951; }
.unit-2 .rail-card-head { background: #2d2d30; }
.unit-2 .rail-exam-tip { background: #2d2d30; }
.unit-2 .case-hero { background: #f5f5f4; border: 1px solid #d8d8d8; }
.unit-2 .case-tag-amend { background: rgba(200,169,81,0.2); color: #8a6d1f; }
.unit-2 .case-test-box { background: #2d2d30; }
.unit-2 .doc-bento-top { background: #f5f5f4; border-bottom: 3px solid #c8a951; }

/* ── UNIT 3: Civil Liberties & Rights — White, Grey, Black ── */
.unit-3 {
  background: var(--unit-bg);
  --unit-heading-font: 'Anton', sans-serif;
  --unit-heading-weight: 400;
  --unit-heading-transform: uppercase;
  --unit-bg:       #ffffff;
  --unit-dark:     #0a0a0a;
  --unit-mid:      #4a4a4a;
  --unit-accent:   #0a0a0a;
  --unit-accent2:  #6b6b6b;
  --unit-light:    #ffffff;
  --unit-border:   #d4d4d4;
  --unit-hero-bg:  #0a0a0a;
  --unit-tag-bg:   rgba(10,10,10,0.08);
  --unit-tag-color: #0a0a0a;
}
.unit-3 .unit-jumpbar { background: white; border-color: #d4d4d4; border-bottom-width: 3px; border-bottom-color: #0a0a0a; }
.unit-3 .unit-jump-link.active { color: #0a0a0a; border-bottom-color: #0a0a0a; }
.unit-3 .concept-row-num { background: #0a0a0a; }
.unit-3 .concept-row { border-color: #d4d4d4; }
.unit-3 .concept-row.open .concept-row-header { background: #f5f5f5; border-left: 4px solid #0a0a0a; }
.unit-3 .case-row-year { background: #0a0a0a; }
.unit-3 .case-row:hover { border-color: #0a0a0a; }
.unit-3 .amend-pill-num { background: #0a0a0a; }
.unit-3 .amend-pill:last-child { border-color: #0a0a0a; border-width: 2px; }
.unit-3 .unit-sidebar-head { background: #0a0a0a; }
.unit-3 .unit-sidebar-link.active { color: #0a0a0a; border-left-color: #0a0a0a; }
.unit-3 .exam-guide { background: #0a0a0a; }
.unit-3 .exam-guide-tab.active { color: white; border-bottom-color: #6b6b6b; }
.unit-3 .rail-card-head { background: #0a0a0a; }
.unit-3 .rail-exam-tip { background: #0a0a0a; }
.unit-3 .case-hero { background: #0a0a0a; }
.unit-3 .case-block-label { background: #f5f5f5; border-left: 3px solid #0a0a0a; }
.unit-3 .case-test-box { background: #0a0a0a; }
.unit-3 .doc-bento-top { background: #0a0a0a; }

/* ── UNIT 4: Ideologies — Red vs Blue in Tension ── */
/* ── UNIT 4: Institutions & Elections — Stark Blue/Red/White ── */
.unit-4 {
  background: var(--unit-bg);
  --unit-heading-font: 'Barlow Condensed', sans-serif;
  --unit-heading-weight: 700;
  --unit-heading-transform: uppercase;
  --unit-bg:       #ffffff;
  --unit-dark:     #1e3a8a;
  --unit-mid:      #b91c1c;
  --unit-accent:   #1e3a8a;
  --unit-accent2:  #b91c1c;
  --unit-light:    #ffffff;
  --unit-border:   #d1d5db;
  --unit-hero-bg:  linear-gradient(90deg, #b91c1c 0%, #b91c1c 30%, #ffffff 30%, #ffffff 70%, #1e3a8a 70%, #1e3a8a 100%);
  --unit-tag-bg:   rgba(30,58,138,0.1);
  --unit-tag-color: #1e3a8a;
}
.unit-4 .unit-jumpbar { background: white; border-color: #d1d5db; border-bottom: 3px solid #1e3a8a; }
.unit-4 .unit-jump-link.active { color: #1e3a8a; border-bottom-color: #b91c1c; }
.unit-4 .concept-row-num:nth-child(odd)  { background: #b91c1c; }
.unit-4 .concept-row-num { background: #1e3a8a; }
.unit-4 .case-row-year { background: #1e3a8a; }
.unit-4 .unit-sidebar-head { background: #1e3a8a; border-bottom: 3px solid #b91c1c; }
.unit-4 .unit-sidebar-link.active { color: #1e3a8a; border-left-color: #b91c1c; }
.unit-4 .exam-guide { background: #1e3a8a; }
.unit-4 .exam-guide-tab.active { color: white; border-bottom-color: #b91c1c; }
.unit-4 .amend-pill-num { background: #1e3a8a; }
.unit-4 .rail-card-head { background: #1e3a8a; border-bottom: 3px solid #b91c1c; }
.unit-4 .rail-exam-tip { background: #1e3a8a; }
.unit-4 .case-hero { background: var(--unit-hero-bg); }
.unit-4 .doc-bento-top { background: #1e3a8a; border-bottom: 4px solid #b91c1c; }

/* ── UNIT 5: Political Participation — Ballot Black & White ── */
.unit-5 {
  background: var(--unit-bg);
  --unit-heading-font: 'IBM Plex Mono', monospace;
  --unit-heading-weight: 700;
  --unit-heading-transform: uppercase;
  --unit-bg:       #ffffff;
  --unit-dark:     #1a1a1a;
  --unit-mid:      #2b2b2b;
  --unit-accent:   #1a1a1a;
  --unit-accent2:  #9a2323;
  --unit-light:    #ffffff;
  --unit-border:   #d4d4d4;
  --unit-hero-bg:  #1a1a1a;
  --unit-tag-bg:   rgba(26,26,26,0.08);
  --unit-tag-color: #1a1a1a;
}
.unit-5 .unit-jumpbar { background: #ffffff; border-color: #d4d4d4; border-bottom-width: 3px; border-bottom-color: #1a1a1a; }
.unit-5 .unit-jump-link.active { color: #1a1a1a; border-bottom-color: #9a2323; }
.unit-5 .concept-row-num { background: #1a1a1a; }
.unit-5 .concept-row-header:hover { background: #f0f0f0; }
.unit-5 .case-row-year { background: #1a1a1a; }
.unit-5 .case-row:hover { border-color: #1a1a1a; }
.unit-5 .amend-pill-num { background: #1a1a1a; }
.unit-5 .amend-pill { border-color: #d4d4d4; background: #f0f0f0; }
.unit-5 .unit-sidebar-head { background: #1a1a1a; }
.unit-5 .unit-sidebar-link.active { color: #1a1a1a; border-left-color: #9a2323; background: #f0f0f0; }
.unit-5 .unit-sidebar-link:hover { background: #f0f0f0; }
.unit-5 .exam-guide { background: #1a1a1a; }
.unit-5 .exam-guide-tab.active { color: #d19999; border-bottom-color: #9a2323; }
.unit-5 .rail-card-head { background: #1a1a1a; }
.unit-5 .rail-exam-tip { background: #1a1a1a; }
.unit-5 .case-hero { background: var(--unit-hero-bg); }
.unit-5 .doc-bento-top { background: var(--unit-hero-bg); }
.unit-5 .frq-row-type.ca { background: #e0e0e0; color: #1a1a1a; }
.unit-5 .frq-row-type.sc { background: #6b6b6b; color: white; }
.unit-5 .frq-row-type.ae { background: #1a1a1a; color: white; }

/* ── SHARED HEADING FONT CONTROL ──
   Single source of truth for which font each unit's document/case/
   card titles use. Reads --unit-heading-font/-weight/-transform from
   whichever .unit-N class wraps the page (set above). Previously,
   changing a unit's heading font meant editing this exact declaration
   inside every single doc/case page's own <style> block -- this rule
   is why that repeated pain point existed. Individual pages can still
   override color/font-size locally; only the FONT ITSELF is now
   centralized here. */
.doc-hero-title, .case-hero-title, .doc-section-title, .doc-bento-title, .page-hero-title {
  font-family: var(--unit-heading-font, 'Newsreader', sans-serif);
  font-weight: var(--unit-heading-weight, 700);
  text-transform: var(--unit-heading-transform, uppercase);
  font-style: normal;
}

/* ── UNIT HERO OVERRIDES ── */
.unit-1 .unit-hero-inner,
.unit-2 .unit-hero-inner,
.unit-3 .unit-hero-inner,
.unit-4 .unit-hero-inner,
.unit-5 .unit-hero-inner {
  background: var(--unit-hero-bg);
}