/*
 * nav.css — Site header and navigation.
 * Depends on: base.css, components.css
 */

/* ── Site header ────────────────────────────────────────────────────────── */

.site-header {
    position:         sticky;
    top:              0;
    z-index:          var(--z-sticky);
    height:           var(--nav-height);
    background:       rgba(8, 13, 26, 0.85);
    backdrop-filter:  blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom:    1px solid var(--color-border);
    transition:       border-color var(--transition-base),
                      background   var(--transition-base);
}

.site-header.is-scrolled {
    border-color: var(--color-border-mid);
    background:   rgba(8, 13, 26, 0.95);
}

/* ── Nav shell ──────────────────────────────────────────────────────────── */

.nav {
    height: 100%;
}

.nav__inner {
    display:          flex;
    align-items:      center;
    gap:              var(--space-6);
    height:           100%;
    max-width:        var(--container-max);
    margin-inline:    auto;
    padding-inline:   clamp(var(--space-4), 5vw, var(--space-10));
}

/* ── Brand ──────────────────────────────────────────────────────────────── */

.nav__brand {
    display:         flex;
    align-items:     center;
    gap:             var(--space-3);
    text-decoration: none;
    flex-shrink:     0;
}

.nav__brand-name {
    font-size:    var(--text-base);
    font-weight:  var(--font-bold);
    color:        var(--color-text-primary);
    letter-spacing: var(--tracking-snug);
    white-space:  nowrap;
}

/* ── Desktop links ──────────────────────────────────────────────────────── */

.nav__links {
    display:     flex;
    align-items: center;
    gap:         var(--space-1);
    flex:        1;
    list-style:  none;
}

.nav__item {
    position: relative;
}

.nav__link,
.nav__trigger {
    display:         flex;
    align-items:     center;
    gap:             var(--space-1);
    padding:         var(--space-2) var(--space-3);
    font-size:       var(--text-sm);
    font-weight:     var(--font-medium);
    color:           var(--color-text-secondary);
    text-decoration: none;
    border-radius:   var(--radius-md);
    border:          none;
    background:      none;
    cursor:          pointer;
    font-family:     var(--font-sans);
    transition:      color var(--transition-fast), background var(--transition-fast);
    white-space:     nowrap;
}

.nav__link:hover,
.nav__trigger:hover {
    color:      var(--color-text-primary);
    background: var(--color-bg-elevated);
}

.nav__link.is-active,
.nav__link[aria-current="page"] {
    color: var(--color-text-primary);
}

.nav__chevron {
    flex-shrink: 0;
    transition: transform var(--transition-base);
}

.nav__trigger[aria-expanded="true"] .nav__chevron {
    transform: rotate(180deg);
}

/* ── Dropdown ───────────────────────────────────────────────────────────── */

.nav__dropdown {
    position:      absolute;
    top:           calc(100% + var(--space-2));
    left:          0;
    min-width:     280px;
    background:    var(--color-bg-elevated);
    border:        1px solid var(--color-border-mid);
    border-radius: var(--radius-lg);
    padding:       var(--space-2);
    box-shadow:    var(--shadow-lg);
    z-index:       var(--z-dropdown);
    opacity:       0;
    visibility:    hidden;
    transform:     translateY(-6px);
    transition:    opacity       var(--transition-fast),
                   visibility    var(--transition-fast),
                   transform     var(--transition-fast);
    pointer-events:none;
}

.nav__dropdown[aria-hidden="false"] {
    opacity:       1;
    visibility:    visible;
    transform:     translateY(0);
    pointer-events:auto;
}

.nav__dropdown-item {
    display:       flex;
    flex-direction:column;
    gap:           var(--space-1);
    padding:       var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    text-decoration:none;
    transition:    background var(--transition-fast);
}

.nav__dropdown-item:hover {
    background: var(--color-bg-overlay);
}

.nav__dropdown-item.is-active {
    background: var(--color-brand-dim);
}

.nav__dropdown-label {
    font-size:   var(--text-sm);
    font-weight: var(--font-semibold);
    color:       var(--color-text-primary);
    line-height: var(--leading-tight);
}

.nav__dropdown-desc {
    font-size:   var(--text-xs);
    color:       var(--color-text-muted);
    line-height: var(--leading-snug);
}

/* ── Desktop actions (right side) ───────────────────────────────────────── */

.nav__actions {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Hamburger ──────────────────────────────────────────────────────────── */

.nav__hamburger {
    display:        none;
    flex-direction: column;
    justify-content:center;
    align-items:    center;
    gap:            5px;
    width:          40px;
    height:         40px;
    background:     none;
    border:         none;
    cursor:         pointer;
    padding:        var(--space-2);
    border-radius:  var(--radius-md);
    flex-shrink:    0;
}

.nav__hamburger span {
    display:        block;
    width:          20px;
    height:         2px;
    background:     var(--color-text-secondary);
    border-radius:  var(--radius-full);
    transform-origin: center;
    transition:     transform     var(--transition-base),
                    opacity       var(--transition-base),
                    background    var(--transition-fast);
}

.nav__hamburger:hover span {
    background: var(--color-text-primary);
}

.nav__hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav__hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.nav__hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile menu ────────────────────────────────────────────────────────── */

.nav__mobile {
    position:      fixed;
    top:           var(--nav-height);
    left:          0;
    right:         0;
    bottom:        0;
    background:    var(--color-bg-surface);
    border-top:    1px solid var(--color-border);
    z-index:       calc(var(--z-sticky) - 1);
    overflow-y:    auto;
    overscroll-behavior: contain;
    transform:     translateX(100%);
    transition:    transform var(--transition-slow);
}

.nav__mobile[aria-hidden="false"] {
    transform: translateX(0);
}

.nav__mobile-inner {
    padding:     var(--space-6) var(--space-5);
    display:     flex;
    flex-direction: column;
    gap:         var(--space-1);
}

.nav__mobile-group {
    padding-top:   var(--space-4);
    border-top:    1px solid var(--color-border);
    margin-top:    var(--space-3);
}

.nav__mobile-group:first-child {
    border-top: none;
    padding-top:0;
    margin-top: 0;
}

.nav__mobile-heading {
    display:        block;
    font-size:      var(--text-xs);
    font-weight:    var(--font-semibold);
    color:          var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    padding:        var(--space-2) var(--space-3);
    margin-bottom:  var(--space-1);
}

.nav__mobile-link {
    display:         flex;
    flex-direction:  column;
    gap:             var(--space-1);
    padding:         var(--space-3) var(--space-4);
    border-radius:   var(--radius-md);
    text-decoration: none;
    font-size:       var(--text-base);
    font-weight:     var(--font-medium);
    color:           var(--color-text-secondary);
    transition:      background var(--transition-fast), color var(--transition-fast);
}

.nav__mobile-link:hover,
.nav__mobile-link.is-active {
    background: var(--color-bg-elevated);
    color:      var(--color-text-primary);
}

.nav__mobile-desc {
    font-size:  var(--text-xs);
    color:      var(--color-text-muted);
    font-weight:var(--font-normal);
}

.nav__mobile-actions {
    display:       flex;
    flex-direction:column;
    gap:           var(--space-3);
    margin-top:    var(--space-8);
    padding-top:   var(--space-6);
    border-top:    1px solid var(--color-border);
}

/* ── Responsive breakpoints ─────────────────────────────────────────────── */

@media (max-width: 900px) {
    .nav__links,
    .nav__actions {
        display: none;
    }

    .nav__hamburger {
        display: flex;
    }

    /* Prevent body scroll when menu is open */
    body.nav-open {
        overflow: hidden;
    }
}

@media (min-width: 901px) {
    .nav__mobile {
        display: none;
    }
}