/* ==========================================================================
   Dark Mode Visibility Fix for iOS Devices
   ========================================================================== */

/* Improved Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        /* Override dark mode colors for better visibility */
        --white: #121212;
        --light-gray: #1e1e1e;
        --dark-gray: #e0e0e0;
        --medium-gray: #a0a0a0;
        --midnight-blue: #2c3e50; /* Lighter blue for dark mode */
        --coral-red: #ff6b6b; /* Slightly brighter red */
        --electric-teal: #4ecdc4; /* Brighter teal */
    }
    
    body {
        background: var(--white);
        color: var(--dark-gray);
    }
    
    /* Navigation in dark mode */
    .nav {
        background: rgba(18, 18, 18, 0.95);
        border-bottom: 1px solid #333;
    }
    
    .nav-brand-text,
    .nav-link {
        color: var(--dark-gray) !important;
    }
    
    .nav-link:hover,
    .nav-link.active {
        color: var(--coral-red) !important;
    }
    
    /* Hero section improvements */
    .hero-title {
        color: var(--dark-gray);
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    }
    
    .hero-subtitle {
        color: var(--medium-gray);
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    }
    
    /* Ensure video overlay doesn't make content invisible */
    .hero-overlay {
        background: linear-gradient(
            135deg,
            rgba(18, 18, 18, 0.4) 0%,
            rgba(30, 30, 30, 0.6) 100%
        );
    }
    
    /* Section titles and content */
    .section-title {
        color: var(--dark-gray);
    }
    
    /* Cards and containers */
    .case-card,
    .value-item,
    .article-card,
    .proof-item,
    .methodology-item,
    .timeline-item {
        background: #1e1e1e;
        color: var(--dark-gray);
        border: 1px solid #333;
    }
    
    .case-card:hover {
        background: #252525;
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(255, 107, 107, 0.2);
    }
    
    /* Icons and accents */
    .case-icon,
    .value-icon i,
    .timeline-icon i {
        color: var(--coral-red);
    }
    
    /* Buttons in dark mode */
    .btn-primary {
        background: var(--coral-red);
        color: white;
        border-color: var(--coral-red);
    }
    
    .btn-primary:hover {
        background: #ff5252;
        border-color: #ff5252;
    }
    
    .btn-secondary {
        background: transparent;
        color: var(--dark-gray);
        border: 2px solid var(--dark-gray);
    }
    
    .btn-secondary:hover {
        background: var(--dark-gray);
        color: var(--white);
    }
    
    .btn-outline {
        background: transparent;
        color: var(--coral-red);
        border: 2px solid var(--coral-red);
    }
    
    .btn-outline:hover {
        background: var(--coral-red);
        color: white;
    }
    
    /* Form elements */
    .form-group input,
    .form-group textarea {
        background: #2a2a2a;
        color: var(--dark-gray);
        border-color: #444;
    }
    
    .form-group input:focus,
    .form-group textarea:focus {
        border-color: var(--coral-red);
        background: #333;
    }
    
    /* Contact and info sections */
    .contact-info,
    .additional-links {
        background: #1e1e1e;
        border: 1px solid #333;
    }
    
    .contact-link {
        background: #2a2a2a;
        color: var(--dark-gray);
        border: 1px solid #444;
    }
    
    .contact-link:hover {
        background: var(--coral-red);
        color: white;
        border-color: var(--coral-red);
    }
    
    /* Expertise tags */
    .expertise-tag {
        background: #2a2a2a;
        color: var(--dark-gray);
        border: 1px solid #444;
    }
    
    /* Manifesto and text sections */
    .manifesto {
        background: #1a1a1a;
    }
    
    .manifesto-text p {
        color: var(--medium-gray);
    }
    
    /* KPIs and metrics */
    .kpi-number,
    .kpi-symbol {
        color: var(--coral-red);
    }
    
    .kpi-label {
        color: var(--medium-gray);
    }
    
    /* Logo strip */
    .logo-item {
        color: var(--medium-gray);
        background: #2a2a2a;
        border: 1px solid #444;
    }
    
    /* Video modal improvements */
    .video-modal {
        background: rgba(0, 0, 0, 0.9);
    }
    
    .modal-content {
        background: #1e1e1e;
        border: 1px solid #333;
    }
    
    .close-modal {
        color: var(--dark-gray);
    }
    
    .close-modal:hover {
        color: var(--coral-red);
    }
    
    /* Mobile improvements */
    @media (max-width: 768px) {
        .nav-menu {
            background: #121212;
            border: 1px solid #333;
        }
        
        .mobile-video-start-button {
            background: var(--coral-red);
            color: white;
            border: none;
        }
        
        .mobile-video-start-text {
            color: var(--medium-gray);
        }
    }
    
    /* Ensure video thumbnails are visible */
    .video-thumbnail {
        border: 2px solid #444;
    }
    
    .video-thumbnail:hover {
        border-color: var(--coral-red);
    }
    
    /* Animation and gradient fixes */
    .hero-animated-background {
        background: linear-gradient(
            -45deg,
            #1a1a1a,
            #2c3e50,
            #ff6b6b,
            #4ecdc4
        );
    }
    
    /* Proof cases specific improvements */
    .proof-title {
        color: var(--dark-gray);
    }
    
    .proof-accent-line {
        background: linear-gradient(90deg, var(--coral-red), var(--electric-teal));
    }
    
    /* Methodology section */
    .methodology-number {
        background: var(--coral-red);
        color: white;
    }
    
    /* Timeline improvements */
    .timeline-year {
        background: var(--coral-red);
        color: white;
    }
    
    /* Final CTA section */
    .final-cta,
    .proof-final-cta {
        background: #1a1a1a;
    }
    
    .cta-title {
        color: var(--dark-gray);
    }
    
    .cta-subtitle {
        color: var(--medium-gray);
    }
}

/* Force visibility improvements for critical elements */
@media (prefers-color-scheme: dark) {
    /* Ensure text is always readable */
    h1, h2, h3, h4, h5, h6 {
        color: var(--dark-gray) !important;
    }
    
    p, li, span {
        color: var(--medium-gray) !important;
    }
    
    /* Ensure icons are visible */
    i.fas, i.fab {
        color: var(--coral-red) !important;
    }
    
    /* Navigation hamburger menu */
    .bar {
        background: var(--dark-gray) !important;
    }
}