/* ============================================================
 * Dark Mode — overrides only for what CSS vars can't reach.
 * Most theming flows through --vg-bg / --vg-text / --vg-border etc.
 * ============================================================ */

/* Header brand color stays the same — that's by design (always branded) */

/* Article body links — switch to a lighter primary tint for legibility */
html[data-mode="dark"] .vg-article-body a {
  color: #FF8B6B;
}

/* Blockquote in article — slightly lighter wash for contrast */
html[data-mode="dark"] .vg-article-body blockquote {
  background: rgba(255, 255, 255, 0.04);
  color: #E8E6E1;
}

/* Correction banner — adjust for dark contrast */
html[data-mode="dark"] .vg-correction {
  background: rgba(224, 165, 60, 0.12);
  color: #FFE9B5;
}

/* Source block link */
html[data-mode="dark"] .vg-source-block a { color: #FF8B6B; }

/* Featured story */
html[data-mode="dark"] .vg-featured { background: var(--vg-card-bg); }
html[data-mode="dark"] .vg-featured-title a { color: var(--vg-text); }
html[data-mode="dark"] .vg-featured-title a:hover { color: #FF8B6B; }

/* List items */
html[data-mode="dark"] .vg-list-item { border-bottom-color: var(--vg-border); }
html[data-mode="dark"] .vg-list-title a { color: var(--vg-text); }
html[data-mode="dark"] .vg-list-title a:hover { color: #FF8B6B; }
html[data-mode="dark"] .vg-list-cat { color: #FF8B6B; }

/* Section headings */
html[data-mode="dark"] .vg-section-head { border-bottom-color: var(--vg-primary); }

/* Reactions */
html[data-mode="dark"] .vg-reactions { background: var(--vg-card-bg); }
html[data-mode="dark"] .vg-react-btn {
  background: var(--vg-bg-elev);
  border-color: var(--vg-border);
  color: var(--vg-text);
}

/* Polls */
html[data-mode="dark"] .vg-poll { background: var(--vg-card-bg); }
html[data-mode="dark"] .vg-poll-option {
  background: var(--vg-bg-elev);
  border-color: var(--vg-border);
  color: var(--vg-text);
}
html[data-mode="dark"] .vg-poll-fill { background: rgba(192, 57, 43, 0.35); }

/* WhatsApp CTA — green stays vibrant; just soften shadow */
html[data-mode="dark"] .vg-wa-cta {
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.18);
}

/* Image attenuation for dark eyes */
html[data-mode="dark"] .vg-article-body img,
html[data-mode="dark"] .vg-featured-media img,
html[data-mode="dark"] .vg-list-thumb img,
html[data-mode="dark"] .vg-related-thumb img {
  filter: brightness(0.92);
}

/* Drawer in dark mode */
html[data-mode="dark"] .vg-drawer { background: #1A1A1B; color: var(--vg-text); }
html[data-mode="dark"] .vg-drawer .vg-drawer-menu > li > a {
  color: var(--vg-text);
  border-bottom-color: var(--vg-border);
}
html[data-mode="dark"] .vg-drawer .vg-drawer-menu > li > a:hover {
  background: rgba(255, 255, 255, 0.04);
}
html[data-mode="dark"] .vg-drawer-close { color: var(--vg-text); }

/* Pagination */
html[data-mode="dark"] .vg-pagination .page-numbers {
  background: var(--vg-card-bg);
  color: var(--vg-text);
  border-color: var(--vg-border);
}

/* Byline meta */
html[data-mode="dark"] .vg-byline { border-color: var(--vg-border); }
html[data-mode="dark"] .vg-byline-card { background: var(--vg-card-bg); border-color: var(--vg-border); }

/* Related cards */
html[data-mode="dark"] .vg-related-card {
  background: var(--vg-card-bg);
  border-color: var(--vg-border);
}

/* Gulf cards + financial ticker handled in main + ticker rules via vars */

/* TTS player */
html[data-mode="dark"] .vg-tts-player {
  background: var(--vg-card-bg);
  border-color: var(--vg-border);
}

/* Listen button */
html[data-mode="dark"] .vg-listen-btn {
  background: var(--vg-card-bg);
  border-color: var(--vg-border);
  color: var(--vg-text);
}