/* ============================================================
   NAVBAR — Floating pill, fixed, hamburger on mobile
============================================================ */

.navbar-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  padding: var(--space-4) var(--space-6);
  pointer-events: none;
  animation: navbarReveal 0.3s cubic-bezier(0.32, 3, 0.5, 3) both;
}

@keyframes navbarReveal {
  from {
    opacity: 0;
    transform: translateY(-16px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar-wrapper {
    animation: none;
  }
}

.navbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 860px;
  margin-inline: auto;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  box-shadow: 4px 4px 0px 0px var(--color-ink);
  pointer-events: all;
  position: relative;
}

/* --- Logo --- */
.navbar-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  text-decoration: none;
}

.logo-mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.logo-text {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.navbar-logo-img {
  height: 36px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* --- Desktop links --- */
.navbar-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-4);
}

.nav-link {
  padding: 0.375rem 0.75rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  border-radius: var(--radius-full);
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--color-ink);
  background-color: var(--color-ink-10);
}

.nav-link--active {
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
}

/* --- Right cluster --- */
.navbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* Override: navbar CTA — neo-brutalist sólido */
.navbar-right .btn-pill--primary {
  padding: 0.55rem 1.25rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  gap: var(--space-2);
  border: 2px solid var(--color-ink);
  box-shadow: 3px 3px 0px 0px var(--color-ink);
  transition:
    box-shadow  var(--duration-fast) var(--ease-spring),
    transform   var(--duration-fast) var(--ease-spring),
    background-color var(--duration-fast) var(--ease-out);
}

.navbar-right .btn-pill--primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0px 0px var(--color-ink);
  background-color: var(--color-accent-dark);
}

.navbar-right .btn-pill--primary:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px 0px var(--color-ink);
}

/* --- Hamburger --- */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  gap: 5px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border-strong);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.hamburger:hover {
  background-color: var(--color-ink-10);
}

.hamburger-line {
  display: block;
  width: 16px;
  height: 1.5px;
  background-color: var(--color-ink);
  border-radius: var(--radius-full);
  transform-origin: center;
  transition:
    transform var(--duration-base) var(--ease-spring),
    opacity var(--duration-base) var(--ease-out);
}

/* Hamburger open state: morphs to X */
.hamburger[aria-expanded="true"] .hamburger-line:first-child {
  transform: translateY(3.25px) rotate(45deg);
}

.hamburger[aria-expanded="true"] .hamburger-line:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* --- Mobile menu --- */
.mobile-menu {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2xl);
  padding: var(--space-3);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.mobile-menu[hidden] {
  display: none !important;
}

.mobile-menu:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  animation: menuReveal var(--duration-slow) var(--ease-spring) both;
}

@keyframes menuReveal {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.mobile-link {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-ink-80);
  border-radius: var(--radius-lg);
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
  animation: linkReveal var(--duration-slow) var(--ease-spring) both;
}

.mobile-link:nth-child(1) { animation-delay: 40ms; }
.mobile-link:nth-child(2) { animation-delay: 80ms; }
.mobile-link:nth-child(3) { animation-delay: 120ms; }
.mobile-link:nth-child(4) { animation-delay: 160ms; }

@keyframes linkReveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-link:hover {
  color: var(--color-ink);
  background-color: var(--color-ink-10);
}

.mobile-menu .btn-pill--full {
  margin-top: var(--space-2);
  animation: linkReveal var(--duration-slow) var(--ease-spring) 200ms both;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .navbar-wrapper {
    padding: var(--space-3) var(--space-4);
  }

  .navbar-links {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .navbar .btn-pill--primary {
    display: none;
  }
}