/* resume_hint.css */

/*
  The download icon lives inside .nav__inner > .container.
  .container = min(1100px, 100% - 48px), centered.

  Right edge of the container sits at:
     max(24px, (100% - 1100px) / 2)
  from the right edge of the viewport (24px = half of the 48px gutter).

  From the container-right edge, moving left to the download icon CENTER:
     + 38px (theme toggle, the last item)
     + 18px (gap between menu items)
     + 19px (half the 38px download icon)
     = 75px

  We anchor the hint's right edge to the icon center, then shift right by
  half the hint's own width so it's centered under the icon. All in the same
  container math, so it tracks the icon at every screen size.
*/

.resume-hint {
  --hint-width: 110px; /* approx width of the hint block; used to center it */

  position: fixed;
  top: 74px; /* just below the 70px fixed navbar */
  /* right: calc(max(24px, (100% - 1100px) / 2) + 82px - (var(--hint-width) / 2)); */
  right: calc(max(24px, (100% - 1100px) / 2) + 75px - (var(--hint-width) / 2));

  width: var(--hint-width);
  display: flex;
  flex-direction: column-reverse; /* arrow on top, text below */
  align-items: center;
  gap: 2px;
  color: var(--text);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px);
  animation: hintFadeIn 0.5s ease 0.9s forwards;
  z-index: 5;
}

.resume-hint__text {
  font-family: "Gluten", cursive;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings: "slnt" 0;
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: auto;
  cursor: default;
}

.resume-hint__arrow {
  width: 55px;
  height: auto;
  display: block;
}

/* dismissed state (added by JS) */
.resume-hint.is-dismissed {
  opacity: 0 !important;
  transform: translateY(-6px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
  pointer-events: none;
}

@keyframes hintFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Desktop only — hide on mobile/tablet (icon is hidden there too) */
@media (max-width: 1000px) {
  .resume-hint {
    display: none;
  }
}

/* follows the navbar: when the nav hides on scroll, the hint slides up too */
.resume-hint {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.resume-hint--nav-hidden {
  opacity: 0 !important;
  transform: translateY(-120%) !important;
  pointer-events: none;
}