/* ============================================================
   subnav.css — Secondary sticky navigation bar
   Sits directly below .landing-header, always visible
   ============================================================ */

.subnav-bar {
  position: sticky;
  top: var(--subnav-offset, 57px); /* overridden by JS if header height differs */
  z-index: 99;
  background: rgba(5, 7, 10, 0.92);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--space-6);
  /* Subtle accent line along the bottom */
}
.subnav-bar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 229, 122, 0.18) 30%,
    rgba(0, 229, 122, 0.08) 70%,
    transparent 100%
  );
}

.subnav-inner {
  display: flex;
  align-items: center;
  gap: 0;
  height: 38px;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav-inner::-webkit-scrollbar { display: none; }

/* Nav links */
.subnav-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
  position: relative;
  top: 1px; /* align border-bottom with bar bottom */
}
.subnav-link:hover {
  color: var(--text-sec);
  text-decoration: none;
}
.subnav-link.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  text-shadow: 0 0 12px var(--accent-dim);
}

/* Dot separator between links and CTA */
.subnav-divider {
  flex: 1;
  /* just pushes CTA to the right */
}

/* Browse All CTA */
.subnav-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  background: rgba(0, 229, 122, 0.1);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent);
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
  margin-left: var(--space-4);
}
.subnav-cta:hover {
  background: rgba(0, 229, 122, 0.18);
  border-color: var(--accent);
  box-shadow: 0 0 16px var(--accent-glow);
  text-decoration: none;
  color: var(--accent-bright);
}
.subnav-cta svg {
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.subnav-cta:hover svg {
  transform: translateX(2px);
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .subnav-bar { padding: 0 var(--space-4); }
  .subnav-link { padding: 0 11px; font-size: 0.55rem; letter-spacing: 1.5px; }
  .subnav-cta  { padding: 5px 10px; font-size: 0.55rem; margin-left: var(--space-2); }
}

/* ── Collapsed state (on scroll) ── */

/*
  When .subnav-collapsed is added:
  - Bar height shrinks
  - Labels fade out and collapse to zero width
  - Links shrink to just their bottom-border indicator
  - Active indicator glows more intensely
  - CTA arrow icon stays, label hides
*/

.subnav-bar {
  transition: height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.subnav-link-label {
  display: inline-block;
  max-width: 120px;
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
  transition:
    max-width  0.3s cubic-bezier(0.22, 1, 0.36, 1),
    opacity    0.2s ease,
    margin     0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Collapsed: shrink the bar */
.subnav-collapsed .subnav-inner {
  height: 20px;
}

/* Collapsed: hide all labels */
.subnav-collapsed .subnav-link-label {
  max-width: 0;
  opacity: 0;
}

/* Collapsed: shrink link padding to just enough for the indicator dot */
.subnav-collapsed .subnav-link {
  padding: 0 10px;
}

/* Collapsed: non-active links — very subtle */
.subnav-collapsed .subnav-link:not(.is-active) {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Collapsed: active link — glow intensifies */
.subnav-collapsed .subnav-link.is-active {
  border-bottom-color: var(--accent);
  box-shadow: 0 2px 8px var(--accent-dim), 0 1px 0 var(--accent);
  filter: drop-shadow(0 0 4px var(--accent));
}

/* Collapsed: CTA shrinks — hide label, keep arrow */
.subnav-collapsed .subnav-cta {
  padding: 0 8px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  margin-left: var(--space-2);
  /* Keep arrow visible as a minimal affordance */
  color: var(--accent);
}
.subnav-collapsed .subnav-cta:hover {
  background: rgba(0, 229, 122, 0.1);
  border-color: var(--accent-dim);
}

/* Ensure inner height transitions smoothly */
.subnav-inner {
  transition: height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}