/*
  navItem — one pill inside the nav (component.json navItem, 26 tokens).
  Kinds: text (the site name), text + icon chip (Work, opens the dropdown),
  icon only (email, LinkedIn: 48px circles).
  States: default, hover, selected, focus (ring only).
    selected = the site name on the homepage (aria-current="page"),
               the Work pill on a case study page (.is-selected) or while its menu is open (aria-expanded="true").
  Hover styles only apply on devices with a real pointer, so a tap on a phone
  doesn't leave an item stuck in its hover look.
  MOTION (BUILD 19): fill, glow, rim and shadow fade between states at
  navItem.transition (feedback). A tap shows the hover look at once while the finger
  is down and fades out on release. The chevron turns at navItem.chevronTransition
  (the panel's speed); instant for visitors who asked to reduce motion.
  Gradients can't be blended, so the glow and the rim each sit on their own layer
  (::after and ::before) and fade by opacity. At rest both tokens are "none": drawn
  as opacity 0.
*/

.nav-item {
  /* default state: no rim, no glow (both tokens "none", drawn as opacity 0 so they can fade) */
  --rim-image: var(--nav-item-border-hover);
  --rim-opacity: 0;
  --rim-width: var(--nav-item-border-width-all);
  --rim-duration: var(--nav-item-transition-all-duration);
  --rim-easing: var(--nav-item-transition-all-easing);
  --nav-item-glow-opacity: 0;
  isolation: isolate; /* keeps the glow layer behind the text, in front of the fill */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nav-item-icon-gap-all);
  height: var(--nav-item-height-all);
  padding-inline: var(--nav-item-padding-horizontal-all);
  border: 0;
  border-radius: var(--nav-item-radius-all);
  background-color: var(--nav-item-fill-default);
  box-shadow: var(--nav-item-shadow-default);
  transition:
    background-color var(--nav-item-transition-all-duration) var(--nav-item-transition-all-easing),
    box-shadow var(--nav-item-transition-all-duration) var(--nav-item-transition-all-easing);
  color: var(--nav-item-content-all);
  font-family: var(--nav-item-text-style-all-font-family);
  font-size: var(--nav-item-text-style-all-font-size);
  font-weight: var(--nav-item-text-style-all-font-weight);
  line-height: var(--nav-item-text-style-all-line-height);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* The glow's own layer: glow.dark, faded in and out (hover only). */
.nav-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--nav-item-glow-hover);
  opacity: var(--nav-item-glow-opacity);
  transition: opacity var(--nav-item-transition-all-duration) var(--nav-item-transition-all-easing);
  pointer-events: none;
}

/* selected: hover's fill, rim and lift, never the glow */
.nav-item[aria-current="page"],
.nav-item[aria-expanded="true"],
.nav-item.is-selected {
  --rim-image: var(--nav-item-border-selected);
  --rim-opacity: 1;
  --nav-item-glow-opacity: 0;
  background-color: var(--nav-item-fill-selected);
  box-shadow: var(--nav-item-shadow-selected);
}

/* hover: comes last, so hovering a selected item still shows the glow as feedback */
@media (hover: hover) {
  .nav-item:hover {
    --rim-image: var(--nav-item-border-hover);
    --rim-opacity: 1;
    --nav-item-glow-opacity: 1;
    background-color: var(--nav-item-fill-hover);
    box-shadow: var(--nav-item-shadow-hover);
  }
}

/* tap (and mouse press): the hover look, at once; it fades out on release */
.nav-item:active {
  --rim-image: var(--nav-item-border-hover);
  --rim-opacity: 1;
  --nav-item-glow-opacity: 1;
  background-color: var(--nav-item-fill-hover);
  box-shadow: var(--nav-item-shadow-hover);
  transition-duration: 0s;
}
.nav-item:active::before,
.nav-item:active::after {
  transition-duration: 0s;
}

.nav-item:focus-visible {
  outline: var(--nav-item-focus-ring-width-focus) solid var(--nav-item-focus-ring-color-focus);
  outline-offset: var(--nav-item-focus-ring-offset-focus);
}

/* icon only: a 48px circle */
.nav-item--icon {
  width: var(--nav-item-icon-only-width-all);
  padding-inline: 0;
}

.nav-item__icon {
  width: var(--nav-item-icon-size-all);
  height: var(--nav-item-icon-size-all);
}

/* the chip: the chevron's own 20px box, filled and made round */
.nav-item__chip {
  display: inline-flex;
  width: var(--nav-item-icon-size-all);
  height: var(--nav-item-icon-size-all);
  border-radius: var(--nav-item-chip-radius-all);
  background-color: var(--nav-item-chip-fill-all);
}

/* the chevron turns when the menu is open, in step with the panel (navItem.chevronTransition).
   Movement, so only for visitors who haven't asked to reduce motion; otherwise it flips at once. */
.nav-item[aria-expanded="true"] .nav-item__chip svg {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: no-preference) {
  .nav-item__chip svg {
    transition: transform var(--nav-item-chevron-transition-all-duration) var(--nav-item-chevron-transition-all-easing);
  }
}

/* SITE NAME: "Vivek" below 768px, "Vivek Saigal" from 768px up.
   The surname is only hidden from sight on phones; screen readers always hear "Vivek Saigal". */
@media (width < 768px) {
  .nav-item__surname {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}