/* Mobile-specific enhancements */

/* Prevent horizontal scroll on mobile */
body {
    overflow-x: hidden;
    width: 100%;
}

/* Better mobile scrolling - prevent white flash during fast scroll / overscroll */
html {
    -webkit-overflow-scrolling: touch;
    background-color: #0a0a0a !important;
}
body {
    background-color: #0a0a0a;
}
main {
    background-color: transparent;
    min-height: 100vh;
}

/* Improve touch interactions */
button, a, [role="button"] {
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

/* Mobile navigation hamburger icon */
#mobile-menu-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s ease;
}

#mobile-menu-btn:hover,
#mobile-menu-btn:active {
    background: rgba(210, 105, 30, 0.1);
}

/* Mobile menu styling */
@media (max-width: 768px) {
    #mobile-menu {
        background: var(--bg-card-dark);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 16px;
        border: 1px solid var(--border-color);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }
    
    #mobile-menu a {
        transition: all 0.2s ease;
    }
    
    #mobile-menu a:active {
        background: rgba(210, 105, 30, 0.1);
        transform: scale(0.98);
    }
    
    /* Optimize images for mobile */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Ensure readable text on mobile */
    small {
        font-size: 13px !important;
    }
    
    /* Better form controls on mobile */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        width: 100%;
        font-size: 16px;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        padding: 12px;
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }
    
    /* Focus states for accessibility */
    input:focus,
    textarea:focus,
    select:focus,
    button:focus {
        outline: 2px solid rgba(210, 105, 30, 0.5);
        outline-offset: 2px;
    }
    
    /* Homepage product cards: short video on mobile so full card (title, description, price) is visible */
    .homepage-featured-products .homepage-product-grid,
    .homepage-featured-products .homepage-product-card {
        overflow: visible !important;
    }
    .homepage-card-video {
        height: 5rem !important;
        max-height: 5rem !important;
        min-height: 5rem !important;
        flex-shrink: 0 !important;
    }
    .homepage-product-card {
        display: flex !important;
        flex-direction: column !important;
    }
    .homepage-card-content {
        flex-shrink: 0 !important;
        display: block !important;
        visibility: visible !important;
        min-height: auto !important;
        opacity: 1 !important;
        overflow: visible !important;
    }
    /* Homepage standby card: shorter video on mobile */
    .homepage-standby-video {
        height: 6rem !important;
        max-height: 6rem !important;
        min-height: 6rem !important;
        flex-shrink: 0 !important;
    }
    .homepage-standby-card {
        display: flex !important;
        flex-direction: column !important;
    }
}

/* Tablet and desktop */
@media (min-width: 769px) {
    /* Ensure mobile menu stays hidden on desktop */
    #mobile-menu {
        display: none !important;
    }
    
    #mobile-menu-btn {
        display: none !important;
    }
}

/* Landscape mobile optimization */
@media (max-width: 926px) and (orientation: landscape) {
    .hero-title {
        font-size: 28px;
    }
    
    .py-12 {
        padding-top: 24px;
        padding-bottom: 24px;
    }
    
    nav {
        height: auto;
    }
    
    .h-20 {
        height: 64px;
    }
}

/* Safe area insets for notched devices (no top padding on homepage to avoid black bar; nav has its own safe-area) */
@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
    body:not(.homepage) {
        padding-top: env(safe-area-inset-top);
    }
    .nav-glass {
        margin-left: max(16px, env(safe-area-inset-left));
        margin-right: max(16px, env(safe-area-inset-right));
        padding-top: env(safe-area-inset-top);
    }
}