/* AirAzona FPV - Header Stability CSS */
/* Prevents header flashing/flickering during scroll across all pages */
/* Version: 3.0 - Fixed overlapping text issues - September 2025 */

/* Navigation blur effect - Fixed without layout conflicts */
.nav-blur {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(17, 24, 39, 0.98);
    background-image: linear-gradient(to bottom, rgba(17, 24, 39, 0.99), rgba(17, 24, 39, 0.97));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Navbar stability without forced positioning */
#navbar,
nav[id="navbar"] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity;
    transition: all 0.3s ease;
}

/* Remove overly aggressive positioning rules */
.navbar,
nav.fixed,
.fixed-header {
    position: relative;
    z-index: inherit;
}

/* Mobile specific optimizations */
@media (max-width: 768px) {
    .nav-blur {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        background: rgba(17, 24, 39, 0.99);
    }
    
    #navbar {
        padding: 0.75rem 0;
    }
}

/* Prevent blur performance issues on older devices */
@media (prefers-reduced-motion: reduce) {
    .nav-blur {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(17, 24, 39, 1);
    }
    
    #navbar {
        transition: none;
    }
}

/* GPU acceleration for smooth scrolling */
@supports (backdrop-filter: blur(1px)) {
    .nav-blur {
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }
}

/* Fallback for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
    .nav-blur {
        background: rgba(17, 24, 39, 1);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* Safari specific optimizations */
@supports (-webkit-backdrop-filter: blur(1px)) {
    .nav-blur {
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
    }
}

/* Content spacing to prevent overlap */
body {
    padding-top: 0;
}

main,
article,
.main-content {
    padding-top: 8rem;
}

/* Mobile content spacing */
@media (max-width: 768px) {
    main,
    article,
    .main-content {
        padding-top: 6rem;
    }
}

/* Dropdown menu positioning */
.dropdown-menu {
    position: absolute;
    z-index: 1010;
    top: 100%;
    left: 0;
    margin-top: 0.75rem;
}

/* Mobile menu positioning */
#mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1020;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

#mobile-menu.open {
    transform: translateX(0);
}

#menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1015;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#menu-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* Text gradient fix for better visibility */
.text-gradient {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 25%, #ef4444 50%, #dc2626 75%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

/* Fix for overlapping content */
.container {
    position: relative;
    z-index: 1;
}

/* Ensure proper stacking context */
.nav-blur,
#navbar {
    isolation: isolate;
}