/* ==========================================================================
   COMPONENT - NAVBAR
   ========================================================================== */

header.header_section {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(3, 7, 18, 0.75) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--glass-border-dark);
    transition: background var(--transition-base);
}

header.header_section.scrolled {
    background: var(--bg-900) !important;
    box-shadow: var(--shadow-md);
}

header.header_section .nav-link {
    color: var(--text-400) !important;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-sm);
    padding: var(--space-2) var(--space-4) !important;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast) !important;
}

header.header_section .nav-link:hover {
    color: var(--text-50) !important;
    background: rgba(255, 255, 255, 0.05);
}

header.header_section .nav-item {
    position: relative;
}

header.header_section .nav-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--primary);
    border-radius: var(--radius-full);
    transition: width var(--transition-base);
}

header.header_section .nav-item:hover::after,
header.header_section .nav-item.active::after {
    width: 30px;
}

/* Offcanvas Sidebar styling overrides */
.premium-offcanvas {
    background-color: var(--bg-800, #1a1a2e) !important;
    border-left: 1px solid var(--glass-border-dark, rgba(255, 255, 255, 0.1)) !important;
    color: var(--text-400, #adb5bd) !important;
}

.premium-offcanvas .offcanvas-header {
    border-bottom-color: var(--glass-border-dark) !important;
}

/* Light Theme Header Override */
body[data-theme="light"] header.header_section {
    background: rgba(255, 255, 255, 0.75) !important;
}

/* Theme Toggle Button */
.theme-toggle-btn {
    background: none;
    border: none;
    color: var(--text-400);
    font-size: var(--font-base);
    padding: var(--space-2);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.theme-toggle-btn:hover {
    color: var(--text-50);
    background: rgba(255, 255, 255, 0.05);
}

body[data-theme="light"] .theme-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

header.header_section .navbar-toggler {
    position: relative;
    z-index: 1056;
}