/* ==========================================
UndefinedVerseOfficial
Navigation System
========================================== */

/* Header */

.site-header {
position: sticky;
top: 0;
z-index: var(--z-header);
width: 100%;
min-height: var(--header-height);
background: rgba(9, 10, 12, 0.94);
border-bottom: 1px solid var(--color-border);
}

.header-inner {
width: min(
calc(100% - 2 * var(--container-padding)),
var(--container-width)
);
min-height: var(--header-height);
margin-inline: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
}

/* Brand area */

.site-brand {
display: inline-flex;
align-items: center;
flex-shrink: 0;
gap: var(--space-3);
color: var(--color-text);
font-family: var(--font-heading);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
letter-spacing: -0.04em;
}

.site-brand:hover {
color: var(--color-chrome);
}

/* Desktop navigation */

.primary-navigation {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
}

.nav-link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding-inline: var(--space-3);
border-radius: var(--radius-sm);
color: var(--color-text-muted);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
transition:
color var(--duration-fast) var(--ease-standard),
background-color var(--duration-fast) var(--ease-standard);
}

.nav-link:hover {
color: var(--color-text);
background: rgba(216, 220, 226, 0.055);
}

.nav-link[aria-current="page"] {
color: var(--color-text);
background: rgba(216, 220, 226, 0.09);
}

/* Header actions */

.header-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-3);
flex-shrink: 0;
}

/* Mobile navigation container */

.mobile-navigation {
display: none;
}

/* Navigation separators */

.nav-separator {
width: 1px;
height: 24px;
background: var(--color-border);
}

/* Navigation overlay */

.navigation-overlay {
position: fixed;
inset: var(--header-height) 0 0;
z-index: var(--z-overlay);
background: rgba(0, 0, 0, 0.72);
}

/* Mobile behavior */

@media (max-width: 760px) {
.primary-navigation {
display: none;
}

.mobile-navigation {
display: flex;
flex-direction: column;
gap: var(--space-2);
width: 100%;
padding: var(--space-4) var(--container-padding);
background: var(--color-graphite);
border-bottom: 1px solid var(--color-border);
}

.mobile-navigation .nav-link {
justify-content: flex-start;
width: 100%;
min-height: 46px;
}

.header-inner {
gap: var(--space-3);
}
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
.nav-link {
transition: none;
}
}