/* FlowSystem AI Mobile Optimizations
   Target: Charleston HVAC Contractors on Mobile
   =========================================== */

/* Mobile-First Base Styles */
@media screen and (max-width: 768px) {
    
    /* Typography Scaling */
    html {
        font-size: 16px !important;
        -webkit-text-size-adjust: 100%;
    }
    
    body {
        overflow-x: hidden !important;
        width: 100vw !important;
    }
    
    /* Hero Section Mobile */
    .hero-section,
    .hero {
        padding: 60px 20px 40px !important;
        min-height: auto !important;
    }
    
    .hero-title,
    h1 {
        font-size: clamp(28px, 7vw, 36px) !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
    }
    
    .hero-subtitle,
    .subtitle {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }
    
    /* CTA Buttons Mobile */
    .cta-button,
    .btn-primary,
    .button-primary,
    a[href*="book-a-call"],
    a[href*="calendly"] {
        width: 100% !important;
        padding: 18px 24px !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        margin: 10px 0 !important;
    }
    
    /* Navigation Mobile */
    .nav,
    .navbar,
    .navigation {
        padding: 15px 20px !important;
    }
    
    .nav-logo img,
    .logo img {
        max-height: 40px !important;
        width: auto !important;
    }
    
    /* Cards & Containers Mobile */
    .industry-card,
    .feature-card,
    .card {
        width: 100% !important;
        margin-bottom: 20px !important;
        padding: 20px !important;
    }
    
    .industry-grid,
    .feature-grid,
    .grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 !important;
    }
    
    /* Images Mobile */
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    .industry-card__image,
    .feature-image {
        width: 100% !important;
        height: 200px !important;
        object-fit: cover !important;
    }
    
    /* Forms Mobile */
    input,
    textarea,
    select {
        width: 100% !important;
        padding: 16px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        border-radius: 8px !important;
    }
    
    /* Section Spacing Mobile */
    section {
        padding: 40px 20px !important;
    }
    
    .container {
        padding: 0 20px !important;
        max-width: 100% !important;
    }
    
    /* Text Content Mobile */
    p {
        font-size: 16px !important;
        line-height: 1.6 !important;
        margin-bottom: 16px !important;
    }
    
    h2 {
        font-size: clamp(24px, 6vw, 28px) !important;
        margin-bottom: 16px !important;
    }
    
    h3 {
        font-size: clamp(20px, 5vw, 24px) !important;
        margin-bottom: 12px !important;
    }
    
    /* Stats/Numbers Mobile */
    .stat-number,
    .metric-number {
        font-size: clamp(32px, 8vw, 48px) !important;
    }
    
    .stat-label,
    .metric-label {
        font-size: 14px !important;
    }
    
    /* Modal/Popup Mobile */
    .modal,
    .popup {
        width: 95% !important;
        margin: 10px auto !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    
    /* Footer Mobile */
    footer {
        padding: 40px 20px !important;
    }
    
    .footer-links {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    /* Hide desktop-only elements */
    .desktop-only {
        display: block !important;
    }
    
    /* Show mobile-only elements */
    .mobile-only {
        display: block !important;
    }
}

/* Tablet Adjustments */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 0 40px !important;
    }
    
    .hero-title {
        font-size: 42px !important;
    }
    
    .industry-grid,
    .feature-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Landscape Mobile */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .hero-section {
        min-height: auto !important;
        padding: 40px 20px !important;
    }
}

/* Touch-Friendly Adjustments */
@media (hover: none) {
    .cta-button:active,
    .btn-primary:active {
        transform: scale(0.98);
    }
    
    a, button {
        -webkit-tap-highlight-color: transparent;
    }
}

/* Performance Optimizations */
@media screen and (max-width: 768px) {
    /* Reduce animations on mobile */
    * {
        animation-duration: 0.3s !important;
    }
    
    /* Optimize scrolling */
    .smooth-scroll {
        scroll-behavior: auto !important;
    }
}

/* Critical Above-the-Fold Mobile */
@media screen and (max-width: 768px) {
    /* Ensure fast initial paint */
    .hero-section::before {
        content: none !important;
    }
    
    /* Optimize background images */
    .hero-section {
        background-image: none !important;
        background-color: var(--midnight-navy, #0A1128) !important;
    }
}

/* Accessibility Mobile */
@media screen and (max-width: 768px) {
    /* Larger touch targets */
    a, button, input, textarea, select {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Better contrast for outdoor viewing */
    .text-secondary {
        color: rgba(255, 255, 255, 0.95) !important;
    }
}