/* =============================================================================
   ROBONIX — ICON-BASED PRIMARY NAVIGATION
   Strictly scoped to `.nav.nav--icons`. Reuses the existing header/nav markup,
   classes and destination handlers. Does not touch the logo, header structure,
   hero, typography tokens or any other component.
   ============================================================================= */

/* ---------- Container: keep existing position & header height ---------- */
.nav.nav--icons {
  height: 46px;                              /* matches previous nav height → header height unchanged */
  gap: clamp(14px, 1.8vw, 24px);
  align-items: center;
}

/* Background capsule: matches the dark ROBONIX theme to guarantee high contrast over light hero windows */
.nav--icons .nav__list {
  height: 100%;
  padding: 3px 12px;
  gap: clamp(10px, 1.8vw, 28px);
  background: rgba(3, 16, 13, 0.78);
  border: 1px solid rgba(60, 255, 176, 0.24);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.nav--icons .nav__list:hover {
  border-color: rgba(60, 255, 176, 0.4);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.65), 0 0 18px rgba(60, 255, 176, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.nav--icons .nav__list > li { display: flex; }

/* The sliding glass pill is a container highlight — not used in icon mode */
.nav--icons .nav__pill { display: none !important; }

/* ---------- Icon items ---------- */
.nav--icons .nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, .92);
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease, transform .2s ease;
}
/* Neutralise the slider's automatic aria-current="true" sync */
.nav--icons .nav__link[aria-current="true"] { color: rgba(255, 255, 255, .92); }

.nav--icons .nav__icon {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .85));
  transition: filter .22s ease, color .22s ease, transform .2s ease;
}

/* Hover ("drag mouse on"), Selected ("clicks"), & Active Slide: highlight & turn the color */
.nav--icons .nav__link:hover,
.nav--icons .nav__link.is-selected,
.nav--icons .nav__link[aria-current="true"] {
  color: var(--neon, #3CFFB0);
}
.nav--icons .nav__link:hover .nav__icon,
.nav--icons .nav__link.is-selected .nav__icon,
.nav--icons .nav__link[aria-current="true"] .nav__icon {
  color: var(--neon, #3CFFB0);
  filter: drop-shadow(0 0 6px rgba(60, 255, 176, .95)) drop-shadow(0 0 16px rgba(0, 194, 122, .65));
  transform: scale(1.08);
}

/* While hovering the nav bar, dim the active-slide icon if it is not the one being hovered */
.nav--icons:hover .nav__link[aria-current="true"]:not(:hover) {
  color: rgba(255, 255, 255, .82);
}
.nav--icons:hover .nav__link[aria-current="true"]:not(:hover) .nav__icon {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .85));
  transform: none;
}

/* Current page: subtle teal accent */
.nav--icons .nav__link[aria-current="page"] { color: var(--neon, #3CFFB0); }

/* Keyboard focus */
.nav--icons .nav__link:focus-visible,
.nav--icons .btn-contact:focus-visible {
  outline: 2px solid var(--neon, #3CFFB0);
  outline-offset: 3px;
  border-radius: 50%;
}

/* ---------- Floating label (down side of the icon — high-contrast HUD badge) ---------- */
.nav--icons .nav__label {
  position: absolute;
  z-index: 100;
  top: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, -4px);
  white-space: nowrap;
  pointer-events: none;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: var(--rx-fw-medium, 500);
  letter-spacing: .06em;
  line-height: 1;
  color: var(--neon, #3CFFB0);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 8px rgba(60, 255, 176, .45);
  background: rgba(2, 14, 11, 0.92);
  border: 1px solid rgba(60, 255, 176, 0.35);
  border-radius: 999px;
  padding: 4px 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), 0 0 12px rgba(60, 255, 176, 0.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

/* Reveal label on:
   1. Active flashcard slide ([aria-current="true"])
   2. Current page ([aria-current="page"])
   3. Explicitly selected / clicked item (.is-selected)
   4. Mouse hover / drag (:hover)
*/
.nav--icons .nav__link:hover > .nav__label,
.nav--icons .btn-contact:hover > .nav__label,
.nav--icons .nav__link.is-selected > .nav__label,
.nav--icons .btn-contact.is-selected > .nav__label,
.nav--icons .nav__link[aria-current="true"] > .nav__label,
.nav--icons .nav__link[aria-current="page"] > .nav__label,
.nav--icons .btn-contact[aria-current="page"] > .nav__label {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity .18s ease, transform .18s ease;
}

/* While the user hovers over the navigation, only show the currently hovered item's label (hide the slide-active / selected one so they don't collide) */
.nav--icons:hover .nav__link[aria-current="true"]:not(:hover) > .nav__label,
.nav--icons:hover .nav__link[aria-current="page"]:not(:hover) > .nav__label,
.nav--icons:hover .btn-contact[aria-current="page"]:not(:hover) > .nav__label,
.nav--icons:hover .is-selected:not(:hover) > .nav__label {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}

/* ---------- Contact (right arrow) ---------- */
/* Outer link keeps the existing .btn-contact class/handlers but becomes a
   transparent, non-clipping wrapper so the label can float below it. */
.nav--icons .btn-contact,
.nav--icons .btn-contact:hover,
.nav--icons .btn-contact.is-active,
.nav--icons .btn-contact[aria-current="page"] {
  position: relative;
  overflow: visible;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transform: none;
  letter-spacing: normal;
  -webkit-tap-highlight-color: transparent;
}
.nav--icons .btn-contact::after { content: none; }

/* Visual circle (existing brand green + shimmer, moved onto the inner orb) */
.nav--icons .nav__orb {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--green, #00C27A);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(60, 255, 176, .6), 0 10px 30px -10px rgba(0, 194, 122, .9);
  transition: background .25s, box-shadow .25s, color .25s, transform .2s;
}
.nav--icons .nav__orb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease-out, ease);
  pointer-events: none;
}
.nav--icons .nav__orb .nav__icon {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
  filter: none;
}
.nav--icons .btn-contact:hover .nav__orb,
.nav--icons .btn-contact.is-active .nav__orb,
.nav--icons .btn-contact[aria-current="page"] .nav__orb {
  background: var(--neon, #3CFFB0);
  color: #031410;
  box-shadow: 0 0 0 1px var(--neon, #3CFFB0), 0 12px 36px -8px rgba(60, 255, 176, .95);
  transform: translateY(-1px);
}
.nav--icons .btn-contact:hover .nav__orb::after { transform: translateX(120%); }
.nav--icons .btn-contact.is-selected .nav__orb {
  background: var(--neon, #3CFFB0);
  color: #031410;
  box-shadow: 0 0 0 1px var(--neon, #3CFFB0), 0 0 18px rgba(60, 255, 176, .7), 0 0 34px rgba(0, 194, 122, .45);
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav--icons .nav__link { padding: 0; }
  .nav--icons .btn-contact,
  .nav--icons .btn-contact:hover { padding: 0; }
}

/* Tablet & mobile: the five icons replace the hamburger (identical destinations).
   Height 44px = previous burger height → header height unchanged. */
@media (max-width: 1024px) {
  .nav.nav--icons { display: flex; height: 44px; }
  .nav--icons ~ .burger { display: none; }
  .nav.nav--icons,
  .nav--icons .nav__list { gap: clamp(8px, 2.6vw, 28px); }
}

@media (max-width: 600px) {
  .nav.nav--icons,
  .nav--icons .nav__list { gap: clamp(0px, .6vw, 4px); }
  .nav--icons .nav__link,
  .nav--icons .btn-contact,
  .nav--icons .btn-contact:hover,
  .nav--icons .btn-contact.is-active,
  .nav--icons .btn-contact[aria-current="page"] {
    width: clamp(25px, 7.1vw, 36px);
    height: clamp(25px, 7.1vw, 36px);
  }
  .nav--icons .nav__icon { width: clamp(17px, 4.7vw, 22px); height: clamp(17px, 4.7vw, 22px); }
  .nav--icons .nav__orb .nav__icon { width: clamp(15px, 4.2vw, 19px); height: clamp(15px, 4.2vw, 19px); }
  .nav--icons .nav__label { font-size: 11px; letter-spacing: .04em; top: calc(100% + 8px); }
  /* Keep edge labels inside the viewport */
  .nav--icons .nav__list > li:first-child .nav__label { left: 0; transform: translate(-30%, -4px); }
  .nav--icons .nav__list > li:first-child .is-selected > .nav__label { transform: translate(-30%, 0); }
  .nav--icons .btn-contact .nav__label { left: auto; right: 0; transform: translate(0, -4px); }
  .nav--icons .btn-contact.is-selected > .nav__label { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .nav--icons .nav__label,
  .nav--icons .is-selected > .nav__label { transition: opacity .01s; transform: translate(-50%, 0); }
}