/* Mobile Responsive Fixes - Critical Updates */

/* Fix viewport issues on mobile */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Fix hero sections cutting off on mobile */
@media (max-width: 768px) {
    /* Hero sections - use viewport height units that work on mobile */
    .hero {
        min-height: calc(100vh - var(--header-height, 130px)) !important;
        padding: 2rem 0 3rem !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Alternative hero fix for iOS Safari */
    @supports (-webkit-touch-callout: none) {
        .hero {
            min-height: calc(100vh - 130px) !important;
            min-height: calc(var(--vh, 1vh) * 100 - 130px) !important;
        }
    }
    
    /* Container padding adjustments */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 100% !important;
    }
    
    /* Hero content adjustments */
    .hero-content {
        padding: 1rem 0 !important;
        width: 100% !important;
    }
    
    /* Typography scaling for mobile */
    .hero-title {
        font-size: 2.25rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-subtitle {
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Button adjustments */
    .hero-buttons {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: stretch !important;
    }
    
    .btn {
        width: 100% !important;
        text-align: center !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 1rem !important;
    }
    
    /* Section spacing */
    .section {
        padding: 3rem 0 !important;
    }
    
    /* Grid fixes */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    /* Card adjustments */
    .card {
        padding: 1.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Form improvements */
    .form-input,
    .form-textarea,
    .form-select {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 0.75rem !important;
        width: 100% !important;
    }
    
    /* Contact form specific fixes */
    .contact-form-container {
        padding: 1rem !important;
    }
    
    .form-row {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .form-group {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
    
    /* Service badges responsive */
    .service-selection {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    .service-badge {
        font-size: 0.75rem !important;
        padding: 0.5rem 0.75rem !important;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    .hero-title {
        font-size: 1.875rem !important;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
    }
    
    .section {
        padding: 2rem 0 !important;
    }
    
    .card {
        padding: 1rem !important;
    }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        min-height: 80vh !important;
        padding: 1rem 0 2rem !important;
    }
    
    .hero-title {
        font-size: 2rem !important;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
    }
    
    .section {
        padding: 2rem 0 !important;
    }
}

/* Fix for iOS Safari viewport issues */
@media (max-width: 768px) {
    /* Set CSS custom property for real viewport height */
    .hero {
        min-height: calc(var(--vh, 1vh) * 100 - var(--header-height, 130px)) !important;
    }
}

/* Ensure proper spacing around header */
@media (max-width: 768px) {
    body {
        padding-top: var(--header-height, 130px) !important;
    }
    
    .page-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* Fix text overflow and readability */
@media (max-width: 768px) {
    h1, h2, h3, h4, h5, h6 {
        word-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    p {
        word-wrap: break-word !important;
        line-height: 1.6 !important;
    }
}

/* Improve touch targets */
@media (max-width: 768px) {
    button,
    .btn,
    a,
    input[type="radio"] + label,
    input[type="checkbox"] + label {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    .service-badge {
        min-height: 44px !important;
        padding: 0.75rem 1rem !important;
    }
}

/* Fix go-to-top button on mobile */
@media (max-width: 768px) {
    .go-to-top {
        bottom: 15px !important;
        right: 15px !important;
        width: 48px !important;
        height: 48px !important;
        z-index: 9999 !important;
    }
    
    .go-to-top-arrow {
        border-left: 6px solid transparent !important;
        border-right: 6px solid transparent !important;
        border-bottom: 10px solid white !important;
    }
}

/* Fix any arrow elements in content */
@media (max-width: 768px) {
    .workflow-arrow,
    .step-arrow,
    .card-link {
        font-size: 0.9rem !important;
        padding: 0.5rem !important;
    }
    
    /* Hide decorative arrows on very small screens if they cause issues */
    .hero::before,
    .hero::after {
        display: none !important;
    }
    
    /* Fix any pseudo-element arrows */
    .page-header::before,
    .page-header::after {
        display: none !important;
    }
}

/* Ensure arrow buttons have proper touch targets */
@media (max-width: 768px) {
    .btn[aria-label*="arrow"],
    .btn[title*="arrow"],
    button[class*="arrow"],
    .arrow-button {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0.75rem !important;
    }
}