/**
 * NAVBAR FIX - HOMEPAGE CRITICAL
 * Aggressively fixes navbar positioning on home page
 * Overrides ALL conflicting styles
 */

/* ====== NAVBAR FIX - HIGHEST PRIORITY ====== */

/* Force navbar to be fixed at top - OVERRIDE EVERYTHING */
.navbar,
nav,
#navigation,
nav.navbar,
.navbar.navbar-enhanced,
body .navbar,
html .navbar,
* .navbar,
body > nav,
body > .navbar,
html > body > nav,
html > body > .navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    z-index: 99999 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--background-color, #fff) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: transform !important;
    overflow: visible !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
}

body.dark-mode .navbar,
body.dark-mode nav,
body.dark-mode #navigation {
    background: var(--dark-background-color, #222) !important;
}

/* Nav container - ensure proper layout */
.nav-container,
.navbar .container,
.navbar .nav-container,
#navigation .container,
#navigation .nav-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Nav links - ensure proper display */
.nav-links,
#nav-links,
.navbar .nav-links,
#navigation .nav-links {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    height: 100% !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
}

/* Logo container */
.logo-container,
.navbar .logo-container,
#navigation .logo-container {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure body has proper padding for fixed navbar */
body {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Hero section - add margin for navbar, ZERO padding-top */
.hero,
#home,
section.hero,
section#home {
    margin-top: 60px !important;
    padding-top: 0 !important;
    padding-bottom: 80px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Main content - account for navbar */
main,
#main-content,
main#main-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* First section after navbar - ZERO padding */
main > section:first-child,
#main-content > section:first-child,
.hero:first-child,
#home:first-child {
    margin-top: 60px !important;
    padding-top: 0 !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .navbar,
    nav,
    #navigation {
        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
    }
    
    .nav-container {
        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
        padding: 0 15px !important;
    }
    
    .hero,
    #home,
    main > section:first-child {
        margin-top: 56px !important;
    }
}

/* Override any conflicting styles */
* {
    box-sizing: border-box;
}

/* Ensure no other element overlaps navbar */
body > *:not(.navbar):not(nav):not(#navigation) {
    position: relative !important;
    z-index: 1 !important;
}

/* Force navbar above everything */
.navbar,
nav,
#navigation {
    z-index: 99999 !important;
}