/**
 * Navigation Bar Component
 */
.navbar {
    /* Solid header with clear separation and visible lift (CSS-only) */
    background: var(--theme-bg-primary);
    backdrop-filter: none;
    box-shadow: 0 8px 24px rgba(21, 24, 34, 0.12);
    padding: var(--spacing-sm) 0;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    border-bottom: 1px solid var(--theme-border-light);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Optional stronger state if you ever toggle .scrolled (kept for backwards compatibility) */
.navbar.scrolled {
    box-shadow: 0 10px 30px rgba(21, 24, 34, 0.14);
}

/* Ensure logo stays a consistent size */
.navbar-brand-logo {
    height: 36px;
    width: auto;
    display: inline-block;
}

.navbar-brand {
    font-weight: var(--font-weight-extrabold);
    font-size: 1.5rem;
    color: var(--theme-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* Keep gradient effect but add fallback for better visibility */
.navbar-brand:hover {
    color: var(--theme-primary-dark);
}

/* Gradient text effect (optional enhancement) */
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .navbar-brand {
        background: var(--theme-gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* On scroll, switch to solid color for better visibility */
    .navbar.scrolled .navbar-brand {
        background: none;
        -webkit-text-fill-color: var(--theme-primary);
        color: var(--theme-primary);
    }
}

.nav-link {
    color: var(--theme-text-primary);
    font-weight: var(--font-weight-medium);
    margin: 0 0.5rem;
    transition: color var(--transition-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
}

.nav-link:hover {
    color: var(--theme-primary);
}

.nav-link-active {
    color: var(--theme-primary);
    font-weight: var(--font-weight-semibold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 25px;
    border-radius: 18px;
    background: rgba(var(--theme-primary-rgb), 0.12);
    box-shadow: inset 0 0 0 1px rgba(var(--theme-primary-rgb), 0.38);
}

/* Navbar with hero styling */
.hero-section .btn-outline-custom {
    border: 2px solid white;
    color: white;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
}

.hero-section .btn-outline-custom:hover {
    background: white;
    color: var(--theme-primary);
    border-color: white;
}