/* Theme for the wheelerforspsd.org copy of the digest. Loaded after src/assets/style.css by
   wheelerforspsd/eleventy.config.js; the GitHub Pages build never sees it.
   Palette: harbor teal #224d4f, school bus yellow #ffd800, off-white #f7f3ec. */
:root {
  --navy: #224d4f;       /* harbor teal: nav, hero, headers, card tops, footer */
  --gold-light: #ffd800; /* school bus yellow: used almost only as text/accents on --navy */
  /* --gold is mostly text or fills on light grounds (chips, labels, links, badges with #fff
     text) where yellow would read 1.4:1, so it maps to teal. Yellow shows where the site is dark. */
  --gold: #224d4f;
  --cream: #f7f3ec;
  --text: #224d4f;
}

/* Gold accents that sit on the dark (--navy) ground: keep them yellow, not teal-on-teal. */
nav { border-bottom-color: var(--gold-light); }
nav a.nav-link[style] { color: var(--gold-light) !important; } /* inline gold on the Topics link */
.disclosure-notice { background: rgba(255,216,0,.08); border-color: var(--gold-light); }
.card-badge,
.card-badge[data-type="Regular"] { background: rgba(255,216,0,.15); border-color: var(--gold-light); }
footer { border-top-color: var(--gold-light); }
.footer-disclosure { border-color: var(--gold-light); }

/* Hardcoded rgba(200,150,62,…) gold tints in style.css. */
.hero::before,
.meeting-header::before {
  background: radial-gradient(ellipse 60% 80% at 90% 50%, rgba(255,216,0,.12) 0%, transparent 70%);
}
.topic-chip { background: rgba(34,77,79,.07); border-color: rgba(34,77,79,.3); }
.topic-section-label { background: rgba(34,77,79,.07); border-color: rgba(34,77,79,.35); }
.source-badge--transcript { background: rgba(34,77,79,.07); }
.upcoming-card { box-shadow: 0 10px 40px rgba(34,77,79,.1); }
.upcoming-card:hover { box-shadow: 0 14px 48px rgba(34,77,79,.18); }
.meeting-card:hover { box-shadow: 0 8px 30px rgba(34,77,79,.12); }

/* Timestamp buttons are --navy and hover to --gold; both are teal now, so hover to yellow. */
.tl-time-btn:hover { background: var(--gold-light); color: var(--navy); }

/* "[SPSD] SCHOOL BOARD / MEETING DIGEST" wordmark in the nav (replaces the SP logo via the build
   transform): a yellow SPSD block spanning both lines, then School Board over Meeting Digest spread
   to the same width. Everything scales in em from .lockup's font-size. Only Sora 800 is used. */
@font-face { font-family: "Sora"; src: url("theme-fonts/sora-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
.lockup {
  display: inline-flex; align-items: stretch; gap: .35em; text-decoration: none; font-size: 22px;
  font-family: "Sora", ui-sans-serif, system-ui, sans-serif; font-weight: 800; text-transform: uppercase;
  line-height: 1; white-space: nowrap;
}
.lockup .chip {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .62em; letter-spacing: .05em; padding: 0 .5em; border-radius: 4px;
}
.lockup .txt { display: flex; flex-direction: column; justify-content: center; }
.lockup .t1 { font-size: .9em; line-height: .95; }
.lockup .t2 { display: flex; justify-content: space-between; font-size: .54em; margin-top: .28em; }
.lockup .t2 span { display: inline-block; }
.lockup.on-teal .txt { color: var(--cream); }
.lockup.on-teal .chip { background: var(--gold-light); color: var(--navy); }
@media (max-width: 640px) { .lockup { font-size: 18px; } }
@media (max-width: 380px) { .lockup { font-size: 13.5px; } }