/**
 * JeshuuuPDF — Light/Dark Mode Master Override
 * Single source of truth. Loads LAST in enqueue order.
 *
 * RULES:
 * 1. Never use bare "section" selector — always be specific to avoid overriding CTA purple bg
 * 2. html:not(.dark) = light mode  |  html.dark = dark mode
 * 3. CTA section (.bg-purple-600 / .bg-purple-800) is EXCLUDED from all bg overrides
 */

/* ============================================================
   LIGHT MODE
   ============================================================ */

/* Body */
html:not(.dark) body {
    background-color: #F5F4F0 !important;
    color: #111827 !important;
}

/* ── SECTIONS: Be SPECIFIC — never use bare "section" ──────
   Exclude CTA purple section by adding :not([class*="bg-purple"]) */
html:not(.dark) section.bg-white:not([class*="bg-purple"]),
html:not(.dark) section[class*="py-20"]:not([class*="bg-purple"]),
html:not(.dark) section.relative:not([class*="bg-purple"]) {
    background-color: #ffffff !important;
}

/* Stats, search, tools grid, feedback wrapper */
html:not(.dark) section#tools,
html:not(.dark) section#feedback,
html:not(.dark) .fb-slider-outer {
    background-color: #ffffff;
}

/* General .bg-white divs */
html:not(.dark) div.bg-white,
html:not(.dark) .bg-white:not(section) {
    background-color: #ffffff !important;
}

/* ── CTA SECTION: ALWAYS purple, never overridden ───────── */
section.bg-purple-600,
section.bg-purple-800,
html:not(.dark) section.bg-purple-600,
html:not(.dark) section.bg-purple-800,
html.dark section.bg-purple-600,
html.dark section.bg-purple-800 {
    background-color: #9333ea !important;
}
html.dark section.bg-purple-800 {
    background-color: #6b21a8 !important;
}

/* CTA headings always white regardless of mode */
section.bg-purple-600 h1, section.bg-purple-600 h2, section.bg-purple-600 h3,
section.bg-purple-800 h1, section.bg-purple-800 h2, section.bg-purple-800 h3 {
    color: #ffffff !important;
}
section.bg-purple-600 p, section.bg-purple-800 p {
    color: #f3e8ff !important;
}

/* Tool card backgrounds handled by CSS variables in main.css (--tc-bg) */

/* ── HEADINGS ────────────────────────────────────────────── */
html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) h4,
html:not(.dark) h5,
html:not(.dark) h6 {
    color: #111827 !important;
}
html:not(.dark) h1 span.text-purple-600,
html:not(.dark) h2 span.text-purple-600,
html:not(.dark) h3 span.text-purple-600 {
    color: #9333ea !important;
}

/* ── NAV ─────────────────────────────────────────────────── */
html:not(.dark) #site-nav {
    background: rgba(255,255,255,0.95) !important;
    border-bottom-color: rgba(0,0,0,0.06) !important;
}
html:not(.dark) .nav-logo-text .nw  { color: #111827 !important; }
html:not(.dark) .nav-link           { color: #6b7280 !important; }
html:not(.dark) .nav-hamburger span { background: #6b7280 !important; }
html:not(.dark) .nav-mobile-menu    { background: #ffffff !important; border-top-color: rgba(0,0,0,0.06) !important; }
html:not(.dark) .nav-mobile-link    { color: #374151 !important; border-bottom-color: #f3f4f6 !important; }
html:not(.dark) .nav-theme-btn      { background: #f3f4f6 !important; color: #6b7280 !important; }

/* ── FILTER TAGS ─────────────────────────────────────────── */
html:not(.dark) .ftag:not(.ftag-active) {
    background-color: #ffffff !important;
    color: #4b5563 !important;
    border: 1.5px solid #e5e7eb !important;
}

/* ── SEARCH INPUT ────────────────────────────────────────── */
html:not(.dark) #searchInput {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
}

/* ── REVIEWS & FORM ──────────────────────────────────────── */
html:not(.dark) .fb-form-wrap { background: #ffffff !important; }
html:not(.dark) .fb-card      { background: #ffffff !important; }
html:not(.dark) .fb-slider-outer::before { background: linear-gradient(to right, #f8f7ff, transparent) !important; }
html:not(.dark) .fb-slider-outer::after  { background: linear-gradient(to left, #f8f7ff, transparent) !important; }

/* ── SECTION CATEGORY LABELS ────────────────────────────── */
html:not(.dark) .tsec > p { color: #111827 !important; }

/* ── CTA BUTTON ──────────────────────────────────────────── */
html:not(.dark) .cta-btn {
    background-color: #ffffff !important;
    color: #9333ea !important;
}

/* ── TAILWIND MEDIA QUERY OVERRIDE ──────────────────────────
   Tailwind CDN auto-generates @media(prefers-color-scheme:dark) for some utilities.
   When user has "dark" OS preference but site is in LIGHT mode, these fire wrongly.
   Override the specific ones that break light mode. */
@media (prefers-color-scheme: dark) {
    html:not(.dark) .dark\:text-purple-300 { color: #9333ea !important; }
    html:not(.dark) .dark\:text-white       { color: #111827 !important; }
    html:not(.dark) .dark\:text-gray-400    { color: #9ca3af !important; }
    html:not(.dark) .dark\:text-gray-300    { color: #6b7280 !important; }
    html:not(.dark) .dark\:bg-gray-800      { background-color: #ffffff !important; }
    html:not(.dark) .dark\:bg-gray-900      { background-color: #F5F4F0 !important; }
    html:not(.dark) .dark\:bg-purple-900\/30 { background-color: rgba(243,232,255,0.6) !important; }
    html:not(.dark) body                    { background-color: #F5F4F0 !important; }
    html:not(.dark) h1, html:not(.dark) h2,
    html:not(.dark) h3, html:not(.dark) h4  { color: #111827 !important; }
}


/* ============================================================
   DARK MODE
   ============================================================ */

html.dark body {
    background-color: #111827 !important;
    color: #f9fafb !important;
}

/* Sections - dark (exclude purple CTA) */
html.dark section.bg-white:not([class*="bg-purple"]),
html.dark section[class*="py-20"]:not([class*="bg-purple"]),
html.dark section.relative:not([class*="bg-purple"]),
html.dark section.bg-gray-900:not([class*="bg-purple"]) {
    background-color: #111827 !important;
}

html.dark section#tools,
html.dark section#feedback {
    background-color: #111827 !important;
}

/* General .bg-white in dark */
html.dark .bg-white:not(section[class*="bg-purple"]) {
    background-color: #1f2937 !important;
}
html.dark .bg-gray-900 { background-color: #111827 !important; }

/* Tool card dark backgrounds handled by CSS variables in main.css */


/* Headings - dark */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
    color: #f9fafb !important;
}
html.dark h1 span.text-purple-600,
html.dark h2 span.text-purple-600,
html.dark h3 span.text-purple-600 { color: #a855f7 !important; }

/* Nav - dark */
html.dark #site-nav {
    background: rgba(17,24,39,0.96) !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
}
html.dark .nav-logo-text .nw  { color: #f9fafb !important; }
html.dark .nav-link           { color: #9ca3af !important; }
html.dark .nav-hamburger span { background: #9ca3af !important; }
html.dark .nav-mobile-menu    { background: #111827 !important; border-top-color: rgba(255,255,255,0.08) !important; }
html.dark .nav-mobile-link    { color: #d1d5db !important; border-bottom-color: rgba(255,255,255,0.06) !important; }
html.dark .nav-theme-btn      { background: #1f2937 !important; color: #9ca3af !important; }

/* Filter tags - dark */
html.dark .ftag:not(.ftag-active) {
    background-color: #1f2937 !important;
    color: #d1d5db !important;
    border-color: rgba(255,255,255,0.1) !important;
}

/* Search input - dark */
html.dark #searchInput {
    background: #1f2937 !important;
    color: #f9fafb !important;
    border-color: rgba(255,255,255,0.1) !important;
}

/* Section category labels - dark */
html.dark .tsec > p { color: #ffffff !important; }