/*
  WPPE Advocacy Document Set — Design System
  Palette draws from Newark DE, Christina SD, UD, and State of Delaware
  2026-05-29
*/

:root {
  /* Newark DE — primary civic voice */
  --newark-teal:      #007098;
  --newark-green:     #009e4f;

  /* Christina School District / UD — institutional authority */
  --christina-blue:   #004FA3;
  --christina-gold:   #FFCC00;
  --ud-blue:          #00539F;
  --ud-gold:          #FFD200;

  /* State of Delaware — historical / governmental */
  --de-colonial-blue: #669CA4;
  --de-buff:          #C7A97F;

  /* Document palette — derived from above */
  --color-primary:    #007098;   /* Newark teal — civic, local */
  --color-authority:  #004FA3;   /* Christina/UD blue — institutional */
  --color-accent:     #FFD200;   /* UD gold — attention, highlights */
  --color-highlight:  #009e4f;   /* Newark green — positive action */
  --color-dark:       #1a1a2e;   /* Near-black — headers, table bg */
  --color-muted:      #f5f7fa;   /* Light background */
  --color-border:     #dde3ea;   /* Subtle borders */
  --color-text:       #1a1a1a;   /* Body text */
  --color-text-muted: #555e6d;   /* Secondary text */

  /* Typography */
  --font-sans:  'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Georgia', serif;
}

/* ── Document header ───────────────────────────────────────── */
.doc-header {
  border-top: 6px solid var(--color-primary);
  border-bottom: 2px solid var(--color-border);
  padding: 32px 0 28px 0;
  margin-bottom: 36px;
}

.doc-header .doc-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.doc-header h1 {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 10px 0;
  line-height: 1.25;
}

.doc-header .doc-meta {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0;
}

.doc-header .doc-desc {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.7;
  margin: 10px 0 0 0;
  max-width: 720px;
}

/* ── Tables ────────────────────────────────────────────────── */
.table thead th {
  background: var(--color-dark);
  color: white;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 14px 16px;
  border: none;
}

.table thead th.col-primary {
  background: var(--color-primary);
}

.table thead th.col-authority {
  background: var(--color-authority);
}

.table tbody td {
  padding: 16px 14px;
  line-height: 1.8;
  vertical-align: top;
  color: var(--color-text);
  border-color: var(--color-border);
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
  background: var(--color-muted);
}

/* ── Tags / badges ──────────────────────────────────────────── */
.tag {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.tag.scope    { background: #fff3cd; color: #856404; }
.tag.circular { background: #f8d7da; color: #721c24; }
.tag.slippery { background: #d1ecf1; color: #0c5460; }
.tag.missing  { background: #e2d9f3; color: #432874; }

/* ── Code blocks ────────────────────────────────────────────── */
code {
  display: block;
  background: #eef2f6;
  border-left: 3px solid var(--color-primary);
  padding: 7px 10px;
  border-radius: 0 3px 3px 0;
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.6;
  font-family: 'Monaco', 'Courier New', monospace;
  color: #2c3e50;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/* ── Footnote / key legend ──────────────────────────────────── */
.doc-legend {
  margin-top: 36px;
  padding: 20px 24px;
  background: var(--color-muted);
  border-left: 4px solid var(--color-primary);
  border-radius: 4px;
}

.doc-legend p {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.9;
  margin: 0;
}