/* Article mode: apply only on single content pages (see baseof.html class/article CSS include) */

/* Colors inspired by your example screenshot */
:root {
  --article-bg: #121a4d;    /* deep indigo/blue background */
  --article-card: #0e1655;  /* slightly darker card panels */
  --article-border: #2a3bb8;/* accent border */
  --article-text: #e7ebff;  /* light text for readability */
  --article-muted: #b7c2ff; /* secondary text */
  --article-link: #8fb4ff;  /* link color */
  --article-button: #2837c4;/* CTA button background */
  --article-button-text: #e7ebff;
}

/* Scope styles to article pages only */
/* Apply strong background + text color */
html.article-html body.article-page, html.article-html {
  background: var(--article-bg) !important;
  color: var(--article-text) !important;
}

/* Some themes draw a global background layer */
#dream-global-bg { background: transparent !important; }

body.article-page a { color: var(--article-link); }
body.article-page a:hover { text-decoration: underline; }

/* Top nav: keep default light scheme; only darken the main content area */
body.article-page nav { background: var(--article-bg) !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
body.article-page .nav-sub-link { color: #fff !important; }

/* Main container and cards */
body.article-page .container { max-width: 1100px; background: transparent !important; }
body.article-page .prose, 
body.article-page article, 
body.article-page .content,
body.article-page .post-single,
body.article-page .post-content,
body.article-page main {
  color: var(--article-text) !important;
  background: transparent !important;
}

/* Tailwind Typography (.prose) overrides */
body.article-page .prose :where(h1,h2,h3,h4,h5,h6) { color: var(--article-text) !important; }
body.article-page .prose :where(p,li,ol,ul,blockquote,strong,em) { color: var(--article-text) !important; }
body.article-page .prose a { color: var(--article-link) !important; }
body.article-page .prose blockquote { border-left-color: var(--article-border) !important; background: var(--article-card) !important; }
body.article-page .prose code { background: #0b1242 !important; color: #eaf0ff !important; }
body.article-page .prose pre { background: #0b1242 !important; color: #eaf0ff !important; }
body.article-page .prose hr { border-color: rgba(255,255,255,0.12) !important; }

/* Lists: force bullet/number markers to white */
body.article-page .prose ul li::marker,
body.article-page .prose ol li::marker,
body.article-page ul li::marker,
body.article-page ol li::marker {
  color: var(--article-text) !important;
}

/* Table of contents (right sidebar) */
body.article-page .lg\:flex.lg\:flex-col.lg\:items-end,
body.article-page .toc,
body.article-page nav.toc,
body.article-page .table-of-contents,
body.article-page #TableOfContents {
  color: var(--article-text) !important;
}
body.article-page #TableOfContents a, 
body.article-page .toc a, 
body.article-page nav.toc a { color: var(--article-link) !important; }

/* Outline buttons (prev/next) */
body.article-page .btn.btn-outline { 
  color: var(--article-text) !important; 
  border-color: var(--article-border) !important; 
  background: transparent !important; 
}
body.article-page .btn.btn-outline:hover { background: rgba(255,255,255,0.06) !important; }

/* Headings */
body.article-page h1, 
body.article-page h2, 
body.article-page h3, 
body.article-page h4 { color: var(--article-text); }

/* Paragraph and list color */
body.article-page p, body.article-page li { color: var(--article-text); }
body.article-page .text-muted { color: var(--article-muted); }

/* Info boxes or cards (if used by theme) */
body.article-page .card, 
body.article-page .box, 
body.article-page .callout, 
body.article-page blockquote {
  background: var(--article-card) !important;
  color: var(--article-text) !important;
  border: 1px solid var(--article-border) !important;
  border-radius: 8px;
}

/* Buttons (e.g., Learn More) */
body.article-page .btn,
body.article-page a.button,
body.article-page button {
  background: var(--article-button) !important;
  color: var(--article-button-text) !important;
  border-color: var(--article-border) !important;
}
body.article-page .btn:hover,
body.article-page a.button:hover,
body.article-page button:hover {
  filter: brightness(1.08);
}

/* Tables */
body.article-page table {
  border-color: var(--article-border) !important;
  background: var(--article-card) !important;
}
body.article-page th, body.article-page td { border-color: var(--article-border) !important; color: var(--article-text) !important; }

/* Code blocks */
body.article-page pre, body.article-page code {
  background: #0b1242 !important;
  color: #eaf0ff !important;
}

/* Footer in article mode matches dark scheme */
body.article-page footer { background: transparent !important; border-top: 1px solid rgba(255,255,255,0.08) !important; color: var(--article-muted) !important; }

/* Override common utility classes used by theme on article pages */
body.article-page .bg-base-100, 
body.article-page .bg-white, 
body.article-page .card-bordered {
  background-color: var(--article-card) !important; 
  color: var(--article-text) !important;
}
body.article-page .text-base-content, 
body.article-page .text-neutral,
body.article-page .text-slate-800 {
  color: var(--article-text) !important;
}

/* base-content variants like text-base-content/60 */
body.article-page [class*="text-base-content"] {
  color: var(--article-text) !important;
}

/* Any explicit gray utility text colors -> force to light */
body.article-page [class*="text-gray-"],
body.article-page [class*="text-slate-"],
body.article-page [class*="text-neutral-"] {
  color: var(--article-text) !important;
}

/* --- Strong global overrides to ensure the entire article page is light text on dark --- */
body.article-page,
body.article-page *:not(svg):not(svg *):not(img) {
  color: var(--article-text) !important;
}
/* Links should remain distinct */
body.article-page a { color: var(--article-link) !important; }

/* Neutralize text opacity utilities (e.g., text-base-content/60, opacity-50) */
body.article-page [class*="text-base-content/"] { opacity: 1 !important; }
body.article-page [class*="opacity-"] { opacity: 1 !important; }

/* Keep article surface transparent over the dark page background */
body.article-page .container,
body.article-page article,
body.article-page main,
body.article-page .prose { background: transparent !important; }

/* Make theme wrappers transparent so body background shows through */
body.article-page .flip-container,
body.article-page .flipper,
body.article-page .front,
body.article-page .back { background: transparent !important; }
body.article-page .front > .container,
body.article-page .back > .container { background: transparent !important; }

/* Header area inside the article */
body.article-page #dream-single-post-main > header { background: transparent !important; }
body.article-page #dream-single-post-main h1,
body.article-page .prose h1 { background: transparent !important; }
body.article-page mark,
body.article-page .prose mark { background: transparent !important; color: var(--article-text) !important; }

/* Selection on dark background */
body.article-page ::selection { background: rgba(255,255,255,0.18); color: var(--article-text); }

/* Inputs (search box and fields) */
body.article-page input,
body.article-page textarea,
body.article-page select { background: #0b1242 !important; border-color: var(--article-border) !important; color: var(--article-text) !important; }