/**
 * Seachology Mobile Styles
 * Simple, targeted mobile optimizations
 * CRITICAL: This file must load AFTER tailwind.min.css
 */

/* ============================================
   BASE MOBILE FIXES
   ============================================ */

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

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Box sizing on all elements */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ============================================
   HEADER MOBILE STYLES
   ============================================ */

/* Ensure header is visible and properly styled */
header,
#main-header {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Mobile: Hide desktop navigation, show menu button */
@media (max-width: 1023px) {
    /* Hide desktop nav */
    #main-header nav[class*="lg:flex"],
    header nav[class*="lg:flex"] {
        display: none !important;
    }
    
    /* Show menu button */
    #menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Desktop: Show menu button (popup menu for all screen sizes) */
@media (min-width: 1024px) {
    /* Menu button visible on desktop too */
    #menu-toggle {
        display: flex !important;
    }
    
    /* Menu dropdown width for desktop */
    #menu-dropdown {
        width: 400px !important;
    }
}

/* Menu button must be clickable */
#menu-toggle {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 51 !important;
}

/* Chat button must be clickable */
#chat-toggle-header {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 51 !important;
}

/* Header background not clickable, only elements */
#main-header,
header {
    pointer-events: none !important;
}

/* Only interactive elements clickable */
#main-header a,
#main-header button,
header a,
header button {
    pointer-events: auto !important;
}

/* ============================================
   MENU DROPDOWN STYLES
   ============================================ */

/* Menu dropdown visibility */
#menu-dropdown {
    display: block !important;
    transform: translateX(100%);
    transition: transform 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease;
    visibility: hidden;
    opacity: 0;
    z-index: 100 !important;
}

#menu-dropdown.show {
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Menu overlay */
#menu-overlay {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 99 !important;
}

#menu-overlay.show {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Prevent body scroll when menu open */
body.menu-open {
    overflow: hidden;
}

/* ============================================
   MOBILE RESPONSIVE STYLES (< 768px)
   ============================================ */

@media (max-width: 767px) {
    /* Mobile typography */
    h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    h2 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
    }
    
    /* Prevent iOS zoom on form inputs */
    input[type="email"],
    input[type="text"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px !important;
    }
    
    /* Touch-friendly buttons */
    button,
    .btn,
    a[role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Mobile images */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Mobile videos */
    video {
        max-width: 100%;
        height: auto;
    }
    
    /* Mobile grid to single column */
    .grid[class*="md:grid-cols"],
    .grid[class*="lg:grid-cols"] {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   FOOTER STYLES
   ============================================ */

footer,
[data-component="footer"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================
   iOS SAFARI SPECIFIC FIXES
   ============================================ */

@supports (-webkit-touch-callout: none) {
    /* iOS Safari sticky header fix */
    header,
    #main-header {
        position: -webkit-sticky !important;
        position: sticky !important;
        -webkit-transform: translateZ(0);
    }
    
    /* Prevent iOS tap highlight */
    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
    
    /* iOS scrolling */
    body {
        -webkit-overflow-scrolling: touch;
    }
}