/* ===== Navigation – Amorismo ===== */
/*
 * Layout: [Inicio · Escuchar · Partituras]  ←—— [Vol I | Vol II | Vol III] ——→  [✉]
 * Menu links use a soft pill container; Vol links use the signature glassmorphism pill.
 * Both share the same typographic scale to unify the nav language.
 */

.am-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--am-nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(var(--am-sp-5), 4vw, var(--am-sp-8));
  background: linear-gradient(to bottom, var(--am-nav-bg), transparent);
}

/* ── Left menu (Inicio · Escuchar · Partituras) ── */
/* Subtle pill container — echoes Vol pill with less visual weight */
.am-nav__menu {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--am-home-border);
  border-radius: var(--am-radius-sm);
  overflow: hidden;
}

.am-nav__menu-link {
  position: relative;
  font-family: var(--am-font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--am-home-text-muted);
  text-decoration: none;
  min-height: 44px;
  padding: 0.35rem 0.85rem;
  display: flex;
  align-items: center;
  transition: color 0.2s ease, background-color 0.2s ease;
}

/* Dividers between menu links */
.am-nav__menu-link + .am-nav__menu-link {
  border-left: 1px solid var(--am-home-border);
}

.am-nav__menu-link:hover,
.am-nav__menu-link:focus-visible {
  color: var(--am-home-text);
  background: var(--am-nav-hover-bg);
}

.am-nav__menu-link.am-nav__menu-link--active {
  color: var(--am-home-text);
}

/*
 * The container is the visible card (border + radius).
 * Individual links grow on hover via transform: scale().
 * position:absolute centers the card regardless of sibling widths.
 */
.am-nav__links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  min-height: 44px;
  border: 1px solid var(--am-home-border);
  border-radius: var(--am-radius-sm);
  background: var(--am-nav-bg);
  box-shadow: var(--am-shadow-nav-logo);
  color: var(--am-home-text-muted);
  overflow: hidden;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.am-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 72px;
  padding: 0.35rem 0.95rem;
  font-family: var(--am-font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

/* Vertical dividers between links */
.am-nav__link + .am-nav__link {
  border-left: 1px solid var(--am-home-border);
}

.am-nav__link:hover {
  color: var(--am-home-text);
  background: var(--am-nav-hover-bg);
}

/* Active – set by nav.js on page load */
.am-nav__link.am-nav__link--active {
  color: var(--am-home-text);
  background: var(--am-nav-active-bg);
  font-weight: 700;
}

.am-nav__link.am-nav__link--active::after {
  content: '';
  position: absolute;
  left: var(--am-sp-3);
  right: var(--am-sp-3);
  bottom: 0.35rem;
  height: 2px;
  border-radius: 1px;
  background: var(--am-nav-active-text);
}

/* ── Mail icon (newsletter anchor) ── */
.am-nav__mail {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--am-radius-sm);
  color: var(--am-home-text-muted);
  text-decoration: none;
  transition: color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

.am-nav__mail:hover,
.am-nav__mail:focus-visible {
  color: var(--am-home-text);
  background: var(--am-nav-hover-bg);
  transform: translateY(-1px);
  outline: 3px solid var(--am-home-accent-soft);
  outline-offset: 2px;
}

.am-nav__mail svg {
  display: block;
  pointer-events: none;
}