/* Shared active-state underline for the main site navigation.
   The line is drawn behind the label text and centred on it, so the text stays
   fully readable and the indicator never intercepts clicks. */

nav .nav-items .nav-item-right > a > li {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
}

nav .nav-items .nav-item-right > a > li .nav-label-text {
  position: relative;
  isolation: isolate;
}

nav .nav-items .nav-item-right > a > li .nav-label-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 1px;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Each destination keeps its own fixed colour. Projects: warm peach. */
nav .nav-items .nav-item-right > a > li.project .nav-label-text::after {
  background-color: #FDD094;
}

nav .nav-items .nav-item-right > a > li.about .nav-label-text::after {
  background-color: #B9E0F8;
}

nav .nav-items .nav-item-right > a > li.project.is-active .nav-label-text::after,
nav .nav-items .nav-item-right > a > li.project.active .nav-label-text::after,
nav .nav-items .nav-item-right > a > li.about.is-active .nav-label-text::after,
nav .nav-items .nav-item-right > a > li.about.active .nav-label-text::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  nav .nav-items .nav-item-right > a > li .nav-label-text::after {
    transition: none;
  }
}