/* Side navigation (design-system.md, Structure; Figma Frame 10): a lavender panel, the
   business as its eyebrow, the active item on a white pill. Above the page on a phone,
   a floating column beside it from 64rem. */
@layer components {
  .nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--block-space-half) var(--inline-space-double);
    padding: var(--block-space) var(--inline-space-double);
    background: var(--color-link-tint);

    @media (min-width: 64rem) {
      position: sticky;
      inset-block-start: var(--block-space);
      flex-direction: column;
      align-items: stretch;
      align-self: start;
      margin: var(--block-space);
      padding: var(--block-space-double) var(--inline-space-double);
      border-radius: var(--radius-large);
    }

    /* One row that scrolls sideways on a phone, so the page starts near the top. */
    & ul {
      display: flex;
      gap: 0.25rem;
      inline-size: 100%;
      padding: 0;
      overflow-x: auto;
      list-style: none;
      scrollbar-width: none;

      @media (min-width: 64rem) { flex-direction: column; overflow: visible; }
    }

    & li { flex: none; }

    & a {
      display: flex;
      align-items: center;
      min-block-size: var(--touch-target);
      padding-inline: var(--inline-space-double);
      font-size: var(--text-small);
      font-weight: 500;
      color: var(--color-text);
      text-decoration: none;
      border-radius: var(--radius);
      transition: background var(--transition);

      &:hover { background: color-mix(in srgb, var(--color-bg-raised) 60%, transparent); }
      &[aria-current=page] { font-weight: 700; color: var(--color-link); background: var(--color-bg-raised); }
    }

    & .btn--plain { justify-content: start; padding-inline: var(--inline-space-double); }
  }

  /* Figma's section eyebrow: small, spaced capitals in violet. */
  .nav__business {
    margin: 0;
    padding-inline: var(--inline-space-double);
    font-size: var(--text-x-small);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-link);
  }
}