/* See ./product-nav.md for design notes and rationale. */

.product-nav {
  --product-nav-color-default: var(--ll-color-text-secondary);
  --product-nav-color-selected: var(--ll-color-text-primary);
  --product-nav-bg: var(--ll-color-bg-muted);
  --product-nav-default-opacity: 0.6;
  --product-nav-font-weight: var(--ds-font-weight-medium);
  --product-nav-padding-block: var(--ll-space-5);
  --product-nav-padding-inline: var(--ll-space-5);
  --product-nav-gap: var(--ll-space-4);
  --product-nav-link-padding-inline: var(--ll-space-2);
  --product-nav-item-basis: 80px;
  --product-nav-item-grow: 0;

  position: sticky;
  top: 0;
  z-index: 99;
  background-color: var(--product-nav-bg);
  padding-block: var(--product-nav-padding-block);
  padding-inline: var(--product-nav-padding-inline);
  transition: transform 220ms var(--ll-motion-hover-easing, ease);
}

.product-nav .product-nav__nav {
  display: block;
}

/* Zero-height sibling baked by decorate() inside the block, then repositioned
 * by product-nav.js wire() to sit as the block's immediate previous sibling
 * (so it scrolls out of the viewport when the block engages sticky, which the
 * IntersectionObserver uses to toggle .is-pinned). Collapses to a no-op
 * layout box; not scoped under .product-nav because at runtime the sentinel
 * lives outside the block. */
.product-nav__sentinel {
  display: block;
  block-size: 0;
  margin: 0;
  padding: 0;
}

.product-nav .product-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--product-nav-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-nav .product-nav__item {
  display: flex;
  flex: var(--product-nav-item-grow) 1 var(--product-nav-item-basis);
  min-inline-size: 0;
  justify-content: center;
}

.product-nav .product-nav__link {
  display: inline-block;
  padding-inline: var(--product-nav-link-padding-inline);
  font-family: var(--ll-text-body-xs-family);
  font-size: var(--ll-text-body-xs-size);
  line-height: var(--ll-text-body-xs-line-height);
  letter-spacing: var(--ll-text-body-xs-letter-spacing);
  font-weight: var(--product-nav-font-weight);
  color: var(--product-nav-color-default);
  opacity: var(--product-nav-default-opacity);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--ll-motion-hover-duration, 120ms) var(--ll-motion-hover-easing, ease),
    opacity var(--ll-motion-hover-duration, 120ms) var(--ll-motion-hover-easing, ease);
}

/* Hover / focus on inactive items: lift opacity to full so the
 * affordance is unambiguous. Colour stays secondary - only the
 * selected item recolours to brand. */
.product-nav .product-nav__link:hover,
.product-nav .product-nav__link:focus-visible {
  opacity: 1;
}

.product-nav .product-nav__link--selected {
  color: var(--product-nav-color-selected);
  opacity: 1;
  cursor: default;
}

/* Mobile-first: when an item authors both a full and a short label,
 * decorate() bakes two spans inside the anchor. CSS shows the short
 * variant below 1024px and the full variant from 1024px up. Items
 * authored with only one of the two labels render a single span (no
 * --short / --full modifier) so this rule never applies to them. */
.product-nav .product-nav__label--full { display: none; }
.product-nav .product-nav__label--short { display: inline; }

/* MD-and-up item cap per Figma. Items target 192px with flex-shrink:1
 * so the row continues to redistribute evenly when forced to overflow. */
@media (width >= 768px) {
  .product-nav {
    --product-nav-item-basis: 192px;
    --product-nav-item-grow: 0;
  }
}

@media (width >= 1024px) {
  .product-nav {
    --product-nav-padding-block: var(--ll-space-4);
    --product-nav-padding-inline: var(--ll-space-0);
    --product-nav-gap: var(--ll-space-8);
    --product-nav-link-padding-inline: var(--ll-space-0);
  }

  .product-nav .product-nav__link {
    font-family: var(--ll-text-body-base-family);
    font-size: var(--ll-text-body-base-size);
    line-height: var(--ll-text-body-base-line-height);
    letter-spacing: var(--ll-text-body-base-letter-spacing);
  }

  .product-nav .product-nav__label--full { display: inline; }
  .product-nav .product-nav__label--short { display: none; }
}

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