/* Styles for nav.hbs — both variants: the desktop bar (`.nav--desktop`) and the
   sidebar list (`.nav--mobile`). Mobile-first: the shared rules below are the
   sidebar's, and the 1000px block turns the same markup into a horizontal bar. */

.nav {
  list-style: none;
}

.nav-item {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 8px;
  border-radius: 12px;
  cursor: pointer;
}

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  color: var(--on-background-neutral-default);
}

.nav-label {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  font-size: 14px;
}

.nav-icon {
  flex: 0 0 auto;
  color: var(--on-background-neutral-default);
}

.nav-chevron {
  flex: 0 0 auto;
  color: var(--on-background-neutral-default);
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.nav--desktop {
  display: none;
}

/* --- Sidebar variant --- */
.nav--mobile {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: start;
  margin: 16px;
}

.nav--mobile .nav-item {
  flex-direction: column;
  align-items: stretch;
  padding: 16px 12px;
  background-color: var(--background-neutral-1);
}

/* "تماس با ما" and "درباره ما" read as one grouped card. */
.nav--mobile .nav-item:nth-child(3) {
  position: relative;
  margin-bottom: 0;
  border-radius: 12px 12px 0 0;
}

.nav--mobile .nav-item:nth-child(3)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 90%;
  height: 1px;
  background-color: var(--background-neutral-4);
  transform: translateX(-50%);
}

.nav--mobile .nav-item:nth-child(4) {
  border-radius: 0 0 12px 12px;
}

@media (min-width: 1000px) {
  .nav--desktop {
    position: relative;
    display: flex;
    height: 100%;
  }

  .nav--desktop .nav-item {
    position: relative;
    width: fit-content;
    height: 100%;
    margin-bottom: 0;
    border-radius: 0;
  }

  .nav--desktop .nav-link {
    height: 100%;
    margin: 0 16px;
    color: var(--on-background-neutral-subdued);
    font-size: 16px;
  }

  .nav--desktop .nav-label {
    gap: unset;
    width: fit-content;
  }

  .nav--desktop .nav-icon {
    display: none;
  }

  .nav--desktop .nav-chevron {
    color: var(--on-background-neutral-subdued);
    transform: rotate(0deg);
  }

  .nav--desktop .nav-item:hover .nav-link,
  .nav--desktop .nav-item.is-open .nav-link,
  .nav--desktop .nav-item.is-selected .nav-link {
    color: var(--on-background-neutral-default);
  }

  .nav--desktop .nav-item:hover .nav-chevron,
  .nav--desktop .nav-item.is-open .nav-chevron,
  .nav--desktop .nav-item.is-selected .nav-chevron {
    color: var(--on-background-neutral-default);
  }

  .nav--desktop .nav-item:hover .nav-chevron,
  .nav--desktop .nav-item.is-open .nav-chevron {
    transform: rotate(180deg);
  }

  /* The per-entry underline, for the pages where no entry is the current one.
     It grows out of its own centre on hover rather than sliding in from a
     neighbour, because on those pages there is no neighbour to slide from —
     which is exactly the split the legacy draws between its `slide-mode` nav and
     its plain one. The 6px inset either side is the same one the island applies
     to the shared bar, so the two marks are the same length. */
  .nav--desktop .nav-item::after {
    content: '';
    position: absolute;
    inset-inline: 6px 6px;
    bottom: 0;
    height: 3px;
    border-radius: 12px 12px 0 0;
    background-color: var(--on-background-neutral-cta);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .nav--desktop .nav-item:hover::after {
    opacity: 1;
    transform: scaleX(1);
  }

  /* …and gone the moment one entry is the current page: from then on the shared
     bar below owns the underline and slides between entries. */
  .nav--desktop:has(.nav-item.is-selected) .nav-item::after {
    display: none;
  }

  /* Slid into place by the island; width/offset come from a :style binding. */
  .nav-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: var(--on-background-neutral-cta);
    border-radius: 12px 12px 0 0;
    pointer-events: none;
    transition:
      transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
      width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }
}