/* global.css — site-wide chrome for Who Funds PVD?
   Shared by every page: home, race detail, incumbent overview, councillor
   detail. Holds the color palette, body/grain overlays, SMPTE color bars,
   sticky status bar, and breadcrumb. Page-specific styles (hero, nameplate,
   per-candidate/per-incumbent accents, section layouts) live in the page
   itself or in incumbent.css.

   When changing chrome, change it here. Promoted from site/index.html
   (mayoral) + site/incumbent/incumbent.css in Phase A.1 of the IA. */

:root {
  --cream: #f5e6c8;
  --paper: #ead9b3;
  --paper-dark: #d8c69c;
  --orange: #e8501f;
  --mustard: #f0b929;
  --teal: #2a9d8f;
  --magenta: #c8377a;
  --navy: #1a2e4a;
  --ink: #1a1410;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'DM Mono', monospace;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Paper grain + scanlines + vignette — inherited from pvd.today.
   Overlays stay BELOW the status bar (z 1000+). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(26, 20, 16, 0.06) 0px,
    rgba(26, 20, 16, 0.06) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(26, 20, 16, 0.25) 100%);
}

/* SMPTE color bars */
.color-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  height: 14px;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1001;
}
.color-bars div:nth-child(1) { background: #c0c0c0; }
.color-bars div:nth-child(2) { background: #c0c000; }
.color-bars div:nth-child(3) { background: #00c0c0; }
.color-bars div:nth-child(4) { background: #00c000; }
.color-bars div:nth-child(5) { background: #c000c0; }
.color-bars div:nth-child(6) { background: #c00000; }
.color-bars div:nth-child(7) { background: #0000c0; }

/* Status bar — sticky, lives above the page overlays. */
.status-bar {
  background: var(--ink);
  color: var(--mustard);
  font-family: 'VT323', monospace;
  font-size: 18px;
  padding: 8px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--orange);
  flex-wrap: wrap;
  gap: 12px;
  position: sticky;
  top: 14px;
  z-index: 1000;
}
.status-bar .left,
.status-bar .right {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.status-bar a {
  color: var(--mustard);
  text-decoration: none;
  border-bottom: 1px dotted var(--mustard);
}
.status-bar a:hover { color: var(--orange); border-bottom-color: var(--orange); }

.blink {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--orange);
  border-radius: 50%;
  margin-right: 6px;
  animation: blink 1s steps(2) infinite;
  vertical-align: middle;
}
.blink.fresh { background: var(--teal); }
.blink.stale { background: var(--mustard); animation: blink 2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Breadcrumb (inline with the lockup on incumbent pages; standalone on
   mayoral). Each path segment links to its parent. */
.breadcrumb {
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--ink);
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.breadcrumb a {
  color: var(--orange);
  text-decoration: none;
  border-bottom: 2px solid var(--orange);
}
.breadcrumb a:hover { color: var(--magenta); border-bottom-color: var(--magenta); }

@media (prefers-reduced-motion: reduce) {
  .blink { animation: none; }
}

/* Compact lockup — the wordmark, identical on every page.
   Promoted from the home page + incumbent.css during header consolidation. */
.lockup-row { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.lockup {
  font-family: 'Bungee', sans-serif; font-size: clamp(24px, 6vw, 34px); letter-spacing: 0.02em;
  line-height: 1; user-select: none; white-space: nowrap; text-decoration: none;
}
.lockup .who   { color: var(--orange); text-shadow: 2px 2px 0 var(--navy); }
.lockup .funds { color: var(--teal); }
.lockup .pvd   { color: var(--magenta); font-style: italic; }

/* Persistent nav — Home · Races · Council. Identical on every page; the
   active item carries aria-current="page", set per-page in the markup. */
.site-nav {
  display: flex; align-items: center; gap: 14px; margin-bottom: 36px;
  font-family: 'DM Mono', monospace; font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.site-nav a {
  color: var(--ink); opacity: 0.55; text-decoration: none;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
  transition: opacity 120ms, color 120ms, border-color 120ms;
}
.site-nav a:hover { opacity: 1; color: var(--orange); }
.site-nav a[aria-current="page"] { opacity: 1; border-bottom-color: var(--orange); }
.site-nav .sep { opacity: 0.3; user-select: none; }