/* ========================================
   Mobile Performance Optimizations
   Data reduction + UX improvements
   ======================================== */

/* Hide heavy content on mobile */
@media (max-width: 767px) {
    /* Ensure readable text contrast on mobile */
    /* Improve text contrast on mobile without forcing all elements */
    body {
        color: var(--suv-color-text-primary);
    }
    
    h1, h2, h3, h4, h5, h6 {
        color: var(--suv-color-text-primary);
    }
    
    p {
        color: var(--suv-color-text-secondary);
    }
    
    /* Preserve cookie popup text colors for proper contrast
       Cookie popup has dark background (rgba(26, 29, 35, 0.95))
       and requires white/light text (var(--suv-color-text-inverse))
       for readability, so inherit from parent instead of forcing dark */
    .cookie-popup h4,
    .cookie-popup p {
        color: inherit;
    }
    
    .section-subtitle {
        color: var(--suv-color-accent-primary);
    }
    
    /* Ensure high contrast for section titles and headers */
    .section-subtitle {
        color: var(--suv-color-accent-primary);
        font-weight: var(--suv-weight-bold);
    }
    
    .section-title {
        color: var(--suv-color-text-primary);
        font-weight: var(--suv-weight-extrabold);
    }
    
    /* Improve info-box visibility */
    .info-box {
        background: var(--suv-color-bg-card);
        border: 2px solid var(--suv-color-border-primary);
        box-shadow: var(--suv-shadow-md);
    }
    
    .info-box h3 {
        color: var(--suv-color-text-primary);
        font-weight: var(--suv-weight-bold);
        font-size: var(--suv-font-xl);
    }
    
    .info-list dt {
        color: var(--suv-color-text-primary);
        font-weight: var(--suv-weight-bold);
    }
    
    .info-list dd {
        color: var(--suv-color-text-primary);
        font-weight: var(--suv-weight-medium);
    }
    
    /* Improve service section visibility */
    .suv-service-feature h3 {
        color: var(--suv-color-text-primary);
        font-weight: var(--suv-weight-extrabold);
    }
    
    .suv-service-feature p {
        color: var(--suv-color-text-primary);
        font-weight: var(--suv-weight-medium);
    }
    
    /* Improve project section visibility */
    .project-card h4 {
        color: var(--suv-color-text-primary);
        font-weight: var(--suv-weight-bold);
    }
    
    /* Improve contact form visibility */
    .suv-proposal-banner h2 {
        color: #ffffff;
        font-weight: var(--suv-weight-extrabold);
    }
    
    .suv-proposal-banner p {
        color: rgba(255, 255, 255, 0.95);
        font-weight: var(--suv-weight-medium);
    }
    
    .suv-form-label {
        color: var(--suv-color-text-primary);
        font-weight: var(--suv-weight-semibold);
    }
    
    .suv-form-input,
    .suv-form-textarea {
        color: var(--suv-color-text-primary);
        border: 2px solid var(--suv-color-border-primary);
        font-weight: var(--suv-weight-medium);
    }
    
    .lead-text {
        color: var(--suv-color-text-primary);
        font-weight: var(--suv-weight-medium);
    }
    
    /* Improve process section visibility */
    .process-step-detailed h3 {
        color: var(--suv-color-text-primary);
        font-weight: var(--suv-weight-extrabold);
    }
    
    .process-step-detailed p {
        color: var(--suv-color-text-primary);
        font-weight: var(--suv-weight-medium);
    }
    
    .process-step-detailed ul li {
        color: var(--suv-color-text-primary);
        font-weight: var(--suv-weight-medium);
    }
    
    /* Compact process steps on mobile - keep content visible */
    .process-step-detailed .process-step-content ul {
        margin-bottom: var(--suv-space-6);
    }
    
    .process-step-detailed .process-step-content ul li {
        font-size: var(--suv-font-sm);
        margin-bottom: var(--suv-space-2);
    }
    
    /* Compact service cards on mobile - keep content visible */
    .suv-service-feature-list {
        margin-bottom: var(--suv-space-6);
    }
    
    .suv-service-feature-list li {
        font-size: var(--suv-font-sm);
        margin-bottom: var(--suv-space-2);
        color: var(--suv-color-text-primary);
        font-weight: var(--suv-weight-medium);
    }
    
    /* Ensure consistent section backgrounds using design tokens */
    .section {
        background: var(--suv-color-bg-primary);
    }
    
    .section-gray {
        background: var(--suv-color-bg-secondary);
    }
    
    /* Show first 3 bullet points in process steps, hide the rest */
    .process-step-detailed .process-step-content ul {
        font-size: var(--suv-font-sm);
    }
    
    .process-step-detailed .process-step-content ul li:nth-child(n+4) {
        display: none;
    }
    
    /* Simplify service cards - keep at least 2-3 key features visible */
    .suv-service-feature-list {
        font-size: var(--suv-font-sm);
    }
    
    .suv-service-feature-list li:nth-child(n+4) {
        display: none;
    }
    
    /* Ensure high contrast for stats and numbers */
    .suv-hero-stat-value,
    .suv-stat-value {
        color: var(--suv-color-accent-primary);
    }
    
    .suv-hero-stat-label,
    .suv-stat-label {
        color: var(--suv-color-text-secondary);
    }
    
    /* Navigation text - mobile */
    .suv-nav-link {
        color: var(--suv-color-text-primary);
        font-weight: var(--suv-weight-semibold);
    }
    
    /* Navigation text - mobile menu */
    .suv-nav.active .suv-nav-link {
        color: var(--suv-color-text-primary);
        font-weight: var(--suv-weight-semibold);
    }
    
    /* Button text should remain as designed */
    .suv-btn-primary {
        color: white;
    }
    
    .suv-btn-secondary {
        color: var(--suv-color-text-primary);
    }
    
    /* Project card text */
    .project-content h4 {
        color: var(--suv-color-text-primary);
    }
    
    .project-content p {
        color: var(--suv-color-text-secondary);
    }
    
    .project-type {
        color: var(--suv-color-accent-primary);
    }
    
    /* Compact sidebar on mobile */
    .content-rich-sidebar .info-box {
        margin-bottom: var(--suv-space-6);
        color: var(--suv-color-text-primary);
    }
    
    /* Reduce spacing between content sections on mobile */
    .content-rich-grid {
        gap: var(--suv-space-6);
    }
    
    /* Reduce hero content */
    .suv-hero-description {
        font-size: var(--suv-font-base);
        margin-bottom: var(--suv-space-6);
    }
    
    /* Compact trust strip - show all items */
    .suv-trust-strip {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--suv-space-4);
    }
    
    .suv-trust-item {
        font-size: var(--suv-font-sm);
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: var(--suv-space-3);
        padding: var(--suv-space-4) 0;
        margin-bottom: var(--suv-space-6);
    }
    
    .suv-trust-item svg {
        width: 24px;
        height: 24px;
    }
    
    /* Show process step images on mobile in compact form */
    .process-step-image {
        display: block;
        width: 100%;
        max-width: 200px;
        margin: var(--suv-space-4) auto 0;
    }
    
    .process-step-image img {
        opacity: 0.7;
    }
    
    /* Show service visuals on mobile in compact form */
    .suv-service-feature-visual {
        display: block;
        margin-top: var(--suv-space-6);
    }
    
    .suv-service-feature-visual img {
        border-radius: var(--suv-radius-md);
    }
    
    /* Compact header */
    .suv-header {
        padding: var(--suv-space-3) 0;
    }
    
    /* Reduce section spacing on mobile */
    .section {
        padding: var(--suv-space-8) 0;
    }
    
    /* Even more compact hero section */
    .suv-hero {
        padding: var(--suv-space-6) 0;
    }
    
    /* Mobile-first navigation */
    .suv-nav-links {
        background: var(--suv-color-bg-card);
        backdrop-filter: blur(20px);
    }
    
    /* Optimize forms */
    .suv-form-group {
        margin-bottom: var(--suv-space-4);
    }
    
    /* Compact stats - responsive layout */
    .suv-hero-stats {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: var(--suv-space-4);
    }
    
    .suv-hero-stat {
        padding: var(--suv-space-3) 0;
        text-align: center;
    }
    
    .suv-hero-stat-value {
        font-size: var(--suv-font-3xl);
    }
    
    .suv-hero-stat-label {
        font-size: var(--suv-font-xs);
    }
}

/* Touch-friendly interactions */
@media (max-width: 767px) {
    /* Larger tap targets */
    .suv-btn {
        min-height: 48px;
        padding: var(--suv-space-3) var(--suv-space-6);
    }
    
    /* Bigger nav toggle */
    .suv-nav-toggle {
        width: 48px;
        height: 48px;
    }
    
    /* Improved form inputs */
    .suv-form-input,
    .suv-form-textarea {
        min-height: 48px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Better spacing */
    .container {
        padding: 0 var(--suv-space-4);
    }
}

/* Performance optimizations */
@media (max-width: 767px) {
    /* Reduce animations */
    * {
        animation-duration: 0.2s !important;
        transition-duration: 0.2s !important;
    }
    
    /* Simplified shadows */
    .suv-card {
        box-shadow: var(--suv-shadow-sm);
    }
    
    /* Reduce blur effects */
    .suv-header.scrolled::before {
        backdrop-filter: blur(8px);
    }
}

/* Data saver mode */
@media (max-width: 767px) and (prefers-reduced-data: reduce) {
    /* Hide all images except logo */
    img:not(.suv-logo img) {
        display: none;
    }
    
    /* Remove background images */
    .suv-hero::before {
        display: none;
    }
    
    /* Disable animations */
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Focus improvements for mobile */
@media (max-width: 767px) {
    :focus-visible {
        outline: 3px solid var(--suv-color-accent-primary);
        outline-offset: 2px;
    }
    
    /* Better form focus */
    .suv-form-input:focus,
    .suv-form-textarea:focus {
        outline: none;
        border-color: var(--suv-color-accent-primary);
        box-shadow: 0 0 0 3px rgba(200, 121, 65, 0.3);
    }
}