/* Main-page hidden-nav hint and nav-hold. Standalone until the Sass build is fixed. Orange matches the site accent #ef5425. */

.nav-top .nav-hint {
  position: absolute;
  /* 2vh pad + 1vh first-link margin + 3.2vh link padding + 1.5 * 1.2rem line-height + 0.5vh half-gap */
  top: calc(6.7vh + 1.8rem);
  left: 100%;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.3rem 0.72rem;
  list-style: none;
  /* Visual only: hovering/tapping the pill must not open the menu or dismiss the hint. */
  pointer-events: none;
  z-index: 12;
  background: #ef5425;
  color: #fff;
  font-family: Ubuntu, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
  border-radius: 999px;
  /* Soft white glow mostly underneath the pill; dark shadow kept for edge definition */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 3.33px 8px rgba(255, 255, 255, 0.42), 0 6.67px 15px rgba(255, 255, 255, 0.28);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  /* 0.5vw = orange border; pull back 5px so the pill slightly overlaps it */
  transform: translate(calc(0.5vw - 5px), -50%);
  animation: nav-hint-pulse 1.8s ease-in-out infinite;
}

@media screen and (min-width: 900px) {
  .nav-top .nav-hint {
    /* menu link font-size becomes 1.6rem, so line-height is 2.4rem */
    top: calc(6.7vh + 2.4rem);
  }
}

.nav-top .nav-hint span {
  color: #fff;
  font-weight: 700;
}

.nav-top .nav-hint__tap {
  display: inline;
}

.nav-top .nav-hint__hover {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .nav-top .nav-hint__hover {
    display: inline;
  }
  .nav-top .nav-hint__tap {
    display: none;
  }
}

@keyframes nav-hint-pulse {
  0%,
  100% {
    transform: translate(calc(0.5vw - 5px), -50%) scale(1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 3.33px 8px rgba(255, 255, 255, 0.42), 0 6.67px 15px rgba(255, 255, 255, 0.28);
  }
  50% {
    transform: translate(calc(0.5vw - 5px), -50%) scale(1.06);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35), 0 4px 11px rgba(255, 255, 255, 0.5), 0 8px 16px rgba(255, 255, 255, 0.32);
  }
}

.nav-top:hover .nav-hint,
.nav-top.nav-hold .nav-hint,
.nav-top .nav-hint.is-dismissed {
  opacity: 0;
  visibility: hidden;
  animation: none;
  transform: translate(calc(0.5vw - 5px), -50%) scale(0.96);
  transition: opacity 0.28s ease, visibility 0.28s ease, transform 0.28s ease;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .nav-top .nav-hint {
    animation: none;
  }
  .nav-top:hover .nav-hint,
  .nav-top.nav-hold .nav-hint,
  .nav-top .nav-hint.is-dismissed {
    transition: none;
  }
}

/* Keep the slide-out nav open after a link click until JS releases .nav-hold */
.nav-top.nav-hold {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  background: rgba(136, 136, 136, 0.8);
}

/* Force-collapse after the hold so a sticky :hover on touch devices doesn't keep it open */
.nav-top.nav-retract {
  opacity: 0.6;
  -webkit-transform: translateX(-75%);
  transform: translateX(-75%);
  background: rgba(241, 241, 241, 0.3);
}