/* ==========================================
   Navigation Container
========================================== */

#nav-container {
  position: relative;
}

/* ==========================================
   Navigation Links
========================================== */

.nav-link {
  position: relative;
  padding: 6px 10px;
  border-radius: 8px;
  z-index: 2;
  transition:
    color 0.3s ease,
    background-color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
  color: #eab308;
}

/* ==========================================
   Sliding Indicator
========================================== */

#nav-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;

  background: rgba(250, 204, 21, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  box-shadow: 0 4px 20px rgba(234, 179, 8, 0.15);
  border-radius: 10px;

  pointer-events: none;
  z-index: 1;

  opacity: 0;
  transform: translateX(0);

  transition:
    width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease;
}

/* ==========================================
   Accessibility
========================================== */

.nav-link:focus-visible {
  outline: 2px solid #eab308;
  outline-offset: 2px;
}
/* Mobile protection */
@media (max-width: 1023px) {
  #nav-container {
    display: none !important;
  }
}