/* ==========================================================================
   Blog Dark Mode - Shared across all blog pages
   Supports html.dark-theme class + auto mode via prefers-color-scheme
   ========================================================================== */

/* ==========================================================================
   Dark Theme (explicit class)
   ========================================================================== */

/* --- Page-level --- */
html.dark-theme body {
    background: #1a1a1a;
    color: #e0e0e0;
}

/* --- Nav bar --- */
html.dark-theme #top {
    background: #111;
    background-color: #111;
}

/* --- Sidebar cards --- */
html.dark-theme .sidebar-card {
    background: #252525;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

html.dark-theme .sidebar-card h4 {
    color: #6090b0;
}

html.dark-theme .sidebar-welcome {
    color: #a0b0c0;
}

/* --- Sidebar buttons --- */
html.dark-theme button.blog_button {
    background: #2a2a2a;
    border-color: #3a3a3a;
    color: #e0e0e0;
}

html.dark-theme button.blog_button:hover {
    background: #333;
    border-color: #5CC9FF;
    color: #fff;
}

html.dark-theme button.blog_button#create {
    background: #4a8a4c;
    border-color: #4a8a4c;
    color: #fff;
}

html.dark-theme button.blog_button#create:hover {
    background: #5a9a5c;
    border-color: #5a9a5c;
}

/* --- Blog post cards (feed + my_posts) --- */
html.dark-theme .blog_border {
    background: #252525;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}

html.dark-theme .blog_border:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}

html.dark-theme .blog_date {
    background: linear-gradient(135deg, #2a3040, #253545);
    color: #6090b0;
}

html.dark-theme .blog_title,
html.dark-theme h2.blog_title {
    color: #e0e0e0;
}

html.dark-theme .blog_title:hover,
html.dark-theme h2.blog_title:hover {
    color: #5CC9FF;
}

html.dark-theme .blog_text,
html.dark-theme .first_blog_text {
    color: #a0b0c0;
}

html.dark-theme .blog_info {
    color: #6090b0;
}

html.dark-theme .blog_author {
    color: #a0b0c0;
}

html.dark-theme .blog_author:hover {
    color: #e0e0e0;
}

/* --- Feed hero (already dark, minor tweaks) --- */
html.dark-theme .feed-hero-cover {
    background: linear-gradient(135deg, #0d1b2a 0%, #1a3050 50%, #2a5580 100%);
}

/* --- Post hero cover placeholder --- */
html.dark-theme .post-hero-cover {
    background: linear-gradient(135deg, #1a2530, #1e3040, #253a50);
    color: #6090b0;
}

/* --- Text color for left panel --- */
html.dark-theme .left {
    color: #e0e0e0;
}

/* --- Load more button (feed) --- */
html.dark-theme button#old {
    background: #252525;
    border-color: #3a3a3a;
    color: #a0b0c0;
}

html.dark-theme button#old:hover {
    border-color: #5CC9FF;
    color: #e0e0e0;
}

/* --- My posts action buttons --- */
html.dark-theme button.my_blog_button {
    background: #2a2a2a;
    border-color: #3a3a3a;
    color: #a0b0c0;
}

html.dark-theme button.my_blog_button:hover {
    border-color: #5CC9FF;
    color: #e0e0e0;
    background: #333;
}

/* --- Post page: back link --- */
html.dark-theme .post-back {
    color: #a0b0c0;
}

html.dark-theme .post-back:hover {
    color: #e0e0e0;
}

html.dark-theme .post-back:visited {
    color: #a0b0c0;
}

/* --- Post page: title and text --- */
html.dark-theme h2.blog-title {
    color: #e0e0e0;
}

html.dark-theme p.text {
    color: #6090b0;
}

html.dark-theme div.blog-text {
    color: #d0d0d0;
}

/* --- Post navigation --- */
html.dark-theme .post-nav {
    border-top-color: #333;
}

html.dark-theme button.nav_post {
    background: #252525;
    border-color: #3a3a3a;
}

html.dark-theme button.nav_post:hover {
    border-color: #5CC9FF;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

html.dark-theme button.nav_post .nav-label {
    color: #a0b0c0;
}

html.dark-theme button.nav_post .nav-title {
    color: #e0e0e0;
}

html.dark-theme button.blocked_nav_post {
    background-color: #1e1e1e;
    border-color: #2a2a2a;
}

html.dark-theme button.blocked_nav_post:hover {
    border-color: #2a2a2a;
}

/* --- Comments --- */
html.dark-theme .comment-box {
    border-top-color: #333;
}

html.dark-theme h3.comment-title {
    color: #e0e0e0;
}

html.dark-theme .comment-wrapper-1,
html.dark-theme .comment-wrapper-2 {
    border-bottom-color: #333;
}

html.dark-theme .profile-name {
    color: #e0e0e0;
}

html.dark-theme .comment-text {
    color: #a0b0c0;
}

html.dark-theme .comment-date {
    color: #6090b0;
}

html.dark-theme .profile-pic {
    background: #2a3040;
}

html.dark-theme .comment-prompt,
html.dark-theme .comment-signed-in {
    color: #a0b0c0;
}

html.dark-theme .new-comment-box {
    background-color: #2a2a2a;
    border-color: #3a3a3a;
    color: #e0e0e0;
}

html.dark-theme .new-comment-box:focus {
    border-color: #5CC9FF;
}

html.dark-theme .new-comment-box::placeholder {
    color: #666;
}

html.dark-theme #signed-in-user {
    color: #e0e0e0;
}

html.dark-theme button.add-comment {
    background: #4a8a4c;
}

html.dark-theme button.add-comment:hover {
    background: #5a9a5c;
}

html.dark-theme button.reply {
    color: #5CC9FF;
}

html.dark-theme button.reply:hover {
    color: #e0e0e0;
}

html.dark-theme button.reply-comment-button {
    background: #4a8a4c;
}

html.dark-theme button.reply-comment-button:hover {
    background: #5a9a5c;
}

html.dark-theme button.cancel {
    background: #2a2a2a;
    color: #a0b0c0;
    border-color: #3a3a3a;
}

html.dark-theme button.cancel:hover {
    background: #333;
}

html.dark-theme .text-body {
    color: #d0d0d0;
}

html.dark-theme .reply-comment-box {
    background: #2a2a2a;
    border-color: #3a3a3a;
    color: #e0e0e0;
}

html.dark-theme .reply-comment-box:focus {
    border-color: #5CC9FF;
}

/* --- Create/Edit page --- */
html.dark-theme .title {
    color: #e0e0e0;
}

html.dark-theme #text {
    color: #d0d0d0;
}

html.dark-theme #text[placeholder]:empty:before {
    color: #555;
}

/* Formatting buttons */
html.dark-theme button.bold,
html.dark-theme button.italics,
html.dark-theme button.underline,
html.dark-theme button.left-align,
html.dark-theme button.center-align,
html.dark-theme button.right-align {
    background-color: #2a2a2a;
    border-color: #3a3a3a;
    color: #e0e0e0;
}

html.dark-theme button.bold:hover,
html.dark-theme button.italics:hover,
html.dark-theme button.underline:hover,
html.dark-theme button.left-align:hover,
html.dark-theme button.center-align:hover,
html.dark-theme button.right-align:hover {
    background-color: #333;
    border-color: #5CC9FF;
}

/* Override alignment button SVG icons with light stroke for dark mode */
html.dark-theme button.left-align {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='15' y2='12'/%3E%3Cline x1='3' y1='18' x2='18' y2='18'/%3E%3C/svg%3E");
}

html.dark-theme button.center-align {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3Cline x1='4' y1='18' x2='20' y2='18'/%3E%3C/svg%3E");
}

html.dark-theme button.right-align {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='9' y1='12' x2='21' y2='12'/%3E%3Cline x1='6' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
}

/* Form inputs on create page */
html.dark-theme .date_form input,
html.dark-theme .right input,
html.dark-theme .right select {
    background-color: #2a2a2a;
    color: #e0e0e0;
    border-color: #3a3a3a;
}

/* Publish button */
html.dark-theme button.blog_button#publish {
    background: #4a8a4c;
    border-color: #4a8a4c;
}

html.dark-theme button.blog_button#publish:hover {
    background: #5a9a5c;
    border-color: #5a9a5c;
}

/* Delete button */
html.dark-theme button.blog_button#delete {
    color: #f87171;
    border-color: #3a1a1a;
}

html.dark-theme button.blog_button#delete:hover {
    background: #3a1a1a;
    border-color: #f87171;
}

/* --- Social media embeds (Twitter/X, Facebook iframes) --- */
html.dark-theme .sidebar-card iframe {
    filter: invert(1) hue-rotate(180deg);
}

/* Generic button reset */
html.dark-theme button {
    color: inherit;
}

/* Unpublished posts (my_posts) */
html.dark-theme .unpublished {
    opacity: 0.5;
}

/* Mobile sidebar overlay */
html.dark-theme .sidebar-overlay {
    background: rgba(0,0,0,0.6);
}

html.dark-theme .sidebar-toggle {
    color: #e0e0e0;
}

html.dark-theme .sidebar-close {
    color: #a0b0c0;
}

/* ==========================================================================
   Auto Mode (system preference detection)
   Mirrors all dark-theme styles for users without explicit theme choice
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    html:not(.light-theme):not(.dark-theme) body {
        background: #1a1a1a;
        color: #e0e0e0;
    }

    html:not(.light-theme):not(.dark-theme) #top {
        background: #111;
        background-color: #111;
    }

    html:not(.light-theme):not(.dark-theme) .sidebar-card {
        background: #252525;
        box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    }

    html:not(.light-theme):not(.dark-theme) .sidebar-card h4 {
        color: #6090b0;
    }

    html:not(.light-theme):not(.dark-theme) .sidebar-welcome {
        color: #a0b0c0;
    }

    html:not(.light-theme):not(.dark-theme) button.blog_button {
        background: #2a2a2a;
        border-color: #3a3a3a;
        color: #e0e0e0;
    }

    html:not(.light-theme):not(.dark-theme) button.blog_button:hover {
        background: #333;
        border-color: #5CC9FF;
        color: #fff;
    }

    html:not(.light-theme):not(.dark-theme) button.blog_button#create {
        background: #4a8a4c;
        border-color: #4a8a4c;
        color: #fff;
    }

    html:not(.light-theme):not(.dark-theme) button.blog_button#create:hover {
        background: #5a9a5c;
        border-color: #5a9a5c;
    }

    html:not(.light-theme):not(.dark-theme) .blog_border {
        background: #252525;
        box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    }

    html:not(.light-theme):not(.dark-theme) .blog_border:hover {
        box-shadow: 0 8px 28px rgba(0,0,0,0.35);
    }

    html:not(.light-theme):not(.dark-theme) .blog_date {
        background: linear-gradient(135deg, #2a3040, #253545);
        color: #6090b0;
    }

    html:not(.light-theme):not(.dark-theme) .blog_title,
    html:not(.light-theme):not(.dark-theme) h2.blog_title {
        color: #e0e0e0;
    }

    html:not(.light-theme):not(.dark-theme) .blog_title:hover,
    html:not(.light-theme):not(.dark-theme) h2.blog_title:hover {
        color: #5CC9FF;
    }

    html:not(.light-theme):not(.dark-theme) .blog_text,
    html:not(.light-theme):not(.dark-theme) .first_blog_text {
        color: #a0b0c0;
    }

    html:not(.light-theme):not(.dark-theme) .blog_info {
        color: #6090b0;
    }

    html:not(.light-theme):not(.dark-theme) .blog_author {
        color: #a0b0c0;
    }

    html:not(.light-theme):not(.dark-theme) .blog_author:hover {
        color: #e0e0e0;
    }

    html:not(.light-theme):not(.dark-theme) .feed-hero-cover {
        background: linear-gradient(135deg, #0d1b2a 0%, #1a3050 50%, #2a5580 100%);
    }

    html:not(.light-theme):not(.dark-theme) .post-hero-cover {
        background: linear-gradient(135deg, #1a2530, #1e3040, #253a50);
        color: #6090b0;
    }

    html:not(.light-theme):not(.dark-theme) button#old {
        background: #252525;
        border-color: #3a3a3a;
        color: #a0b0c0;
    }

    html:not(.light-theme):not(.dark-theme) button#old:hover {
        border-color: #5CC9FF;
        color: #e0e0e0;
    }

    html:not(.light-theme):not(.dark-theme) button.my_blog_button {
        background: #2a2a2a;
        border-color: #3a3a3a;
        color: #a0b0c0;
    }

    html:not(.light-theme):not(.dark-theme) button.my_blog_button:hover {
        border-color: #5CC9FF;
        color: #e0e0e0;
        background: #333;
    }

    html:not(.light-theme):not(.dark-theme) .post-back {
        color: #a0b0c0;
    }

    html:not(.light-theme):not(.dark-theme) .post-back:hover {
        color: #e0e0e0;
    }

    html:not(.light-theme):not(.dark-theme) .post-back:visited {
        color: #a0b0c0;
    }

    html:not(.light-theme):not(.dark-theme) h2.blog-title {
        color: #e0e0e0;
    }

    html:not(.light-theme):not(.dark-theme) p.text {
        color: #6090b0;
    }

    html:not(.light-theme):not(.dark-theme) div.blog-text {
        color: #d0d0d0;
    }

    html:not(.light-theme):not(.dark-theme) .post-nav {
        border-top-color: #333;
    }

    html:not(.light-theme):not(.dark-theme) button.nav_post {
        background: #252525;
        border-color: #3a3a3a;
    }

    html:not(.light-theme):not(.dark-theme) button.nav_post:hover {
        border-color: #5CC9FF;
        box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    }

    html:not(.light-theme):not(.dark-theme) button.nav_post .nav-label {
        color: #a0b0c0;
    }

    html:not(.light-theme):not(.dark-theme) button.nav_post .nav-title {
        color: #e0e0e0;
    }

    html:not(.light-theme):not(.dark-theme) button.blocked_nav_post {
        background-color: #1e1e1e;
        border-color: #2a2a2a;
    }

    html:not(.light-theme):not(.dark-theme) button.blocked_nav_post:hover {
        border-color: #2a2a2a;
    }

    html:not(.light-theme):not(.dark-theme) .comment-box {
        border-top-color: #333;
    }

    html:not(.light-theme):not(.dark-theme) h3.comment-title {
        color: #e0e0e0;
    }

    html:not(.light-theme):not(.dark-theme) .comment-wrapper-1,
    html:not(.light-theme):not(.dark-theme) .comment-wrapper-2 {
        border-bottom-color: #333;
    }

    html:not(.light-theme):not(.dark-theme) .profile-name {
        color: #e0e0e0;
    }

    html:not(.light-theme):not(.dark-theme) .comment-text {
        color: #a0b0c0;
    }

    html:not(.light-theme):not(.dark-theme) .comment-date {
        color: #6090b0;
    }

    html:not(.light-theme):not(.dark-theme) .profile-pic {
        background: #2a3040;
    }

    html:not(.light-theme):not(.dark-theme) .comment-prompt,
    html:not(.light-theme):not(.dark-theme) .comment-signed-in {
        color: #a0b0c0;
    }

    html:not(.light-theme):not(.dark-theme) .new-comment-box {
        background-color: #2a2a2a;
        border-color: #3a3a3a;
        color: #e0e0e0;
    }

    html:not(.light-theme):not(.dark-theme) .new-comment-box:focus {
        border-color: #5CC9FF;
    }

    html:not(.light-theme):not(.dark-theme) .new-comment-box::placeholder {
        color: #666;
    }

    html:not(.light-theme):not(.dark-theme) #signed-in-user {
        color: #e0e0e0;
    }

    html:not(.light-theme):not(.dark-theme) button.add-comment {
        background: #4a8a4c;
    }

    html:not(.light-theme):not(.dark-theme) button.add-comment:hover {
        background: #5a9a5c;
    }

    html:not(.light-theme):not(.dark-theme) button.reply {
        color: #5CC9FF;
    }

    html:not(.light-theme):not(.dark-theme) button.reply:hover {
        color: #e0e0e0;
    }

    html:not(.light-theme):not(.dark-theme) button.reply-comment-button {
        background: #4a8a4c;
    }

    html:not(.light-theme):not(.dark-theme) button.reply-comment-button:hover {
        background: #5a9a5c;
    }

    html:not(.light-theme):not(.dark-theme) button.cancel {
        background: #2a2a2a;
        color: #a0b0c0;
        border-color: #3a3a3a;
    }

    html:not(.light-theme):not(.dark-theme) button.cancel:hover {
        background: #333;
    }

    html:not(.light-theme):not(.dark-theme) .text-body {
        color: #d0d0d0;
    }

    html:not(.light-theme):not(.dark-theme) .reply-comment-box {
        background: #2a2a2a;
        border-color: #3a3a3a;
        color: #e0e0e0;
    }

    html:not(.light-theme):not(.dark-theme) .reply-comment-box:focus {
        border-color: #5CC9FF;
    }

    html:not(.light-theme):not(.dark-theme) .title {
        color: #e0e0e0;
    }

    html:not(.light-theme):not(.dark-theme) #text {
        color: #d0d0d0;
    }

    html:not(.light-theme):not(.dark-theme) #text[placeholder]:empty:before {
        color: #555;
    }

    html:not(.light-theme):not(.dark-theme) button.bold,
    html:not(.light-theme):not(.dark-theme) button.italics,
    html:not(.light-theme):not(.dark-theme) button.underline,
    html:not(.light-theme):not(.dark-theme) button.left-align,
    html:not(.light-theme):not(.dark-theme) button.center-align,
    html:not(.light-theme):not(.dark-theme) button.right-align {
        background-color: #2a2a2a;
        border-color: #3a3a3a;
        color: #e0e0e0;
    }

    html:not(.light-theme):not(.dark-theme) button.bold:hover,
    html:not(.light-theme):not(.dark-theme) button.italics:hover,
    html:not(.light-theme):not(.dark-theme) button.underline:hover,
    html:not(.light-theme):not(.dark-theme) button.left-align:hover,
    html:not(.light-theme):not(.dark-theme) button.center-align:hover,
    html:not(.light-theme):not(.dark-theme) button.right-align:hover {
        background-color: #333;
        border-color: #5CC9FF;
    }

    html:not(.light-theme):not(.dark-theme) button.left-align {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='15' y2='12'/%3E%3Cline x1='3' y1='18' x2='18' y2='18'/%3E%3C/svg%3E");
    }

    html:not(.light-theme):not(.dark-theme) button.center-align {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3Cline x1='4' y1='18' x2='20' y2='18'/%3E%3C/svg%3E");
    }

    html:not(.light-theme):not(.dark-theme) button.right-align {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='9' y1='12' x2='21' y2='12'/%3E%3Cline x1='6' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
    }

    html:not(.light-theme):not(.dark-theme) .date_form input,
    html:not(.light-theme):not(.dark-theme) .right input,
    html:not(.light-theme):not(.dark-theme) .right select {
        background-color: #2a2a2a;
        color: #e0e0e0;
        border-color: #3a3a3a;
    }

    html:not(.light-theme):not(.dark-theme) button.blog_button#publish {
        background: #4a8a4c;
        border-color: #4a8a4c;
    }

    html:not(.light-theme):not(.dark-theme) button.blog_button#publish:hover {
        background: #5a9a5c;
        border-color: #5a9a5c;
    }

    html:not(.light-theme):not(.dark-theme) button.blog_button#delete {
        color: #f87171;
        border-color: #3a1a1a;
    }

    html:not(.light-theme):not(.dark-theme) button.blog_button#delete:hover {
        background: #3a1a1a;
        border-color: #f87171;
    }

    html:not(.light-theme):not(.dark-theme) .sidebar-card iframe {
        filter: invert(1) hue-rotate(180deg);
    }

    html:not(.light-theme):not(.dark-theme) .sidebar-overlay {
        background: rgba(0,0,0,0.6);
    }

    html:not(.light-theme):not(.dark-theme) .sidebar-toggle {
        color: #e0e0e0;
    }

    html:not(.light-theme):not(.dark-theme) .sidebar-close {
        color: #a0b0c0;
    }

    html:not(.light-theme):not(.dark-theme) .unpublished {
        opacity: 0.5;
    }
}

/* ==========================================================================
   Mobile Sidebar Dark Mode
   Overrides responsive CSS hardcoded colors for sidebar drawer
   ========================================================================== */

@media (max-width: 900px) {
    html.dark-theme .responsive .sidebar-toggle {
        background-color: #252525;
        box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    }

    html.dark-theme .responsive .right {
        background-color: #1a1a1a;
        box-shadow: -2px 0 10px rgba(0,0,0,0.4);
    }

    html.dark-theme .responsive .sidebar-close {
        color: #e0e0e0;
    }
}

@media (max-width: 900px) and (prefers-color-scheme: dark) {
    html:not(.light-theme):not(.dark-theme).responsive .sidebar-toggle,
    html:not(.light-theme):not(.dark-theme) .responsive .sidebar-toggle {
        background-color: #252525;
        box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    }

    html:not(.light-theme):not(.dark-theme).responsive .right,
    html:not(.light-theme):not(.dark-theme) .responsive .right {
        background-color: #1a1a1a;
        box-shadow: -2px 0 10px rgba(0,0,0,0.4);
    }

    html:not(.light-theme):not(.dark-theme).responsive .sidebar-close,
    html:not(.light-theme):not(.dark-theme) .responsive .sidebar-close {
        color: #e0e0e0;
    }
}