/* ============================================
   MOBILE & CROSS-BROWSER OPTIMIZATIONS
   ============================================ */

/* Prevent text size adjustment on iOS */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Fix for iOS Safari viewport height issues */
@supports (-webkit-touch-callout: none) {
    .min-h-screen, .h-screen {
        min-height: -webkit-fill-available;
        height: -webkit-fill-available;
    }
}

/* Touch-friendly tap targets (minimum 44x44px) */
a, button, input, select, textarea {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 61, 0, 0.2);
}

/* Prevent double-tap zoom on buttons */
button, a {
    touch-action: manipulation;
}

/* Fix for iOS input zoom */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
    }
    
    body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
        overscroll-behavior-y: contain;
    }
    
    img {
        max-width: 100%;
        height: auto;
        display: block;
    }
    
    h1 { 
        font-size: 2rem !important; 
        line-height: 1.2; 
    }
    
    h2 { 
        font-size: 1.75rem !important; 
        line-height: 1.3; 
    }
    
    h3 { 
        font-size: 1.5rem !important; 
        line-height: 1.4; 
    }
    
    #mobile-menu {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

/* Mobile Menu Styles - iOS Safari Compatible */
#mobile-menu {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

#mobile-toggle {
    z-index: 10000 !important;
    position: relative !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(255, 61, 0, 0.3) !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-touch-callout: none !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
}

#mobile-toggle:active {
    opacity: 0.7;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

#mobile-toggle:focus {
    outline: 2px solid rgba(255, 61, 0, 0.5) !important;
    outline-offset: 2px !important;
}

#mobile-menu a {
    display: flex !important;
    align-items: center;
    min-height: 44px;
    -webkit-tap-highlight-color: rgba(255, 61, 0, 0.2);
    -webkit-user-select: none;
    user-select: none;
}

/* Force hardware acceleration for iOS */
#mobile-menu {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Tablet Specific (iPad, Android Tablets) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    button, a {
        min-height: 48px;
        min-width: 48px;
    }
    
    body {
        font-size: 16px;
        line-height: 1.6;
    }
}

/* Landscape Orientation */
@media screen and (max-width: 767px) and (orientation: landscape) {
    nav {
        height: auto;
        min-height: 48px;
    }
    
    section {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* iOS Safari Specific Fixes */
@supports (-webkit-touch-callout: none) {
    body {
        min-height: -webkit-fill-available;
    }
    
    input:focus,
    textarea:focus,
    select:focus {
        -webkit-appearance: none;
        border-radius: 0;
    }
    
    button {
        -webkit-appearance: none;
        border-radius: 0;
    }
    
    /* Ensure mobile toggle button is always clickable in Safari */
    #mobile-toggle {
        pointer-events: auto !important;
        -webkit-tap-highlight-color: rgba(255, 61, 0, 0.3) !important;
        touch-action: manipulation !important;
        position: relative !important;
        z-index: 100001 !important;
    }
    
    /* Prevent any overlay from blocking the button */
    nav {
        pointer-events: auto !important;
    }
    
    nav > div {
        pointer-events: auto !important;
    }
}

/* Android Chrome Specific Fixes */
@media screen and (max-width: 767px) {
    body {
        overscroll-behavior-y: contain;
    }
    
    input, textarea, select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
}