/**
 * Navbar Styles
 * Professional dark-themed navigation
 */

/* Navigation container */
nav {
    background-color: #0f172a;
}

/* Logo styling */
.nav-logo img {
    height: 40px;
    width: auto;
    aspect-ratio: 533/309;
}

.nav-logo .nav-brand-name {
    font-family: var(--font-sans);
    letter-spacing: -0.02em;
}

/* Exclude logo from nav link styles */
nav a.nav-logo {
    text-decoration: none !important;
}

/* Professional navigation links - Dark Theme */
nav a[href^="/"]:not(.nav-logo),
nav a[href^="#"]:not(.nav-logo) {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--neutral-200);
    padding: 0.5rem 1rem;
    transition: color 0.2s ease, background-color 0.2s ease;
    border-radius: 0.375rem;
    text-decoration: none;
    border-bottom: none !important;
}

nav a[href^="/"]:not(.nav-logo):hover,
nav a[href^="#"]:not(.nav-logo):hover {
    color: #fbbf24;
    background-color: rgba(255, 255, 255, 0.05);
    border-bottom: none !important;
}

/* Active/current page indicator - Yellow accent for dark theme */
nav a[href]:not(.nav-logo).active {
    color: #fbbf24;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.05);
}

/* Mobile menu styling */
#mobile-menu a:not(.nav-logo) {
    display: block;
    padding: 0.75rem 1rem;
    width: 100%;
}

/* Sticky nav shadow on scroll - Enhanced for dark theme */
nav.shadow-scroll {
    box-shadow: 0 4px 12px -1px rgba(0, 0, 0, 0.3);
}