/**
 * Dark Mode Styles - KodeHelp Theme v3.0
 *
 * @package KodeHelp
 */

/* Smooth transitions for theme switching */
body,
.site-header,
.post-card,
.article-card,
.widget,
.comment-body,
.comment-respond,
.search-modal-content,
.author-bio,
.entry-share {
    transition: background-color var(--duration-slow) var(--ease-out),
                color var(--duration-slow) var(--ease-out),
                border-color var(--duration-slow) var(--ease-out),
                box-shadow var(--duration-slow) var(--ease-out);
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    color: var(--color-ink-light);
    transition: all var(--duration-fast) var(--ease-out);
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
}

.dark-mode-toggle:hover {
    color: var(--color-accent);
    background-color: var(--color-surface-sunken);
}

.dark-mode-toggle .sun-icon,
.dark-mode-toggle .moon-icon {
    position: absolute;
    transition: opacity var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}

.dark-mode-toggle .moon-icon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.8);
}

.dark-mode .dark-mode-toggle .sun-icon {
    opacity: 0;
    transform: rotate(90deg) scale(0.8);
}

.dark-mode .dark-mode-toggle .moon-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* ==========================================================================
   Dark Mode CSS Variables Override
   ========================================================================== */

.dark-mode {
    --color-ink: #e2e8f0;
    --color-ink-light: #94a3b8;
    --color-ink-muted: #64748b;
    --color-accent: #5b6eff;
    --color-accent-text: #7b8eff; /* lighter for readability on dark backgrounds */
    --color-accent-hover: #8090ff;
    --color-accent-light: rgba(91, 110, 255, 0.1);
    --color-accent-glow: rgba(91, 110, 255, 0.2);
    --color-heading: #e2e8f0;
    --color-surface: #0f172a;
    --color-surface-raised: #1e293b;
    --color-surface-sunken: #1a2332;
    --color-border: #334155;
    --color-border-light: #1e293b;
    --color-code-bg: #1e293b;
    --color-code-text: #e2e8f0;
    --color-success: #34d399;
    --color-warning: #fbbf24;
    --color-error: #fb7185;
    --color-info: #60a5fa;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 0 4px rgba(91, 110, 255, 0.15);
}

/* ==========================================================================
   Header Dark Mode
   ========================================================================== */

.dark-mode .site-header {
    background-color: rgba(15, 23, 42, 0.88);
    border-bottom-color: var(--color-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.dark-mode .site-logo-text {
    color: var(--color-accent);
}

.dark-mode .primary-menu-container a {
    color: var(--color-ink-light);
}

.dark-mode .primary-menu-container a:hover {
    color: var(--color-accent);
    background-color: var(--color-accent-light);
}

.dark-mode .primary-menu-container .current-menu-item > a,
.dark-mode .primary-menu-container .current_page_item > a {
    color: var(--color-accent);
    background-color: var(--color-accent-light);
}

.dark-mode .menu-toggle-icon span {
    background-color: var(--color-ink);
}

.dark-mode .primary-menu-container .sub-menu {
    background-color: var(--color-surface-raised);
    border-color: var(--color-border);
    box-shadow: var(--shadow-xl);
}

/* Search Modal */
.dark-mode .search-modal {
    background-color: rgba(0, 0, 0, 0.7);
}

.dark-mode .search-modal-content {
    background-color: var(--color-surface-raised);
}

.dark-mode .search-close {
    background-color: var(--color-surface-sunken);
    color: var(--color-ink-muted);
}

.dark-mode .search-close:hover {
    background-color: var(--color-border);
    color: var(--color-ink);
}

.dark-mode .search-field {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-ink);
}

.dark-mode .search-field:focus {
    border-color: var(--color-accent);
}

.dark-mode .search-suggestions {
    border-top-color: var(--color-border);
}

.dark-mode .search-tag {
    background-color: var(--color-surface-sunken);
    color: var(--color-ink-light);
}

.dark-mode .search-tag:hover {
    background-color: var(--color-accent);
    color: #ffffff;
}

/* ==========================================================================
   Hero Section Dark Mode
   ========================================================================== */

.dark-mode .hero-title a {
    color: var(--color-ink);
}

.dark-mode .hero-title a:hover {
    color: var(--color-accent);
}

.dark-mode .hero-excerpt {
    color: var(--color-ink-light);
}

/* ==========================================================================
   Article Cards & Post Cards Dark Mode
   ========================================================================== */

.dark-mode .article-card {
    border-bottom-color: var(--color-border);
}

.dark-mode .article-title a {
    color: var(--color-ink);
}

.dark-mode .article-title a:hover {
    color: var(--color-accent);
}

.dark-mode .post-card {
    border-bottom-color: var(--color-border);
}

.dark-mode .post-title a {
    color: var(--color-ink);
}

.dark-mode .post-title a:hover {
    color: var(--color-accent);
}

.dark-mode .author-name,
.dark-mode .author-meta-small .author-name a {
    color: var(--color-ink);
}

/* ==========================================================================
   Single Post Dark Mode
   ========================================================================== */

.dark-mode .entry-title {
    color: var(--color-ink);
}

.dark-mode .entry-content {
    color: rgba(226, 232, 240, 0.9);
}

.dark-mode .entry-featured-image img {
    opacity: 0.95;
}

.dark-mode .category-badge {
    background-color: var(--color-accent-light);
    color: var(--color-accent);
}

.dark-mode .category-badge:hover {
    background-color: var(--color-accent);
    color: #ffffff;
}

.dark-mode .author-meta img {
    border-color: var(--color-border);
}

/* Code Blocks */
.dark-mode code {
    background-color: var(--color-code-bg);
    color: var(--color-accent);
}

.dark-mode pre {
    background-color: #0c1222;
    border-color: var(--color-border);
}

.dark-mode pre code {
    color: var(--color-code-text);
}

/* Blockquote */
.dark-mode blockquote {
    border-left-color: var(--color-accent);
    background-color: var(--color-accent-light);
    color: var(--color-ink-light);
}

/* Entry Footer */
.dark-mode .entry-footer {
    border-top-color: var(--color-border);
}

.dark-mode .entry-tags a {
    background-color: var(--color-surface-raised);
    color: var(--color-ink-light);
}

.dark-mode .entry-tags a:hover {
    background-color: var(--color-accent);
    color: #ffffff;
}

/* Share Section */
.dark-mode .entry-share {
    border-top-color: var(--color-border);
    border-bottom-color: var(--color-border);
}

.dark-mode .share-btn {
    color: var(--color-ink-light);
    border-color: var(--color-border);
}

.dark-mode .share-btn-x:hover {
    background-color: #e7e9ea;
    border-color: #e7e9ea;
    color: #000000;
}

.dark-mode .bookmark-btn {
    border-color: var(--color-border);
    color: var(--color-ink-muted);
}

.dark-mode .bookmark-btn:hover,
.dark-mode .bookmark-btn.bookmarked {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.dark-mode .share-btn-copy:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #ffffff;
}

.dark-mode .share-btn-native:hover {
    background-color: var(--color-ink-light);
    border-color: var(--color-ink-light);
    color: var(--color-surface);
}

/* Author Bio */
.dark-mode .author-bio {
    background-color: var(--color-surface-raised);
    border-color: var(--color-border);
}

.dark-mode .author-avatar img {
    border-color: var(--color-border);
}

.dark-mode .author-bio-name a {
    color: var(--color-ink);
}

.dark-mode .author-social-link {
    background-color: var(--color-surface);
    color: var(--color-ink-muted);
    border-color: var(--color-border);
}

.dark-mode .author-social-link:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #ffffff;
}

/* Series Navigation */
.dark-mode .series-nav {
    background-color: var(--color-accent-light);
    border-left-color: var(--color-accent);
}

.dark-mode .series-nav-current {
    color: var(--color-ink);
}

/* Post Navigation */
.dark-mode .nav-previous a,
.dark-mode .nav-next a {
    border-color: var(--color-border);
}

.dark-mode .nav-previous a:hover,
.dark-mode .nav-next a:hover {
    border-color: var(--color-accent);
}

.dark-mode .nav-title {
    color: var(--color-ink);
}

/* ==========================================================================
   Comments Dark Mode
   ========================================================================== */

.dark-mode .comments-area {
    border-top-color: var(--color-border);
}

.dark-mode .comment-body {
    background-color: var(--color-surface-raised);
    border-color: var(--color-border);
}

.dark-mode .comment-author-info .fn,
.dark-mode .comment-author-info .fn a {
    color: var(--color-ink);
}

.dark-mode .comment-footer {
    border-top-color: var(--color-border);
}

.dark-mode .comment-list .children {
    border-left-color: var(--color-accent-light);
}

.dark-mode .comment-author-badge {
    background-color: var(--color-accent-light);
    color: var(--color-accent);
}

.dark-mode .comment-respond {
    background-color: var(--color-surface-raised);
    border-color: var(--color-border);
}

.dark-mode .comment-form input[type="text"],
.dark-mode .comment-form input[type="email"],
.dark-mode .comment-form input[type="url"],
.dark-mode .comment-form textarea {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-ink);
}

.dark-mode .comment-form input:focus,
.dark-mode .comment-form textarea:focus {
    border-color: var(--color-accent);
}

/* ==========================================================================
   Archive & Pagination Dark Mode
   ========================================================================== */

.dark-mode .page-header {
    border-bottom-color: var(--color-border);
}

.dark-mode .page-numbers {
    border-color: var(--color-border);
    color: var(--color-ink-light);
}

.dark-mode .page-numbers:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.dark-mode .page-numbers.current {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #ffffff;
}

/* ==========================================================================
   Widgets Dark Mode
   ========================================================================== */

.dark-mode .widget {
    background-color: var(--color-surface-raised);
    border-color: var(--color-border);
}

.dark-mode .widget-title {
    border-bottom-color: var(--color-accent);
}

.dark-mode .widget li {
    border-bottom-color: var(--color-border);
}

.dark-mode .widget a {
    color: var(--color-ink);
}

.dark-mode .widget a:hover {
    color: var(--color-accent);
}

/* ==========================================================================
   Footer Dark Mode
   ========================================================================== */

.dark-mode .site-footer {
    background-color: #020617;
}

/* ==========================================================================
   404 Dark Mode
   ========================================================================== */

.dark-mode .error-404-title {
    color: var(--color-accent);
}

.dark-mode .suggestion-card,
.dark-mode .related-post-card {
    border-color: var(--color-border);
}

.dark-mode .suggestion-card:hover,
.dark-mode .related-post-card:hover {
    border-color: var(--color-accent);
}

.dark-mode .suggestion-card h3,
.dark-mode .related-post-content h3 {
    color: var(--color-ink);
}

/* ==========================================================================
   Buttons Dark Mode
   ========================================================================== */

.dark-mode .btn-secondary {
    background-color: var(--color-surface-raised);
    color: var(--color-ink);
    border-color: var(--color-border);
}

.dark-mode .btn-secondary:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.dark-mode .load-more-btn {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.dark-mode .load-more-btn:hover {
    background-color: var(--color-accent);
    color: #ffffff;
}

/* Code Copy Button */
.dark-mode .code-copy-button {
    background-color: var(--color-surface-raised);
    color: var(--color-ink-muted);
    border-color: var(--color-border);
}

.dark-mode .code-copy-button:hover {
    background-color: var(--color-accent);
    color: #ffffff;
    border-color: var(--color-accent);
}

/* TOC */
.dark-mode .toc-container {
    background-color: var(--color-surface-raised);
    border-color: var(--color-border);
}

.dark-mode .toc-list a:hover,
.dark-mode .toc-list a.active {
    color: var(--color-accent);
    background-color: var(--color-accent-light);
}

/* Breadcrumbs */
.dark-mode .breadcrumb-item a {
    color: var(--color-ink-muted);
}

.dark-mode .breadcrumb-item a:hover {
    color: var(--color-accent);
}

/* Scrollbar */
.dark-mode::-webkit-scrollbar-track {
    background: var(--color-surface);
}

.dark-mode::-webkit-scrollbar-thumb {
    background: var(--color-border);
}

.dark-mode::-webkit-scrollbar-thumb:hover {
    background: var(--color-ink-muted);
}

/* Selection */
.dark-mode ::selection {
    background-color: var(--color-accent-glow);
    color: var(--color-ink);
}

/* ==========================================================================
   Gutenberg Blocks Dark Mode
   ========================================================================== */

.dark-mode .kodehelp-alert-info {
    background-color: rgba(96, 165, 250, 0.1);
    border-color: #60a5fa;
    color: #93c5fd;
}

.dark-mode .kodehelp-alert-success {
    background-color: rgba(52, 211, 153, 0.1);
    border-color: #34d399;
    color: #6ee7b7;
}

.dark-mode .kodehelp-alert-warning {
    background-color: rgba(251, 191, 36, 0.1);
    border-color: #fbbf24;
    color: #fcd34d;
}

.dark-mode .kodehelp-alert-error {
    background-color: rgba(251, 113, 133, 0.1);
    border-color: #fb7185;
    color: #fda4af;
}

.dark-mode .kodehelp-code-demo {
    border-color: var(--color-border);
}

.dark-mode .code-demo-tabs {
    background-color: var(--color-surface-raised);
    border-bottom-color: var(--color-border);
}

.dark-mode .code-demo-tab {
    color: var(--color-ink-muted);
}

.dark-mode .code-demo-tab:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.dark-mode .code-demo-tab.active {
    background-color: var(--color-surface);
    color: var(--color-accent);
}

/* Placeholder Image */
.dark-mode .placeholder-img {
    background-color: var(--color-surface-raised);
    filter: brightness(0.8);
}

/* ==========================================================================
   New Components Dark Mode
   ========================================================================== */

/* Back to Top */
.dark-mode .back-to-top {
    background-color: var(--color-surface-raised);
    border-color: var(--color-border);
    color: var(--color-ink-light);
}

.dark-mode .back-to-top:hover {
    background-color: var(--color-accent);
    color: #ffffff;
    border-color: var(--color-accent);
}

/* Toast */
.dark-mode .kh-toast {
    background-color: var(--color-surface-raised);
    color: var(--color-ink);
    border: 1px solid var(--color-border);
}

/* Article TOC */
.dark-mode .article-toc {
    border-left-color: var(--color-border);
}

.dark-mode .article-toc-list li a {
    color: var(--color-ink-muted);
}

.dark-mode .article-toc-list li a:hover,
.dark-mode .article-toc-list li a.active {
    color: var(--color-accent-text);
}

@media (max-width: 1200px) {
    .dark-mode .article-toc {
        background-color: var(--color-surface-raised);
        border-color: var(--color-border);
    }
}

/* Code Language Label */
.dark-mode .code-lang-label {
    background-color: var(--color-accent);
}

/* Newsletter */
.dark-mode .newsletter-email {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-ink);
}

.dark-mode .newsletter-email:focus {
    border-color: var(--color-accent);
}

/* ==========================================================================
   Mobile Menu Dark Mode
   ========================================================================== */

@media (max-width: 768px) {
    .dark-mode .primary-menu-container {
        background-color: var(--color-surface);
        border-top-color: var(--color-border);
    }
}