/* ===================================
   Mobile Rendering Fixes for iOS/Android/iPad
   =================================== */

/* Prevent horizontal scrolling */
html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* Fix iOS Safari viewport height issues */
body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

html {
    height: -webkit-fill-available;
}

/* Prevent text size adjustment on orientation change */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Fix touch scrolling on iOS */
body {
    -webkit-overflow-scrolling: touch;
}

/* Ensure containers don't overflow */
.container {
    max-width: 100%;
    overflow-x: hidden;
}

/* Fix flexbox issues on mobile */
.header-content,
.nav,
.hero-content,
.camps-grid,
.nutrition-grid {
    flex-wrap: wrap;
}

/* Mobile Navigation Improvements */
@media (max-width: 768px) {
    /* Hide desktop navigation, show mobile menu */
    .nav {
        display: none;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--color-black-secondary);
        flex-direction: column;
        padding: var(--spacing-lg);
        z-index: 1000;
        border-top: 1px solid var(--color-gray-dark);
    }
    
    .nav.active {
        display: flex;
    }
    
    .nav-link {
        padding: var(--spacing-md);
        border-bottom: 1px solid var(--color-gray-dark);
    }
    
    /* Mobile menu toggle button */
    .mobile-menu-toggle {
        display: block;
        background: none;
        border: none;
        color: var(--color-white);
        font-size: 24px;
        cursor: pointer;
        padding: var(--spacing-sm);
    }
    
    /* Header adjustments */
    .header-content {
        justify-content: space-between;
    }
    
    .header-actions {
        display: none;
    }
    
    /* Hero section */
    .hero-title {
        font-size: 32px !important;
        line-height: 1.2;
    }
    
    .hero-subtitle {
        font-size: 14px !important;
    }
    
    /* Cards and grids */
    .camps-grid,
    .nutrition-grid,
    .platform-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-lg);
    }
    
    /* Images */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Buttons */
    .btn-primary,
    .btn-secondary,
    .btn-book {
        width: 100%;
        padding: var(--spacing-md);
    }
    
    /* Stats and metrics */
    .hero-stats,
    .stat-grid {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    /* Fix overflow on cards */
    .camp-card,
    .nutrition-card,
    .platform-card {
        max-width: 100%;
        overflow: hidden;
    }
}

/* Tablet specific fixes */
@media (min-width: 769px) and (max-width: 1024px) {
    .camps-grid,
    .nutrition-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .hero-title {
        font-size: 48px !important;
    }
}

/* iPhone specific fixes */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari specific fixes */
    body {
        cursor: pointer;
    }
    
    /* Fix sticky elements */
    .header {
        position: -webkit-sticky;
        position: sticky;
    }
    
    /* Fix input zoom */
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* Android specific fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
    /* Android Chrome specific fixes */
    select, input, textarea {
        font-size: 16px;
    }
}

/* iPad specific fixes */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) {
    /* iPad layout */
    .camps-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .nutrition-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Landscape orientation fixes */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        min-height: auto;
        padding: var(--spacing-2xl) 0;
    }
    
    .hero-title {
        font-size: 28px !important;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure images look sharp on retina displays */
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Dark mode support for mobile */
@media (prefers-color-scheme: dark) {
    /* Already dark by default, but ensure consistency */
    body {
        background-color: var(--color-black-bg);
        color: var(--color-white);
    }
}

/* Accessibility - Larger touch targets on mobile */
@media (max-width: 768px) {
    button, a, input[type="button"], input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Fix for mobile Safari bottom bar */
@supports (padding: max(0px)) {
    body {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
}