/* Dark Mode Toggle Button */
.dmb-switch {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px; 
}

/* 移动端和平板设备上的样式 */
@media (max-width: 1024px) {
    /* 移动端菜单容器中的切换按钮样式 */
    li.dmb-switch-container {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        text-align: left !important;
    }
    
    /* 确保切换按钮本身与菜单文字对齐 */
    .dmb-switch {
        margin-left: 0 !important;
        align-self: flex-start !important;
    }
    
    /* 移动端导航展开时的特殊处理 */
    .mobile-menu nav[data-id="mobile-menu"] li.dmb-switch-container,
    .mobile-menu .menu-container li.dmb-switch-container {
        padding-left: 30px !important;
    }
}

.dmb-switch svg {
    width: 20px; /* Adjust size as needed */
    height: 20px; /* Adjust size as needed */
    fill: var(--theme-palette-color-4, #293241); /* Using theme-palette-color-4 for light mode */
    stroke: var(--theme-palette-color-4, #293241); /* Adding stroke for light mode */
}

/* Sun icon for light mode */
.dmb-sun-icon {
    display: block;
}

/* Moon icon for dark mode */
.dmb-moon-icon {
    display: none;
}

/* Dark Mode Active Styles */
html.dmb-html-dark .dmb-sun-icon {
    display: none;
}

html.dmb-html-dark .dmb-moon-icon {
    display: block;
}

/* Image Brightness in Dark Mode */
html.dmb-html-dark img {
    filter: brightness(90%);
}

/* Specific Blocksy theme elements might need more targeted selectors if the CSS variables are not enough */
/* For example, to ensure header and footer backgrounds change */
html.dmb-html-dark [data-header*="background"],
html.dmb-html-dark [data-footer*="background"] {
    background-color: var(--theme-palette-color-8, #293241);
}

html.dmb-html-dark {
    /* Define key WordPress and Blocksy color variables for dark mode */
    /* These ensure that WP block styles and theme's generic link styles adapt */

    /* WordPress Core Block Palette Variables */
    --wp--preset--color--palette-color-3: #ffffff; /* e.g., For links that used palette-color-3 */
    --wp--preset--color--palette-color-4: #E7E9EF; /* e.g., For links/text that used palette-color-4 */
    
    /* Blocksy Theme Specific Global Variables */
    --theme-link-initial-color: #98c1d9; /* Default link color in dark mode - can be any light color */
    --theme-link-hover-color: #98c1d9;   /* Link hover color in dark mode */
    --theme-link-active-color: #98c1d9;   /* Link active color in dark mode */
    /* You might need to redefine other --theme-palette-color-X if they are used by these WP presets as fallbacks */
    /* For now, focusing on the direct ones mentioned */

    /* Ensure our primary dark mode colors from PHP are also defined here to be safe, */
    /* although they are primarily set via JS. This acts as a fallback or CSS-only context. */
    --theme-palette-color-1: #98c1d9; 
    --theme-palette-color-2: #98c1d9; 
    --theme-palette-color-3: #ffffff; 
    --theme-palette-color-4: #ffffff; 
    --theme-palette-color-5: #E7E9EF;
    --theme-palette-color-6: #475671;
    --theme-palette-color-7: #293241;
    --theme-palette-color-8: #293241;

    background-color: var(--theme-palette-color-7, #293241);
    color: var(--theme-palette-color-3, #ffffff);
}

/* 内容链接样式 */
html.dmb-html-dark .entry-title a,
html.dmb-html-dark .ct-title a {
    color: #ffffff !important;
}

/* Headings and Titles */
html.dmb-html-dark h1,
html.dmb-html-dark h2,
html.dmb-html-dark h3,
html.dmb-html-dark h4,
html.dmb-html-dark h5,
html.dmb-html-dark h6,
html.dmb-html-dark .ct-module-title,
html.dmb-html-dark .entry-title,      /* Re-added for general entry titles */
html.dmb-html-dark .entry-title a,   /* Specific for linked entry titles */
html.dmb-html-dark .page-title,      /* Re-added for page titles */
html.dmb-html-dark .ct-title,        /* Re-added for ct-titles */
html.dmb-html-dark [data-content*="title"], /* Re-added generic title matcher */
html.dmb-html-dark .site-title, 
html.dmb-html-dark .site-title a,
html.dmb-html-dark [data-id="logo"] .site-title a, 
html.dmb-html-dark .site-brand .site-title a {
    color: #ffffff !important; /* Ensure these are white */
}

/* Borders and dividers */
html.dmb-html-dark hr,
html.dmb-html-dark .ct-divider {
    border-color: var(--theme-palette-color-5, #E7E9EF);
}

/* Subtle backgrounds (e.g., footer) */
html.dmb-html-dark [data-column*="background"],
html.dmb-html-dark [data-section*="background"],
html.dmb-html-dark .ct-footer-lower-row {
     background-color: var(--theme-palette-color-6, #f3f4f7);
}

/* Ensure text within these subtle backgrounds is also styled */
html.dmb-html-dark [data-column*="background"] *,
html.dmb-html-dark [data-section*="background"] *,
html.dmb-html-dark .ct-footer-lower-row * {
    /* This might be too broad, needs testing. 
       If elements inside these sections have their own specific colors, 
       they might need more specific overrides or ensure they inherit. */
    color: var(--theme-palette-color-3, #ffffff);
}

/* Blocksy specific: Header Menu Text Color in Dark Mode */
html.dmb-html-dark [data-header] .ct-header-item .ct-menu-link,
html.dmb-html-dark [data-header] .ct Suffix .ct-header-item .ct-label {
    color: var(--theme-palette-color-4, #ffffff) !important; /* Important to override theme inline styles if any */
}

/* Ensure the toggle button icon color matches menu text in dark mode */
html.dmb-html-dark .dmb-switch svg {
    fill: var(--theme-palette-color-4, #ffffff);
    stroke: var(--theme-palette-color-4, #ffffff); /* Adding stroke for dark mode */
}

/*
 * Meta Information, Author, Categories, Comments - Core Styling for Dark Mode
 */

/* General text in meta, comment content, author bio */
html.dmb-html-dark .entry-meta,
html.dmb-html-dark .entry-meta span,
html.dmb-html-dark .author-box-bio,
html.dmb-html-dark .comment-content,
html.dmb-html-dark .comment-content p,
html.dmb-html-dark .comment-notes,
html.dmb-html-dark .comment-meta,
html.dmb-html-dark .ct-comment-time {
    color: var(--theme-palette-color-5, #E7E9EF) !important;
}

/* Links: categories, author names, comment author, reply/edit links */
html.dmb-html-dark .entry-meta a,
html.dmb-html-dark .author-box-name,
html.dmb-html-dark .author-box-name a,
html.dmb-html-dark .comment-author .fn, /* Covers text and link */
html.dmb-html-dark .ct-comment-author-name, /* Covers text and link for Blocksy */
html.dmb-html-dark .comment-reply-link,
html.dmb-html-dark .comment-edit-link,
html.dmb-html-dark .logged-in-as a {
    color: var(--theme-palette-color-3, #ffffff) !important;
}
html.dmb-html-dark .entry-meta a:hover,
html.dmb-html-dark .author-box-name a:hover,
html.dmb-html-dark .comment-author .fn a:hover,
html.dmb-html-dark .ct-comment-author-name a:hover,
html.dmb-html-dark .comment-reply-link:hover,
html.dmb-html-dark .comment-edit-link:hover,
html.dmb-html-dark .logged-in-as a:hover {
    color: #cccccc !important;
}

/* Blocksy's entry tags styling */
html.dmb-html-dark .entry-tags .entry-tags-items a {
    color: #ffffff !important;
    box-shadow: inset 0px 0px 0px 1px var(--theme-border-color, #555555) !important;
    background-color: transparent !important;
}
html.dmb-html-dark .entry-tags .entry-tags-items a:hover {
    background-color: #383838 !important;
    color: #ffffff !important; /* Ensure text remains white on hover */
    box-shadow: inset 0px 0px 0px 1px var(--theme-border-color, #383838) !important;
}

/* Comment section titles */
html.dmb-html-dark .comments-title,
html.dmb-html-dark #reply-title,
html.dmb-html-dark .comment-reply-title {
    color: var(--theme-palette-color-3, #ffffff) !important;
}

/* Ensure SVG icons in meta inherit text color where appropriate */
html.dmb-html-dark .entry-meta li svg {
    fill: currentColor !important;
}