/* Dark Mode Mobile Text Visibility Fixes */

/* Enhanced Chrome and Safari mobile dark mode support */
@supports (-webkit-appearance: none) {
    @media (prefers-color-scheme: dark) and (max-width: 768px) {
        /* Safari specific dark mode fixes */
        body {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            background-color: #111827 !important;
        }
        
        /* Fix Safari text rendering issues */
        * {
            -webkit-font-smoothing: antialiased;
            -webkit-backface-visibility: hidden;
            -webkit-transform: translateZ(0);
        }
    }
}

/* Chrome specific mobile dark mode fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 768px) {
    @media (prefers-color-scheme: dark) {
        /* Chrome text clarity improvements */
        body {
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
        }
        
        /* Fix Chrome mobile viewport issues */
        html {
            -webkit-text-size-adjust: 100%;
        }
    }
}

/* Improved dark mode for mobile devices - fixes contrast issues */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
    
    /* Enhanced root variables for better mobile contrast in dark mode */
    :root {
        --color-primary: #60a5fa !important; /* Brighter blue for better visibility */
        --color-primary-dark: #3b82f6 !important;
        --color-text: #f9fafb !important; /* Bright white text */
        --color-text-light: #e5e7eb !important; /* Lighter gray for secondary text */
        --color-text-muted: #d1d5db !important; /* Better contrast for muted text */
        --color-bg: #111827 !important;
        --color-bg-alt: #1f2937 !important;
        --color-surface: #374151 !important;
        --color-border: #6b7280 !important;
    }
    
    /* Fix all heading colors for better mobile dark mode visibility */
    h1, h2, h3, h4, h5, h6 {
        color: #f9fafb !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }
    
    /* Specific heading color fixes for blue headings */
    .hero h1,
    .hero h2,
    .page-hero h1,
    .page-hero h2,
    .section-header h2,
    .product-hero h2,
    .service-hero h2 {
        color: #60a5fa !important; /* Bright blue instead of dark blue */
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
    }
    
    /* Fix very light text that becomes invisible - BODY text only, not cards */
    body > p, 
    body > div > p:not(.card p):not(.service-card p):not(.product-card p),
    body > span:not(.card span):not(.service-card span),
    footer p,
    footer span,
    nav p,
    nav span {
        color: #e5e7eb !important;
    }
    
    /* Force ALL card text to be pure BLACK for visibility */
    .card, .card *,
    .service-card, .service-card *,
    .product-card, .product-card *,
    .position-card, .position-card *,
    .benefit-card, .benefit-card *,
    .feature-card, .feature-card *,
    .process-step, .process-step *,
    .gallery-card, .gallery-card *,
    .stats-card, .stats-card * {
        color: #000000 !important; /* Pure black text on white cards */
    }
    
    /* Exception: Links and buttons can keep their colors */
    .card a, .service-card a, .product-card a,
    .card .btn, .service-card .btn, .product-card .btn,
    .card button, .service-card button, .product-card button {
        color: inherit !important; /* Let button/link styles apply */
    }
    
    /* Fix link colors */
    a {
        color: #60a5fa !important;
    }
    
    a:hover {
        color: #93c5fd !important;
    }
    
    /* Fix button text visibility */
    .btn, button {
        color: #f9fafb !important;
        border-color: #6b7280 !important;
    }
    
    .btn-primary {
        background: #3b82f6 !important;
        border-color: #3b82f6 !important;
        color: #ffffff !important;
    }
    
    .btn-secondary {
        background: #6b7280 !important;
        border-color: #6b7280 !important;
        color: #f9fafb !important;
    }
    
    /* Fix card and container backgrounds - ENSURE WHITE BACKGROUND WITH DARK TEXT */
    .card, .feature-card, .service-card, .product-card,
    .position-card, .benefit-card, .process-step, .gallery-card, .stats-card {
        background: #ffffff !important; /* WHITE background */
        border-color: #e5e7eb !important;
        color: #000000 !important; /* BLACK text for maximum contrast */
        box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.2), 0 4px 10px -2px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Force all card text to be dark/black for visibility */
    .card p, .card h3, .card h4, .card span, .card li, .card div:not(.btn),
    .service-card p, .service-card h3, .service-card h4,
    .product-card p, .product-card h3, .product-card h4,
    .position-card p, .position-card h3, .position-card h4 {
        color: #000000 !important; /* Pure black text */
        font-weight: 600 !important;
    }
    
    /* Card headings - very dark for maximum contrast */
    .card h3, .service-card h3, .product-card h3, .position-card h3 {
        color: #000000 !important;
        font-weight: 800 !important;
    }
    
    /* Fix navigation text */
    nav a, .nav-link {
        color: #e5e7eb !important;
    }
    
    nav a:hover, .nav-link:hover {
        color: #60a5fa !important;
    }
    
    /* Fix form elements */
    input, textarea, select {
        background: #374151 !important;
        border-color: #6b7280 !important;
        color: #f9fafb !important;
    }
    
    input::placeholder, textarea::placeholder {
        color: #9ca3af !important;
    }
    
    /* Fix footer text */
    footer {
        background: #111827 !important;
        color: #e5e7eb !important;
    }
    
    footer h4 {
        color: #f9fafb !important;
    }
    
    footer a {
        color: #60a5fa !important;
    }
    
    /* Fix table text */
    table, th, td {
        color: #e5e7eb !important;
        border-color: #6b7280 !important;
    }
    
    th {
        background: #374151 !important;
        color: #f9fafb !important;
    }
    
    /* Fix modal and dialog text */
    .modal, .dialog, .popup {
        background: #1f2937 !important;
        color: #e5e7eb !important;
    }
    
    /* Fix any remaining blue text that's too dark */
    .text-blue, .blue-text, .primary-text {
        color: #60a5fa !important;
    }
    
    /* Fix status indicators and badges */
    .badge, .tag, .chip, .status {
        background: #374151 !important;
        color: #e5e7eb !important;
        border-color: #6b7280 !important;
    }
    
    /* Fix pricing and highlight text */
    .price, .cost, .amount, .highlight {
        color: #fbbf24 !important; /* Yellow for better visibility */
    }
    
    /* Fix error and success text */
    .error, .danger {
        color: #f87171 !important; /* Bright red */
    }
    
    .success {
        color: #34d399 !important; /* Bright green */
    }
    
    .warning {
        color: #fbbf24 !important; /* Bright yellow */
    }
    
    /* Fix contact form and interactive elements */
    .contact-form label {
        color: #f9fafb !important;
    }
    
    .form-group label {
        color: #f9fafb !important;
    }
    
    /* Fix any remaining faint text */
    .muted, .secondary, .subtitle {
        color: #d1d5db !important; /* Brighter than default muted */
    }
    
    /* Ensure all icons and symbols are visible */
    .icon, .symbol, svg {
        color: #e5e7eb !important;
        fill: #e5e7eb !important;
    }
    
    /* Fix dropdown and select elements */
    option {
        background: #374151 !important;
        color: #f9fafb !important;
    }
    
    /* Fix any gradient text that becomes invisible */
    .gradient-text {
        background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }
}

/* Additional fixes for specific mobile browsers */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
    
    /* Chrome mobile specific fixes */
    @supports (-webkit-appearance: none) {
        body {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        h1, h2, h3, h4, h5, h6 {
            -webkit-font-smoothing: antialiased;
        }
    }
    
    /* iOS Safari specific fixes */
    @supports (-webkit-touch-callout: none) {
        body {
            -webkit-text-size-adjust: 100%;
        }
        
        /* Prevent text from becoming too small in dark mode */
        p, span, div, li {
            font-size: inherit !important;
            line-height: 1.5 !important;
        }
    }
}

/* Force high contrast for accessibility */
@media (prefers-color-scheme: dark) and (max-width: 768px) and (prefers-contrast: high) {
    h1, h2, h3, h4, h5, h6 {
        color: #ffffff !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    }
    
    p, span, div, li {
        color: #ffffff !important;
    }
    
    .text-blue, .blue-text, .primary-text {
        color: #87ceeb !important; /* Sky blue for maximum contrast */
    }
}

/* Additional mobile browser specific fixes */
@media (max-width: 768px) {
    /* Fix touch target sizes for mobile - MUST KEEP position:fixed! */
    .smart-chat-btn {
        position: fixed !important; /* CRITICAL: Must maintain fixed positioning */
        bottom: 20px !important;
        right: 20px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        touch-action: manipulation !important;
        transform: translateZ(0) !important; /* GPU acceleration */
        z-index: 999999 !important; /* Ensure above all content */
    }
    
    /* Improve button visibility in dark mode */
    @media (prefers-color-scheme: dark) {
        button, .btn, input[type="submit"] {
            background: #374151 !important;
            color: #f9fafb !important;
            border: 1px solid #6b7280 !important;
        }
        
        button:hover, .btn:hover {
            background: #4b5563 !important;
        }
        
        /* Fix form input visibility */
        input, textarea, select {
            background: #374151 !important;
            color: #f9fafb !important;
            border: 1px solid #6b7280 !important;
        }
        
        input::placeholder, textarea::placeholder {
            color: #9ca3af !important;
        }
        
        /* Navigation improvements for mobile dark mode */
        nav, .navigation, .navbar {
            background: #1f2937 !important;
        }
        
        nav a, .nav-link {
            color: #f9fafb !important;
        }
        
        /* Footer text visibility */
        footer, .footer {
            background: #111827 !important;
            color: #e5e7eb !important;
        }
        
        /* Card and section visibility */
        .card, .section, .content-block {
            background: #1f2937 !important;
            border: 1px solid #374151 !important;
        }
    }
}