/* Mobile Optimizations for Shosh Public Templates */

/* Base mobile-first typography */
@media (max-width: 640px) {
    /* Reduce font sizes on mobile */
    .text-6xl { font-size: 2.25rem !important; }
    .text-5xl { font-size: 1.875rem !important; }
    .text-4xl { font-size: 1.5rem !important; }
    .text-3xl { font-size: 1.25rem !important; }
    .text-2xl { font-size: 1.125rem !important; }
    .text-xl { font-size: 1rem !important; }
    
    /* Adjust padding for mobile */
    .px-8 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    .py-20 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    .py-16 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
    
    /* Hero section mobile adjustments */
    .hero-gradient {
        padding: 3rem 0 !important;
    }
    
    /* Hide floating elements on small screens */
    .floating-element {
        display: none !important;
    }
    
    /* Card layouts on mobile */
    .grid-cols-3 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    
    /* Button adjustments */
    .rounded-full {
        border-radius: 0.75rem !important;
    }
    
    /* Form inputs on mobile */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    /* Navigation dropdowns */
    .group:hover .absolute {
        display: none !important;
    }
    
    /* Pricing toggle on mobile */
    .pricing-toggle {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    /* Feature grid adjustments */
    .feature-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    
    /* Testimonial cards */
    .testimonial-card {
        padding: 1.5rem !important;
    }
    
    /* Footer adjustments */
    footer .grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    /* Modal/popup adjustments */
    .modal-content {
        margin: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
}

/* Tablet optimizations */
@media (min-width: 641px) and (max-width: 768px) {
    .grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Touch-friendly interactions */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .hover\\:shadow-lg:hover {
        box-shadow: none !important;
    }
    
    .hover\\:-translate-y-1:hover {
        transform: none !important;
    }
    
    /* Increase tap targets */
    a, button {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Disable hover menus on touch */
    .group:hover .opacity-0 {
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

/* Landscape mobile adjustments */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-gradient {
        min-height: auto !important;
        padding: 2rem 0 !important;
    }
    
    .py-20 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

/* Fix for iOS Safari */
@supports (-webkit-touch-callout: none) {
    /* iOS specific fixes */
    body {
        -webkit-text-size-adjust: 100%;
    }
    
    /* Fix for iOS form zoom */
    input, textarea, select {
        font-size: 16px !important;
    }
}

/* Smooth scrolling for mobile */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal scroll */
body {
    overflow-x: hidden;
}

/* Mobile-friendly spacing utilities */
.mobile-spacing {
    padding: 1rem;
}

@media (min-width: 640px) {
    .mobile-spacing {
        padding: 2rem;
    }
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
}

/* Ensure clickable areas are large enough on mobile */
.mobile-tap-target {
    min-height: 48px;
    display: flex;
    align-items: center;
}

/* Fix for fixed elements on mobile */
.fixed {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Accessibility improvements for mobile */
.sr-only-mobile {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

@media (min-width: 640px) {
    .sr-only-mobile {
        position: static;
        width: auto;
        height: auto;
        padding: inherit;
        margin: inherit;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }
}