/* ==========================================================================
   WooGrub — category-nav.css
   Sticky category navbar: dark background, horizontal scroll, active state.
   ========================================================================== */

/* ── Nav shell — full-width dark background ──────────────────────────────── */
.wg-category-nav {
  position: sticky;
  /* Pin at the plugin banner's real viewport bottom when closed; else top. */
  top: var(--wg-banner-sticky-top, 0px);
  z-index: var(--wg-z-category-nav);
  background-color: #2d2d2d;
  border-bottom: none;
  box-shadow: var(--wg-shadow-sm);
  width: 100%;
  overflow: hidden; /* prevent links from causing page-level horizontal scroll */

  --wg-navbar-height: 48px;
  height: var(--wg-navbar-height);
}

/* ── Inner scroll container ──────────────────────────────────────────────── */
.wg-category-nav__inner {
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: auto; /* JS controls animation directly */
}

.wg-category-nav__inner::-webkit-scrollbar {
  display: none;
}

/* ── Links wrapper — constrained to 1100px, matching shop content ─────────── */
.wg-category-nav__links {
  position: relative; /* pill positions against this */
  display: flex;
  align-items: center;
  gap: var(--wg-space-1);
  height: 100%;
  white-space: nowrap;
  width: max-content;
  min-width: 100%;
  padding-inline: var(--wg-space-4);       /* mobile base */
}

@media (min-width: 560px) {
  .wg-category-nav__links {
    /* Align to 1100px column + extra 1rem nudge to match the mobile feel */
    padding-inline: max( calc( var(--wg-space-6) + var(--wg-space-4) ), calc( ( 100% - 1100px ) / 2 + var(--wg-space-6) + var(--wg-space-4) ) );
  }
}

@media (min-width: 1024px) {
  .wg-category-nav__links {
    padding-inline: max( calc( var(--wg-space-8) + var(--wg-space-4) ), calc( ( 100% - 1100px ) / 2 + var(--wg-space-8) + var(--wg-space-4) ) );
  }
}

/* ── Individual nav link ─────────────────────────────────────────────────── */
.wg-category-nav__link {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding-inline: var(--wg-space-4);
  border-radius: var(--wg-radius-full);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--wg-transition),
    color var(--wg-transition);
  flex-shrink: 0;
}

.wg-category-nav__link:visited {
  color: rgba(255, 255, 255, 0.7);
}

@media (hover: hover) {
  .wg-category-nav__link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
  }
}

/* ── Active state — text colour only, pill is handled by JS slider ───────── */
.wg-category-nav__link.is-active {
  color: var(--wg-text-on-primary);
  font-weight: 600;
  position: relative;
  z-index: 1; /* sit above the sliding pill */
}

@media (hover: hover) {
  .wg-category-nav__link.is-active:hover {
    color: var(--wg-text-on-primary);
  }
}

/* ── Sliding pill indicator ──────────────────────────────────────────────── */
.wg-category-nav__pill {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 32px;
  border-radius: var(--wg-radius-full);
  background-color: var(--wg-primary);
  pointer-events: none;
  z-index: 0;
  /* Position and width driven by JS — no CSS transition needed since
     we lerp it manually each frame for perfect sync with the active link */
}

/* Focus ring */
.wg-category-nav__link:focus-visible {
  outline: 2px solid var(--wg-primary);
  outline-offset: 2px;
}

/* ── Mobile: top offset accounts for smaller header ─────────────────────── */
@media (max-width: 767px) {
  .wg-category-nav {
    top: var(--wg-banner-sticky-top, 0px);
    --wg-navbar-height: 44px;
  }
}

/* ── Dark mode ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .wg-category-nav {
  background-color: #1a1a1a;
}