body {
  background-color: #f8f9fa;
}

.navbar.sticky-top {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Offset anchor-jump targets so the sticky nav doesn't cover the section
   heading you just navigated to. Desktop navbar is a single row; on mobile
   it can wrap onto several rows (brand + wrapped category links), so it
   needs more clearance. These are estimates based on Bootstrap's default
   navbar sizing - retune if you add enough categories that the nav grows
   taller than this on mobile. */
section[id] {
  scroll-margin-top: 4.5rem;
}

@media (max-width: 767.98px) {
  section[id] {
    scroll-margin-top: 11rem;
  }
}

.card-title a {
  color: inherit;
}

.card-title a:hover {
  text-decoration: underline;
}

.source-favicon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 2px;
  flex-shrink: 0;
}

.source-link,
.article-link {
  color: #1a1a1a;
  text-decoration: none;
}

.source-link:hover,
.article-link:hover {
  text-decoration: underline;
}

.source-sep {
  color: #adb5bd;
}

/* A source that was listed for a topic but not fed to its synthesis - either
   a known paywall (filter.paywall_blocklist) or a page we couldn't pull
   usable content from this run. Two distinct treatments so a reader can tell
   "behind a paywall" from "we just couldn't get it". On the index card these
   shade the source chip in place; on an article page the same sources are
   grouped into one "Paywall and unreadable sources" block below the main
   list (see renderer._split_sources / article.html). */
.source-link--paywalled {
  color: #8a6d1d;
  background-color: #fff3cd;
  border-radius: 3px;
  padding: 0 0.3rem;
}

.source-link--paywalled::before,
.article-link--paywalled::before {
  content: "\1F512"; /* lock */
  margin-right: 0.25rem;
  font-size: 0.85em;
}

.source-link--unretrieved {
  color: #868e96;
  opacity: 0.75;
}

.article-link--paywalled {
  color: #8a6d1d;
}

.article-link--unretrieved {
  color: #868e96;
}

.set-aside-heading {
  color: #6c757d;
}

/* Disclosure holding the rest of a summary when a topic was synthesized
   from only one or two sources (synthesis.low_source_display: teaser). The
   first sentences render as normal body text above; this is the "read on"
   affordance for the remainder. Native <details> so it opens without JS. */
.article-more > summary {
  cursor: pointer;
  color: #495057;
  font-size: 0.95rem;
  font-weight: 600;
  list-style-position: inside;
}

.article-more > summary:hover {
  color: #212529;
}

.set-aside-sources {
  margin-top: 0.75rem;
}

.badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Sub-heading for a country's run of topics within a consolidated regional
   section (e.g. LATAM) - visually one step down from the section's own h2,
   so it's clear while scrolling which country a topic belongs to without
   looking like a second section of its own. */
.country-heading {
  font-size: 1.1rem;
  font-weight: 600;
  color: #495057;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

footer small {
  font-size: 0.8rem;
}

/* Small icon-button link to the History page, shown next to the
   Generated/Created metadata line on every page. Plain <a> markup around an
   emoji glyph inherits link styling (blue + underline), which reads as a
   broken/stray link rather than a deliberate icon button - this makes it
   look like one instead. */
.history-link,
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid #ced4da;
  color: #495057;
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1;
  vertical-align: middle;
}

.history-link:hover,
.icon-btn:hover {
  background-color: #e9ecef;
  color: #212529;
  text-decoration: none;
}

/* Icon-only share/search buttons on article pages (Facebook/X/Bluesky
   share, Google search on headline) - same circular treatment as
   .history-link so the top metadata row reads as one family of small icon
   buttons rather than mixing an icon with full-width text buttons. */
.icon-btn svg {
  flex-shrink: 0;
}

/* Row of month links at the top of the history page, jumping down to each
   month's section below - see renderer._write_history_list. */
.history-month-jump a {
  color: #495057;
  text-decoration: none;
}

.history-month-jump a:hover {
  text-decoration: underline;
}