/**
 * Dear Dark Mode - 深色模式样式
 * 完全兼容 Dear 主题的 CSS 变量系统
 */

/* 深色模式主题变量覆盖 - 完全对齐 Dear 主题的 :root 变量 */
body.dark {
    --background-color: #191a1c;
    --heading-color: #eee;
    --text-color: rgba(255,255,255,.86);
    --link-color: #888;
    --visited-color: #888;
    --code-background-color: #000;
    --code-color: #ddd;
    --blockquote-color: #ccc;
    --gray-color: #888;
}

/* 自动模式 - 跟随系统 */
@media (prefers-color-scheme: dark) {
    body.auto {
        --background-color: #191a1c;
        --heading-color: #eee;
        --text-color: rgba(255,255,255,.86);
        --link-color: #888;
        --visited-color: #888;
        --code-background-color: #000;
        --code-color: #ddd;
        --blockquote-color: #ccc;
        --gray-color: #888;
    }
}

/* 深色模式下的 body 背景 */
body.dark,
body.auto {
    background-color: var(--background-color);
    color: var(--text-color);
}

/* 深色模式下的标题颜色 */
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6,
body.dark .single-title,
body.dark .archive-title,
body.dark .comments-stats-title,
body.dark .tags-page-title {
    color: var(--heading-color);
}

/* 深色模式下的链接颜色 */
body.dark a {
    color: inherit;
}

body.dark a:visited {
    color: inherit;
}

body.dark ul.posts li a:visited {
    color: inherit;
}

/* 深色模式下的文章列表样式 */
body.dark .posts li {
    color: var(--text-color);
}

body.dark .posts li time {
    color: var(--gray-color);
}

/* 深色模式下的分页导航 */
body.dark .pagination .page-numbers {
    color: var(--gray-color);
}

body.dark .pagination .page-numbers.current {
    color: inhert;
    text-decoration-color: inherit;
}

body.dark .page-links a,
body.dark .post-page-numbers {
    color: inherit;
}

body.dark .post-page-numbers.current {
    color: inherit;
}

/* 深色模式下的代码块 */
body.dark code {
    background-color: var(--code-background-color);
    color: var(--code-color);
}

body.dark pre {
    background-color: var(--code-background-color);
    color: var(--code-color);
}

/* 深色模式下的引用块 */
body.dark blockquote {
    border-left-color: var(--gray-color);
    color: var(--blockquote-color);
}

/* 深色模式下的输入框和文本域 */
body.dark input,
body.dark textarea {
    background-color: var(--background-color);
    color: var(--text-color);
    border-color: var(--gray-color);
}

body.dark input:focus,
body.dark textarea:focus {
    border-color: inherit;
    outline: none;
}

/* 深色模式下的提交按钮 */
body.dark input[type="submit"] {
    background-color: var(--heading-color);
    color: var(--background-color);
    border-color: var(--heading-color);
}

body.dark input[type="submit"]:hover {
    opacity: 0.8;
    cursor: pointer;
}

/* 深色模式下的水平分隔线 */
body.dark hr {
    border-top-color: var(--gray-color);
}

body.dark hr.wp-block-separator,
body.dark hr.styled-separator {
    background: linear-gradient(to left, var(--gray-color) calc(50% - 16px), transparent 0, transparent calc(50% + 16px), var(--gray-color) 0);
}

body.dark hr:before,
body.dark hr:after,
body.dark hr.styled-separator:before,
body.dark hr.styled-separator:after {
    background: var(--gray-color);
}

/* 深色模式下的文章元数据 */
body.dark .single-meta,
body.dark .article--meta,
body.dark .archive--meta {
    color: var(--gray-color);
}

body.dark .single-meta a,
body.dark .article--meta a,
body.dark .archive--meta a {
    color: var(--gray-color);
}

body.dark .single-meta a:hover,
body.dark .article--meta a:hover {
    color: inherit;
}

/* 深色模式下的标签 */
body.dark .tags {
    color: var(--gray-color);
}

body.dark .tags a {
    color: inherit;
}

body.dark .tags a:hover {
    text-decoration: underline;
}

/* 深色模式下的评论区域 */
body.dark .comment {
    color: var(--text-color);
}

body.dark .comment .comment {
    border-left-color: var(--gray-color);
}

body.dark .comment-meta {
    color: var(--gray-color);
}

body.dark .comment-meta a {
    color: var(--gray-color);
}

body.dark .comment-meta a:hover {
    color: inherit;
}

body.dark .comment-content {
    color: var(--text-color);
}

body.dark .comment-content a {
    color: inherit;
}

body.dark .reply a {
    color: inherit;
}

body.dark #cancel-comment-reply-link {
    color: inherit;
}

/* 深色模式下的评论表单 */
body.dark .comment-notes,
body.dark .logged-in-as,
body.auto .comment-notes,
body.auto .logged-in-as {
    color: var(--gray-color);
}

body.dark .comment-form input,
body.dark .comment-form textarea {
    background-color: var(--background-color);
    color: var(--text-color);
    border-color: var(--gray-color);
}

body.dark .comment-form .submit, body.auto .comment-form .submit {
    background-color: inherit;
    color: inherit;
    border-color: var(--gray-color);
}

body.dark .comment--location, body.auto .comment--location {
	fill: var(--code-color) !important;
}

/* 深色模式下的归档页面 */
body.dark .archive--list:before {
    color: var(--gray-color);
}

body.dark .archive--item, body.auto .archive--item {
    border-bottom-color: var(--gray-color);
}

body.dark .archive--title a {
    color: inherit;
}

body.dark .archive--title a:hover {
    text-decoration: underline;
}

body.dark .archive--meta {
    color: var(--gray-color);
}

/* 深色模式下的统计页面 */
body.dark .stats-section {
    border-left-color: var(--gray-color);
}

body.dark .stats-section__title {
    color: var(--heading-color);
}

body.dark .stats-item {
    color: var(--text-color);
}

body.dark .stats-date,
body.dark .stats-author,
body.dark .stats-content,
body.dark .stats-count,
body.dark .stats-time {
    color: var(--gray-color);
}

body.dark .stats-link {
    color: inherit;
}

/* 深色模式下的标签云页面 */
body.dark .tags-cloud {
    color: var(--text-color);
}

body.dark .round-letter {
    color: var(--heading-color);
}

/* 深色模式下的相关文章 */
body.dark .related-posts__title {
    color: var(--heading-color);
}

body.dark .related-posts__date {
    color: var(--gray-color);
}

body.dark .related-posts__link {
    color: inherit;
}

body.dark .related-posts__link:hover {
    text-decoration: underline;
}

body.dark .related-posts__empty {
    color: var(--gray-color);
}

/* 深色模式下的文章导航 */
body.dark .post-navigation {
    color: var(--gray-color);
}

body.dark .nav-link {
    color: inherit;
}

body.dark .nav-link:hover {
    text-decoration: underline;
}

/* 深色模式下的画廊 */
body.dark .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff !important;
}

body.dark figure.wp-block-image img {
    border-color: rgba(255, 255, 255, 0.1);
}

/* 深色模式下的表格 */
body.dark table {
    border-color: var(--gray-color);
}

body.dark td,
body.dark th {
    border-color: var(--gray-color);
}

body.dark .wp-block-table.is-style-stripes tbody tr:nth-child(odd),
body.dark tr:hover,
body.auto .wp-block-table.is-style-stripes tbody tr:nth-child(odd),
body.auto tr:hover {
    background-color: #222 !important;
}

/* 深色模式下的 EXIF 信息 */
body.dark div.exif-caption:before {
    background-color: #fff;
    color: #111;
}

/* 深色模式下的视频说明 */
body.dark .videocaption {
    color: var(--gray-color);
}

/* 深色模式下的按钮 */
body.dark .dear-dark-mode-switch button, body.auto .dear-dark-mode-switch button, body .dear-dark-mode-switch button {
	background-color: inherit !important;
	color: var(--gray-color);
	border: none !important;
}

.dark-mode-toggle.active {
	color: inherit !important;
}

body.dark button:hover {
    opacity: 0.8;
}

/* 深色模式下的点赞按钮 */
body.dark .wpl-button {
    color: var(--text-color) !important;
}

body.dark .wpl-button svg {
    fill: var(--text-color);
}

body.dark .wpl-button.is-active svg,
body.dark .wpl-button:hover svg {
    fill: inherit;
}

/* 深色模式下的选择文本颜色 */
body.dark ::selection {
    background-color: inherit;
    color: var(--background-color);
}

body.dark ::-moz-selection {
    background-color: inherit;
    color: var(--background-color);
}

/* 深色模式下的滚动条（WebKit） */
body.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.dark ::-webkit-scrollbar-track {
    background: var(--background-color);
}

body.dark ::-webkit-scrollbar-thumb {
    background: var(--gray-color);
    border-radius: 4px;
}

body.dark ::-webkit-scrollbar-thumb:hover {
    background: inherit;
}