/* PEMDAS Pathway - Emergency Contrast Fix for Landing Page */
/* Resolves CSS conflicts causing poor text visibility */
/* Created: January 2025 */

/* ========================================
   ROOT CAUSE FIX: Override Dark Mode Variables on Light Sections
   ======================================== */

/* Force proper color values on all light-background sections */
.features-section,
.how-it-works-section,
.signup-section,
.faq-section,
.trust-section,
.hero-section {
    /* Override any dark-mode inversions */
    --gray-50: #fafafa !important;
    --gray-100: #f5f5f5 !important;
    --gray-200: #e5e5e5 !important;
    --gray-600: #525252 !important;
    --gray-700: #404040 !important;
    --gray-800: #262626 !important;
    --gray-900: #171717 !important;
}

/* ========================================
   FAQ SECTION - Critical Fix
   ======================================== */

.faq-section {
    background: white !important;
}

.faq-item {
    background: white !important;
    border: 1px solid #e5e5e5 !important;
}

.faq-item h3 {
    color: #171717 !important;  /* Very dark gray, almost black */
    font-weight: 600 !important;
}

.faq-item p {
    color: #262626 !important;  /* Dark gray for body text */
    font-weight: 400 !important;
    line-height: 1.625 !important;
}

/* ========================================
   FEATURES SECTION - "Why Choose PEMDAS Pathway?"
   ======================================== */

.features-section {
    background: white !important;
}

.feature-card,
.card-feature {
    background: white !important;
    border: 1px solid #e5e5e5 !important;
}

.feature-card h3,
.card-feature h3,
.feature-card .card-header-title,
.card-feature .card-header-title {
    color: #171717 !important;  /* Very dark */
    font-weight: 700 !important;
}

.feature-card p,
.card-feature p,
.feature-card .card-body,
.card-feature .card-body {
    color: #262626 !important;  /* Dark gray */
    font-weight: 400 !important;
    line-height: 1.625 !important;
}

/* ========================================
   HOW IT WORKS SECTION
   ======================================== */

.how-it-works-section {
    background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%) !important;
}

.step-card {
    background: white !important;
    border: 1px solid #e5e5e5 !important;
}

.step-card h3 {
    color: #171717 !important;
    font-weight: 600 !important;
}

.step-card p {
    color: #262626 !important;
    font-weight: 400 !important;
    line-height: 1.625 !important;
}

.step-number {
    color: white !important;  /* Keep white text on gradient background */
}

/* ========================================
   TRUST/PRIVACY SECTION - "Built for Privacy"
   ======================================== */

.trust-section {
    background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%) !important;
}

.trust-item,
.card-enhanced.trust-item {
    background: white !important;
    border: 1px solid #e5e5e5 !important;
}

.trust-item h3 {
    color: #171717 !important;
    font-weight: 700 !important;
}

.trust-item p {
    color: #262626 !important;
    font-weight: 400 !important;
    line-height: 1.625 !important;
}

/* ========================================
   SIGNUP SECTION
   ======================================== */

.signup-section {
    background: white !important;
}

.signup-card {
    background: white !important;
    border: 1px solid #e5e5e5 !important;
}

.signup-card h2 {
    color: #171717 !important;
}

.signup-card p,
.signup-note,
.input-hint {
    color: #262626 !important;
}

/* Input styling */
.signup-input {
    background: white !important;
    border: 2px solid #d4d4d4 !important;
    color: #171717 !important;
}

.signup-input::placeholder {
    color: #737373 !important;  /* Medium gray for placeholder */
    opacity: 1 !important;
}

.signup-input:focus {
    border-color: #14b8a6 !important;
    outline: none !important;
}

/* ========================================
   SECTION TITLES - Global
   ======================================== */

.section-title {
    color: #171717 !important;
    font-weight: 800 !important;
}

/* ========================================
   CARD ENHANCEMENTS - Universal
   ======================================== */

/* Ensure all cards on landing page have proper contrast */
.landing-page .card-enhanced,
.landing-page .card-feature,
.landing-page .card-interactive,
.landing-page .card-elevated {
    background: white !important;
}

.landing-page .card-enhanced h3,
.landing-page .card-enhanced h4,
.landing-page .card-feature h3,
.landing-page .card-feature h4 {
    color: #171717 !important;
}

.landing-page .card-enhanced p,
.landing-page .card-feature p {
    color: #262626 !important;
    font-weight: 400 !important;
}

/* ========================================
   DEMO SECTION - Hero Interactive Demo (Dark Theme)
   ======================================== */

/* Demo now uses dark theme - do not override with light styles */
.demo-problem {
    /* Keep dark background as designed */
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

.demo-question {
    color: white !important;
}

.demo-label {
    color: #2dd4bf !important;  /* Teal accent */
}

.demo-counter {
    color: rgba(255, 255, 255, 0.7) !important;
}

.demo-score {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Ensure minimum contrast ratios (WCAG AA) */
@media (prefers-contrast: more) {
    .faq-item p,
    .feature-card p,
    .step-card p,
    .trust-item p {
        color: #000000 !important;  /* Pure black for high contrast mode */
        font-weight: 500 !important;
    }
}

/* Prevent dark mode from breaking light sections */
@media (prefers-color-scheme: dark) {
    /* Force light mode styling on these sections */
    .landing-page,
    .features-section,
    .how-it-works-section,
    .signup-section,
    .faq-section,
    .trust-section {
        color-scheme: light !important;
    }
    
    /* Maintain light backgrounds even in dark mode */
    .faq-item,
    .feature-card,
    .step-card,
    .trust-item,
    .signup-card,
    .demo-problem {
        background: white !important;
        border-color: #e5e5e5 !important;
    }
    
    /* Keep text dark on light backgrounds */
    .landing-page h1,
    .landing-page h2,
    .landing-page h3,
    .landing-page h4,
    .landing-page p,
    .landing-page span:not(.hero-title-gradient) {
        color: inherit;  /* Don't let dark mode invert */
    }
}

/* ========================================
   SPECIFICITY OVERRIDES
   ======================================== */

/* High-specificity overrides to beat any competing styles */
.landing-page .features-section .features-grid .card-feature p {
    color: #262626 !important;
}

.landing-page .how-it-works-section .steps-grid .step-card p {
    color: #262626 !important;
}

.landing-page .faq-section .faq-grid .faq-item p {
    color: #262626 !important;
}

.landing-page .trust-section .trust-grid .trust-item p {
    color: #262626 !important;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .faq-item p,
    .feature-card p,
    .step-card p,
    .trust-item p {
        color: #000000 !important;
    }
}

/* ========================================
   MOBILE OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
    /* Ensure readability on mobile */
    .faq-item p,
    .feature-card p,
    .step-card p,
    .trust-item p {
        font-size: 0.9375rem !important;  /* Slightly smaller but still readable */
        line-height: 1.7 !important;
    }
}

/* ========================================
   VALIDATION MARKERS (for debugging)
   ======================================== */

/* Add to body for visual confirmation fix is loaded */
body.landing-contrast-fix-applied {
    /* This class can be added by JS to confirm CSS loaded */
}

/* Debug mode - uncomment to see fixed elements */
/*
.faq-item,
.feature-card,
.step-card,
.trust-item {
    outline: 2px solid green !important;
}
*/