/* Mobile Optimizations for Rowe & Co */

/* Header - Fixed Position for Mobile & Desktop */
header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    /* Hardware acceleration for iOS - Essential for preventing "disappearing" on scroll */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* Prevent flickering */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Ensure it sits on top of everything */
    will-change: transform;
}

/* Ensure inner content is visible and stable */
header .max-w-7xl {
    position: relative;
    z-index: 10000;
}

/* Body Padding for Fixed Header */
body {
    padding-top: 80px !important; /* 20px (h-20) for desktop */
}

@media (max-width: 1023px) {
    body {
        padding-top: 64px !important; /* 16px (h-16) for mobile */
    }
}

/* Chrome Mobile Address Bar Compatibility */
@media screen and (max-width: 1024px) {
    /* Force fixed positioning on mobile Chrome */
    header {
        position: fixed !important;
        top: 0 !important;
    }
    
    /* Prevent layout shift when Chrome address bar hides/shows */
    body {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
    
    html {
        height: -webkit-fill-available;
    }
    
    /* Ensure header doesn't bounce on scroll */
    header {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

/* iOS-specific fixes */
@supports (-webkit-touch-callout: none) {
    header {
        /* Re-enforce fixed positioning for iOS */
        position: sticky !important; /* Fallback/Alternative for some iOS contexts */
        position: -webkit-sticky !important;
        position: fixed !important; /* Primary */
        top: 0 !important;
    }
}

/* Mobile optimizations */
@media (max-width: 767px) {
    /* Hamburger button enhanced visibility */
    header button[aria-label="Toggle menu"] {
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    /* Make sure logo scales for device */
    header img[alt*="Rowe"] {
        max-height: 40px;
        max-width: calc(100vw - 120px);
        height: auto;
    }
    
    /* Optimize contact bar for mobile */
    .bg-primary.text-white {
        font-size: clamp(0.625rem, 2vw, 0.875rem);
    }
}

/* Hero section - responsive text sizing */
@media (max-width: 1023px) {
    .hero-text h1,
    #hero-parallax h1 {
        font-size: clamp(1.75rem, 6vw, 3rem) !important;
        line-height: 1.2;
    }
    
    .hero-text p,
    #hero-parallax p {
        font-size: clamp(0.875rem, 3vw, 1.125rem) !important;
    }
}

/* Mobile menu optimizations */
@media (max-width: 767px) {
    /* Mobile menu button */
    .mobile-menu-button {
        z-index: 50 !important;
    }
    
    /* Mobile menu panel */
    [x-show="mobileMenuOpen"] {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Prevent body scroll when menu is open */
    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
}

/* Text centering on mobile */
@media (max-width: 767px) {
    body,
    h1, h2, h3, h4, h5, h6,
    p, li {
        text-align: center;
    }
    
    /* Exception for menu items */
    nav a,
    header a {
        text-align: left;
    }
}

/* Dynamic mobile menu scaling */
@media (max-width: 767px) {
    /* Logo in mobile menu */
    .mobile-menu-logo {
        max-width: calc(100vw - 120px);
        height: auto;
    }
    
    /* Mobile menu links */
    .mobile-menu a {
        font-size: clamp(0.875rem, 3vw, 1rem);
        padding: clamp(0.5rem, 2vw, 0.75rem) clamp(0.75rem, 3vw, 1rem);
    }
    
    /* Email address in mobile menu */
    .mobile-menu .email {
        font-size: 0.75rem;
        word-break: break-all;
    }
    
    /* Mobile menu container */
    .mobile-menu-content {
        max-width: min(85vw, 400px);
    }
}

/* Ensure smooth scrolling on all mobile browsers */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

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