/* Additional Mobile Responsiveness Fixes */

/* Fix horizontal scroll issues on mobile */
html, body {
    overflow-x: hidden;
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Hero section mobile optimizations */
@media (max-width: 640px) {
    .hero-content {
        padding-top: 60px !important;
        min-height: 100vh;
        padding-bottom: 2rem;
    }
    
    .hero-slide {
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center center !important;
    }
    
    /* Logo mobile sizing */
    .logo-container img {
        height: 5rem !important; /* 80px */
        max-width: 90vw;
    }
    
    /* Text responsiveness */
    h1 {
        font-size: clamp(1.5rem, 8vw, 3rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }
    
    h2 {
        font-size: clamp(1rem, 5vw, 1.5rem) !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
    }
    
    p {
        font-size: clamp(0.875rem, 4vw, 1rem) !important;
        line-height: 1.5 !important;
        margin-bottom: 1.5rem !important;
    }
}

/* Enhanced mobile navigation */
@media (max-width: 1024px) {
    .mobile-menu {
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Navigation buttons mobile optimization */
    .floating-nav button {
        min-height: 48px !important;
        min-width: 48px !important;
        touch-action: manipulation;
    }
    
    /* Fix dropdown overflow on mobile */
    .group:hover .group-hover\:block {
        position: fixed !important;
        left: 0;
        right: 0;
        top: auto;
        width: 100vw;
        max-height: 70vh;
        overflow-y: auto;
        z-index: 9999;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Mobile navigation improvements */
    nav a, nav button {
        min-height: 44px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
    }
}

/* Improved mobile forms */
@media (max-width: 640px) {
    /* Contact form improvements */
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        min-height: 44px; /* Touch-friendly minimum */
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    /* Prayer form improvements */
    .prayer-form input,
    .prayer-form select,
    .prayer-form textarea {
        min-height: 44px;
        font-size: 16px;
    }
    
    /* Donation button sizing */
    .donation-amount {
        min-height: 44px;
        font-size: 14px;
    }
    
    /* Modal improvements */
    .modal-content {
        margin: 10px !important;
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* Fix video embeds on mobile */
@media (max-width: 768px) {
    iframe {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9;
    }
    
    /* Sermon grid improvements */
    .sermon-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Testimonial cards */
    .testimonial-card {
        margin-bottom: 1rem;
        padding: 1rem;
    }
}

/* Image optimization and loading */
img {
    max-width: 100%;
    height: auto;
    image-rendering: optimizeQuality;
}

/* Lazy loading placeholder */
img[loading="lazy"] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Fix layout shifts */
.aspect-video {
    aspect-ratio: 16/9;
    background-color: #f3f4f6;
}

/* Enhanced touch targets */
@media (hover: none) and (pointer: coarse) {
    button,
    .button,
    a[role="button"],
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Increase spacing for mobile */
    .mobile-spacing {
        padding: 1rem;
        margin-bottom: 1rem;
    }
}

/* Performance optimizations */
* {
    box-sizing: border-box;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .bg-white\/95,
    .bg-white\/90,
    .bg-white\/80 {
        background-color: white !important;
    }
    
    .text-gray-600,
    .text-gray-500,
    .text-gray-400 {
        color: #374151 !important;
    }
}

/* Dark mode support preparation */
@media (prefers-color-scheme: dark) {
    /* Future dark mode styles can be added here */
}