/* ============================================
   I'm Not Racist .com — dark theme
   Black background, white text, gold accents
   ============================================ */

:root {
  --site-bg: #0a0a0a;
  --site-bg-alt: #141414;
  --site-text: #f2f2f2;
  --site-text-muted: #b8b8b8;
  --site-gold: #c9a86a;
  --site-gold-bright: #e0c48a;
  --site-border: #2a2a2a;
}

/* To add some space below the navigation bar */

body {
  margin-top: 100px;
  background-color: var(--site-bg);
  color: var(--site-text);
}

/* Navbar */

.navbar {
  background-color: var(--site-bg-alt) !important;
  border-bottom: 1px solid var(--site-border);
}

.navbar-title,
.navbar-brand {
  color: var(--site-gold-bright) !important;
  font-weight: bold;
}

.navbar-nav .nav-link {
  color: var(--site-text) !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--site-gold) !important;
}

/* Body text, headings */

h1, h2, h3, h4, h5, h6 {
  color: var(--site-gold-bright);
}

a {
  color: var(--site-gold);
}

a:hover {
  color: var(--site-gold-bright);
}

/* Table of contents */

#TOC, .toc-active {
  background-color: var(--site-bg-alt);
  border-left: 2px solid var(--site-gold);
}

#TOC a {
  color: var(--site-text-muted);
}

#TOC a:hover, #TOC a.active {
  color: var(--site-gold);
}

/* Blockquotes / callouts */

blockquote {
  border-left: 3px solid var(--site-gold);
  color: var(--site-text-muted);
  background-color: var(--site-bg-alt);
  padding: 0.5em 1em;
}

/* Code blocks */

pre, code {
  background-color: var(--site-bg-alt);
  color: var(--site-gold-bright);
  border: 1px solid var(--site-border);
}

/* Images / charts — smaller, centered, capped width.
   !important + explicit .img-fluid targeting because Quarto auto-applies
   Bootstrap's .img-fluid class to figures, which otherwise wins the
   specificity fight against a bare `img` selector regardless of load order. */

img,
img.img-fluid,
.quarto-figure img,
figure img {
  max-width: 400px !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 1.5em auto !important;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* Section clarity: give each ## heading real breathing room and
   a visible top boundary, so scrolling past "---" reads as a
   clean break between arguments, not just a horizontal line. */

h2 {
  margin-top: 3em;
  padding-top: 1.2em;
  border-top: 2px solid var(--site-border);
  font-size: 1.5em;
}

h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

h3 {
  margin-top: 2em;
  color: var(--site-gold);
}

/* Horizontal rules become nearly invisible spacers now that h2
   carries the visual break — keeps the page from double-lining */

hr {
  border: none;
  height: 1px;
  background: transparent;
  margin: 1em 0;
}


/* Footer */

.nav-footer {
  background-color: var(--site-bg-alt);
  color: var(--site-text-muted);
  border-top: 1px solid var(--site-border);
}

/* add some color - a highlighted panel behind a major point */

.banner_color {
  background-color: var(--site-bg-alt);
  border: 1px solid var(--site-gold);
  color: var(--site-text);
  font-weight: bold;
  padding: 1em;
  border-radius: 4px;
}

/* Style buttons - if you want some text centered and bolded */

.center {
  font-weight: bold;
  text-align: center;
  color: var(--site-gold-bright);
}

/* "Why it sounds true" / "What actually holds up" labels —
   color-coded so the pattern is instantly scannable down the page */

.why-true {
  color: #c0645a;
}

.what-holds {
  color: #6fae7c;
}


/* Small symbolic icons (fire house, scales, doors, etc.) —
   distinct from full-size data charts, sit smaller and centered
   as visual section breaks */

img.icon, .icon img {
  max-width: 110px !important;
  margin: 0.5em auto 1.5em auto !important;
  box-shadow: none !important;
  opacity: 0.9;
}

/* "Jump to sources" links at the bottom of each argument —
   quieter than body text so they read as a utility, not a claim */

p em a[href^="#src-"] {
  color: var(--site-text-muted);
  font-size: 0.9em;
  text-decoration: none;
  border-bottom: 1px dotted var(--site-gold);
}

p em a[href^="#src-"]:hover {
  color: var(--site-gold);
}

/* Sources section: tighter spacing than the main argument sections,
   since it's reference material, not narrative */

#sources-further-reading h3 {
  margin-top: 1.8em;
  font-size: 1.1em;
  color: var(--site-gold-bright);
}

#sources-further-reading ul {
  margin-top: 0.5em;
}


.timeout-box {
  background-color: var(--site-bg-alt);
  border: 1px solid var(--site-gold);
  border-left: 4px solid var(--site-gold);
  border-radius: 4px;
  padding: 1.25em 1.5em;
  margin: 2em 0;
}

.timeout-box .timeout-label {
  color: var(--site-gold-bright);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8em;
  margin-bottom: 0.5em;
  display: block;
}

.timeout-box p {
  color: var(--site-text);
  margin: 0.4em 0;
}

.btn {
  background-color: var(--site-gold);
  border: none;
  color: #0a0a0a;
  padding: 8px 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}

/* Darker gold on mouse-over */
.btn:hover {
  background-color: var(--site-gold-bright);
  color: #0a0a0a;
}