/* 🎯 Make sure this ONLY affects the navbar */
.site-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent black */
    height: 100px; /* Default taller height */
    padding: 0 1rem;
    z-index: 1000;
    opacity: 1; /* Default fully visible */
    transition: height 0.3s ease-in-out, background-color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Shrinked Navbar - When User Scrolls */
.site-nav.shrink {
    height: 60px; /* Shrinks on scroll */
    background-color: rgba(0, 0, 0, 0.9); /* Darker on scroll */
    opacity: 0.95;
}

/* 🔥 Navigation Links (Scoped to `.site-nav`) */
.site-nav .nav-links {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Links & Logout Button */
.site-nav .nav-links a, 
.site-nav .logout-btn {
    color: #fff;
    text-transform: uppercase;
    text-decoration: none !important;
    font-weight: normal;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: color 0.3s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Hover effect */
.site-nav .nav-links a:hover, 
.site-nav .logout-btn:hover {
    color: #ffb727; /* Gold hover */
    background-color: transparent;
}

/* Force Logout Button to Match Links */
.site-nav .logout-btn {
    font-size: inherit;
    font-family: inherit;
    background: none;
    border: none;
    cursor: pointer;
    text-align: center;
}

/* Fix Logout Form from Affecting Alignment */
.site-nav .nav-links form {
    display: inline;
    margin: 0;
    padding: 0;
}

/* 📱 Responsive: Hamburger Menu */
.site-nav .menu-toggle {
    display: none;
    cursor: pointer;
    font-size: 28px;
    color: white;
    position: absolute;
    right: 20px;
    top: 30px;
    transition: all 0.3s ease-in-out;
}

/* 🍔 Mobile Navigation */
@media (max-width: 900px) {
    .site-nav .nav-links {
        display: none; 
        flex-direction: column;
        position: absolute;
        right: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.9);
        padding: 15px;
        border-radius: 5px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
        top: 100px;
        transition: top 0.3s ease-in-out;
    }

    .site-nav.shrink .nav-links {
        top: 60px; /* Adjust when navbar shrinks */
    }

    .site-nav .menu-toggle {
        display: block;
        position: absolute;
        top: 35px;
        right: 50px;
        z-index: 1100;
    }

    .site-nav.shrink .menu-toggle {
        top: 20px;
    }
}