/* ========================================
   Mobile Responsive Fixes & Optimizations
   ShiftTech - Production Ready
   ======================================== */

/* ==========================================
   1. MOBILE TYPOGRAPHY FIXES
   ========================================== */

/* Extra Small Devices (< 576px) */
@media (max-width: 575px) {
    /* Hero heading - responsive scaling */
    .banner h1 {
        font-size: clamp(1.75rem, 8vw, 3.5rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }

    /* Hero paragraph - better readability */
    .banner p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    /* Section padding reduction for mobile */
    .tw-py-80-px {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* Banner height adjustment */
    .banner {
        min-height: auto !important;
        padding: 50px 0 !important;
    }

    /* Reduce container padding on very small screens */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Adjust button sizes for mobile */
    .btn {
        font-size: 0.875rem !important;
        padding: 10px 16px !important;
    }

    /* Fix text sizing in feature sections */
    .tw-text-base {
        font-size: 0.875rem !important;
    }

    .tw-text-lg {
        font-size: 1rem !important;
    }
}

/* Small Devices (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .banner h1 {
        font-size: clamp(2rem, 6vw, 3.5rem) !important;
        line-height: 1.2 !important;
    }

    .tw-py-80-px {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
}

/* Tablet Devices (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .banner h1 {
        font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
    }

    .tw-py-80-px {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
}


/* ==========================================
   2. MOBILE MENU FIXES
   ========================================== */

@media (max-width: 991px) {
    /* Mobile menu - DO NOT override width or transforms (GSAP controlled) */
    /* Only adjust internal spacing and typography */

    /* Mobile menu links - larger touch targets and visible text */
    .mobile-menu .nav-menu__link {
        padding: 14px 20px !important;
        min-height: 44px;
        display: flex !important;
        align-items: center;
        color: #1a1a1a !important; /* Ensure text is visible */
    }

    /* Mobile menu submenu links */
    .mobile-menu .nav-submenu__link {
        color: #1a1a1a !important; /* Ensure submenu text is visible */
        display: block !important;
    }

    /* Mobile submenu styling */
    .mobile-menu .nav-submenu {
        position: static !important;
        width: 100% !important;
        max-height: none !important;
        margin-top: 0 !important;
    }

    /* Ensure mobile menu text is visible */
    .mobile-menu,
    .mobile-menu__inner,
    .mobile-menu__menu {
        color: #1a1a1a;
    }
}


/* ==========================================
   3. TOUCH TARGET OPTIMIZATION
   ========================================== */

@media (max-width: 991px) {
    /* Minimum 44x44px touch targets (Apple HIG) */
    a,
    button,
    .btn,
    .nav-menu__link,
    .nav-submenu__link {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Navigation links spacing */
    .nav-menu__link {
        padding: 14px 20px !important;
    }

    /* Button padding */
    .btn {
        padding: 12px 20px !important;
    }

    /* Icon buttons */
    .toggle-mobileMenu,
    .close-button {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }
}


/* ==========================================
   4. IMAGE OPTIMIZATION
   ========================================== */

/* Ensure all images are responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Fix aspect ratios on mobile */
@media (max-width: 767px) {
    .banner img,
    .section img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}


/* ==========================================
   5. GRID & LAYOUT FIXES
   ========================================== */

@media (max-width: 575px) {
    /* Force single column on very small screens */
    .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Reduce gap spacing */
    .tw-gap-14 {
        gap: 1rem !important;
    }

    .tw-gap-8 {
        gap: 0.75rem !important;
    }

    .tw-gap-6 {
        gap: 0.5rem !important;
    }
}


/* ==========================================
   6. HEADER & NAVIGATION OPTIMIZATION
   ========================================== */

@media (max-width: 991px) {
    /* Fixed header spacing adjustment */
    #smooth-wrapper {
        padding-top: 70px !important;
    }

    /* Logo sizing */
    .logo img,
    .mobile-menu__logo img {
        max-width: 150px !important;
        height: auto;
    }

    /* Header buttons on mobile */
    .header .btn {
        font-size: 0.75rem !important;
        padding: 8px 12px !important;
    }
}

@media (max-width: 575px) {
    /* Even smaller logo on tiny screens */
    .logo img,
    .mobile-menu__logo img {
        max-width: 120px !important;
    }

    /* Hide long text in buttons */
    .btn .button__label {
        font-size: 0.75rem;
    }
}


/* ==========================================
   7. MODAL & POPUP OPTIMIZATION
   ========================================== */

@media (max-width: 767px) {
    /* Full-screen modals on mobile */
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100vh !important;
    }

    .modal-content {
        border-radius: 0 !important;
        min-height: 100vh;
    }
}


/* ==========================================
   8. FORM OPTIMIZATION
   ========================================== */

@media (max-width: 575px) {
    /* Form inputs - larger touch targets */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important; /* Prevents zoom on iOS */
        min-height: 44px;
        padding: 12px 16px !important;
    }

    /* Form buttons */
    input[type="submit"],
    button[type="submit"] {
        width: 100%;
        min-height: 48px;
        font-size: 1rem;
    }
}


/* ==========================================
   9. CAROUSEL/SLIDER OPTIMIZATION
   ========================================== */

@media (max-width: 575px) {
    /* Swiper navigation buttons */
    .swiper-button-next,
    .swiper-button-prev {
        width: 40px !important;
        height: 40px !important;
    }

    /* Swiper pagination */
    .swiper-pagination {
        bottom: 10px !important;
    }
}


/* ==========================================
   10. SCROLL BEHAVIOR OPTIMIZATION
   ========================================== */

/* Smooth scrolling for touch devices */
@media (max-width: 991px) {
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    /* Scroll to top button positioning */
    .progress-wrap {
        bottom: 20px !important;
        right: 20px !important;
        width: 44px !important;
        height: 44px !important;
    }
}


/* ==========================================
   11. UTILITY CLASSES MOBILE OVERRIDES
   ========================================== */

@media (max-width: 575px) {
    /* Spacing utilities mobile adjustment */
    .tw-mb-8 { margin-bottom: 1.5rem !important; }
    .tw-mb-6 { margin-bottom: 1rem !important; }
    .tw-mt-8 { margin-top: 1.5rem !important; }
    .tw-mt-6 { margin-top: 1rem !important; }

    /* Padding utilities */
    .tw-p-6 { padding: 1rem !important; }
    .tw-px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .tw-py-6 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
}


/* ==========================================
   12. PERFORMANCE OPTIMIZATIONS
   ========================================== */

/* Reduce animations on low-end devices */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* GPU acceleration for smooth animations */
@media (max-width: 991px) {
    /* DO NOT add transform to .mobile-menu - it breaks GSAP animations */
    .overlay,
    .side-overlay,
    .progress-wrap {
        transform: translateZ(0);
        will-change: transform;
    }

    /* For mobile menu, only set will-change without overriding transform */
    .mobile-menu {
        will-change: transform;
        /* Let GSAP handle all transforms */
    }
}


/* ==========================================
   13. ORIENTATION SPECIFIC FIXES
   ========================================== */

/* Landscape mode on mobile */
@media (max-width: 991px) and (orientation: landscape) {
    /* Reduce vertical padding in landscape */
    .banner {
        padding: 30px 0 !important;
        min-height: auto !important;
    }

    .tw-py-80-px {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    /* Header height reduction */
    #smooth-wrapper {
        padding-top: 60px !important;
    }
}


/* ==========================================
   14. PRINT STYLES
   ========================================== */

@media print {
    /* Hide non-essential elements */
    .mobile-menu,
    .header,
    .footer,
    .progress-wrap,
    .cursor,
    .dot,
    .overlay,
    .side-overlay {
        display: none !important;
    }

    /* Ensure content is visible */
    #smooth-wrapper {
        padding-top: 0 !important;
    }

    /* Black text on white background */
    * {
        background: white !important;
        color: black !important;
    }
}


/* ==========================================
   15. ACCESSIBILITY ENHANCEMENTS
   ========================================== */

/* Focus states for keyboard navigation */
@media (max-width: 991px) {
    a:focus,
    button:focus,
    input:focus,
    textarea:focus {
        outline: 2px solid #74b812;
        outline-offset: 2px;
    }

    /* Skip to main content link */
    .skip-to-main {
        position: absolute;
        top: -40px;
        left: 0;
        background: #74b812;
        color: white;
        padding: 8px 16px;
        text-decoration: none;
        z-index: 10000;
    }

    .skip-to-main:focus {
        top: 0;
    }
}