/* ============================================================
   Ayo Gorkhali — Default v2 Dark Theme CSS
   Dark surfaces, crimson accents, Newsreader typography.

   NOTE: Tailwind CDN caches generated CSS by class name, so
   custom token values may not differ between themes. These
   overrides use direct selectors + !important to guarantee
   dark colours are applied regardless of Tailwind's cache.
   ============================================================ */

/* ----------------------------------------------------------
   FORCED DARK OVERRIDES
   ---------------------------------------------------------- */

/* Page base */
html, body {
  background-color: #111111 !important;
  color: #ede8df !important;
}

/* Fixed header */
#main-nav {
  background-color: rgba(22, 22, 22, 0.96) !important;
}

/* Masthead border + nav row */
#main-nav > div:first-child {
  border-color: rgba(46, 37, 32, 0.6) !important;
}

/* Tailwind surface utilities — all remapped to dark values */
.bg-background                { background-color: #111111 !important; }
.bg-surface-container-lowest  { background-color: #161616 !important; }
.bg-surface-container-low     { background-color: #1e1e1e !important; }
.bg-surface-container         { background-color: #242424 !important; }
.bg-surface-container-high    { background-color: #2c2c2c !important; }
.bg-surface-container-highest { background-color: #343434 !important; }
.bg-slate-50,
.bg-slate-100                 { background-color: #1e1e1e !important; }

/* Text utilities */
.text-on-surface         { color: #ede8df !important; }
.text-on-surface-variant { color: #9a8878 !important; }
.text-on-background      { color: #ede8df !important; }
.text-slate-800          { color: #ede8df !important; }
.text-slate-500          { color: #9a8878 !important; }
.text-slate-400          { color: #6b5a50 !important; }

/* Border utilities */
.border-outline-variant\/20 { border-color: rgba(46, 37, 32, 0.4) !important; }
.border-outline-variant\/10 { border-color: rgba(46, 37, 32, 0.2) !important; }
.divide-outline-variant\/20 > * + * { border-color: rgba(46, 37, 32, 0.4) !important; }

/* Search bar input area */
.bg-surface-container-low input,
.bg-surface-container input {
  color: #ede8df !important;
}

/* Search dropdown — force solid dark background */
#search-dropdown {
  background-color: #1e1e1e !important;
  border: 1px solid rgba(232, 20, 62, 0.2) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
footer {
  background-color: #161616 !important;
  border-color: rgba(46, 37, 32, 0.5) !important;
}

/* Backdrop on fixed header */
.backdrop-blur-md {
  background-color: rgba(22, 22, 22, 0.95) !important;
}

/* Blabber strip + Old Guard card backgrounds need explicit dark */
.border-t.border-b.bg-surface-container-low,
section > .bg-surface-container-low {
  background-color: #1e1e1e !important;
}

/* Category badges — remap light pill colours to dark equivalents */
.bg-rose-100   { background-color: #3d0010 !important; color: #f0486a !important; }
.bg-blue-100   { background-color: #001a3d !important; color: #7db3f8 !important; }
.bg-green-100  { background-color: #002810 !important; color: #6fcf97 !important; }
.bg-purple-100 { background-color: #1e0038 !important; color: #c084fc !important; }
.bg-amber-100  { background-color: #2e1a00 !important; color: #fbbf24 !important; }
.bg-slate-100  { background-color: #1a1a1a !important; color: #94a3b8 !important; }

/* Scrollbar */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #111111; }
::-webkit-scrollbar-thumb { background: #3d0010; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #e8143e; }

/* ----------------------------------------------------------
   Drop Cap — brightened crimson on dark
   ---------------------------------------------------------- */
.article-body > p:first-child::first-letter,
p.drop-cap::first-letter {
  float: left;
  font-size: 5.5rem;
  line-height: 0.8;
  padding-right: 12px;
  padding-top: 4px;
  font-family: 'Newsreader', Georgia, serif;
  color: #e8143e;
  font-weight: 800;
}

/* ----------------------------------------------------------
   Pull Quote — bright crimson border on dark bg
   ---------------------------------------------------------- */
.article-body blockquote.pull-quote,
blockquote.pull-quote {
  position: relative;
  padding: 3rem 0 3rem 2rem;
  margin: 3rem 0;
  border-left: 4px solid #e8143e;
  background-color: rgba(36, 36, 36, 0.8);
}

blockquote.pull-quote .pull-quote-mark {
  position: absolute;
  top: 0.5rem;
  left: 1rem;
  font-size: 6rem;
  font-family: 'Newsreader', Georgia, serif;
  color: rgba(232, 20, 62, 0.1);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

blockquote.pull-quote p,
blockquote.pull-quote {
  font-size: 1.75rem;
  line-height: 1.3;
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 700;
  color: #ede8df;
  font-style: italic;
}

blockquote.pull-quote cite {
  display: block;
  margin-top: 1rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #e8143e;
  font-style: normal;
  font-weight: 600;
}

/* ----------------------------------------------------------
   Article body prose
   ---------------------------------------------------------- */
.article-body p {
  margin-bottom: 1.5rem;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.8;
  color: #ddd8cf;
}

.article-body p + p {
  color: #c0b8ae;
}

.article-body h2 {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.875rem;
  font-weight: 700;
  margin: 2.5rem 0 1rem;
  color: #ede8df;
}

.article-body h3 {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 2rem 0 0.75rem;
  color: #ede8df;
}

.article-body a {
  color: #f0486a;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-body a:hover {
  color: #ff6b85;
}

.article-body ul,
.article-body ol {
  margin: 1.5rem 0 1.5rem 1.5rem;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 1.0625rem;
  color: #c0b8ae;
}

.article-body ul { list-style-type: disc; }
.article-body ol { list-style-type: decimal; }

.article-body li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

.article-body em     { font-style: italic; }
.article-body strong { font-weight: 700; color: #ede8df; }

/* ----------------------------------------------------------
   Info Box — dark variant
   ---------------------------------------------------------- */
.info-box {
  background-color: #1e1e1e;
  border-color: rgba(232, 20, 62, 0.15);
}

.info-box h3 { color: #ede8df; }
.info-box p  { color: #9a8878; }

/* ----------------------------------------------------------
   Search highlight
   ---------------------------------------------------------- */
mark {
  background-color: rgba(232, 20, 62, 0.2);
  color: #ede8df;
}

/* ----------------------------------------------------------
   Category badge overrides — remap light pill colours to dark
   ---------------------------------------------------------- */
.bg-rose-100   { background-color: #3d0010 !important; color: #f0486a !important; }
.bg-blue-100   { background-color: #001a3d !important; color: #7db3f8 !important; }
.bg-green-100  { background-color: #002810 !important; color: #6fcf97 !important; }
.bg-purple-100 { background-color: #1e0038 !important; color: #c084fc !important; }
.bg-amber-100  { background-color: #2e1a00 !important; color: #fbbf24 !important; }
.bg-slate-100  { background-color: #1a1a1a !important; color: #94a3b8 !important; }

/* ----------------------------------------------------------
   Scrollbar — thin crimson on dark
   ---------------------------------------------------------- */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #111111; }
::-webkit-scrollbar-thumb { background: #3d0010; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #e8143e; }