/* Enhanced Sticky Navigation */

.header {
    background: white !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: -webkit-sticky !important; /* Safari support */
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    transition: all 0.3s ease;
    width: 100% !important;
}

/* Desktop-only backdrop filter */
@media (min-width: 992px) {
    .header {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

/* Enhanced sticky behavior when scrolling */
.header.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.95) !important;
}

/* Ensure no margin collapse issues */
.header::before,
.header::after {
    content: '';
    display: table;
    clear: both;
}

/* Make sure the header doesn't get affected by other elements */
body {
    margin: 0;
    padding: 0;
}

/* Prevent any interference from top bar */
.top-bar {
    position: relative;
    z-index: 999;
}

/* Mobile sticky enhancements */
@media (max-width: 992px) {
    .header {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1001 !important;
        background: white !important; /* Solid background for mobile */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    .header.scrolled {
        background: white !important; /* Keep solid background when scrolled */
    }
    
    /* Ensure mobile menu doesn't interfere with sticky positioning */
    .nav-menu {
        position: fixed;
        top: 70px; /* Adjust based on header height */
        z-index: 1000;
    }
    
    .nav-menu.active {
        position: fixed;
        top: 70px;
    }
}

/* Fallback for older browsers that don't support sticky */
@supports not (position: sticky) {
    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }
    
    /* Add padding to body to compensate for fixed header */
    body {
        padding-top: 80px;
    }
    
    @media (max-width: 992px) {
        body {
            padding-top: 70px;
        }
    }
}

/* Smooth scrolling behavior when navigating */
html {
    scroll-behavior: smooth;
}

/* Ensure any content doesn't overlap with sticky header */
main {
    position: relative;
    z-index: 1;
}
