/* Shared dark theme, nav, footer, and breadcrumb for nation pages and link trees.
   Linked after each page's own stylesheet. */

:root { color-scheme: light dark; --red-text: #9d1820; }

.site-chrome {
  position: sticky;
  top: 0;
  z-index: 40;
  align-self: stretch;
  width: 100%;
  background: color-mix(in srgb, #f7f5f2 94%, transparent);
  border-bottom: 1px solid #e5e0da;
  backdrop-filter: blur(12px);
}
.site-chrome-inner,
.site-breadcrumb,
.site-chrome-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 24px;
}
.site-chrome-inner,
.site-chrome-links,
.site-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.site-chrome-logo {
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
  color: #1a1a1a;
  margin-right: auto;
}
.site-chrome-links a,
.site-breadcrumb a,
.site-chrome-footer a {
  color: #3a3a3a;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
.site-chrome-links a[aria-current="page"],
.site-chrome-links a:hover,
.site-breadcrumb a:hover,
.site-chrome-footer a:hover { color: #9d1820; }
.site-chrome-give {
  background: #c8102e;
  color: #fff !important;
  border-radius: 8px;
  padding: 8px 12px;
}
.site-breadcrumb {
  font-size: 13px;
  padding-top: 14px;
  padding-bottom: 0;
  color: #5a5a5a;
}
.site-breadcrumb [aria-current="page"] { font-weight: 700; }
.site-chrome-footer {
  align-self: stretch;
  width: 100%;
  margin-top: 28px;
  border-top: 1px solid #e5e0da;
  background: #f7f5f2;
  color: #3a3a3a;
}
.site-chrome-footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  justify-content: space-between;
  padding-top: 22px;
  padding-bottom: 22px;
}
.site-chrome-footer p { margin: 0; font-size: 13px; max-width: 420px; }
.site-chrome-footer nav { display: flex; flex-wrap: wrap; gap: 8px 14px; }

@media (prefers-color-scheme: dark) {
  :root {
    --red: #c4232b;
    --red-text: #ff9aa0;
    --ink: #f4f1eb;
    --muted: #c8c2b8;
    --surface: #1b1b18;
    --surface-2: #24231f;
    --line: #3c3a34;
    --paper: #11110f;
    --charcoal: #f4f1eb;
  }
  body { background: #11110f; color: #f4f1eb; }
  .card,
  .stat,
  .nation-card,
  .region,
  article.card { background: #24231f; border-color: #3c3a34; color: #f4f1eb; }
  .card h3,
  .card h2,
  .back,
  .type-national,
  .stat .num,
  .tab.active,
  .ig-title,
  .filter button.active,
  a.back { color: #ff9aa0; }
  .type-partner { color: #8dcea8; }
  .card p,
  .card li,
  .stat .label,
  .asof,
  .source,
  .card .asof,
  .card .asof.due { color: #c8c2b8; }
  .hero { color: #fff; }
  .btn,
  .site-chrome-give { background: #c4232b; color: #fff; }
  .btn:hover { background: #9e1a21; }
  a.link,
  .link {
    background: #24231f !important;
    color: #f4f1eb !important;
    border-color: #3c3a34 !important;
  }
  .link-url,
  .sub,
  .back { color: #c8c2b8; }
  .back:hover { color: #ff9aa0; }
  h1, .motto { color: #f4f1eb; }
  .site-chrome,
  .site-chrome-footer { background: #161614; border-color: #3c3a34; color: #f4f1eb; }
  .site-chrome-logo,
  .site-chrome-links a,
  .site-breadcrumb,
  .site-breadcrumb a,
  .site-chrome-footer,
  .site-chrome-footer a { color: #f4f1eb; }
  .site-chrome-links a:hover,
  .site-breadcrumb a:hover,
  .site-chrome-footer a:hover,
  .site-chrome-links a[aria-current="page"] { color: #ff9aa0; }
  .site-chrome-give { color: #fff !important; }
  input, select, textarea { background: #1b1b18; color: #f4f1eb; border-color: #3c3a34; }
}