/* ==========================================================================
   ONEPROTECTION.CA — UNIVERSAL THEME ENGINE & COMPREHENSIVE DARK STYLING
   Executive Institutional Dark Mode & High-Resolution Asset Management
   Version: 1.4.1
   ========================================================================== */

/* --- 1. DARK THEME TOKENS --- */
[data-theme="dark"] {
    --primary-navy: #FFFFFF !important;
    --warm-gold: #CDA863 !important;
    --cream: #080A0F !important;
    --light-gray: #1E293B !important;
    --slate: #94A3B8 !important;

    /* Neutrals */
    --neutral-100: #0D121B !important;
    --neutral-200: #131924 !important;
    --neutral-300: #1E293B !important;
    --neutral-400: #64748B !important;
    --neutral-500: #94A3B8 !important;
    --neutral-900: #F8FAFC !important;

    /* Semantic Mappings */
    --bg-main: #080A0F !important;
    --bg-alt: #0D121B !important;
    --bg-surface: #111827 !important;
    --text-main: #F8FAFC !important;
    --text-muted: #94A3B8 !important;
    --primary: #F8FAFC !important;
    --secondary: #CDA863 !important;
    
    /* CRITICAL: Keep --white pure white so white text on dark buttons/banners remains visible */
    --white: #FFFFFF !important;

    --shadow-card: 0px 8px 30px rgba(0, 0, 0, 0.5) !important;
    --shadow-elevated: 0px 16px 40px rgba(0, 0, 0, 0.6) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --primary-navy: #FFFFFF !important;
        --warm-gold: #CDA863 !important;
        --cream: #080A0F !important;
        --light-gray: #1E293B !important;
        --slate: #94A3B8 !important;

        --neutral-100: #0D121B !important;
        --neutral-200: #131924 !important;
        --neutral-300: #1E293B !important;
        --neutral-400: #64748B !important;
        --neutral-500: #94A3B8 !important;
        --neutral-900: #F8FAFC !important;

        --bg-main: #080A0F !important;
        --bg-alt: #0D121B !important;
        --bg-surface: #111827 !important;
        --text-main: #F8FAFC !important;
        --text-muted: #94A3B8 !important;
        --primary: #F8FAFC !important;
        --secondary: #CDA863 !important;
        --white: #FFFFFF !important;

        --shadow-card: 0px 8px 30px rgba(0, 0, 0, 0.5) !important;
        --shadow-elevated: 0px 16px 40px rgba(0, 0, 0, 0.6) !important;
    }
}

/* --- 2. GLOBAL DARK STYLING --- */
[data-theme="dark"] html,
[data-theme="dark"] body {
    background-color: #080A0F !important;
    color: #F8FAFC !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) html,
    :root:not([data-theme="light"]) body {
        background-color: #080A0F !important;
        color: #F8FAFC !important;
    }
}

/* Smooth Transition across Theme Toggles */
body, header, .solution-card, .preview-card, .blog-card, .mega-card, .partners-band, footer {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* --- 3. HEADER & NAVIGATION OVERHAUL --- */
[data-theme="dark"] header,
[data-theme="dark"] #main-header {
    background: rgba(8, 10, 15, 0.96) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px) !important;
}

[data-theme="dark"] .logo img {
    filter: brightness(0) invert(1) !important;
}

[data-theme="dark"] .nav-links a {
    color: #F8FAFC !important;
}

[data-theme="dark"] .nav-links a:hover {
    color: #CDA863 !important;
}

[data-theme="dark"] .mega-menu {
    background: #0D121B !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .mega-col h4 {
    color: #CDA863 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .mega-col ul li a {
    color: #F8FAFC !important;
}

[data-theme="dark"] .mega-col ul li a span {
    color: #94A3B8 !important;
}

[data-theme="dark"] .btn-cta-navy {
    background: linear-gradient(135deg, #cda863 0%, #b38b43 100%) !important;
    border-color: #cda863 !important;
    color: #080A0F !important;
    font-weight: 800 !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) header,
    :root:not([data-theme="light"]) #main-header {
        background: rgba(8, 10, 15, 0.96) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        backdrop-filter: blur(12px) !important;
    }
    :root:not([data-theme="light"]) .logo img {
        filter: brightness(0) invert(1) !important;
    }
    :root:not([data-theme="light"]) .nav-links a {
        color: #F8FAFC !important;
    }
    :root:not([data-theme="light"]) .nav-links a:hover {
        color: #CDA863 !important;
    }
    :root:not([data-theme="light"]) .mega-menu {
        background: #0D121B !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    :root:not([data-theme="light"]) .mega-col h4 {
        color: #CDA863 !important;
    }
    :root:not([data-theme="light"]) .mega-col ul li a {
        color: #F8FAFC !important;
    }
    :root:not([data-theme="light"]) .btn-cta-navy {
        background: linear-gradient(135deg, #cda863 0%, #b38b43 100%) !important;
        border-color: #cda863 !important;
        color: #080A0F !important;
        font-weight: 800 !important;
    }
}

/* --- 4. SINGLE-BUTTON THEME CYCLER STYLING --- */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(13, 27, 42, 0.06);
    border: 1px solid rgba(13, 27, 42, 0.15);
    border-radius: 30px;
    padding: 7px 16px;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    color: #0D1B2A;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    line-height: 1;
    user-select: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.theme-toggle-btn:hover {
    background: rgba(13, 27, 42, 0.12);
    border-color: rgba(13, 27, 42, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.theme-toggle-btn i {
    font-size: 0.85rem;
    color: #B68A3C;
    transition: transform 0.3s ease;
}

.theme-toggle-btn:hover i {
    transform: rotate(15deg);
}

.theme-toggle-btn:active {
    transform: translateY(0);
}

/* Single Button in Dark Mode */
[data-theme="dark"] .theme-toggle-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(205, 168, 99, 0.35);
    color: #F8FAFC;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .theme-toggle-btn:hover {
    background: rgba(205, 168, 99, 0.18);
    border-color: #CDA863;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(205, 168, 99, 0.3);
}

[data-theme="dark"] .theme-toggle-btn i {
    color: #CDA863;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle-btn {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(205, 168, 99, 0.35);
        color: #F8FAFC;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    }
    :root:not([data-theme="light"]) .theme-toggle-btn:hover {
        background: rgba(205, 168, 99, 0.18);
        border-color: #CDA863;
        color: #FFFFFF;
    }
    :root:not([data-theme="light"]) .theme-toggle-btn i {
        color: #CDA863;
    }
}

/* Backward compatibility for any legacy elements */
.theme-switcher-pill {
    display: inline-flex;
    align-items: center;
}

/* --- 5. HERO SECTION ADAPTATION (HOME PAGE) --- */
[data-theme="dark"] .hero-full {
    background-color: #080A0F !important;
}

.hero-image-layer {
    width: 70% !important;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    z-index: 1;
}

[data-theme="dark"] .hero-image-layer {
    background-image: var(--hero-bg-img, url('assets/hero_family_night.jpg')) !important;
    background-position: var(--hero-bg-pos, center right) !important;
}

.hero-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

[data-theme="dark"] .hero-gradient-overlay {
    background: linear-gradient(90deg, 
        #080A0F 0%, 
        #080A0F 35%, 
        rgba(8, 10, 15, 0.85) 50%, 
        rgba(8, 10, 15, 0.4) 70%, 
        rgba(8, 10, 15, 0) 100%) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hero-full {
        background-color: #080A0F !important;
    }
    :root:not([data-theme="light"]) .hero-image-layer {
        background-image: var(--hero-bg-img, url('assets/hero_family_night.jpg')) !important;
        background-position: var(--hero-bg-pos, center right) !important;
    }
    :root:not([data-theme="light"]) .hero-gradient-overlay {
        background: linear-gradient(90deg, 
            #080A0F 0%, 
            #080A0F 35%, 
            rgba(8, 10, 15, 0.85) 50%, 
            rgba(8, 10, 15, 0.4) 70%, 
            rgba(8, 10, 15, 0) 100%) !important;
    }
}

[data-theme="dark"] .hero-text-block h1 {
    color: #F8FAFC !important;
}

[data-theme="dark"] .hero-gold {
    color: #CDA863 !important;
}

[data-theme="dark"] .hero-sub-text {
    color: #94A3B8 !important;
}

[data-theme="dark"] .hero-full-actions .btn-hero {
    background: linear-gradient(135deg, #CDA863 0%, #B38B43 100%) !important;
    color: #080A0F !important;
    border-color: #CDA863 !important;
    font-weight: 700 !important;
}

[data-theme="dark"] .hero-full-actions .btn-outline {
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #F8FAFC !important;
}

[data-theme="dark"] .hero-full-actions .btn-outline:hover {
    border-color: #CDA863 !important;
    color: #CDA863 !important;
    background: rgba(205, 168, 99, 0.1) !important;
}

/* --- 6. PARTNERS BAND OVERHAUL --- */
[data-theme="dark"] .partners-band {
    background: #0D121B !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .partners-band-info h3 {
    color: #F8FAFC !important;
}

[data-theme="dark"] .partners-band-info p {
    color: #94A3B8 !important;
}

[data-theme="dark"] .partners-band-logos img {
    filter: brightness(0) invert(1) opacity(0.75) !important;
}

[data-theme="dark"] .partners-band-logos img:hover {
    filter: brightness(0) invert(1) opacity(1) !important;
}

/* --- 7. QUOTE CTA SECTION --- */
[data-theme="dark"] .quote-cta-section {
    background: #080A0F !important;
}

[data-theme="dark"] .quote-cta-box {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .quote-cta-text h2 {
    color: #F8FAFC !important;
}

[data-theme="dark"] .quote-cta-text p {
    color: #94A3B8 !important;
}

/* --- 8. SOLUTIONS CARDS WITH NEW IMAGERY --- */
[data-theme="dark"] .solution-card,
[data-theme="dark"] .partner-card,
[data-theme="dark"] .premium-card {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .solution-card:hover,
[data-theme="dark"] .partner-card:hover,
[data-theme="dark"] .premium-card:hover {
    transform: translateY(-5px);
    border-color: rgba(205, 168, 99, 0.3) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .solution-card h3,
[data-theme="dark"] .solution-card h4,
[data-theme="dark"] .partner-card h3,
[data-theme="dark"] .premium-card h3 {
    color: #F8FAFC !important;
}

[data-theme="dark"] .solution-card p,
[data-theme="dark"] .partner-card p,
[data-theme="dark"] .premium-card p {
    color: #94A3B8 !important;
}

[data-theme="dark"] .partner-strip {
    background: #0D121B !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* --- 9. BLOG SECTION & CARDS --- */
[data-theme="dark"] .blog-card,
[data-theme="dark"] .article-card {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .blog-card:hover,
[data-theme="dark"] .article-card:hover {
    border-color: rgba(205, 168, 99, 0.3) !important;
    transform: translateY(-4px);
}

[data-theme="dark"] .blog-card h3,
[data-theme="dark"] .blog-card h4,
[data-theme="dark"] .article-card h3,
[data-theme="dark"] .article-card h4 {
    color: #F8FAFC !important;
}

[data-theme="dark"] .blog-card p,
[data-theme="dark"] .article-card p {
    color: #94A3B8 !important;
}

/* --- 10. JOURNEY SECTION --- */
[data-theme="dark"] .journey-section {
    background: #080A0F !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .journey-content h2 {
    color: #F8FAFC !important;
}

[data-theme="dark"] .journey-content .lead {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .journey-step h4 {
    color: #F8FAFC !important;
}

[data-theme="dark"] .journey-step p {
    color: #94A3B8 !important;
}

/* --- 11. SOLUTIONS PREVIEW SECTION --- */
[data-theme="dark"] .solutions-preview {
    background: #0D121B !important;
}

[data-theme="dark"] .preview-header h2 {
    color: #F8FAFC !important;
}

[data-theme="dark"] .preview-header p {
    color: #94A3B8 !important;
}

[data-theme="dark"] .preview-card {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .preview-card:hover {
    border-color: rgba(205, 168, 99, 0.3) !important;
}

[data-theme="dark"] .preview-card h3 {
    color: #F8FAFC !important;
}

[data-theme="dark"] .preview-card p {
    color: #94A3B8 !important;
}

/* --- 12. MASTER CTA & FOOTER --- */
[data-theme="dark"] .cta-premium {
    background: #080A0F !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .cta-premium h2 {
    color: #FFFFFF !important;
}

[data-theme="dark"] .cta-premium p {
    color: #94A3B8 !important;
}

[data-theme="dark"] .footer-master {
    background: #05070B !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .f-col-links h4, 
[data-theme="dark"] .f-col-contact h4 {
    color: #FFFFFF !important;
}

[data-theme="dark"] .footer-master a {
    color: #94A3B8 !important;
}

[data-theme="dark"] .footer-master a:hover {
    color: #CDA863 !important;
}

/* Mobile Navigation Drawer Dark Adaptations */
[data-theme="dark"] .mobile-toggle span {
    background: #F8FAFC !important;
}

/* ==========================================================================
   13. RECRUITMENT PAGE (join-us.html) VISIBILITY
   ========================================================================== */

[data-theme="dark"] .recruit-hero,
:root:not([data-theme="light"]) .recruit-hero {
    background: linear-gradient(135deg, #05070B 0%, #0D1B2A 100%) !important;
    color: #FFFFFF !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .recruit-hero .label-accent,
:root:not([data-theme="light"]) .recruit-hero .label-accent,
.label-accent {
    display: inline-block !important;
    color: #CDA863 !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    margin-bottom: 1.25rem !important;
}

[data-theme="dark"] .recruit-hero h1,
:root:not([data-theme="light"]) .recruit-hero h1 {
    color: #FFFFFF !important;
    font-size: clamp(2.5rem, 5.5vw, 4.2rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 1.5rem !important;
    font-weight: 800 !important;
}

[data-theme="dark"] .recruit-hero h1 .highlight,
:root:not([data-theme="light"]) .recruit-hero h1 .highlight {
    color: #CDA863 !important;
    font-style: italic !important;
}

[data-theme="dark"] .recruit-hero .lead,
:root:not([data-theme="light"]) .recruit-hero .lead {
    color: #CBD5E1 !important;
    font-size: 1.15rem !important;
    max-width: 680px !important;
    margin: 0 auto 3rem !important;
    line-height: 1.7 !important;
}

[data-theme="dark"] .recruit-hero .btn-hero,
:root:not([data-theme="light"]) .recruit-hero .btn-hero {
    background: #FFFFFF !important;
    color: #0D1B2A !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .recruit-hero .btn-hero:hover,
:root:not([data-theme="light"]) .recruit-hero .btn-hero:hover {
    background: #CDA863 !important;
    color: #080A0F !important;
    box-shadow: 0 6px 25px rgba(205, 168, 99, 0.4) !important;
}

[data-theme="dark"] .benefits-section,
:root:not([data-theme="light"]) .benefits-section {
    background: #080A0F !important;
}

[data-theme="dark"] .benefit-card,
:root:not([data-theme="light"]) .benefit-card {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    border-radius: 12px !important;
}

[data-theme="dark"] .benefit-card i,
:root:not([data-theme="light"]) .benefit-card i {
    color: #CDA863 !important;
    font-size: 2.2rem !important;
}

[data-theme="dark"] .benefit-card h3,
:root:not([data-theme="light"]) .benefit-card h3 {
    color: #F8FAFC !important;
    margin-top: 1rem !important;
}

[data-theme="dark"] .benefit-card p,
:root:not([data-theme="light"]) .benefit-card p {
    color: #94A3B8 !important;
}

[data-theme="dark"] .success-section,
:root:not([data-theme="light"]) .success-section {
    background: #0D121B !important;
}

[data-theme="dark"] .success-section .section-header h2,
:root:not([data-theme="light"]) .success-section .section-header h2 {
    color: #F8FAFC !important;
}

[data-theme="dark"] .success-section .section-header h2 span,
:root:not([data-theme="light"]) .success-section .section-header h2 span {
    color: #CDA863 !important;
}

[data-theme="dark"] .success-section .section-header p,
:root:not([data-theme="light"]) .success-section .section-header p {
    color: #94A3B8 !important;
}

[data-theme="dark"] .apply-box,
:root:not([data-theme="light"]) .apply-box {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .apply-box h2,
:root:not([data-theme="light"]) .apply-box h2 {
    color: #F8FAFC !important;
}

[data-theme="dark"] .apply-box p,
:root:not([data-theme="light"]) .apply-box p {
    color: #94A3B8 !important;
}

[data-theme="dark"] .apply-box label,
:root:not([data-theme="light"]) .apply-box label {
    color: #E2E8F0 !important;
}

/* ==========================================================================
   14. COMPREHENSIVE INTERIOR SUBPAGES & SERVICES
   Covers: life-insurance.html, savings.html, living-benefits.html,
   travel.html, wealth.html, protection.html
   ========================================================================== */

[data-theme="dark"] main,
:root:not([data-theme="light"]) main {
    background-color: #080A0F !important;
}

[data-theme="dark"] section,
:root:not([data-theme="light"]) section {
    background-color: #080A0F !important;
}

/* Interior Hero Sub Header */
[data-theme="dark"] .hero-sub,
:root:not([data-theme="light"]) .hero-sub {
    background: #080A0F !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .hero-sub h1,
:root:not([data-theme="light"]) .hero-sub h1 {
    color: #F8FAFC !important;
}

[data-theme="dark"] .hero-sub h1 span,
:root:not([data-theme="light"]) .hero-sub h1 span {
    color: #CDA863 !important;
}

[data-theme="dark"] .hero-sub h3,
:root:not([data-theme="light"]) .hero-sub h3 {
    color: #CDA863 !important;
}

[data-theme="dark"] .hero-sub .lead,
:root:not([data-theme="light"]) .hero-sub .lead {
    color: #CBD5E1 !important;
}

/* Specific Subpage Sections */
[data-theme="dark"] #term,
[data-theme="dark"] #universal,
[data-theme="dark"] #resp,
[data-theme="dark"] #fhsa,
[data-theme="dark"] #disability,
[data-theme="dark"] #health,
[data-theme="dark"] #canadians,
[data-theme="dark"] #supervisa,
:root:not([data-theme="light"]) #term,
:root:not([data-theme="light"]) #universal,
:root:not([data-theme="light"]) #resp,
:root:not([data-theme="light"]) #fhsa,
:root:not([data-theme="light"]) #disability,
:root:not([data-theme="light"]) #health,
:root:not([data-theme="light"]) #canadians,
:root:not([data-theme="light"]) #supervisa {
    background: #080A0F !important;
}

[data-theme="dark"] #whole,
[data-theme="dark"] #rrsp,
[data-theme="dark"] #critical,
[data-theme="dark"] #visitors,
[data-theme="dark"] #calculators,
:root:not([data-theme="light"]) #whole,
:root:not([data-theme="light"]) #rrsp,
:root:not([data-theme="light"]) #critical,
:root:not([data-theme="light"]) #visitors,
:root:not([data-theme="light"]) #calculators {
    background: #0D121B !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] section[style*="background: var(--bg-alt)"],
[data-theme="dark"] section[style*="background:var(--bg-alt)"],
:root:not([data-theme="light"]) section[style*="background: var(--bg-alt)"],
:root:not([data-theme="light"]) section[style*="background:var(--bg-alt)"] {
    background: #0D121B !important;
}

/* Service Blocks */
[data-theme="dark"] .service-block,
:root:not([data-theme="light"]) .service-block {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .service-info,
:root:not([data-theme="light"]) .service-info {
    color: #F8FAFC !important;
}

[data-theme="dark"] .service-info h2,
:root:not([data-theme="light"]) .service-info h2 {
    color: #F8FAFC !important;
}

[data-theme="dark"] .service-info h3,
:root:not([data-theme="light"]) .service-info h3 {
    color: #CDA863 !important;
}

[data-theme="dark"] .service-info p,
:root:not([data-theme="light"]) .service-info p {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .service-info ul li,
:root:not([data-theme="light"]) .service-info ul li {
    color: #E2E8F0 !important;
}

[data-theme="dark"] .service-info ul li i,
:root:not([data-theme="light"]) .service-info ul li i {
    color: #CDA863 !important;
}

[data-theme="dark"] .service-image img,
:root:not([data-theme="light"]) .service-image img {
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

/* White Strategy Cards on Wealth & Protection Pages */
[data-theme="dark"] .service-info[style*="background: #fff"],
[data-theme="dark"] .service-info[style*="background:#fff"],
[data-theme="dark"] .service-info[style*="background: white"],
:root:not([data-theme="light"]) .service-info[style*="background: #fff"],
:root:not([data-theme="light"]) .service-info[style*="background:#fff"],
:root:not([data-theme="light"]) .service-info[style*="background: white"] {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .service-info h2[style*="color: var(--navy-blue)"],
:root:not([data-theme="light"]) .service-info h2[style*="color: var(--navy-blue)"] {
    color: #F8FAFC !important;
}

[data-theme="dark"] .service-info p[style*="color: #64748b"],
:root:not([data-theme="light"]) .service-info p[style*="color: #64748b"] {
    color: #94A3B8 !important;
}

/* Institutional Partner Logos Banner on Wealth & Protection */
[data-theme="dark"] div[style*="background: rgba(15, 23, 42, 0.02)"],
:root:not([data-theme="light"]) div[style*="background: rgba(15, 23, 42, 0.02)"] {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] span[style*="color: var(--navy-blue)"],
:root:not([data-theme="light"]) span[style*="color: var(--navy-blue)"] {
    color: #E2E8F0 !important;
}

/* ==========================================================================
   15. CALCULATORS HUB (calculators.html)
   ========================================================================== */

[data-theme="dark"] .calc-hub,
:root:not([data-theme="light"]) .calc-hub {
    background: #080A0F !important;
}

[data-theme="dark"] .calc-card,
:root:not([data-theme="light"]) .calc-card {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #F8FAFC !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .calc-card h2,
:root:not([data-theme="light"]) .calc-card h2 {
    color: #F8FAFC !important;
}

[data-theme="dark"] .calc-card p,
:root:not([data-theme="light"]) .calc-card p {
    color: #94A3B8 !important;
}

[data-theme="dark"] .calc-nav-item,
:root:not([data-theme="light"]) .calc-nav-item {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] .calc-nav-item i,
:root:not([data-theme="light"]) .calc-nav-item i {
    color: #CDA863 !important;
}

[data-theme="dark"] .calc-nav-item:hover,
[data-theme="dark"] .calc-nav-item.active,
:root:not([data-theme="light"]) .calc-nav-item:hover,
:root:not([data-theme="light"]) .calc-nav-item.active {
    background: rgba(205, 168, 99, 0.18) !important;
    color: #CDA863 !important;
    border-color: #CDA863 !important;
}

[data-theme="dark"] .calc-nav-item:hover i,
[data-theme="dark"] .calc-nav-item.active i,
:root:not([data-theme="light"]) .calc-nav-item:hover i,
:root:not([data-theme="light"]) .calc-nav-item.active i {
    color: #CDA863 !important;
}

[data-theme="dark"] .form-group label,
:root:not([data-theme="light"]) .form-group label {
    color: #E2E8F0 !important;
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
:root:not([data-theme="light"]) .form-group input,
:root:not([data-theme="light"]) .form-group select {
    background: #0D121B !important;
    border: 1px solid #334155 !important;
    color: #F8FAFC !important;
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group select:focus,
:root:not([data-theme="light"]) .form-group input:focus,
:root:not([data-theme="light"]) .form-group select:focus {
    border-color: #CDA863 !important;
    background: #0D121B !important;
    box-shadow: 0 0 0 2px rgba(205, 168, 99, 0.25) !important;
}

[data-theme="dark"] .viz-container,
:root:not([data-theme="light"]) .viz-container {
    background: #0D121B !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .calc-result,
:root:not([data-theme="light"]) .calc-result {
    background: #0D121B !important;
    border: 1px solid rgba(205, 168, 99, 0.3) !important;
    color: #F8FAFC !important;
}

[data-theme="dark"] .result-item span,
:root:not([data-theme="light"]) .result-item span {
    color: #94A3B8 !important;
}

[data-theme="dark"] .result-item strong,
:root:not([data-theme="light"]) .result-item strong {
    color: #CDA863 !important;
}

[data-theme="dark"] .slider-val,
:root:not([data-theme="light"]) .slider-val {
    color: #CDA863 !important;
}

[data-theme="dark"] input[type="range"],
:root:not([data-theme="light"]) input[type="range"] {
    background: #334155 !important;
}

[data-theme="dark"] .calc-toggle,
:root:not([data-theme="light"]) .calc-toggle {
    background: #0D121B !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .toggle-btn,
:root:not([data-theme="light"]) .toggle-btn {
    background: transparent !important;
    color: #94A3B8 !important;
}

[data-theme="dark"] .toggle-btn.active,
:root:not([data-theme="light"]) .toggle-btn.active {
    background: #CDA863 !important;
    color: #080A0F !important;
    font-weight: 700 !important;
}

[data-theme="dark"] table,
:root:not([data-theme="light"]) table {
    color: #CBD5E1 !important;
}

[data-theme="dark"] table th,
:root:not([data-theme="light"]) table th {
    background: #1E293B !important;
    color: #F8FAFC !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] table td,
:root:not([data-theme="light"]) table td {
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #CBD5E1 !important;
}

[data-theme="dark"] table tr:hover,
:root:not([data-theme="light"]) table tr:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* ==========================================================================
   16. BLOG & POSTS (blog.php, post.php)
   ========================================================================== */

[data-theme="dark"] .blog-hero,
[data-theme="dark"] .article-hero,
[data-theme="dark"] article,
:root:not([data-theme="light"]) .blog-hero,
:root:not([data-theme="light"]) .article-hero,
:root:not([data-theme="light"]) article {
    background: #080A0F !important;
    color: #F8FAFC !important;
}

[data-theme="dark"] article h1,
:root:not([data-theme="light"]) article h1 {
    color: #F8FAFC !important;
}

[data-theme="dark"] .audio-promo-banner,
:root:not([data-theme="light"]) .audio-promo-banner {
    background: rgba(205, 168, 99, 0.08) !important;
    border-color: rgba(205, 168, 99, 0.25) !important;
}

[data-theme="dark"] .content,
[data-theme="dark"] .content p,
[data-theme="dark"] .content li,
[data-theme="dark"] .content span,
:root:not([data-theme="light"]) .content,
:root:not([data-theme="light"]) .content p,
:root:not([data-theme="light"]) .content li,
:root:not([data-theme="light"]) .content span {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .content h1,
[data-theme="dark"] .content h2,
[data-theme="dark"] .content h3,
[data-theme="dark"] .content h4,
[data-theme="dark"] .content strong,
:root:not([data-theme="light"]) .content h1,
:root:not([data-theme="light"]) .content h2,
:root:not([data-theme="light"]) .content h3,
:root:not([data-theme="light"]) .content h4,
:root:not([data-theme="light"]) .content strong {
    color: #F8FAFC !important;
}

[data-theme="dark"] .author-footer,
:root:not([data-theme="light"]) .author-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .author-info strong,
:root:not([data-theme="light"]) .author-info strong {
    color: #F8FAFC !important;
}

[data-theme="dark"] .author-info span,
:root:not([data-theme="light"]) .author-info span {
    color: #94A3B8 !important;
}

[data-theme="dark"] .btn-outline,
:root:not([data-theme="light"]) .btn-outline {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #F8FAFC !important;
}

[data-theme="dark"] .btn-outline:hover,
:root:not([data-theme="light"]) .btn-outline:hover {
    border-color: #CDA863 !important;
    color: #CDA863 !important;
    background: rgba(205, 168, 99, 0.1) !important;
}

/* ==========================================================================
   17. APPOINTMENT, QUOTER & NEEDS ANALYSIS WIZARDS
   ========================================================================== */

[data-theme="dark"] .appointment-hero,
[data-theme="dark"] .quoter-hero,
:root:not([data-theme="light"]) .appointment-hero,
:root:not([data-theme="light"]) .quoter-hero {
    background: #080A0F !important;
}

[data-theme="dark"] .appointment-left h1,
:root:not([data-theme="light"]) .appointment-left h1 {
    color: #F8FAFC !important;
}

[data-theme="dark"] .appointment-left h3,
:root:not([data-theme="light"]) .appointment-left h3 {
    color: #CDA863 !important;
}

[data-theme="dark"] .appointment-left .lead,
:root:not([data-theme="light"]) .appointment-left .lead {
    color: #CBD5E1 !important;
}

[data-theme="dark"] #standard-brief-card,
:root:not([data-theme="light"]) #standard-brief-card {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] #standard-brief-card span,
:root:not([data-theme="light"]) #standard-brief-card span {
    color: #F8FAFC !important;
}

[data-theme="dark"] #standard-brief-card ul li div,
:root:not([data-theme="light"]) #standard-brief-card ul li div {
    color: #CBD5E1 !important;
}

[data-theme="dark"] #standard-brief-card ul li div strong,
:root:not([data-theme="light"]) #standard-brief-card ul li div strong {
    color: #F8FAFC !important;
}

[data-theme="dark"] .quoter-card,
:root:not([data-theme="light"]) .quoter-card {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .input-group label,
:root:not([data-theme="light"]) .input-group label {
    color: #E2E8F0 !important;
}

[data-theme="dark"] .toggle-group,
:root:not([data-theme="light"]) .toggle-group {
    background: #0D121B !important;
    border: 1px solid #334155 !important;
}

[data-theme="dark"] .toggle-group button,
:root:not([data-theme="light"]) .toggle-group button {
    color: #94A3B8 !important;
}

[data-theme="dark"] .toggle-group button.active,
:root:not([data-theme="light"]) .toggle-group button.active {
    background: #CDA863 !important;
    color: #080A0F !important;
    font-weight: 700 !important;
}

[data-theme="dark"] .age-input,
[data-theme="dark"] .select-field,
:root:not([data-theme="light"]) .age-input,
:root:not([data-theme="light"]) .select-field {
    background: #0D121B !important;
    border: 1px solid #334155 !important;
    color: #F8FAFC !important;
}

[data-theme="dark"] .coverage-display,
:root:not([data-theme="light"]) .coverage-display {
    color: #CDA863 !important;
}

[data-theme="dark"] .wizard-container,
:root:not([data-theme="light"]) .wizard-container {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6) !important;
}

/* ==========================================================================
   18. GENERAL FORMS, BUTTONS & LEGAL PAGES
   ========================================================================== */

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select,
[data-theme="dark"] textarea,
:root:not([data-theme="light"]) input[type="text"],
:root:not([data-theme="light"]) input[type="email"],
:root:not([data-theme="light"]) input[type="tel"],
:root:not([data-theme="light"]) input[type="number"],
:root:not([data-theme="light"]) select,
:root:not([data-theme="light"]) textarea {
    background-color: #0D121B !important;
    border: 1px solid #334155 !important;
    color: #F8FAFC !important;
}

[data-theme="dark"] .btn-primary,
:root:not([data-theme="light"]) .btn-primary {
    background: linear-gradient(135deg, #CDA863 0%, #B38B43 100%) !important;
    color: #080A0F !important;
    border: none !important;
    font-weight: 700 !important;
}

[data-theme="dark"] .btn-primary:hover,
:root:not([data-theme="light"]) .btn-primary:hover {
    box-shadow: 0 4px 20px rgba(205, 168, 99, 0.4) !important;
}

[data-theme="dark"] .btn-shimmer,
:root:not([data-theme="light"]) .btn-shimmer {
    background: linear-gradient(135deg, #CDA863 0%, #B38B43 100%) !important;
    color: #080A0F !important;
}

[data-theme="dark"] .legal-content,
[data-theme="dark"] .contact-wrapper,
[data-theme="dark"] .contact-card,
[data-theme="dark"] .referral-card,
:root:not([data-theme="light"]) .legal-content,
:root:not([data-theme="light"]) .contact-wrapper,
:root:not([data-theme="light"]) .contact-card,
:root:not([data-theme="light"]) .referral-card {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #F8FAFC !important;
}

[data-theme="dark"] .contact-hero h1,
:root:not([data-theme="light"]) .contact-hero h1 {
    color: #F8FAFC !important;
}

/* ==========================================================================
   19. UNIVERSAL SUBPAGE CONTRAST & LEGIBILITY ENFORCEMENT (v1.3.1)
   ========================================================================== */

/* Universal Headings Contrast */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
:root:not([data-theme="light"]) h1,
:root:not([data-theme="light"]) h2,
:root:not([data-theme="light"]) h3,
:root:not([data-theme="light"]) h4,
:root:not([data-theme="light"]) h5,
:root:not([data-theme="light"]) h6 {
    color: #F8FAFC !important;
}

/* Service Info & Subpage Accent Headings */
[data-theme="dark"] .service-info h3,
[data-theme="dark"] .hero-sub h3,
[data-theme="dark"] .section-tag,
:root:not([data-theme="light"]) .service-info h3,
:root:not([data-theme="light"]) .hero-sub h3,
:root:not([data-theme="light"]) .section-tag {
    color: #CDA863 !important;
}

[data-theme="dark"] .hero-sub h1 span,
:root:not([data-theme="light"]) .hero-sub h1 span {
    color: #CDA863 !important;
}

/* General Body & Paragraph Contrast */
[data-theme="dark"] p,
:root:not([data-theme="light"]) p {
    color: #CBD5E1;
}

/* Override Any Inline Navy Blue or Slate Styles on Subpages */
[data-theme="dark"] [style*="color: var(--navy-blue)"],
[data-theme="dark"] [style*="color:var(--navy-blue)"],
:root:not([data-theme="light"]) [style*="color: var(--navy-blue)"],
:root:not([data-theme="light"]) [style*="color:var(--navy-blue)"] {
    color: #F8FAFC !important;
}

[data-theme="dark"] [style*="color: #64748b"],
[data-theme="dark"] [style*="color:#64748b"],
:root:not([data-theme="light"]) [style*="color: #64748b"],
:root:not([data-theme="light"]) [style*="color:#64748b"] {
    color: #94A3B8 !important;
}

/* Lead text */
[data-theme="dark"] .lead,
:root:not([data-theme="light"]) .lead {
    color: #CBD5E1 !important;
}

/* Modal Lead Container and Inset White Cards in Wizards */
[data-theme="dark"] #modal-lead-container,
[data-theme="dark"] div[style*="background: #f8fafc"],
:root:not([data-theme="light"]) #modal-lead-container,
:root:not([data-theme="light"]) div[style*="background: #f8fafc"] {
    background: #0D121B !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] #modal-lead-container h4,
:root:not([data-theme="light"]) #modal-lead-container h4 {
    color: #F8FAFC !important;
}

[data-theme="dark"] #modal-lead-container p,
:root:not([data-theme="light"]) #modal-lead-container p {
    color: #94A3B8 !important;
}

[data-theme="dark"] #modal-lead-container input,
:root:not([data-theme="light"]) #modal-lead-container input {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #F8FAFC !important;
}

/* Gray divider borders on interior subpages */
[data-theme="dark"] [style*="border-top: 1px solid #e2e8f0"],
:root:not([data-theme="light"]) [style*="border-top: 1px solid #e2e8f0"] {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* Checkmark icons */
[data-theme="dark"] i.fa-check-circle,
:root:not([data-theme="light"]) i.fa-check-circle {
    color: #CDA863 !important;
}

/* ==========================================================================
   20. MEGA MENU DROPDOWN - FULL DARK MODE FIX (v1.4.0)
   ========================================================================== */

/* Mega Card Dropdown Background */
[data-theme="dark"] .mega-card,
:root:not([data-theme="light"]) .mega-card {
    background: #0D121B !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important;
}

/* Mega Section Labels */
[data-theme="dark"] .mega-label,
:root:not([data-theme="light"]) .mega-label {
    color: #CDA863 !important;
    border-bottom-color: rgba(205, 168, 99, 0.25) !important;
}

/* Mega Menu Link Main Text */
[data-theme="dark"] .mega-col ul li a,
:root:not([data-theme="light"]) .mega-col ul li a {
    color: #F8FAFC !important;
}

/* Mega Menu Link Sub-Description */
[data-theme="dark"] .mega-col ul li a span,
:root:not([data-theme="light"]) .mega-col ul li a span {
    color: #94A3B8 !important;
}

/* Mega Menu Link Hover */
[data-theme="dark"] .mega-col ul li a:hover,
:root:not([data-theme="light"]) .mega-col ul li a:hover {
    color: #CDA863 !important;
}

/* Mega Menu Divider Lines */
[data-theme="dark"] .mega-col,
:root:not([data-theme="light"]) .mega-col {
    border-right-color: rgba(255, 255, 255, 0.07) !important;
}

/* Mega Col h4 headings */
[data-theme="dark"] .mega-col h4,
:root:not([data-theme="light"]) .mega-col h4 {
    color: #CDA863 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* List item hover background */
[data-theme="dark"] .mega-col ul li:hover,
:root:not([data-theme="light"]) .mega-col ul li:hover {
    background: rgba(205, 168, 99, 0.06) !important;
}

/* ==========================================================================
   21. NAVIGATION TOP BAR FULL DARK MODE (v1.4.0)
   ========================================================================== */

/* Nav link text — all pages */
[data-theme="dark"] .nav-links > li > a,
:root:not([data-theme="light"]) .nav-links > li > a {
    color: #F8FAFC !important;
}

[data-theme="dark"] .nav-links > li > a:hover,
:root:not([data-theme="light"]) .nav-links > li > a:hover {
    color: #CDA863 !important;
}

/* Chevron icons in nav dropdowns */
[data-theme="dark"] .nav-links i.fa-chevron-down,
:root:not([data-theme="light"]) .nav-links i.fa-chevron-down {
    color: #94A3B8 !important;
}

/* Mobile nav toggle bars */
[data-theme="dark"] .mobile-toggle span,
:root:not([data-theme="light"]) .mobile-toggle span {
    background: #F8FAFC !important;
}

/* Mobile nav dropdown */
[data-theme="dark"] .nav-links.active,
:root:not([data-theme="light"]) .nav-links.active {
    background: #0D121B !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
   22. FOOTER FULL DARK MODE (v1.4.0)
   ========================================================================== */

[data-theme="dark"] footer,
:root:not([data-theme="light"]) footer {
    background: #050709 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #94A3B8 !important;
}

[data-theme="dark"] footer h3,
[data-theme="dark"] footer h4,
[data-theme="dark"] footer .footer-heading,
:root:not([data-theme="light"]) footer h3,
:root:not([data-theme="light"]) footer h4,
:root:not([data-theme="light"]) footer .footer-heading {
    color: #F8FAFC !important;
}

[data-theme="dark"] footer p,
:root:not([data-theme="light"]) footer p {
    color: #94A3B8 !important;
}

[data-theme="dark"] footer a,
:root:not([data-theme="light"]) footer a {
    color: #94A3B8 !important;
}

[data-theme="dark"] footer a:hover,
:root:not([data-theme="light"]) footer a:hover {
    color: #CDA863 !important;
}

[data-theme="dark"] .footer-divider,
[data-theme="dark"] hr,
:root:not([data-theme="light"]) .footer-divider,
:root:not([data-theme="light"]) hr {
    border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] hr,
:root:not([data-theme="light"]) .footer-divider,
:root:not([data-theme="light"]) hr {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
   23. HERO IMAGE LAYER GRADIENT FIX - DARK MODE (v1.4.0)
   Fix: .hero-image-layer::before uses hardcoded cream rgba values that
   must be replaced with dark background rgba values in dark mode.
   ========================================================================== */

/* Desktop: Left-to-right fade */
[data-theme="dark"] .hero-image-layer::before,
:root:not([data-theme="light"]) .hero-image-layer::before {
    background: linear-gradient(
        to right,
        #080A0F 0%,
        #080A0F 15%,
        rgba(8, 10, 15, 0.92) 30%,
        rgba(8, 10, 15, 0.5) 45%,
        rgba(8, 10, 15, 0.15) 60%,
        transparent 80%
    ) !important;
}

/* Mobile: Bottom fade override */
@media (max-width: 768px) {
    [data-theme="dark"] .hero-image-layer::before,
    :root:not([data-theme="light"]) .hero-image-layer::before {
        background: linear-gradient(
            to bottom,
            rgba(8, 10, 15, 0.3) 0%,
            rgba(8, 10, 15, 0.75) 50%,
            #080A0F 100%
        ) !important;
    }
}

/* Also ensure hero-full background color is correct */
[data-theme="dark"] .hero-full,
:root:not([data-theme="light"]) .hero-full {
    background-color: #080A0F !important;
}

/* Ensure the ::after vertical text uses light color */
[data-theme="dark"] .hero-full::after,
:root:not([data-theme="light"]) .hero-full::after {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* ==========================================================================
   24. TARIFF ARTICLE VISUAL COMPONENTS (darkmode.css)
   ========================================================================== */
[data-theme="dark"] .tariffcard,
:root:not([data-theme="light"]) .tariffcard {
    background: #111827 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .tariffmetric,
:root:not([data-theme="light"]) .tariffmetric {
    color: #f8fafc !important;
}
[data-theme="dark"] .tariffnote,
:root:not([data-theme="light"]) .tariffnote {
    color: #94a3b8 !important;
}
[data-theme="dark"] .tariffgraph,
:root:not([data-theme="light"]) .tariffgraph {
    background: #111827 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .charthead,
:root:not([data-theme="light"]) .charthead {
    color: #f8fafc !important;
}
[data-theme="dark"] .chartnote,
:root:not([data-theme="light"]) .chartnote {
    color: #94a3b8 !important;
}
[data-theme="dark"] .chartlabel,
:root:not([data-theme="light"]) .chartlabel {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .chartbar,
:root:not([data-theme="light"]) .chartbar {
    background: #1e293b !important;
}
[data-theme="dark"] .tariffcallout,
:root:not([data-theme="light"]) .tariffcallout {
    background: rgba(197, 160, 89, 0.06) !important;
    border-color: rgba(197, 160, 89, 0.25) !important;
}
[data-theme="dark"] .callouttitle,
:root:not([data-theme="light"]) .callouttitle {
    color: #f8fafc !important;
}
[data-theme="dark"] .retaliationtable,
:root:not([data-theme="light"]) .retaliationtable {
    background: #111827 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .retaliationtable th,
:root:not([data-theme="light"]) .retaliationtable th {
    background: #1e293b !important;
    color: #f8fafc !important;
}
[data-theme="dark"] .retaliationtable td,
:root:not([data-theme="light"]) .retaliationtable td {
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: #cbd5e1 !important;
}

/* Post CTA, Audio Promo & Author Box Dark Mode */
[data-theme="dark"] .post-cta,
:root:not([data-theme="light"]) .post-cta {
    background: #111827 !important;
    border: 1px solid rgba(197, 160, 89, 0.35) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}
[data-theme="dark"] .post-cta h3,
:root:not([data-theme="light"]) .post-cta h3 {
    color: #FFFFFF !important;
}
[data-theme="dark"] .post-cta p,
:root:not([data-theme="light"]) .post-cta p {
    color: #F1F5F9 !important;
}
[data-theme="dark"] .audio-promo-icon,
:root:not([data-theme="light"]) .audio-promo-icon {
    background: #1E293B !important;
    border: 1px solid rgba(197, 160, 89, 0.3) !important;
}
[data-theme="dark"] .author-icon,
:root:not([data-theme="light"]) .author-icon {
    background: #111827 !important;
    border: 1px solid rgba(197, 160, 89, 0.35) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .author-footer,
:root:not([data-theme="light"]) .author-footer,
[data-theme="dark"] .post-actions,
:root:not([data-theme="light"]) .post-actions {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] #shareBtn,
[data-theme="dark"] a.btn-outline,
:root:not([data-theme="light"]) a.btn-outline,
:root:not([data-theme="light"]) #shareBtn {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #CBD5E1 !important;
}