/* THE NUCLEAR OVERRIDE */
        html.dark-mode:root,
        html.dark-mode body,
        html.dark-mode #page,
        html.dark-mode .site-content {
            --groovy-bg: #000000 !important;
            --groovy-card-bg: #1a1a1a !important;
            --groovy-text: #ffffff !important;
            --groovy-text-muted: #bbbbbb !important;
            --groovy-border: #333333 !important;
            
            /* GeneratePress Palette Nuclear Override */
            --global-color-8: #000000 !important;
            --global-color-9: #1a1a1a !important;
            --global-palette10: #ffffff !important;
            --contrast: #ffffff !important;
            --base: #000000 !important;
        }

        /* Base Containers — Body & Content: pure black */
        html.dark-mode, 
        html.dark-mode body, 
        html.dark-mode #page, 
        html.dark-mode .site-content,
        html.dark-mode #content,
        html.dark-mode .inside-article,
        html.dark-mode .entry-content,
        html.dark-mode .separate-containers .inside-article,
        html.dark-mode .separate-containers .comments-area {
            background-color: #000000 !important;
            background-image: none !important;
            color: #ffffff !important;
        }

        /* Header — slightly lighter dark so it stands out from body */
        html.dark-mode .site-header,
        html.dark-mode .main-navigation,
        html.dark-mode .inside-header,
        html.dark-mode .sticky-enabled .main-navigation {
            background-color: #111111 !important;
            background-image: none !important;
            color: #ffffff !important;
            border-bottom: 1px solid #222222 !important;
        }

        /* Search Icon & Navigation Icons in Dark Mode */
        html.dark-mode .main-navigation .search-item a,
        html.dark-mode .main-navigation .search-item a *,
        html.dark-mode .gp-icon-search,
        html.dark-mode .gp-icon-search svg,
        html.dark-mode .search-form svg,
        html.dark-mode .menu-toggle svg {
            color: #ffffff !important;
            fill: #ffffff !important;
        }

        /* Footer — stays pure black */
        html.dark-mode .site-footer,
        html.dark-mode .footer-widgets,
        html.dark-mode .footer-bar,
        html.dark-mode .copyright-bar,
        html.dark-mode .site-info {
            background-color: #000000 !important;
            background-image: none !important;
            color: #ffffff !important;
        }

        /* Defeat Teal Footer and All Footer Containers */
        html.dark-mode .site-footer,
        html.dark-mode footer.site-footer,
        html.dark-mode .groovy-footer-template-wrap,
        html.dark-mode .groovy-footer-grid,
        html.dark-mode #footer-widgets,
        html.dark-mode .footer-widgets-container,
        html.dark-mode .footer-widgets-container * {
            background-color: transparent !important;
        }

        html.dark-mode .site-footer,
        html.dark-mode .groovy-footer-template-wrap {
            background-color: #000000 !important;
        }

        /* Force Card Backgrounds & Defeat Inline Pastel Colors */
        html.dark-mode article.groovy-post-card,
        html.dark-mode .groovy-post-card,
        html.dark-mode .groovy-featured-image,
        html.dark-mode .groovy-card-header,
        html.dark-mode .groovy-hero-slider,
        html.dark-mode .groovy-hero-slide,
        html.dark-mode .groovy-slider-track,
        html.dark-mode .groovy-hero-title-box,
        html.dark-mode .groovy-hero-cta,
        html.dark-mode .groovy-hero-capsule,
        html.dark-mode .also-read-box,
        html.dark-mode .footer-site-logo-box,
        html.dark-mode .footer-contact-box,
        html.dark-mode .groovy-multi-also-read-box,
        html.dark-mode .groovy-footer-card,
        html.dark-mode .groovy-sidebar-about-card,
        html.dark-mode .groovy-sidebar-recent-card,
        html.dark-mode .groovy-author-intro-box,
        html.dark-mode .groovy-category-description-box,
        html.dark-mode .groovy-author-intro-details h2,
        html.dark-mode .groovy-post-title-box,
        html.dark-mode .groovy-section-title,
        html.dark-mode .groovy-page-box-title,
        html.dark-mode .footer-card-pill,
        html.dark-mode .groovy-category-tag,
        html.dark-mode .groovy-sidebar-title-pill,
        html.dark-mode .groovy-comments-pill-title,
        html.dark-mode .groovy-form-pill-title,
        html.dark-mode .groovy-tags-title,
        html.dark-mode .groovy-related-posts-title,
        html.dark-mode .groovy-author-pill-title,
        html.dark-mode .nav-pill-label,
        html.dark-mode .groovy-continue-btn {
            background-color: #1a1a1a !important;
            color: #ffffff !important;
            border-color: #444444 !important;
        }

        /* ── Single Post Layout Containers ─────────────────── */
        html.dark-mode .groovy-single-post-wrap {
            background-color: #000000 !important;
            color: #ffffff !important;
            border-color: #333333 !important;
            box-shadow: none !important;
        }

        /* Title Box, Image Box, TOC, Content, Tags, and Breadcrumbs — Slightly lighter black/grey */
        html.dark-mode .groovy-post-header-box,
        html.dark-mode .groovy-post-featured-area,
        html.dark-mode .featured-image-wrap,
        html.dark-mode .groovy-post-breadcrumbs,
        html.dark-mode .groovy-toc-box,
        html.dark-mode .groovy-post-content,
        html.dark-mode .groovy-post-tags-box,
        html.dark-mode .groovy-highlights-box,
        html.dark-mode .groovy-comments-list-box,
        html.dark-mode .groovy-comment-form-box,
        html.dark-mode .comment-inner,
        html.dark-mode .groovy-comment-respond-wrap,
        html.dark-mode .groovy-related-posts-box,
        html.dark-mode .groovy-author-intro-box,
        html.dark-mode .nav-btn {
            background-color: #111111 !important;
            border-color: #333333 !important;
            color: #ffffff !important;
        }

        html.dark-mode .groovy-post-breadcrumbs {
            margin-bottom: 25px !important;
            padding: 12px 18px !important;
            border-radius: 12px !important;
            border: 1px solid #333333 !important;
        }

        html.dark-mode .groovy-post-header-box {
            border-radius: 12px !important;
            padding: 30px !important;
            margin-bottom: 20px !important;
            border: 1px solid #333333 !important;
        }

        html.dark-mode .groovy-post-featured-area {
            border: 1px solid #333333 !important;
            background-color: #111111 !important;
            border-radius: 12px !important;
            overflow: hidden !important;
            margin-bottom: 30px !important;
        }
        html.dark-mode .featured-image-wrap img {
            border-radius: 12px !important;
        }
        html.dark-mode .groovy-single-post-wrap {
            padding-top: 10px !important;
        }
        html.dark-mode .groovy-post-breadcrumbs a {
            color: #ffffff !important;
        }
        html.dark-mode .groovy-post-breadcrumbs .crumb-sep {
            color: #777777 !important;
        }
        html.dark-mode .groovy-post-breadcrumbs .current {
            color: #bbbbbb !important;
        }

        /* ── Pill Labels & Capsule Tags ─────────────────────────── */

        /* Category Tag pill on post cards */
        html.dark-mode .groovy-category-tag {
            background-color: #1a1a1a !important;
            color: #ffffff !important;
            border-color: #444444 !important;
        }
        html.dark-mode .groovy-category-tag a {
            color: #ffffff !important;
        }

        /* Post Title Box (bottom overlay on card image) */
        html.dark-mode .groovy-post-title-box,
        html.dark-mode .groovy-post-title_box {
            background-color: #1a1a1a !important;
            border-color: #444444 !important;
            color: #ffffff !important;
        }

        html.dark-mode .groovy-post-title-box h2 a {
            color: #ffffff !important;
        }

        /* Hero Slider Category Capsule */
        html.dark-mode .groovy-hero-capsule.category-capsule {
            background-color: #1a1a1a !important;
            border-color: #444444 !important;
            color: #ffffff !important;
        }

        /* ── Comments Section Fixes ─────────────────────────── */
        html.dark-mode .comment-author-vcard cite,
        html.dark-mode .comment-author-vcard cite a {
            color: #ffffff !important;
        }
        html.dark-mode .comment-meta time,
        html.dark-mode .comment-meta a {
            color: #888888 !important;
        }
        html.dark-mode .comment-content p {
            color: #dddddd !important;
        }
        html.dark-mode .comment-inner,
        html.dark-mode .groovy-comment-respond-wrap {
            background-color: #111111 !important;
            border-color: #333333 !important;
            box-shadow: none !important;
        }
        html.dark-mode .comment-form input,
        html.dark-mode .comment-form textarea {
            background-color: #1a1a1a !important;
            color: #ffffff !important;
            border-color: #444444 !important;
        }
        html.dark-mode .comment-reply a {
            background-color: #222222 !important;
            border: 1px solid #444444 !important;
            color: #ffffff !important;
        }
        html.dark-mode .comment-reply a:hover {
            background-color: #60A5FA !important;
            border-color: #60A5FA !important;
        }

        /* Also Read pill title */
        html.dark-mode .also-read-pill-title,
        html.dark-mode .groovy-multi-also-read-box .also-read-pill-title {
            background-color: #1a1a1a !important;
            color: #ffffff !important;
            border-color: #444444 !important;
        }

        /* Sidebar section title pills */
        html.dark-mode .groovy-sidebar-title-pill {
            background-color: #1a1a1a !important;
            color: #ffffff !important;
            border-color: #444444 !important;
        }

        /* Archive/page box title pill */
        html.dark-mode .groovy-page-box-title {
            background-color: #1a1a1a !important;
            color: #ffffff !important;
            border-color: #444444 !important;
        }

        /* Related Posts, Author bio, Comments, TOC pill labels */
        html.dark-mode .groovy-related-posts-title,
        html.dark-mode .groovy-author-pill-title,
        html.dark-mode .groovy-form-pill-title,
        html.dark-mode .groovy-comments-pill-title,
        html.dark-mode .groovy-toc-title,
        html.dark-mode .groovy-highlights-title,
        html.dark-mode .footer-card-pill {
            background-color: #1a1a1a !important;
            color: #ffffff !important;
            border-color: #444444 !important;
        }

        /* Continue Reading button */
        html.dark-mode .groovy-continue-btn {
            background-color: #1a1a1a !important;
            color: #ffffff !important;
            border-color: #444444 !important;
            box-shadow: none !important;
        }
        html.dark-mode .groovy-continue-btn:hover {
            background-color: #333333 !important;
        }

        /* ── Share Buttons ─────────────────────────────────────── */
        html.dark-mode .groovy-share-label {
            color: #bbbbbb !important;
        }
        /* Base state: dark grey circle, white icon */
        html.dark-mode .groovy-share-btn {
            background-color: #1a1a1a !important;
            color: #ffffff !important;
            border-color: #444444 !important;
            box-shadow: none !important;
        }
        /* Hover: keep brand colors, adjust shadow for dark bg */
        html.dark-mode .groovy-share-btn:hover {
            transform: translate(-2px, -2px) !important;
            box-shadow: 3px 3px 0px #444444 !important;
        }
        html.dark-mode .groovy-share-btn.share-fb:hover {
            background: #1877F2 !important;
            color: #fff !important;
            border-color: #1877F2 !important;
        }
        html.dark-mode .groovy-share-btn.share-wa:hover {
            background: #25D366 !important;
            color: #fff !important;
            border-color: #25D366 !important;
        }
        html.dark-mode .groovy-share-btn.share-tg:hover {
            background: #229ED9 !important;
            color: #fff !important;
            border-color: #229ED9 !important;
        }
        html.dark-mode .groovy-share-btn.share-system:hover {
            background: #60A5FA !important;
            color: #fff !important;
            border-color: #60A5FA !important;
        }

        /* ── Sidebar Badges ────────────────────────────────────── */
        /* SVG badge shape: change fill to dark grey, stroke to dark grey */
        html.dark-mode .groovy-recent-badge svg.groovy-badge-icon path,
        html.dark-mode .groovy-recent-badge .groovy-badge-icon path {
            fill: #1a1a1a !important;
            stroke: #444444 !important;
        }
        /* Badge number text: white */
        html.dark-mode .groovy-recent-badge span.groovy-badge-number,
        html.dark-mode .groovy-badge-number {
            color: #ffffff !important;
        }
        /* Badge drop shadow on dark bg */
        html.dark-mode .groovy-recent-badge svg.groovy-badge-icon {
            filter: drop-shadow(2px 2px 0px rgba(255,255,255,0.1)) !important;
        }

        /* ── Highlights Stars ──────────────────────────────────── */
        /* Star circle wrapper: dark grey bg, dark border, keep yellow star */
        html.dark-mode .groovy-highlight-star {
            background-color: #1a1a1a !important;
            border-color: #444444 !important;
            color: #FBBF24 !important; /* Keep yellow star */
        }
        html.dark-mode .groovy-highlight-star svg {
            color: #FBBF24 !important;
            fill: #FBBF24 !important;
        }
        html.dark-mode .groovy-highlight-item:hover .groovy-highlight-star {
            box-shadow: 4px 4px 0px #444444 !important;
        }

        /* ── Featured Image Category Badge ────────────────────── */
        html.dark-mode .groovy-single-cat-badge {
            background-color: rgba(0, 0, 0, 0.75) !important;
            border-color: #555555 !important;
            color: #ffffff !important;
        }
        html.dark-mode .groovy-single-cat-badge:hover {
            box-shadow: 5px 5px 0px rgba(255,255,255,0.3) !important;
            color: #ffffff !important;
        }
        html.dark-mode .groovy-single-cat-badge span {
            color: #ffffff !important;
        }
        /* Keep the blue dot as-is, it looks fine in both modes */

        /* ── Tags Section ──────────────────────────────────────── */
        html.dark-mode .groovy-post-tags-box {
            background-color: #111111 !important;
            padding: 25px !important;
            border-radius: 12px !important;
            border: 1px solid #333333 !important;
            margin-top: 30px !important;
        }
        html.dark-mode .groovy-tags-title {
            background-color: #222222 !important;
            color: #ffffff !important;
            border-color: #444444 !important;
        }
        html.dark-mode .tag-capsule {
            background-color: #1a1a1a !important;
            color: #cccccc !important;
            border-color: #444444 !important;
        }
        html.dark-mode .tag-capsule:hover {
            background-color: #60A5FA !important;
            color: #ffffff !important;
            border-color: #60A5FA !important;
        }

        /* ── Highlights Box ────────────────────────────────────── */
        html.dark-mode .groovy-highlights-box {
            background-color: #111111 !important;
            border-color: #333333 !important;
            padding: 25px !important;
            border-radius: 12px !important;
            margin-bottom: 30px !important;
        }
        html.dark-mode .groovy-highlights-title {
            color: #ffffff !important;
            border-color: #444444 !important;
        }
        html.dark-mode .groovy-highlight-item {
            color: #dddddd !important;
        }
        html.dark-mode .groovy-highlight-item span {
            color: #dddddd !important;
        }

        /* ── Related Articles ──────────────────────────────────── */
        html.dark-mode .groovy-related-posts-box {
            background-color: #1a1a1a !important;
            border-color: #444444 !important;
        }
        html.dark-mode .groovy-related-posts-title {
            background-color: #000000 !important;
            color: #ffffff !important;
            border-color: #444444 !important;
        }
        html.dark-mode .groovy-related-card {
            background-color: #000000 !important;
            border-color: #333333 !important;
        }
        html.dark-mode .groovy-related-card .related-content h4 a {
            color: #ffffff !important;
        }

        /* ── Post Navigation (Previous / Next Article) ─────────── */
        html.dark-mode .nav-btn {
            background-color: #1a1a1a !important;
            border-color: #444444 !important;
            color: #ffffff !important;
        }
        html.dark-mode .nav-btn:hover {
            box-shadow: 6px 6px 0px #444444 !important;
        }
        /* "Previous Article" / "Next Article" pill label */
        html.dark-mode .nav-pill-label {
            background-color: #000000 !important;
            color: #ffffff !important;
            border-color: #444444 !important;
        }
        html.dark-mode .nav-btn:hover .nav-pill-label {
            background-color: #60A5FA !important;
            border-color: #60A5FA !important;
            color: #ffffff !important;
        }
        /* Article title inside nav card */
        html.dark-mode .nav-title {
            color: #dddddd !important;
        }

        /* Nuclear specific-style override for ALL elements with pastel-like styles */
        html.dark-mode [style*="background-color"],
        html.dark-mode [style*="background-color" i],
        html.dark-mode [style*="background:"] {
             background-color: #1a1a1a !important;
        }

        /* ── Restore coloured dots (overridden by nuclear rule above) ── */
        /* Blue dot inside category tag on grid cards */
        html.dark-mode .groovy-category-tag .dot,
        html.dark-mode .groovy-category-tag span.dot {
            background-color: #60A5FA !important;
        }
        /* Green dot inside hero slider category capsule */
        html.dark-mode .groovy-hero-capsule .dot,
        html.dark-mode .groovy-hero-capsule span.dot {
            background-color: #4ade80 !important;
        }
        /* Blue dot on single post category badge */
        html.dark-mode .groovy-single-cat-badge .dot,
        html.dark-mode .groovy-single-cat-badge span.dot {
            background-color: #60A5FA !important;
        }

        /* ── Hero Slider Arrow Buttons ─────────────────────────── */
        html.dark-mode .groovy-nav-btn {
            background-color: #1a1a1a !important;
            color: #ffffff !important;
            border-color: #555555 !important;
        }
        html.dark-mode .groovy-nav-btn:hover {
            background-color: #60A5FA !important;
            color: #ffffff !important;
            border-color: #60A5FA !important;
        }
        html.dark-mode .groovy-nav-btn .nav-arrow {
            color: #ffffff !important;
        }



        /* Special Case: Dark background for entire Post Card Featured Image Area */
        html.dark-mode .groovy-featured-image,
        html.dark-mode .groovy-featured-image * {
            background-color: #1a1a1a !important;
        }

        /* Restoration of Hero Slider images (which are background-images) */
        html.dark-mode .groovy-hero-slide {
            background-color: #1a1a1a !important;
            background-repeat: no-repeat !important;
            background-size: cover !important;
            background-position: center !important;
        }

        /* Global Text Enforcement */
        html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode h5, html.dark-mode h6,
        html.dark-mode p, html.dark-mode span, html.dark-mode li, html.dark-mode time, 
        html.dark-mode div:not(.mode-icon),
        html.dark-mode a, html.dark-mode a * {
            color: #ffffff !important;
        }

        html.dark-mode .groovy-excerpt, 
        html.dark-mode .reading-time, 
        html.dark-mode .date, 
        html.dark-mode .author-name,
        html.dark-mode .footer-copy-link,
        html.dark-mode .groovy-footer-copyright p {
            color: #bbbbbb !important;
        }

        /* ── Form Elements & Search ─────────────────────────── */
        html.dark-mode input[type="text"],
        html.dark-mode input[type="search"],
        html.dark-mode input[type="email"],
        html.dark-mode input[type="url"],
        html.dark-mode input[type="password"],
        html.dark-mode textarea,
        html.dark-mode .search-field,
        html.dark-mode .navigation-search input {
            background-color: #222222 !important;
            color: #ffffff !important;
            border: 1.5px solid #444444 !important;
        }

        html.dark-mode input::placeholder,
        html.dark-mode textarea::placeholder {
            color: #888888 !important;
            opacity: 1 !important;
        }

        /* Search Buttons / Submit Buttons */
        html.dark-mode .search-submit,
        html.dark-mode input[type="submit"],
        html.dark-mode button[type="submit"] {
            background-color: #60A5FA !important;
            color: #ffffff !important;
            border-color: #60A5FA !important;
        }
        html.dark-mode .search-submit:hover,
        html.dark-mode input[type="submit"]:hover,
        html.dark-mode button[type="submit"]:hover {
            background-color: #3b82f6 !important;
        }

        /* ── Pagination Dark Mode ─────────────────────────────────────── */

        /* 1. Container nav - pure black, no hover effect */
        html.dark-mode nav.groovy-pagination {
            background-color: #000000 !important;
            border: none !important;
            padding: 10px 0 !important;
        }

        /* 2. The ul list - transparent, no background ever */
        html.dark-mode .groovy-pagination ul {
            background: transparent !important;
        }

        /* 3. Each li - transparent, no hover background */
        html.dark-mode .groovy-pagination ul li {
            background: transparent !important;
        }
        html.dark-mode .groovy-pagination ul li:hover {
            background: transparent !important;
            background-color: transparent !important;
        }

        /* 4. Actual button elements - dark grey pill */
        html.dark-mode .groovy-pagination ul li a.page-numbers,
        html.dark-mode .groovy-pagination ul li span.page-numbers {
            background-color: #222222 !important;
            color: #ffffff !important;
            border: 1px solid #444444 !important;
        }

        /* 5. Hover on ONLY the button */
        html.dark-mode .groovy-pagination ul li a.page-numbers:hover {
            background-color: #60A5FA !important;
            border-color: #60A5FA !important;
            color: #ffffff !important;
        }

        /* 6. Current/Active page button */
        html.dark-mode .groovy-pagination ul li span.page-numbers.current {
            background-color: #60A5FA !important;
            border-color: #60A5FA !important;
            color: #ffffff !important;
        }

        /* Back to Top */
        html.dark-mode .generate-back-to-top {
            background-color: #222222 !important;
            color: #ffffff !important;
            border: 1.5px solid #444444 !important;
        }
        html.dark-mode .generate-back-to-top:hover {
            background-color: #60A5FA !important;
        }

        /* Footer Copyright Fix */
        html.dark-mode .groovy-footer-copyright,
        html.dark-mode .groovy-footer-copyright p,
        html.dark-mode .groovy-footer-copyright a {
            background-color: #000000 !important;
            color: #bbbbbb !important;
        }