/* ═══════════════════════════════════════════
   VAIKOM VARTHA — DARK MODE
   assets/css/darkmode.css
   ═══════════════════════════════════════════ */

/* ── LIGHT (DEFAULT) TOKENS ── */
:root {
    --vv-bg:           #ffffff;
    --vv-surface:      #f9f8f8;
    --vv-surface-2:    #f0f0f0;
    --vv-surface-3:    #fcfcfc;
    --vv-text-primary:   #1a1a1a;
    --vv-text-secondary: #555555;
    --vv-text-muted:     #888888;
    --vv-border:         #eeeeee;
    --vv-border-soft:    #f0f0f0;
    --vv-red:            #C0211B;
    --vv-red-dark:       #8B1310;
    --vv-red-hover-bg:   #fdf2f2;
    --vv-header-bg:      #ffffff;
    --vv-header-text:    #2c3e50;
    --vv-nav-bg:         #ffffff;
    --vv-top-bar-bg:     #ffffff;
    --vv-card-bg:        #ffffff;
    --vv-card-shadow:    0 4px 15px rgba(0,0,0,0.05);
    --vv-card-shadow-hover: 0 12px 25px rgba(0,0,0,0.12);
    --vv-drawer-bg:      #ffffff;
    --vv-drawer-item-hover: #fdf2f2;
    --vv-drawer-border:  #f0f0f0;
    --vv-ink:            #111111;
    --vv-widget-bg:      #ffffff;
    --vv-overlay:        rgba(0,0,0,0.5);
    --vv-search-bg:      #f8f9fa;
    --vv-toggle-track:   #cccccc;
}

/* ── DARK MODE SWAP ── */
[data-theme="dark"] {
    --vv-bg:           #111111;
    --vv-surface:      #1a1a1a;
    --vv-surface-2:    #222222;
    --vv-surface-3:    #181818;
    --vv-text-primary:   #f0f0f0;
    --vv-text-secondary: #aaaaaa;
    --vv-text-muted:     #606060;
    --vv-border:         #2a2a2a;
    --vv-border-soft:    #2e2e2e;
    --vv-red:            #C0211B;
    --vv-red-dark:       #8B1310;
    --vv-red-hover-bg:   rgba(192,33,27,0.12);
    --vv-header-bg:      #161616;
    --vv-header-text:    #e8e8e8;
    --vv-nav-bg:         #161616;
    --vv-top-bar-bg:     #111111;
    --vv-card-bg:        #1a1a1a;
    --vv-card-shadow:    0 4px 15px rgba(0,0,0,0.35);
    --vv-card-shadow-hover: 0 12px 25px rgba(0,0,0,0.55);
    --vv-drawer-bg:      #1a1a1a;
    --vv-drawer-item-hover: rgba(192,33,27,0.12);
    --vv-drawer-border:  #2a2a2a;
    --vv-ink:            #f0f0f0;
    --vv-widget-bg:      #1a1a1a;
    --vv-overlay:        rgba(0,0,0,0.75);
    --vv-search-bg:      #1e1e1e;
    --vv-toggle-track:   #C0211B;
}

/* ── TRANSITION ── */
html { transition: background-color 0.25s ease, color 0.25s ease; }
[data-theme="dark"] body { background-color: var(--vv-bg); color: var(--vv-text-primary); }

/* ── GHOST CORE VARIABLE OVERRIDE ── */
[data-theme="dark"] {
    --color-black:        #f0f0f0;
    --color-darker-gray:  #dddddd;
    --color-dark-gray:    #aaaaaa;
    --color-mid-gray:     #888888;
    --color-light-gray:   #2a2a2a;
    --color-lighter-gray: #1e1e1e;
    --color-white:        #111111;
    --color-primary-text: #f0f0f0;
}

/* ── TYPOGRAPHY ── */
[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(--vv-text-primary) !important; }

[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] blockquote { color: var(--vv-text-secondary); }

[data-theme="dark"] a:not(.ticker-item):not(.social-btn):not(.drawer-social-btn):not(.mobile-quick-links a):not(.hamburger-btn):not(.mobile-menu-submit-btn):not(.gh-btn) {
    color: var(--vv-text-primary);
}
[data-theme="dark"] a:hover { color: var(--vv-red) !important; }

[data-theme="dark"] .featured-excerpt,
[data-theme="dark"] .side-excerpt,
[data-theme="dark"] .card-excerpt,
[data-theme="dark"] .report-excerpt,
[data-theme="dark"] .gh-article-excerpt { color: var(--vv-text-secondary) !important; }

[data-theme="dark"] .card-meta,
[data-theme="dark"] .report-meta,
[data-theme="dark"] time { color: var(--vv-text-muted) !important; }

/* ── BODY / PAGE ── */
[data-theme="dark"] .gh-site,
[data-theme="dark"] .gh-main,
[data-theme="dark"] main { background-color: var(--vv-bg) !important; }

/* ── VAIKOM-HEADER.CSS ── */
[data-theme="dark"] #vaikom-custom-header .top-bar {
    background: var(--vv-top-bar-bg) !important;
    border-bottom-color: var(--vv-border) !important;
}
[data-theme="dark"] #vaikom-custom-header #top-bar-date-time,
[data-theme="dark"] #vaikom-custom-header #top-bar-weather { color: var(--vv-text-secondary) !important; }
[data-theme="dark"] #vaikom-custom-header #top-bar-weather i { color: var(--vv-text-secondary) !important; }
[data-theme="dark"] #vaikom-custom-header .social-btn { color: var(--vv-text-secondary) !important; }
[data-theme="dark"] #vaikom-custom-header .social-btn:hover { color: var(--vv-red) !important; }
[data-theme="dark"] #vaikom-custom-header .main-header {
    background: var(--vv-header-bg) !important;
    border-bottom-color: var(--vv-border) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4) !important;
}
[data-theme="dark"] #vaikom-custom-header .site-title { color: var(--vv-text-primary) !important; }
[data-theme="dark"] #vaikom-custom-header .main-navigation {
    background: var(--vv-nav-bg) !important;
    border-bottom-color: var(--vv-border) !important;
}
[data-theme="dark"] #vaikom-custom-header .main-navigation .nav a { color: var(--vv-text-primary) !important; }
[data-theme="dark"] #vaikom-custom-header .main-navigation .nav a:hover,
[data-theme="dark"] #vaikom-custom-header .main-navigation .nav .nav-current a { color: var(--vv-red) !important; }
[data-theme="dark"] #vaikom-custom-header .ad-banner-section.swiper { background: var(--vv-surface-2) !important; }

/* ── SCREEN.CSS CARDS ── */
[data-theme="dark"] .featured-article,
[data-theme="dark"] .news-card,
[data-theme="dark"] .side-article {
    background: var(--vv-card-bg) !important;
    box-shadow: var(--vv-card-shadow) !important;
}
[data-theme="dark"] .news-card:hover,
[data-theme="dark"] .side-article:hover { box-shadow: var(--vv-card-shadow-hover) !important; }
[data-theme="dark"] .featured-title,
[data-theme="dark"] .side-title,
[data-theme="dark"] .card-title { color: var(--vv-text-primary) !important; }
[data-theme="dark"] .report-item {
    background: var(--vv-card-bg) !important;
    border-color: var(--vv-border) !important;
}
[data-theme="dark"] .report-title { color: var(--vv-text-primary) !important; }

/* ── SECTION-HEADS.CSS ── */
[data-theme="dark"] .section-head { border-bottom-color: var(--vv-ink) !important; }
[data-theme="dark"] .section-head h2 { color: var(--vv-ink) !important; }
[data-theme="dark"] .section-head .see-all { color: var(--vv-ink) !important; }
[data-theme="dark"] .section-head.section-red h2,
[data-theme="dark"] .section-head.section-red .see-all { color: var(--vv-red) !important; }

/* ── SIDEBAR.CSS ── */
[data-theme="dark"] .widget-box {
    background: var(--vv-widget-bg) !important;
    border-color: var(--vv-border) !important;
    box-shadow: var(--vv-card-shadow) !important;
}
[data-theme="dark"] .video-list-title { color: var(--vv-text-primary) !important; }
[data-theme="dark"] .video-item-title { color: var(--vv-text-secondary) !important; }
[data-theme="dark"] .video-list-item { border-bottom-color: var(--vv-border) !important; }

/* ── NEWS-LIST.CSS ── */
[data-theme="dark"] .news-portal-main { background-color: var(--vv-bg) !important; }
[data-theme="dark"] .vibrant-list-card {
    background: var(--vv-card-bg) !important;
    box-shadow: var(--vv-card-shadow) !important;
}
[data-theme="dark"] .vibrant-list-card:hover {
    box-shadow: var(--vv-card-shadow-hover) !important;
    border-left-color: var(--vv-red) !important;
}
[data-theme="dark"] .vibrant-card-content h3,
[data-theme="dark"] .vibrant-card-content h4 { color: var(--vv-text-primary) !important; }
[data-theme="dark"] .vibrant-card-excerpt { color: var(--vv-text-secondary) !important; }

/* ── PREMIUM-MOBILE-NAV.CSS DRAWER ── */
[data-theme="dark"] .main-navigation-content#mobile-nav-content {
    background: var(--vv-drawer-bg) !important;
    box-shadow: -5px 0 25px rgba(0,0,0,0.6) !important;
}
[data-theme="dark"] .main-navigation-content#mobile-nav-content .nav li a {
    color: var(--vv-text-primary) !important;
    border-bottom-color: var(--vv-drawer-border) !important;
}
[data-theme="dark"] .main-navigation-content#mobile-nav-content .nav li a:hover,
[data-theme="dark"] .main-navigation-content#mobile-nav-content .nav li.nav-current a {
    background: var(--vv-drawer-item-hover) !important;
    color: var(--vv-red) !important;
    border-left-color: var(--vv-red) !important;
}
[data-theme="dark"] .mobile-menu-social {
    background: var(--vv-surface) !important;
    border-bottom-color: var(--vv-drawer-border) !important;
}
[data-theme="dark"] .social-label { color: var(--vv-text-muted) !important; }
[data-theme="dark"] .drawer-social-btn { color: var(--vv-text-secondary) !important; }
[data-theme="dark"] .drawer-social-btn:hover { color: var(--vv-red) !important; }
[data-theme="dark"] .mobile-only-action { border-bottom-color: var(--vv-drawer-border) !important; }
[data-theme="dark"] .close-menu-btn { color: var(--vv-text-primary) !important; }
[data-theme="dark"] .close-menu-btn:hover { color: var(--vv-red) !important; }
[data-theme="dark"] .mobile-nav-overlay { background: var(--vv-overlay) !important; }

/* ── ARTICLE / POST PAGE ── */
[data-theme="dark"] .gh-article,
[data-theme="dark"] .post-content,
[data-theme="dark"] .gh-content {
    background: var(--vv-bg) !important;
    color: var(--vv-text-primary) !important;
}
[data-theme="dark"] .gh-content h1,
[data-theme="dark"] .gh-content h2,
[data-theme="dark"] .gh-content h3 { color: var(--vv-text-primary) !important; }
[data-theme="dark"] .gh-content p,
[data-theme="dark"] .gh-content li { color: var(--vv-text-secondary) !important; }
[data-theme="dark"] .gh-content blockquote {
    border-left-color: var(--vv-red) !important;
    background: var(--vv-surface) !important;
    color: var(--vv-text-secondary) !important;
}
[data-theme="dark"] .gh-content a { color: var(--vv-red) !important; }
[data-theme="dark"] figcaption { color: var(--vv-text-muted) !important; }
[data-theme="dark"] .gh-card-title { color: var(--vv-text-primary) !important; }
[data-theme="dark"] .gh-card-excerpt { color: var(--vv-text-secondary) !important; }

/* ── FOOTER ── */
[data-theme="dark"] .gh-foot,
[data-theme="dark"] footer {
    background: var(--vv-surface) !important;
    border-top-color: var(--vv-border) !important;
    color: var(--vv-text-muted) !important;
}
[data-theme="dark"] .gh-foot a,
[data-theme="dark"] footer a { color: var(--vv-text-secondary) !important; }

/* ════════════════════════════════════
   DARK MODE TOGGLE — DESKTOP FAB
   Fixed red circle, bottom-right
   ════════════════════════════════════ */
.vv-dark-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9990;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vv-red);
    box-shadow: 0 3px 14px rgba(0,0,0,0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}
.vv-dark-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 20px rgba(0,0,0,0.35);
}
.vv-dark-toggle svg {
    width: 20px;
    height: 20px;
    fill: #ffffff;
    transition: opacity 0.2s, transform 0.3s;
}
.vv-dark-toggle .icon-sun  { display: none; }
.vv-dark-toggle .icon-moon { display: block; }
[data-theme="dark"] .vv-dark-toggle .icon-sun  { display: block; }
[data-theme="dark"] .vv-dark-toggle .icon-moon { display: none; }
.vv-dark-toggle::after {
    content: attr(aria-label);
    position: absolute;
    right: 54px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    font-family: 'Anek Malayalam', sans-serif;
}
.vv-dark-toggle:hover::after { opacity: 1; }

/* Hide FAB on mobile — toggle lives in the drawer instead */
@media (max-width: 768px) {
    .vv-dark-toggle { display: none; }
}

/* ════════════════════════════════════
   DARK MODE TOGGLE — MOBILE DRAWER
   Sits INSIDE .mobile-menu-social,
   directly below the FOLLOW US icons,
   above the nav list. Highly visible.
   ════════════════════════════════════ */
.vv-drawer-toggle {
    display: none; /* hidden on desktop */
}

@media (max-width: 1023px) {
    .vv-drawer-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 18px;
        padding-top: 16px;
        border-top: 1px solid var(--vv-drawer-border);
    }

    .vv-drawer-toggle-label {
        display: flex;
        align-items: center;
        gap: 9px;
        font-family: 'Anek Malayalam', sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: var(--vv-text-primary, #111);
        letter-spacing: 0.02em;
    }

    .vv-drawer-toggle-label svg {
        width: 17px;
        height: 17px;
        fill: currentColor;
        flex-shrink: 0;
    }

    /* iOS-style pill */
    .vv-pill {
        position: relative;
        width: 46px;
        height: 25px;
        flex-shrink: 0;
    }
    .vv-pill input {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }
    .vv-pill-track {
        position: absolute;
        inset: 0;
        background: var(--vv-toggle-track, #ccc);
        border-radius: 25px;
        cursor: pointer;
        transition: background 0.3s ease;
    }
    .vv-pill-track::before {
        content: '';
        position: absolute;
        width: 19px;
        height: 19px;
        left: 3px;
        top: 3px;
        background: #ffffff;
        border-radius: 50%;
        transition: transform 0.3s ease;
        box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    }
    .vv-pill input:checked + .vv-pill-track { background: var(--vv-red); }
    .vv-pill input:checked + .vv-pill-track::before { transform: translateX(21px); }
}

/* ═══════════════════════════════════════════════════════════════
   VAIKOM VARTHA — DARK MODE PATCH
   Add this to the BOTTOM of your existing darkmode.css file.
   These are the missed selectors from the compiled screen.css
   and moments.css that were not covered in the first version.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. MAIN CONTENT WRAPPER (the big white page background) ── */
/* This is the #1 reason the homepage background stayed white.
   .main-content has background-color: #ffffff hardcoded in screen.css line 3052 */
[data-theme="dark"] .main-content {
    background-color: var(--vv-bg) !important;
}

/* ── 2. LATEST REPORT SECTION (white box with red top border) ── */
[data-theme="dark"] .latest-report-section {
    background: var(--vv-card-bg) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
    border-top-color: var(--vv-red) !important;
}
[data-theme="dark"] .latest-report-section .report-item {
    background: var(--vv-surface) !important;
    border-top-color: var(--vv-border) !important;
    border-right-color: var(--vv-border) !important;
    border-bottom-color: var(--vv-border) !important;
}
[data-theme="dark"] .latest-report-section .report-item:nth-child(even) {
    border-left-color: #555 !important;
}
[data-theme="dark"] .latest-report-section .report-title a,
[data-theme="dark"] .latest-report-section .report-title {
    color: var(--vv-text-primary) !important;
}
[data-theme="dark"] .latest-report-section .report-excerpt {
    color: var(--vv-text-secondary) !important;
}
[data-theme="dark"] .latest-report-section .report-meta,
[data-theme="dark"] .latest-report-section .report-date,
[data-theme="dark"] .latest-report-section .report-author {
    color: var(--vv-text-muted) !important;
}

/* ── 3. LOCAL NEWS CARDS ── */
[data-theme="dark"] .local-news-card {
    background: var(--vv-card-bg) !important;
    box-shadow: var(--vv-card-shadow) !important;
}
[data-theme="dark"] .local-news-card:hover {
    box-shadow: var(--vv-card-shadow-hover) !important;
}
[data-theme="dark"] .local-news-card .card-title,
[data-theme="dark"] .local-news-card h3,
[data-theme="dark"] .local-news-card h4 {
    color: var(--vv-text-primary) !important;
}
[data-theme="dark"] .local-news-card .card-excerpt,
[data-theme="dark"] .local-news-card p {
    color: var(--vv-text-secondary) !important;
}

/* ── 4. CATEGORY SECTION ("Kerala Today" white rounded box) ── */
[data-theme="dark"] .category-section {
    background: var(--vv-card-bg) !important;
    box-shadow: var(--vv-card-shadow) !important;
}
[data-theme="dark"] .category-section .category-header h2,
[data-theme="dark"] .category-section .category-header span {
    color: var(--vv-text-primary) !important;
}

/* ── 5. CATEGORY FEATURE SECTION ── */
[data-theme="dark"] .category-feature-section {
    background-color: var(--vv-card-bg) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4) !important;
}
[data-theme="dark"] .category-feature-section .category-header h2 {
    color: var(--vv-text-primary) !important;
}

/* ── 6. VIDEO CARDS ── */
[data-theme="dark"] .video-card {
    background: var(--vv-card-bg) !important;
}
[data-theme="dark"] .video-card:hover {
    box-shadow: var(--vv-card-shadow-hover) !important;
}
[data-theme="dark"] .video-card .video-title,
[data-theme="dark"] .video-card h3,
[data-theme="dark"] .video-card h4 {
    color: var(--vv-text-primary) !important;
}
[data-theme="dark"] .video-card .video-meta,
[data-theme="dark"] .video-card p {
    color: var(--vv-text-secondary) !important;
}

/* ── 7. PHOTO GALLERY SECTION (New Grid) ── */
[data-theme="dark"] .vv-photo-gallery {
    background: transparent;
}
[data-theme="dark"] .vvg-card {
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .vvg-card:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* ── 8. MOMENTS SECTION (moments.css) ── */
[data-theme="dark"] .moment-card {
    background: var(--vv-card-bg) !important;
}
[data-theme="dark"] .moment-content {
    background-color: var(--vv-surface) !important;
}
[data-theme="dark"] .moment-title,
[data-theme="dark"] .moment-card h3,
[data-theme="dark"] .moment-card h4 {
    color: var(--vv-text-primary) !important;
}
[data-theme="dark"] .moment-date,
[data-theme="dark"] .moment-card p {
    color: var(--vv-text-muted) !important;
}

/* ── 9. SLIDER NAV BUTTONS ── */
[data-theme="dark"] .vaikom-slider-nav {
    background: var(--vv-surface-2) !important;
    border-color: var(--vv-border) !important;
    color: var(--vv-text-primary) !important;
}
[data-theme="dark"] .vaikom-slider-nav:hover {
    background: var(--vv-surface) !important;
}

/* ── 10. SECTION HEADERS (generic .section-header used across home) ── */
[data-theme="dark"] .section-header,
[data-theme="dark"] .category-header {
    border-bottom-color: var(--vv-border) !important;
}
[data-theme="dark"] .section-header h2,
[data-theme="dark"] .section-header h3,
[data-theme="dark"] .category-header h2,
[data-theme="dark"] .category-header h3 {
    color: var(--vv-text-primary) !important;
}
[data-theme="dark"] .section-header .see-all,
[data-theme="dark"] .category-header .see-all,
[data-theme="dark"] .section-header a,
[data-theme="dark"] .category-header a {
    color: var(--vv-text-secondary) !important;
}
[data-theme="dark"] .heading-underline {
    /* keep red underline as-is — it's brand colour */
}

/* ── 11. GENERIC .container used as a background surface ── */
/* Only target containers that are DIRECT children of sections
   to avoid breaking layout containers */
[data-theme="dark"] .news-portal-main .container,
[data-theme="dark"] .latest-report-section .container {
    background: transparent !important;
}

/* ── 12. CARD CONTENT areas with explicit white ── */
[data-theme="dark"] .card-content {
    background: var(--vv-card-bg) !important;
}
[data-theme="dark"] .card-content .card-title,
[data-theme="dark"] .card-content h3,
[data-theme="dark"] .card-content h4 {
    color: var(--vv-text-primary) !important;
}
[data-theme="dark"] .card-content .card-excerpt,
[data-theme="dark"] .card-content p {
    color: var(--vv-text-secondary) !important;
}
[data-theme="dark"] .card-content .card-meta {
    color: var(--vv-text-muted) !important;
}

/* ── 13. SEARCH BOX (background: #f8f9fa) ── */
[data-theme="dark"] .search-box,
[data-theme="dark"] .search-form input,
[data-theme="dark"] [class*="search-input"] {
    background: var(--vv-search-bg) !important;
    color: var(--vv-text-primary) !important;
    border-color: var(--vv-border) !important;
}

/* ── 14. PREMIUM AD CONTAINER ── */
[data-theme="dark"] .premium-ad-container {
    background: var(--vv-surface-2) !important;
}

/* ── 15. CATCH-ALL for any remaining inline white backgrounds
   that the Ghost theme builder or Antigravity injects ── */
[data-theme="dark"] section,
[data-theme="dark"] article,
[data-theme="dark"] aside {
    background-color: transparent;
}

/* Restore specific section colours (override the catch-all above) */
[data-theme="dark"] .main-content,
[data-theme="dark"] .gh-site,
[data-theme="dark"] .gh-main,
[data-theme="dark"] main {
    background-color: var(--vv-bg) !important;
}