/**
 * Mobile Optimizations CSS
 * Enhances mobile experience with touch-friendly styles and performance improvements
 */

/* Touch target improvements */
.mobile-touch-target {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem !important;
}

/* Touch feedback styles */
.active-touch {
    transform: scale(0.98);
    transition: transform 0.1s ease-in-out;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3) !important;
}

.touch-hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-5px);
    transition: all 0.3s ease-in-out;
}

/* Reduced animations for better mobile performance */
.animate-reduced {
    animation: none !important;
    opacity: 0.5;
}

/* Hide scrollbars but keep functionality */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
}

/* Optimize images for mobile */
img.loaded {
    transition: opacity 0.3s ease-in-out;
}

img.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Improve mobile tab navigation */
@media (max-width: 767px) {
    [role="tablist"] {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    }
    
    [role="tablist"]:after {
        content: '';
        display: block;
        min-width: 1rem;
    }
    
    [role="tablist"] button {
        display: inline-block;
    }
    
    /* Improve touch areas for buttons */
    button, 
    a.btn,
    [type="button"],
    [type="submit"] {
        padding: 0.625rem 1rem;
    }
    
    /* Adjust font sizes for better readability on small screens */
    h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
        line-height: 1.25 !important;
    }
    
    /* Improve spacing on mobile */
    .mobile-spacing {
        margin-bottom: 1.5rem !important;
    }
    
    /* Optimize hero section for mobile */
    #hero-section {
        padding-top: 2rem !important;
        padding-bottom: 3rem !important;
    }
    
    /* Improve form elements on mobile */
    input, 
    select, 
    textarea {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }
}

/* Optimize for different mobile screen sizes */
@media (max-width: 374px) {
    /* Extra small mobile devices */
    .xs-hidden {
        display: none !important;
    }
    
    .xs-stack {
        flex-direction: column !important;
    }
    
    .xs-full {
        width: 100% !important;
    }
}

/* Improve scroll animations */
.scroll-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Optimize modal interactions for touch */
.modal-content {
    overscroll-behavior: contain;
}

/* Improve mobile navigation */
@media (max-width: 767px) {
    .mobile-menu-open {
        overflow: hidden !important;
    }
    
    .mobile-menu {
        height: 100vh;
        overscroll-behavior: contain;
    }
}