/* Header Fixed Position Override - Must load after app.css */

/* Fixed header for all screen sizes */
header.main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    background: white !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    height: auto !important;
    padding: 0 !important;
    display: block !important;
    border-bottom: none !important;
}

/* Desktop nav inside header */
header.main-header .desktop-nav {
    background: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 40px !important;
    width: 100% !important;
    height: 80px !important;
    margin: 0 !important;
    max-width: none !important;
}

/* Mobile controls inside header */
header.main-header .mobile-controls {
    display: none !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 10px 20px !important;
    background: white !important;
    height: 60px !important;
}

/* Add padding to body to account for fixed header */
body {
    padding-top: 80px !important; /* Desktop header height */
}

/* Mobile specific styles */
@media (max-width: 768px) {
    body {
        padding-top: 60px !important; /* Mobile header height */
    }
    
    /* Hide entire desktop nav on mobile */
    header.main-header .desktop-nav,
    header.main-header nav.desktop-nav {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Hide desktop nav links specifically */
    .nav-left,
    .nav-right,
    .nav-logo {
        display: none !important;
    }
    
    header.main-header .mobile-controls {
        display: flex !important;
    }
}

/* Desktop specific styles */
@media (min-width: 769px) {
    header.main-header .mobile-controls {
        display: none !important;
    }
    
    header.main-header .desktop-nav {
        display: flex !important;
    }
}

/* Ensure main content doesn't overlap with fixed header */
main {
    position: relative;
    z-index: 1;
}

/* Fix for any absolute positioned elements that might interfere */
#app {
    position: relative;
    min-height: 100vh;
}