/* =============================================================================
   nav.css — navigation system
   Desktop: fixed sidebar (left: 72px, matching the header logo) with nav links.
   Mobile:  panel that expands flush below the fixed header (72px).
            z-index: 90 — the fixed .header-mobile (z-index: 100) stays above it.
   ============================================================================= */


/* ── Studio name (sidebar instance — desktop only) ───────────────────────────── */

.site-name {
  font-family: var(--font-family-base);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-white);
  text-decoration: none;
  display: block;
}


/* ── Shared nav list ─────────────────────────────────────────────────────────── */

.nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);                   /* 16px between links */
}

.nav-list a {
  font-family: var(--font-family-base);
  font-size: 0.875rem;                   /* 14px */
  font-weight: 400;
  color: var(--color-gray-200);
  text-decoration: none;
  display: block;
}

.nav-list a:hover {
  color: var(--color-white);
}

.nav-list a[aria-current="page"] {
  color: var(--color-white);
  font-weight: 500;
}


/* =============================================================================
   Desktop Sidebar
   display, position: fixed, left/top/width, and height set in layout.css.
   ============================================================================= */

.site-sidebar {
  padding-top: var(--space-16);          /* 64px — Collection starts 64px below header */
  padding-bottom: var(--space-8);
  /* gap removed — .site-name no longer in the sidebar */
}


/* =============================================================================
   Mobile: Navigation Panel

   - Sits flush below the fixed .header-mobile (top: 72px).
   - z-index: 90 — header (z-index: 100) always renders above it.

   Animation: translateY(-100%) → translateY(0)
   - Closed: panel shifted up by its own height, sitting behind the header.
   - Open:   panel at natural position, filling the viewport below the header.
   - The fixed header (z-index 100) acts as the visual clip during the slide.
   - height (not min-height) makes translateY(-100%) a predictable fixed distance.
   - visibility is delayed on close so tab focus is blocked during the animation.
   ============================================================================= */

.nav-drawer {
  position: fixed;
  top: var(--layout-header-height);             /* 72px — flush below the mobile header */
  left: 0;
  right: 0;
  z-index: 90;
  background-color: var(--color-carbon);
  height: calc(100dvh - var(--layout-header-height));
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom);

  /* Closed: panel sits above the visible area, behind the header */
  transform: translateY(-100%);
  visibility: hidden;
  transition:
    transform  300ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s    linear                    300ms;
}

.nav-drawer.is-open {
  transform: translateY(0);
  visibility: visible;
  transition:
    transform  300ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s    linear                    0s;
}


/* ── Drawer nav content ──────────────────────────────────────────────────────── */
/*
 * 32px top spacing separates the bottom of the fixed header from the first cell.
 * Each cell is 48px tall, full-width, with centered 18px/600 white text.
 * No dividers or gaps between cells at this stage.
 */

.nav-drawer__nav {
  padding-top: var(--space-8);               /* 32px from header edge to first cell */
}

/* Reset the shared .nav-list defaults for the drawer context */
.nav-drawer .nav-list {
  gap: 0;
}

/* Menu cells */
.nav-drawer .nav-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 100%;
  font-family: var(--font-family-base);
  font-size: 1.125rem;                       /* 18px */
  font-weight: 600;
  color: var(--color-white);
  text-decoration: none;
}


/* =============================================================================
   Desktop: disable the mobile overlay entirely
   ============================================================================= */

@media (min-width: 1024px) {
  .nav-drawer {
    display: none !important;
  }
}


/* =============================================================================
   Desktop: Sidebar nav link overrides
   Shared .nav-list a is 14px / regular / gray-200 (for mobile drawer).
   Sidebar nav links must be 16px / semibold / white.
   ============================================================================= */

@media (min-width: 1024px) {
  .site-sidebar .nav-list a {
    font-size: 1rem;                     /* 16px */
    font-weight: 600;                    /* Semibold */
    color: var(--color-white);
  }

  .site-sidebar .nav-list a:hover {
    color: var(--color-white);
    opacity: 0.7;
  }

  .site-sidebar .nav-list a[aria-current="page"] {
    color: var(--color-white);
    font-weight: 600;
    opacity: 1;                          /* active item never dims */
  }
}