/* ===== INDEPENDENT NAVBAR COMPONENT STYLES ===== */

/* Base navbar structure - FIXED WHITE */
.navbar-component {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    z-index: 1030;
    min-height: 62px;
    /* NO TRANSITIONS - FIXED STYLE */
    background-color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* ===== DESKTOP NAVBAR - FIXED WHITE ===== */
@media (min-width: 992px) {
    /* ALWAYS WHITE - No scroll behavior */
    .navbar-component,
    .navbar-component.scroll {
        background-color: #fff !important;
        border: none !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    /* ALWAYS BLACK TEXT - No changes */
    .navbar-component .navigation-menu > li > a,
    .navbar-component.scroll .navigation-menu > li > a {
        color: #333 !important;
        text-shadow: none !important;
        font-weight: 500 !important;
        padding: 20px 15px !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
        font-size: 11px !important;
        letter-spacing: 2px !important;
        /* NO TRANSITIONS */
    }
    
    .navbar-component .navigation-menu > li > a:hover,
    .navbar-component.scroll .navigation-menu > li > a:hover {
        color: #007bff !important;
        text-shadow: none !important;
        background-color: transparent !important;
    }
    
    /* FIXED LOGO CONTAINER - No changes */
    .navbar-component .logo,
    .navbar-component.scroll .logo {
        float: left;
        padding: 11px 0;
        /* NO TRANSITIONS */
    }
    
    /* ALWAYS DARK LOGO - No switching */
    .navbar-component .logo .logo-light,
    .navbar-component.scroll .logo .logo-light {
        display: none !important;
    }
    .navbar-component .logo .logo-dark,
    .navbar-component.scroll .logo .logo-dark {
        display: block !important;
    }
    
    /* Desktop navigation menu */
    .navbar-component .navigation-menu {
        float: right;
        margin: 0;
        list-style: none;
        padding: 0;
    }
    
    .navbar-component .navigation-menu > li {
        float: left;
        position: relative;
    }
    
    /* Hide hamburger on desktop */
    .navbar-component .menu-extras {
        display: none;
    }
    
    .navbar-component #navigation {
        display: block !important;
    }
}

/* ===== MOBILE NAVBAR - WHITE Theme ===== */
@media (max-width: 991px) {
    /* Mobile: Always WHITE background */
    .navbar-component {
        background-color: #fff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Mobile logo */
    .navbar-component .logo {
        float: left;
        padding: 11px 0;
    }
    
    .navbar-component .logo .logo-light {
        display: none !important;
    }
    .navbar-component .logo .logo-dark {
        display: block !important;
    }
    
    /* Mobile hamburger menu */
    .navbar-component .menu-extras {
        float: right;
        margin-right: -15px;
    }
    
    .navbar-component .menu-extras .menu-item {
        float: left;
    }
    
    .navbar-component .navbar-toggle {
        border: 0;
        position: relative;
        width: 60px;
        height: 62px;
        padding: 0;
        margin: 0;
        cursor: pointer;
        background: transparent;
    }
    
    .navbar-component .navbar-toggle .lines {
        width: 25px;
        display: block;
        position: relative;
        margin: 24px auto;
        height: 18px;
    }
    
    .navbar-component .navbar-toggle span {
        height: 1px;
        width: 100%;
        background-color: #333 !important;
        display: block;
        margin-bottom: 5px;
        /* NO TRANSITIONS */
    }
    
    .navbar-component .navbar-toggle.open span:first-child {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .navbar-component .navbar-toggle.open span:nth-child(2) {
        opacity: 0;
    }
    
    .navbar-component .navbar-toggle.open span:last-child {
        transform: rotate(-45deg) translate(7px, -6px);
    }
    
    /* Mobile navigation dropdown */
    .navbar-component #navigation {
        position: absolute;
        top: 62px;
        left: 0;
        width: 100%;
        display: none;
        background-color: #fff !important;
        border: none !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
        max-height: 400px;
        overflow-y: auto;
    }
    
    .navbar-component #navigation.open {
        display: block;
    }
    
    .navbar-component .navigation-menu {
        list-style: none;
        margin: 0;
        padding: 0;
        float: none;
    }
    
    .navbar-component .navigation-menu > li {
        float: none;
    }
    
    .navbar-component .navigation-menu > li > a {
        color: #333 !important;
        font-weight: 500 !important;
        padding: 15px !important;
        display: block !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
        font-size: 11px !important;
        letter-spacing: 2px !important;
        border-bottom: 1px solid rgba(0,0,0,0.1) !important;
    }
    
    .navbar-component .navigation-menu > li > a:hover {
        color: #007bff !important;
        background-color: rgba(0,0,0,0.05) !important;
    }
}

/* ===== SMOOTH SCROLLING SUPPORT ===== */
/* Remove CSS smooth scrolling to avoid conflict with JS animation */
html {
    scroll-behavior: auto;
}

/* Ensure sections have proper spacing for navbar */
section {
    scroll-margin-top: 80px;
}

/* Clear floats */
.navbar-component .container::after {
    content: "";
    display: table;
    clear: both;
}