/* Navigation Component Styles */

/* Main navigation styling */
.sb-navigation {
    background-color: rgb(18, 20, 20);
    padding: var(--spacing-md) 0;
    box-shadow: var(--shadow-base);
    transition: var(--transition-base);
}

.sb-navigation.sb-nav--fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-fixed);
    background-color: rgba(18, 20, 20, 0.98);
    backdrop-filter: blur(8px);
}

/* Navigation menu items */
.sb-navigation__menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sb-navigation__item {
    margin: 0;
}

.sb-navigation__link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    transition: var(--transition-base);
    display: block;
}

.sb-navigation__link:hover,
.sb-navigation__link:focus {
    color: var(--primary-color);
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.05);
}

.sb-navigation__link.active {
    color: var(--primary-color);
    font-weight: var(--font-weight-medium);
}

/* Hamburger menu styling */
.navbar-toggler {
    padding: var(--spacing-sm);
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: none;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    width: 1.5em;
    height: 1.5em;
}

/* Responsive navigation */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: rgb(18, 20, 20);
        margin-top: var(--spacing-md);
        border-radius: var(--border-radius-md);
        padding: var(--spacing-md);
    }
    
    .sb-navigation__link {
        padding: var(--spacing-md);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .sb-navigation__link:last-child {
        border-bottom: none;
    }
}