/* ════════════════════════════════════════════════════════════════
   The Records · shared chrome for the database pages
   (debt/, legislation/, meeting-transcripts/, peers/, records-requests/,
    search/, tid5-property/, voucher-review/, Voting History/site/)

   The database pages are dense tools, so they do not load style.css (its
   17px prose measure, section padding and global resets would fight their
   layouts). Instead this file gives them the main site's identity:
     1. the site's palette, mapped onto the variable names the tools already
        use (--bg, --surface, --line, --text, --accent …), so each tool's own
        inline CSS re-themes without being rewritten;
     2. the street-sign type: Overpass for text, Barlow Condensed for headings,
        Overpass Mono for figures; sign-plate buttons, no soft shadows;
     3. the site header, a compact maroon title band, and the maroon footer.
   Header / nav / footer rules mirror style.css — if you change one, change
   the other. Light only: the main site has no dark theme.
   ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Barlow+Condensed:wght@600;700;800&family=Overpass+Mono:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;

  /* main-site tokens (same values as style.css) */
  --maroon:      #6E1A2C;
  --maroon-deep: #4E101F;
  --maroon-tint: #F4EAEC;
  --maroon-on:   #FBEFF1;
  --ink:         #1C1619;
  --white:       #FFFFFF;
  --paper:       #FAF6F3;
  --paper-2:     #F3EDE8;
  --gray:        #978C91;
  --border:      #EAE4E6;
  --gold:        #F4B400;
  --lake:        #2EA7DC;
  --brick:       #9E4A35;
  --slate:       #41607F;
  --focus:       rgba(200, 72, 95, .45);
  --shadow:      none;   /* no soft drop shadows: rules and keylines instead */
  --shadow-lg:   none;
  --ease:        cubic-bezier(.2, 0, 0, 1);
  --dur:         190ms;

  /* tool tokens, mapped onto the site palette */
  --bg:           var(--paper);
  --surface:      var(--white);
  --surface-2:    var(--paper-2);
  --line:         #E2D9DC;   /* a step darker than --border: the tools rely on their rules */
  --text:         var(--ink);
  --text-2:       #5B5055;
  --text-3:       #857A7F;
  --accent:       var(--maroon);
  --accent-ink:   var(--maroon);
  --series:       var(--maroon);
  --series-soft:  rgba(110, 26, 44, .10);
  --neutral-mark: #CBC1C5;
  --tid:          var(--slate);
  --ok:           #2F6E4E;
  --mark:         #FBE7A6;
  --warn-bg:      #FFF7E6;
  --warn-ink:     #7A5C00;
  --radius:       8px;
  --sans:    'Overpass', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --mono:    'Overpass Mono', ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* headings in the sign lettering; each tool keeps its own sizes */
h1, h2, h3 { font-family: var(--display); letter-spacing: .01em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ════════════════ Site header (scrolls away with the page) ════════════════
   Absolute rather than fixed: the tools have sticky table heads and tall
   panes, and a fixed bar would cover them. */
#site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1500;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.05rem clamp(1rem, 4vw, 2rem);
  font-family: var(--sans); font-size: 17px; line-height: 1.65;
  background: none; border: 0; margin: 0;
}
#site-header .nav-brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
#site-header .emblem {
  width: 28px; height: 30px; flex: none;
  background: url("Site Images/sf-sign-v2-outlined.svg") center / contain no-repeat;
}
#site-header .wordmark { line-height: 1.05; }
#site-header .wm-eyebrow {
  display: block; font-weight: 700; font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: rgba(255,255,255,.7);
}
#site-header .wm-name { display: block; font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: .01em; color: var(--white); }

#site-header .hamburger {
  background: none; border: none; cursor: pointer; z-index: 1600;
  display: flex; flex-direction: column; gap: 5px; padding: 0.5rem;
}
#site-header .hamburger div { width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: all var(--dur) var(--ease); }
#site-header .hamburger.open { position: fixed; top: 1.05rem; right: clamp(1rem, 4vw, 2rem); }
#site-header .hamburger.open div { background: var(--maroon-on); }
#site-header .hamburger.open .line1 { transform: rotate(-45deg) translate(-5px, 6px); }
#site-header .hamburger.open .line2 { opacity: 0; }
#site-header .hamburger.open .line3 { transform: rotate(45deg) translate(-5px, -6px); }

#site-header nav {
  position: fixed; top: 0; right: -110%; width: 300px; max-width: 82vw; height: 100vh;
  background: var(--maroon); padding: 5.5rem 1.75rem 2rem;
  display: flex; flex-direction: column; gap: 0.6rem;
  transition: right var(--dur) var(--ease); z-index: 1400;
  box-shadow: -10px 0 40px rgba(28,22,25,.3); overflow-y: auto;
}
#site-header nav.open { right: 0; }
/* Same sign plates as style.css: Articles and City Records outlined, Contact filled. */
#site-header nav a {
  color: var(--white); text-decoration: none; font-size: 1.05rem; font-weight: 700;
  padding: 0.6rem 0.9rem; text-align: center;
  border: 2px solid rgba(255,255,255,.55); border-radius: 5px;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
#site-header nav a:hover { background: rgba(255,255,255,.12); }
#site-header nav a.active { background: rgba(255,255,255,.2); border-color: var(--white); }
#site-header nav a.nav-contribute { background: var(--white); color: var(--maroon); border-color: var(--white); }
#site-header nav a.nav-contribute:hover, #site-header nav a.nav-contribute.active { background: var(--paper-2, #F3EDE8); color: var(--maroon-deep); }

/* 900px: three short items; mirrors style.css (this header is always maroon) */
@media (min-width: 900px) {
  #site-header .hamburger { display: none; }
  #site-header nav {
    position: static; width: auto; height: auto; max-width: none; background: none;
    padding: 0; flex-direction: row; gap: 0.45rem; box-shadow: none; overflow: visible;
  }
  #site-header nav a { padding: 0.32rem 0.9rem; font-size: 0.88rem; border-radius: 5px; border-color: rgba(255,255,255,.7); }
  #site-header nav a:hover { background: rgba(255,255,255,.16); }
  #site-header nav a.active { background: rgba(255,255,255,.22); border-color: var(--white); }
}

/* ════════════════ Title band ════════════════
   Compact version of style.css .page-title: same maroon field and inset
   keyline, but left-aligned to the tool's own column. */
.page-title {
  position: relative; background: var(--maroon); color: var(--maroon-on);
  padding: 6.4rem 16px 2.2rem; overflow: hidden;
}
.page-title::after {
  content: ''; position: absolute; inset: 14px; pointer-events: none;
  border: 2.5px solid rgba(255,255,255,.75); border-radius: 12px;
}
.page-title > .inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 12px); }
.page-title .page-eyebrow {
  display: inline-block; margin-bottom: 0.55rem;
  font-weight: 700; font-size: 0.9rem; letter-spacing: 0.01em;
  color: var(--gold); text-decoration: none;
}
.page-title a.page-eyebrow:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-title h1 {
  color: var(--white); margin: 0 0 0.5rem; font-family: var(--display); font-weight: 800;
  font-size: clamp(2.3rem, 5vw, 3.4rem); letter-spacing: .01em; line-height: 1.02;
}
.page-title .page-lede { margin: 0; max-width: 78ch; font-size: 1.02rem; line-height: 1.55; font-weight: 500; color: rgba(255,255,255,.86); }
.page-title .page-lede a { color: var(--white); }
.page-title .page-meta { margin: 0.7rem 0 0; font-family: var(--mono); font-size: 0.78rem; color: rgba(255,255,255,.66); }
@media (max-width: 600px) { .page-title { padding-top: 5.6rem; } }
/* the database's one-line description, just below the title band (matches its card on the City Records page) */
.db-intro { max-width: 1180px; margin: 1.1rem auto 0; padding: 0 clamp(16px, 2vw + 4px, 28px); font-size: 1.02rem; line-height: 1.55; color: var(--text-2); }

/* Back-to-the-records strip under the band on each database page */
.records-crumb { font-size: 13px; color: var(--text-2); margin: 0 0 4px; }
.records-crumb a { text-decoration: none; font-weight: 600; }
.records-crumb a:hover { text-decoration: underline; }

/* ════════════════ Footer (maroon) ════════════════ */
footer.site-footer {
  background: var(--maroon); color: rgba(255,255,255,.74);
  padding: clamp(3rem, 7vw, 4.5rem) 1.5rem 2.75rem; text-align: center;
  font-family: var(--sans); font-size: 15px; line-height: 1.8; margin: 3.5rem 0 0;
}
footer.site-footer p { margin: 0; }
footer.site-footer .footer-emblem {
  width: 42px; height: 44px; margin: 0 auto 1rem;
  background: url("Site Images/sf-sign-v2-outlined.svg") center / contain no-repeat;
}
footer.site-footer .footer-name { color: var(--white); font-family: var(--display); font-weight: 700; font-size: 1.4rem; letter-spacing: .01em; }
footer.site-footer .footer-nav { margin: 1.2rem 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.6rem; }
footer.site-footer .footer-nav a {
  color: rgba(255,255,255,.85); text-decoration: none; font-size: 0.95rem; font-weight: 700;
}
footer.site-footer .footer-nav a:hover { color: var(--white); }
footer.site-footer .footer-fine { max-width: 60ch; margin: 0.6rem auto 0; font-size: 0.82rem; color: rgba(255,255,255,.6); }
footer.site-footer .footer-fine a.footer-fix { display: block; width: fit-content; margin: .5rem auto 0; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
footer.site-footer .footer-fine a.footer-fix:hover { text-decoration-thickness: 2px; }