/**
 * Le Rufisquois — Dark Mode Styles
 * @package le-rufisquois
 */

/* =============================================
   DARK MODE VARIABLES
   ============================================= */
[data-theme="dark"] {
    --color-bg:           #0f0f0f;
    --color-bg-2:         #1a1a1a;
    --color-bg-3:         #242424;
    --color-bg-card:      #1e1e1e;
    --color-text:         #e0e0e0;
    --color-text-muted:   #999999;
    --color-heading:      #f0f0f0;
    --color-border:       #333333;
    --color-shadow:       rgba(0, 0, 0, 0.6);
    --color-overlay:      rgba(0, 0, 0, 0.85);
    --color-input-bg:     #2a2a2a;
    --color-input-border: #444444;
    --color-link:         #66b2ff;
    --color-link-hover:   #FFD700;
}

[data-theme="light"] {
    --color-bg:           #ffffff;
    --color-bg-2:         #f8f8f8;
    --color-bg-3:         #f0f0f0;
    --color-bg-card:      #ffffff;
    --color-text:         #333333;
    --color-text-muted:   #666666;
    --color-heading:      #1a1a1a;
    --color-border:       #e0e0e0;
    --color-shadow:       rgba(0, 0, 0, 0.08);
    --color-overlay:      rgba(0, 0, 0, 0.5);
    --color-input-bg:     #ffffff;
    --color-input-border: #cccccc;
    --color-link:         #006B3C;
    --color-link-hover:   #004d2a;
}

/* =============================================
   GLOBAL DARK OVERRIDES
   ============================================= */
[data-theme="dark"] body {
    background-color: var(--color-bg);
    color: var(--color-text);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--color-heading);
}

[data-theme="dark"] a {
    color: var(--color-link);
}

[data-theme="dark"] a:hover {
    color: var(--color-link-hover);
}

/* =============================================
   HEADER DARK
   ============================================= */
[data-theme="dark"] #site-header {
    background-color: #111111;
    border-bottom-color: #2a2a2a;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

[data-theme="dark"] #site-header.is-sticky {
    background-color: rgba(17, 17, 17, 0.97);
}

[data-theme="dark"] .top-bar {
    background-color: #0a0a0a;
    border-bottom-color: #222222;
    color: #aaaaaa;
}

[data-theme="dark"] .top-bar a {
    color: #aaaaaa;
}

[data-theme="dark"] .top-bar a:hover {
    color: var(--color-gold);
}

/* =============================================
   NAVIGATION DARK
   ============================================= */
[data-theme="dark"] .primary-nav .nav-item > a {
    color: #cccccc;
}

[data-theme="dark"] .primary-nav .nav-item > a:hover,
[data-theme="dark"] .primary-nav .nav-item.current-menu-item > a {
    color: var(--color-gold);
}

[data-theme="dark"] .sub-menu,
[data-theme="dark"] .mega-menu-panel {
    background-color: #1a1a1a;
    border-color: #2d2d2d;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}

[data-theme="dark"] .sub-menu a:hover {
    background-color: #252525;
    color: var(--color-gold);
}

/* =============================================
   ARTICLE CARDS DARK
   ============================================= */
[data-theme="dark"] .article-card {
    background-color: var(--color-bg-card);
    border-color: var(--color-border);
    box-shadow: 0 2px 8px var(--color-shadow);
}

[data-theme="dark"] .article-card:hover {
    box-shadow: 0 8px 24px var(--color-shadow);
}

[data-theme="dark"] .card-title a {
    color: var(--color-heading);
}

[data-theme="dark"] .card-title a:hover {
    color: var(--color-gold);
}

[data-theme="dark"] .card-excerpt {
    color: var(--color-text-muted);
}

[data-theme="dark"] .card-meta,
[data-theme="dark"] .meta-date,
[data-theme="dark"] .meta-author a {
    color: var(--color-text-muted);
}

/* =============================================
   HERO SECTION DARK
   ============================================= */
[data-theme="dark"] .hero-section {
    background-color: #0d0d0d;
}

[data-theme="dark"] .hero-side-list {
    background-color: #151515;
    border-color: #2a2a2a;
}

/* =============================================
   SECTIONS DARK
   ============================================= */
[data-theme="dark"] .home-section {
    background-color: var(--color-bg);
}

[data-theme="dark"] .home-section:nth-child(even) {
    background-color: var(--color-bg-2);
}

[data-theme="dark"] .section-title {
    color: var(--color-heading);
    border-color: var(--color-primary);
}

[data-theme="dark"] .section-title::after {
    background-color: var(--color-primary);
}

/* =============================================
   SIDEBAR DARK
   ============================================= */
[data-theme="dark"] .widget {
    background-color: var(--color-bg-card);
    border-color: var(--color-border);
}

[data-theme="dark"] .widget-header {
    background-color: var(--color-bg-2);
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .widget-title {
    color: var(--color-heading);
}

[data-theme="dark"] .trending-title a {
    color: var(--color-text);
}

[data-theme="dark"] .trending-title a:hover {
    color: var(--color-gold);
}

[data-theme="dark"] .trending-date {
    color: var(--color-text-muted);
}

[data-theme="dark"] .trending-rank {
    background-color: var(--color-primary);
    color: #fff;
}

[data-theme="dark"] .tag-pill {
    background-color: var(--color-bg-3);
    color: var(--color-text);
    border-color: var(--color-border);
}

[data-theme="dark"] .tag-pill:hover {
    background-color: var(--color-primary);
    color: #fff;
}

/* =============================================
   FORMS DARK
   ============================================= */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--color-input-bg);
    border-color: var(--color-input-border);
    color: var(--color-text);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #666666;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 107, 60, 0.3);
}

/* =============================================
   SEARCH OVERLAY DARK
   ============================================= */
[data-theme="dark"] #search-overlay {
    background-color: rgba(0, 0, 0, 0.97);
}

[data-theme="dark"] #search-overlay-input {
    background: transparent;
    border-bottom-color: #444444;
    color: #ffffff;
}

/* =============================================
   SINGLE ARTICLE DARK
   ============================================= */
[data-theme="dark"] .single-article {
    background-color: var(--color-bg);
}

[data-theme="dark"] .article-body {
    color: var(--color-text);
}

[data-theme="dark"] .article-body p {
    color: #d0d0d0;
}

[data-theme="dark"] .article-body blockquote {
    background-color: var(--color-bg-2);
    border-left-color: var(--color-primary);
    color: var(--color-text-muted);
}

[data-theme="dark"] .article-body code {
    background-color: #2a2a2a;
    color: #FFD700;
}

[data-theme="dark"] .article-body pre {
    background-color: #1a1a1a;
    border-color: #333333;
}

[data-theme="dark"] .article-header {
    background-color: var(--color-bg);
}

[data-theme="dark"] .article-title {
    color: var(--color-heading);
}

[data-theme="dark"] .article-meta-bar {
    background-color: var(--color-bg-2);
    border-color: var(--color-border);
}

/* =============================================
   AUTHOR BOX DARK
   ============================================= */
[data-theme="dark"] .author-box {
    background-color: var(--color-bg-2);
    border-color: var(--color-border);
}

[data-theme="dark"] .author-info h3,
[data-theme="dark"] .author-info h4 {
    color: var(--color-heading);
}

[data-theme="dark"] .author-info p {
    color: var(--color-text-muted);
}

/* =============================================
   COMMENTS DARK
   ============================================= */
[data-theme="dark"] .comments-section {
    background-color: var(--color-bg);
}

[data-theme="dark"] .comment-item {
    background-color: var(--color-bg-2);
    border-color: var(--color-border);
}

[data-theme="dark"] .comment-author-name {
    color: var(--color-heading);
}

[data-theme="dark"] .comment-body {
    color: var(--color-text);
}

[data-theme="dark"] .comment-reply-link {
    color: var(--color-primary-light);
}

/* =============================================
   FOOTER DARK
   ============================================= */
[data-theme="dark"] #site-footer {
    background-color: #090909;
    border-top-color: #222222;
}

[data-theme="dark"] .footer-main {
    background-color: #111111;
}

[data-theme="dark"] .footer-title {
    color: var(--color-gold);
}

[data-theme="dark"] .footer-main a {
    color: #aaaaaa;
}

[data-theme="dark"] .footer-main a:hover {
    color: var(--color-gold);
}

[data-theme="dark"] .footer-bottom {
    background-color: #050505;
    color: #666666;
}

/* =============================================
   ARCHIVE & 404 DARK
   ============================================= */
[data-theme="dark"] .archive-header {
    background-color: #111111;
}

[data-theme="dark"] .archive-title {
    color: #ffffff;
}

[data-theme="dark"] .error-404-page {
    background-color: var(--color-bg);
}

[data-theme="dark"] .error-404-number .digit {
    color: var(--color-primary-light);
}

/* =============================================
   WEATHER DARK
   ============================================= */
[data-theme="dark"] .widget-weather {
    background: linear-gradient(135deg, #1a2a1a, #0d1a10);
}

[data-theme="dark"] .weather-temp {
    color: var(--color-gold);
}

[data-theme="dark"] .weather-icon i {
    color: var(--color-gold);
}

/* =============================================
   BREAKING NEWS DARK
   ============================================= */
[data-theme="dark"] .breaking-news-bar {
    background-color: #8b0000;
}

/* =============================================
   PAGINATION DARK
   ============================================= */
[data-theme="dark"] .page-numbers {
    background-color: var(--color-bg-2);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .page-numbers.current,
[data-theme="dark"] .page-numbers:hover {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

/* =============================================
   DARK MODE TOGGLE BUTTON
   ============================================= */
#dark-mode-toggle {
    background: none;
    border: 2px solid currentColor;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: inherit;
    font-size: 1rem;
}

#dark-mode-toggle:hover {
    background-color: rgba(255, 215, 0, 0.15);
    border-color: var(--color-gold);
    color: var(--color-gold);
}

[data-theme="dark"] #dark-mode-toggle {
    color: var(--color-gold);
    border-color: var(--color-gold);
}

/* =============================================
   SMOOTH TRANSITIONS
   ============================================= */
body,
.article-card,
.widget,
#site-header,
.sub-menu,
input,
textarea,
.tag-pill {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}