/* ══════════════════════════════════════════════════════
   WAB BLOG — DARK MODE v2.1
   Universal approach — works with ANY theme.
   
   STRATEGY:
   - CSS variables override WAB's own palette
   - Header/footer: targeted via universal selectors
     + CSS invert filter as nuclear fallback
   - Sections with light bg: overridden via has-background
   ══════════════════════════════════════════════════════ */

/* ── Tell browser this is dark ───────────────────────── */
html.wab-dark {
    color-scheme: dark;
}

/* ── WAB CSS variable overrides ──────────────────────── */
html.wab-dark {
    --wab-bg:           var(--wab-dark-bg, #1c1c1e);
    --wab-p-color:      var(--wab-dark-text, #f5f5f7);
    --wab-h2-color:     #ffffff;
    --wab-h3-color:     #f5f5f7;
    --wab-h4-color:     #e5e5ea;
    --wab-h5-color:     #aeaeb2;
    --wab-h6-color:     #98989d;

    --wab-gray-50:  #2c2c2e;
    --wab-gray-100: #3a3a3c;
    --wab-gray-200: #48484a;
    --wab-gray-300: #636366;
    --wab-gray-400: #8e8e93;
    --wab-gray-500: #aeaeb2;
    --wab-gray-600: #c7c7cc;
    --wab-gray-700: #d1d1d6;
    --wab-gray-800: #e5e5ea;
    --wab-gray-900: #f2f2f7;
}

/* ── Page & body background ──────────────────────────── */
html.wab-dark body {
    background-color: var(--wab-dark-bg, #1c1c1e) !important;
    color: var(--wab-dark-text, #f5f5f7) !important;
}

/* ── Content area ────────────────────────────────────── */
html.wab-dark .wab-article,
html.wab-dark .wab-article__content,
html.wab-dark main,
html.wab-dark .site-main,
html.wab-dark .site-content,
html.wab-dark #primary,
html.wab-dark #content,
html.wab-dark .content-area {
    background-color: var(--wab-dark-bg, #1c1c1e) !important;
}

/* ── Universal header ────────────────────────────────── 
   Targets ANY theme's header structure.                 */
html.wab-dark header,
html.wab-dark [id*="header"],
html.wab-dark [class*="site-header"],
html.wab-dark [class*="main-header"],
html.wab-dark [class*="page-header"]:not(.wab-article__header) {
    background-color: var(--wab-dark-header-bg, #1c1c1e) !important;
    border-bottom-color: var(--wab-dark-border, #3a3a3c) !important;
}

html.wab-dark header *,
html.wab-dark [id*="header"] *,
html.wab-dark [class*="site-header"] *,
html.wab-dark [class*="main-header"] * {
    color: var(--wab-dark-header-text, #f5f5f7) !important;
    border-color: var(--wab-dark-border, #3a3a3c) !important;
}

/* Preserve primary/accent colors in header (logo icon, active states) */
html.wab-dark header a:hover,
html.wab-dark [class*="site-header"] a:hover,
html.wab-dark [class*="main-header"] a:hover {
    color: var(--wab-primary) !important;
}

/* Dropdown menus */
html.wab-dark header .sub-menu,
html.wab-dark [class*="header"] .sub-menu,
html.wab-dark header .dropdown,
html.wab-dark header [class*="dropdown"] {
    background-color: var(--wab-dark-surface, #2c2c2e) !important;
    border-color: var(--wab-dark-border, #3a3a3c) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5) !important;
}

/* ── Universal footer ────────────────────────────────── */
html.wab-dark footer,
html.wab-dark [id*="footer"],
html.wab-dark [class*="site-footer"],
html.wab-dark [class*="page-footer"] {
    background-color: var(--wab-dark-footer-bg, #1c1c1e) !important;
    border-top-color: var(--wab-dark-border, #3a3a3c) !important;
}

html.wab-dark footer *,
html.wab-dark [id*="footer"] *,
html.wab-dark [class*="site-footer"] * {
    color: var(--wab-dark-footer-text, #98989d) !important;
    border-color: var(--wab-dark-border, #3a3a3c) !important;
}

html.wab-dark footer a:hover,
html.wab-dark [class*="site-footer"] a:hover {
    color: var(--wab-dark-text, #f5f5f7) !important;
}

/* ── Gutenberg sections with explicit backgrounds ────────
   ANY section with a light background becomes dark surface.
   We override by checking has-background class.           */

/* White/light Gutenberg palette colors */
html.wab-dark .wp-block-group.has-background,
html.wab-dark .wp-block-cover.has-background,
html.wab-dark .wp-block-columns.has-background {
    background-color: var(--wab-dark-surface, #2c2c2e) !important;
}

/* Specific white/gray palette overrides */
html.wab-dark [class*="has-white-background"],
html.wab-dark [class*="has-light-gray-background"],
html.wab-dark [class*="has-pale-blue-background"],
html.wab-dark [class*="has-pale-pink-background"],
html.wab-dark [class*="has-very-light-gray-background"] {
    background-color: var(--wab-dark-surface, #2c2c2e) !important;
}

/* Astra color palette light backgrounds */
html.wab-dark .has-ast-global-color-5-background-color,
html.wab-dark .has-ast-global-color-6-background-color,
html.wab-dark .has-ast-global-color-7-background-color,
html.wab-dark .has-ast-global-color-8-background-color {
    background-color: var(--wab-dark-surface, #2c2c2e) !important;
}

/* Text inside any section with background */
html.wab-dark .wp-block-group.has-background p,
html.wab-dark .wp-block-group.has-background h1,
html.wab-dark .wp-block-group.has-background h2,
html.wab-dark .wp-block-group.has-background h3,
html.wab-dark .wp-block-group.has-background h4,
html.wab-dark .wp-block-group.has-background h5,
html.wab-dark .wp-block-group.has-background h6,
html.wab-dark .wp-block-group.has-background li,
html.wab-dark .wp-block-group.has-background span,
html.wab-dark .wp-block-group.has-background a {
    color: var(--wab-dark-text, #f5f5f7) !important;
}

/* ── WAB Article text ─────────────────────────────────── */
html.wab-dark .wab-article__content p,
html.wab-dark .wab-article__content li,
html.wab-dark .wab-article__content td,
html.wab-dark .wab-article__content th,
html.wab-dark .wab-article__content span { color: var(--wab-dark-text, #f5f5f7); }

html.wab-dark .wab-article__content h2 { color: #ffffff; }
html.wab-dark .wab-article__content h3 { color: #f5f5f7; }
html.wab-dark .wab-article__content h4 { color: #e5e5ea; }
html.wab-dark .wab-article__content h5 { color: #aeaeb2; }
html.wab-dark .wab-article__content h6 { color: #98989d; }

html.wab-dark .wab-article__content a      { color: var(--wab-primary); }
html.wab-dark .wab-article__content code   { background: var(--wab-gray-100); color: var(--wab-gray-700); }
html.wab-dark .wab-article__content hr     { background: var(--wab-dark-border, #3a3a3c); }
html.wab-dark .wab-article__content blockquote {
    color: #8e8e93;
    border-color: var(--wab-dark-border, #3a3a3c);
}

/* ── TOC ─────────────────────────────────────────────── */
html.wab-dark .wab-toc-wrapper {
    background: var(--wab-dark-surface, #2c2c2e);
    box-shadow: 0 2px 20px rgba(0,0,0,0.4);
    border-right-color: var(--wab-dark-border, #3a3a3c);
}
html.wab-dark .wab-toc-nav__link         { color: #8e8e93; }
html.wab-dark .wab-toc-nav__link.is-active { color: #f5f5f7; }
html.wab-dark .wab-toc-progress          { background: var(--wab-dark-border, #3a3a3c); }

/* ── WAB Blocks ──────────────────────────────────────── */
html.wab-dark .wab-callout-box {
    background: color-mix(in srgb, var(--wab-primary) 10%, #2c2c2e) !important;
}
html.wab-dark .wab-callout-box__content,
html.wab-dark .wab-callout-box__content p { color: #f5f5f7; }

html.wab-dark .wab-feature-card {
    background: #2c2c2e !important;
    border-color: #3a3a3c !important;
}
html.wab-dark .wab-feature-card__body * { color: #f5f5f7; }

html.wab-dark .wab-cta-banner {
    background: color-mix(in srgb, var(--wab-primary) 15%, #2c2c2e) !important;
}

html.wab-dark .wab-author-bio {
    background: #2c2c2e !important;
    border-color: #3a3a3c !important;
}

html.wab-dark .wab-margin-note__inner {
    background: #2c2c2e;
    border-color: #3a3a3c;
}

html.wab-dark .wab-comparison           { border-color: #3a3a3c; }
html.wab-dark .wab-comparison__table th,
html.wab-dark .wab-comparison__table td {
    border-color: #3a3a3c;
    color: #f5f5f7;
}
html.wab-dark .wab-comparison__table thead th,
html.wab-dark .wab-comparison__cat {
    background: color-mix(in srgb, var(--wab-primary) 10%, #2c2c2e);
}

html.wab-dark .wab-related--thumbs .wab-related__card {
    border-color: #3a3a3c;
    background: #2c2c2e;
}
html.wab-dark .wab-related__row { border-color: #3a3a3c; }
html.wab-dark .wab-related__row:hover { background: #2c2c2e; }

html.wab-dark .wab-sticky-stack__step-inner,
html.wab-dark .wab-sticky-stack-section {
    color: #f5f5f7;
}

/* WAB callout block styles */
html.wab-dark .wp-block-group.is-style-wab-callout-info {
    background: color-mix(in srgb, var(--wab-primary) 12%, #2c2c2e) !important;
    border-color: color-mix(in srgb, var(--wab-primary) 35%, transparent) !important;
}
html.wab-dark .wp-block-group.is-style-wab-callout-warning {
    background: color-mix(in srgb, var(--wab-accent) 12%, #2c2c2e) !important;
    border-color: color-mix(in srgb, var(--wab-accent) 35%, transparent) !important;
}
html.wab-dark .wp-block-group.is-style-wab-callout-tip {
    background: color-mix(in srgb, var(--wab-success) 12%, #2c2c2e) !important;
    border-color: color-mix(in srgb, var(--wab-success) 35%, transparent) !important;
}
html.wab-dark .wp-block-group.is-style-wab-summary,
html.wab-dark .wp-block-group.is-style-wab-fact {
    background: #2c2c2e !important;
    border-color: #3a3a3c !important;
}

/* ── Dark toggle button ──────────────────────────────── */
html.wab-dark .wab-dark-toggle {
    background: #2c2c2e;
    border-color: #3a3a3c;
    color: #f5f5f7;
}
html.wab-dark .wab-dark-toggle__sun  { display: none; }
html.wab-dark .wab-dark-toggle__moon { display: block; }

/* ── Statistics ──────────────────────────────────────── */
html.wab-dark .wab-stat-counters,
html.wab-dark .wab-stat-bar,
html.wab-dark .wab-stat-line,
html.wab-dark .wab-stat-pie,
html.wab-dark .wab-stat-progress { color: #f5f5f7; }

/* ── Smooth transition on toggle ─────────────────────── */
html.wab-dark-transition,
html.wab-dark-transition *,
html.wab-dark-transition *::before,
html.wab-dark-transition *::after {
    transition: background-color 0.25s ease, color 0.15s ease,
                border-color 0.25s ease !important;
}