/* site.css — PubMed Citation Bar
   Page styles for the landing, help, support and privacy pages.
   Navigation lives entirely in siteNav.js (styles included), so the four
   report pages keep their own layout CSS untouched and share the same nav. */

:root {
  --brand:        #005a8c;
  --brand-dark:   #004470;
  --nav-bg:       #f4f3ef;
  --nav-border:   #d8d5cc;
  --ink:          #1c1c1c;
  --ink-soft:     #4a4a4a;
  --ink-faint:    #6e6e6e;
  --rule:         #e2e0da;
  --panel:        #faf9f6;
  --accent-green: #2e7d4f;
  --mono: "IBM Plex Mono", "JetBrains Mono", Consolas, Monaco, monospace;
  --sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
}

/* ── Page furniture ────────────────────────────────────────────────── */

.wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px 72px;
}

.wrap-wide { max-width: 1100px; }

.hero {
  padding: 52px 0 34px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 34px;
}

h1 {
  font-family: var(--mono);
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.6px;
  color: var(--brand);
  margin: 0 0 12px;
}

.tagline {
  font-size: 19px;
  color: var(--ink-soft);
  margin: 0 0 22px;
  line-height: 1.5;
}

h2 {
  font-family: var(--mono);
  font-size: 21px;
  letter-spacing: -0.3px;
  color: var(--ink);
  margin: 42px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}

h3 {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--brand);
  margin: 26px 0 6px;
}

p { margin: 0 0 14px; }

a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

code, .mono { font-family: var(--mono); font-size: 0.92em; }

code {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1px 5px;
}

pre {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
}

pre code { background: none; border: 0; padding: 0; }

/* ── Buttons ───────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 14px;
  padding: 11px 22px;
  border-radius: 4px;
  border: 2px solid var(--brand);
}

.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

.btn-ghost { background: none; color: var(--brand); }
.btn-ghost:hover { background: var(--panel); color: var(--brand-dark); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }

/* ── Cards ─────────────────────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 20px 0 0;
}

.card {
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 18px 20px;
  background: var(--panel);
  text-decoration: none;
  color: inherit;
  display: block;
}

.card:hover { border-color: var(--brand); color: inherit; }

.card h3 { margin: 0 0 6px; font-size: 15px; }
.card p  { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.5; }

/* ── Tables ────────────────────────────────────────────────────────── */

.table-scroll { overflow-x: auto; margin: 0 0 18px; }

table.data {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}

table.data th,
table.data td {
  border-bottom: 1px solid var(--rule);
  padding: 7px 12px 7px 0;
  text-align: left;
  vertical-align: top;
}

table.data th {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-faint);
  border-bottom-width: 2px;
}

table.data td.sym {
  font-family: var(--mono);
  color: var(--brand);
  white-space: nowrap;
  font-weight: 600;
}

table.data td.num { text-align: right; font-family: var(--mono); }

/* ── Notes ─────────────────────────────────────────────────────────── */

.note {
  border-left: 3px solid var(--nav-border);
  background: var(--panel);
  padding: 12px 16px;
  margin: 20px 0;
  font-size: 14.5px;
  color: var(--ink-soft);
}

.note strong { color: var(--ink); }

.note-warn {
  border-left-color: #b3541e;
  background: #fdf6f1;
}

.free { color: var(--accent-green); font-weight: 600; }

/* ── Footer ────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: 56px;
  padding: 22px 24px 40px;
  font-size: 13px;
  color: var(--ink-faint);
  font-family: var(--mono);
}

.site-footer-inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
}

.site-footer a { color: var(--ink-faint); text-decoration: underline; }
.site-footer a:hover { color: var(--brand); }

@media (max-width: 620px) {
  h1 { font-size: 25px; }
  .tagline { font-size: 17px; }
  .hero { padding: 34px 0 24px; }
}