/* ============================================================
   CONSOLIDATED SITE COLORS
   Single unified stylesheet for all text/background colors
   Replaces 20+ redundant color override files
   
   Created: 2025-12-26
   Purpose: Performance optimization and maintainability
   
   RULE: Dark backgrounds = White text
         Light backgrounds = Black text
   ============================================================ */

/* ============================================================
   CSS VARIABLES - Single source of truth
   ============================================================ */
:root {
    /* Text Colors */
    --text-on-dark: #ffffff;
    --text-on-light: #1e293b;
    --text-muted-dark: rgba(255, 255, 255, 0.8);
    --text-muted-light: #64748b;
    
    /* Background Colors */
    --bg-dark: #1e293b;
    --bg-darker: #0f172a;
    --bg-light: #ffffff;
    --bg-light-gray: #f8fafc;
    
    /* Link Colors */
    --link-on-dark: #60a5fa;
    --link-on-light: #3b82f6;
    
    /* Accent Colors */
    --accent-green: #10b981;
    --accent-purple: #667eea;
    --accent-yellow: #fbbf24;
}

/* ============================================================
   DARK BACKGROUNDS = WHITE TEXT
   ============================================================ */

/* Navigation */
.navbar,
.navbar *,
.nav-links,
.nav-link,
.logo-text {
    color: var(--text-on-dark) !important;
}

/* Hero Section */
.hero,
.hero *,
.city-hero,
.city-hero *,
.hero-content,
.hero-content *,
.hero-title,
.hero-subtitle,
.hero-badge,
.hero-badge *,
.hero-trust {
    color: var(--text-on-dark) !important;
}

/* Hero Stats */
.hero-stats,
.hero-stats *,
.city-stats,
.city-stats *,
.stat-item,
.stat-item *,
.stat-number,
.stat-label {
    color: var(--text-on-dark) !important;
}

/* Override gradient text for visibility */
.hero-stats .stat-number,
.city-stats .stat-number {
    -webkit-text-fill-color: var(--text-on-dark) !important;
    text-fill-color: var(--text-on-dark) !important;
    background: none !important;
}

/* Links in hero (lighter blue for contrast) */
.hero a:not(.btn-primary):not(.btn-secondary),
.city-hero a:not(.btn-primary):not(.btn-secondary) {
    color: var(--link-on-dark) !important;
    text-decoration: underline !important;
}

/* FAQ Section */
.faq-section,
.faq-section *,
.faq-item,
.faq-item *,
.faq-question,
.faq-question *,
.faq-answer,
.faq-answer *,
#faq,
#faq * {
    color: var(--text-on-dark) !important;
}

/* FAQ links (lighter blue) */
.faq-answer a {
    color: var(--link-on-dark) !important;
}

/* Footer */
.footer,
.footer *,
footer,
footer *,
.footer-content,
.footer-content *,
.footer-links,
.footer-links * {
    background: var(--bg-dark) !important;
    color: var(--text-on-dark) !important;
}

.footer a,
footer a {
    color: var(--text-muted-dark) !important;
}

.footer a:hover,
footer a:hover {
    color: var(--text-on-dark) !important;
}

/* Sticky Mobile CTA */
.sticky-cta,
.sticky-cta *,
.sticky-cta-content,
.sticky-cta-content * {
    color: var(--text-on-dark) !important;
}

/* Crisis Banner */
.crisis-banner,
.crisis-banner * {
    background: #dc2626 !important;
    color: var(--text-on-dark) !important;
}

.crisis-banner a {
    color: var(--text-on-dark) !important;
    text-decoration: underline !important;
}

/* Dark gradient sections (green, purple, blue) */
[style*="background: linear-gradient"][style*="#10b981"],
[style*="background: linear-gradient"][style*="#059669"],
[style*="background: linear-gradient"][style*="#667eea"],
[style*="background: linear-gradient"][style*="#764ba2"],
[style*="background: linear-gradient"][style*="#1e293b"],
[style*="background: linear-gradient"][style*="#0f172a"],
[style*="background: linear-gradient"][style*="#3b82f6"] {
    color: var(--text-on-dark) !important;
}

[style*="background: linear-gradient"][style*="#10b981"] *,
[style*="background: linear-gradient"][style*="#059669"] *,
[style*="background: linear-gradient"][style*="#667eea"] *,
[style*="background: linear-gradient"][style*="#764ba2"] *,
[style*="background: linear-gradient"][style*="#1e293b"] *,
[style*="background: linear-gradient"][style*="#0f172a"] *,
[style*="background: linear-gradient"][style*="#3b82f6"] * {
    color: var(--text-on-dark) !important;
}

/* CTA Sections */
.cta-section,
.cta-section * {
    color: var(--text-on-dark) !important;
}

/* ============================================================
   LIGHT BACKGROUNDS = BLACK TEXT
   ============================================================ */

/* Feature Highlights */
.demo-features,
.demo-features *,
.feature-highlight,
.feature-highlight *,
.feature-highlight strong,
.feature-highlight h3,
.feature-highlight p {
    color: var(--text-on-light) !important;
}

/* Comparison Section */
.comparison-section,
.comparison-section *,
.comparison-cta,
.comparison-cta *,
.comparison-summary,
.comparison-summary * {
    color: var(--text-on-light) !important;
}

/* Privacy Section */
.privacy-guarantee,
.privacy-guarantee *,
.privacy-section,
.privacy-section * {
    color: var(--text-on-light) !important;
}

/* Founder Bios */
.founders-quick,
.founders-quick *,
.founder-quick,
.founder-quick *,
.founder-bio,
.founder-bio *,
.founder-credential,
.founder-quote {
    color: var(--text-on-light) !important;
}

/* Cards with white backgrounds */
.feature-card,
.feature-card *,
.coach-card,
.coach-card *,
.pricing-card,
.pricing-card *,
.testimonial-card,
.testimonial-card *,
.trust-badge,
.trust-badge * {
    color: var(--text-on-light) !important;
}

/* City Pages */
.city-problem-card,
.city-solution-card,
.city-info {
    color: var(--text-on-light) !important;
}

.city-link {
    background: var(--bg-dark) !important;
    color: var(--text-on-dark) !important;
}

.city-link:hover {
    background: var(--bg-darker) !important;
}

/* Condition Pages */
.condition-hero,
.condition-content,
.symptom-card,
.treatment-card {
    color: var(--text-on-light) !important;
}

/* White background sections */
[style*="background: white"],
[style*="background: #fff"],
[style*="background: #ffffff"],
[style*="background: #f8fafc"],
[style*="background: #f9fafb"],
[style*="background: rgba(255,255,255"] {
    color: var(--text-on-light) !important;
}

[style*="background: white"] *,
[style*="background: #fff"] *,
[style*="background: #ffffff"] *,
[style*="background: #f8fafc"] *,
[style*="background: #f9fafb"] *,
[style*="background: rgba(255,255,255"] * {
    color: var(--text-on-light) !important;
}

/* Light gradient backgrounds */
[style*="background: linear-gradient"][style*="#f9fafb"],
[style*="background: linear-gradient"][style*="#e0e7ff"],
[style*="background: linear-gradient"][style*="#f0f9ff"] {
    color: var(--text-on-light) !important;
}

[style*="background: linear-gradient"][style*="#f9fafb"] *,
[style*="background: linear-gradient"][style*="#e0e7ff"] *,
[style*="background: linear-gradient"][style*="#f0f9ff"] * {
    color: var(--text-on-light) !important;
}

/* Yellow warning/info boxes - dark text */
[style*="background: #fef3c7"],
[style*="background: #fde68a"] {
    color: #92400e !important;
}

[style*="background: #fef3c7"] *,
[style*="background: #fde68a"] * {
    color: #92400e !important;
}

/* ============================================================
   BUTTONS - Preserve original styling
   ============================================================ */
.btn-primary,
.hero .btn-primary,
.city-hero .btn-primary {
    color: var(--text-on-dark) !important;
}

.btn-secondary,
.hero .btn-secondary,
.city-hero .btn-secondary {
    color: #0ea5e9 !important;
}

/* ============================================================
   FORMS AND INPUTS
   ============================================================ */
input,
textarea,
select,
.form-control {
    background: var(--bg-light) !important;
    color: var(--text-on-light) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted-light) !important;
}

/* ============================================================
   SPECIAL CASES
   ============================================================ */

/* Blue accent headings on white backgrounds */
.feature-card h4[style*="color: #3b82f6"],
[style*="background: white"] h4[style*="color: #3b82f6"] {
    color: #3b82f6 !important;
}

/* Green backgrounds = White text */
[style*="background: #10b981"] *,
[style*="background: #059669"] * {
    color: var(--text-on-dark) !important;
}

/* Links maintain appropriate color for context */
section[style*="#1e293b"] a:not(.btn-primary):not(.btn-secondary),
section[style*="#0f172a"] a:not(.btn-primary):not(.btn-secondary) {
    color: var(--link-on-dark) !important;
    text-decoration: underline;
}

/* White boxes within dark sections (keep black text) */
[style*="#1e293b"] [style*="background: white"] *,
[style*="#1e293b"] [style*="background: rgba(255,255,255"] *,
[style*="#0f172a"] [style*="background: white"] *,
[style*="#0f172a"] [style*="background: rgba(255,255,255"] * {
    color: var(--text-on-light) !important;
}

/* But preserve blue headings in those white boxes */
[style*="#1e293b"] [style*="background: white"] h4[style*="color: #3b82f6"],
[style*="#0f172a"] [style*="background: white"] h4[style*="color: #3b82f6"] {
    color: #3b82f6 !important;
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
*:focus {
    outline: 2px solid var(--link-on-dark) !important;
    outline-offset: 2px !important;
}

/* Ensure sufficient contrast */
a {
    text-decoration-thickness: 1px !important;
}

/* ============================================================
   RESPONSIVE OVERRIDES
   ============================================================ */
@media (max-width: 768px) {
    /* Mobile menu */
    .nav-links {
        background: var(--bg-light) !important;
    }
    
    .nav-links a {
        color: var(--text-on-light) !important;
    }
    
    /* Mobile hero spacing */
    .hero,
    .city-hero {
        padding-top: calc(70px + 2rem) !important;
    }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
    body,
    * {
        color: #000000 !important;
        background: #ffffff !important;
    }
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
/* Add these classes to HTML for explicit control */
.text-on-dark {
    color: var(--text-on-dark) !important;
}

.text-on-light {
    color: var(--text-on-light) !important;
}

.bg-dark-theme {
    background: var(--bg-dark) !important;
    color: var(--text-on-dark) !important;
}

.bg-light-theme {
    background: var(--bg-light) !important;
    color: var(--text-on-light) !important;
}

/* ============================================================
   CITY PAGES - WHITE BADGE FIX
   "Available 24/7" badge needs BLACK text on white background
   ============================================================ */
.trust-icon-white,
.trust-icon-white *,
.trust-icon-white span {
    color: #1e293b !important;
    font-weight: 600 !important;
}

/* White background trust badges */
.trust-icon[style*="background: white"],
.trust-icon[style*="background:white"],
.trust-icon[style*="background: #fff"],
.trust-icon[style*="background:#fff"] {
    color: #1e293b !important;
}

.trust-icon[style*="background: white"] *,
.trust-icon[style*="background:white"] *,
.trust-icon[style*="background: #fff"] *,
.trust-icon[style*="background:#fff"] * {
    color: #1e293b !important;
}