/* ============================================================
   AG54 — Navigation Enhancement
   Adds map link styling + 5-item layout fix
   Add AFTER styles.css: <link rel="stylesheet" href="/storefront/styles-nav.css">
   ============================================================ */

/* ── Tighter gap so 5 links still fit on desktop ────────────── */
.site-header__nav {
  gap: var(--space-6);   /* 1.5rem — was --space-8 (2rem) */
}

/* ── Map nav link — special pill style ──────────────────────── */
.nav-link--map {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px 4px 8px;
  border-radius: var(--radius-full);
  border: 0.5px solid rgba(212, 165, 116, 0.3);
  background: rgba(212, 165, 116, 0.06);
  color: var(--color-accent) !important;
  transition:
    background var(--transition-interactive),
    border-color var(--transition-interactive),
    color var(--transition-interactive);
}

.nav-link--map:hover,
.nav-link--map.active {
  background: rgba(212, 165, 116, 0.14);
  border-color: var(--color-accent);
  color: var(--color-accent) !important;
}

/* Remove the default underline effect for the map pill */
.nav-link--map::after { display: none !important; }

/* Map icon inside the pill */
.nav-link--map .map-icon {
  width: 14px;
  height: 14px;
  opacity: 0.9;
  flex-shrink: 0;
}

/* Pulse dot to signal interactivity */
.nav-link--map .map-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  animation: map-dot-pulse 2.2s ease-in-out infinite;
}
@keyframes map-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

/* ── Mobile nav — map link special style ────────────────────── */
.mobile-nav .nav-link--map {
  font-size: var(--text-xl);   /* slightly smaller than other mobile links */
  border: 0.5px solid rgba(212, 165, 116, 0.35);
  padding: 8px 24px;
}

/* ── Hub landing page — map card ─────────────────────────────── */
.hub-card--map:hover {
  border-color: rgba(212, 165, 116, 0.4);
}
.hub-card--map .hub-card__accent {
  background: linear-gradient(90deg, #D4A574 0%, #C8A84B 100%);
}

/* ── Map breadcrumb in header (map page only) ────────────────── */
.site-header .map-page-tag {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  opacity: 0.7;
}