/* Blog Dark Mode Overrides */

/* Core page layout */
html[data-dark-mode] body {
    background-color: #0b0f19 !important;
    color: #cbd5e1 !important;
}

html[data-dark-mode] header {
    background-color: #0b0f19 !important;
    border-color: #1e293b !important;
}

html[data-dark-mode] footer {
    background-color: #0d1527 !important;
    border-top: 1px solid #1e293b !important;
    color: #94a3b8 !important;
}

html[data-dark-mode] footer .border-t {
    border-color: #1e293b !important;
}

/* Typography headers */
html[data-dark-mode] h1,
html[data-dark-mode] h2,
html[data-dark-mode] h3,
html[data-dark-mode] h4,
html[data-dark-mode] h5,
html[data-dark-mode] h6 {
    color: #f8fafc !important;
}

/* Card components */
html[data-dark-mode] .bg-zinc-100 {
    background-color: #121b2e !important;
}

html[data-dark-mode] .hover\:bg-blue-100:hover {
    background-color: #1e2e4f !important;
    border-color: #3b82f6 !important;
}

html[data-dark-mode] .rounded-3xl, 
html[data-dark-mode] .rounded-2xl,
html[data-dark-mode] .rounded-xl {
    border: 1px solid #1e293b !important;
}

html[data-dark-mode] article {
    border-color: #1e293b !important;
}

html[data-dark-mode] figure.border {
    border-color: #1e293b !important;
}

/* Buttons and Toggles */
html[data-dark-mode] .hover\:bg-zinc-200:hover {
    background-color: #1e2e4f !important;
}

html[data-dark-mode] .border {
    border-color: #1e293b !important;
}

html[data-dark-mode] .toggle-button {
    color: #e2e8f0 !important;
    border-color: #1e293b !important;
}

html[data-dark-mode] #mode {
    color: #e2e8f0 !important;
}

/* Newsletter section */
html[data-dark-mode] .bg-blue-500 {
    background-color: #1e3a8a !important; /* deeper blue for dark mode */
    border: 1px solid #2563eb !important;
}

html[data-dark-mode] .bg-white {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

html[data-dark-mode] .bg-white:hover {
    background-color: #2563eb !important;
}

html[data-dark-mode] .discord-btn {
    background-color: #ffffff !important;
    color: #2563eb !important;
}

html[data-dark-mode] .discord-btn:hover {
    background-color: #f1f5f9 !important;
}

html[data-dark-mode] input[type="text"] {
    background-color: #0b0f19 !important;
    border: 1px solid #1e293b !important;
    color: #ffffff !important;
}

/* Sidebar / Aside widgets */
html[data-dark-mode] aside {
    color: #cbd5e1 !important;
}

html[data-dark-mode] .bg-zinc-50 {
    background-color: #121b2e !important;
}

/* Text colors */
html[data-dark-mode] .text-zinc-500,
html[data-dark-mode] .text-zinc-600 {
    color: #94a3b8 !important;
}

html[data-dark-mode] .text-zinc-900,
html[data-dark-mode] .text-zinc-800 {
    color: #f8fafc !important;
}

/* Menu border styling in dark mode */
html[data-dark-mode] .border-zinc-400 {
    border-color: #3b82f6 !important;
}

/* Breadcrumbs */
html[data-dark-mode] .breadcrumbs li a {
    color: #3b82f6 !important;
}

html[data-dark-mode] .breadcrumbs li::after {
    color: #475569 !important;
}

/* Comments & Author Box */
html[data-dark-mode] #comment,
html[data-dark-mode] #author-box {
    background-color: #121b2e !important;
    border-color: #1e293b !important;
}

html[data-dark-mode] #author-box p {
    color: #94a3b8 !important;
}

/* Pagination */
html[data-dark-mode] .hover\:bg-zinc-200:hover {
    background-color: #1e2e4f !important;
    color: #ffffff !important;
}

/* Prose body custom styling in dark mode */
html[data-dark-mode] .prose {
    --tw-prose-body: #cbd5e1;
    --tw-prose-headings: #f8fafc;
    --tw-prose-lead: #cbd5e1;
    --tw-prose-links: #3b82f6;
    --tw-prose-bold: #f8fafc;
    --tw-prose-counters: #94a3b8;
    --tw-prose-bullets: #475569;
    --tw-prose-hr: #1e293b;
    --tw-prose-quotes: #e2e8f0;
    --tw-prose-quote-borders: #3b82f6;
    --tw-prose-captions: #94a3b8;
    --tw-prose-code: #f8fafc;
    --tw-prose-pre-code: #cbd5e1;
    --tw-prose-pre-bg: #121b2e;
    --tw-prose-th-borders: #1e293b;
    --tw-prose-td-borders: #1e293b;
}

/* Dark mode toggle icon styling */
html[data-dark-mode] .toggle-dark {
    display: none !important;
}
html[data-dark-mode] .toggle-light {
    display: block !important;
}
html:not([data-dark-mode]) .toggle-dark {
    display: block !important;
}
html:not([data-dark-mode]) .toggle-light {
    display: none !important;
}