/* ============================================================
   PS5 PORTFOLIO — NAVIGATION ISLAND (EXTENDED)
   Extends base .ps-nav-island from ps5_components.css
   ============================================================ */

/* Hide nav on landing page */
.landing-page ~ .ps-nav-island,
body.is-landing .ps-nav-island {
  display: none;
}

/* Active nav item — accent underline + glow */
.ps-nav-island__item.active {
  color: var(--color-accent);
  background: var(--color-accent-subtle);
  box-shadow: 0 2px 0 var(--color-accent), 0 4px 12px var(--color-accent-glow);
}

.ps-nav-island__item.active .ps-nav-island__icon {
  filter: drop-shadow(0 0 6px var(--color-accent-glow));
}

/* Enhanced hover — lift + scale */
.ps-nav-island__item:hover {
  transform: translateY(-2px) scale(1.05);
}

/* SVG icon sizing */
.ps-nav-island__icon svg {
  display: block;
}

/* Transition polish */
.ps-nav-island__item {
  transition: color 200ms ease, background 200ms ease, transform 200ms var(--ease-bounce), box-shadow 200ms ease;
}

/* Mobile: tighter spacing, icons only (labels already hidden by ps5_components.css) */
@media (max-width: 480px) {
  .ps-nav-island {
    gap: 0;
    padding: var(--space-1) var(--space-2);
  }
}

/* Tablet: slightly smaller */
@media (max-width: 768px) {
  .ps-nav-island__label {
    font-size: 9px;
  }
}