/* ==========================================================================
   Component: Navbar
   This file contains all styles for the main site navigation bar,
   including the responsive hamburger menu.
   ========================================================================== */

.navbar {
    background-color: #333;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-left-section {
    display: flex;
    align-items: center;
    /* --- DEFINITIVE FIX: Allow this section to grow and fill available space. --- */
    /* This is the key to making the `margin-left: auto` on the profile link work. */
    flex-grow: 1;
}

.logo {
    height: 28px;
    width: auto;
    vertical-align: middle;
}

.navbar a {
    color: white;
    text-align: center;
    padding: 14px 10px;
    text-decoration: none;
    display: block;
    font-size: 14px;
}

.navbar a:hover {
    background-color: #ddd;
    color: black;
}

.logo-link:hover {
    background-color: transparent;
}

.navbar .nav-links {
    display: flex;
    /* --- DEFINITIVE FIX: Allow the links container to grow. --- */
    /* This gives the `margin-left: auto` on the profile/login links the space it needs to work. */
    flex-grow: 1;
}

.navbar .right {
    display: flex;
}

.language-switcher {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.language-switcher select {
    background-color: #444;
    color: white;
    border: 1px solid #666;
    padding: 5px;
    border-radius: 4px;
}

.hamburger {
    display: none; /* Hidden by default on desktop */
    font-size: 24px;
    color: white;
    padding: 14px 16px;
    cursor: pointer;
}

/* --- NEW: Push user-specific links to the right on desktop. --- */
/* This targets the 'Profile' link and tells it to take up all available
   space to its left, effectively pushing it and the 'Logout' link
   to the right side of the .nav-links container. We do the same for the 'Login' link
   for logged-out users. */
#profile-link, #login-link {
    margin-left: auto;
}
/* --- Responsive Styles for Mobile --- */
/* --- DEFINITIVE FIX: Adjust the responsive breakpoint to 600px. --- */
/* This makes the desktop layout persist on smaller screens like tablets. */@media (max-width: 900px) {
    /* On mobile, hide the main nav links and show the hamburger menu. */
    .navbar .nav-links {
        display: none; /* Hide the links container on mobile */
    }
    .hamburger {
        display: block; /* Show the hamburger icon on mobile */
    }

    /* This rule applies to the dropdown menu when it's opened via JavaScript. */
    .nav-links.show {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 48px; /* Position below the navbar */
        left: 0;
        background-color: #333;
        width: 100%;
        z-index: 1000;
    }
    /* --- DEFINITIVE FIX: Reset the auto margin for the mobile menu. --- */
    /* This prevents the desktop rule from pushing the Profile/Login links
       to the right inside the vertical mobile dropdown. */
    .nav-links.show #profile-link, .nav-links.show #login-link {
        margin-left: 0;
    }
}