/* ============================================================
   Ink & Intuition — nav (site/sections/00-nav.html)
   Fixed, transparent over the hero; gains a cream glass surface
   once scrolled (updated by hero.js with a lightweight scroll listener).
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 150;
  padding-block: 17px;
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition:
    background-color var(--dur-med) var(--ease-brand),
    border-color var(--dur-med) var(--ease-brand),
    box-shadow var(--dur-med) var(--ease-brand),
    padding-block var(--dur-med) var(--ease-brand);
}

.nav--scrolled {
  background: rgba(251, 243, 231, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--ink-soft);
  box-shadow: var(--shadow-soft);
  padding-block: 12px;
}

.nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-wordmark {
  flex: none;
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1;
  color: var(--ink-900);
  transition: opacity var(--dur-quick) var(--ease-brand);
}
.nav-wordmark:hover { color: var(--ink-900); opacity: 0.75; }

.nav-amp {
  font-style: italic;
  color: var(--pink-link);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
  justify-content: center;
}

.nav-links a {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1;
  color: var(--ink-700);
  /* A wrapped nav label gives the bar a ragged, uneven height. If the labels
     cannot fit on one line the band below tightens them; they never break. */
  white-space: nowrap;
}
.nav-links a:hover { color: var(--ink-900); }

.nav-cta { flex: none; }

.nav-menu-toggle,
.nav-mobile-menu { display: none; }

.nav-menu-toggle {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.5);
  color: var(--ink-900);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: var(--shadow-float);
  cursor: pointer;
  transition:
    background-color var(--dur-quick) var(--ease-brand),
    box-shadow var(--dur-quick) var(--ease-brand),
    transform var(--dur-quick) var(--ease-brand);
}

.nav-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.78);
  transform: translateY(-1px);
}

.nav-menu-toggle:active { transform: scale(0.98); }

.nav-menu-toggle-bar {
  display: block;
  width: 19px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center;
  transition: transform var(--dur-quick) var(--ease-brand), opacity var(--dur-quick) var(--ease-brand);
}

.nav-menu-toggle-bar + .nav-menu-toggle-bar { margin-top: 4px; }

.nav.is-menu-open .nav-menu-toggle-bar:nth-of-type(2) { transform: translateY(6px) rotate(45deg); }
.nav.is-menu-open .nav-menu-toggle-bar:nth-of-type(3) { opacity: 0; }
.nav.is-menu-open .nav-menu-toggle-bar:nth-of-type(4) { transform: translateY(-6px) rotate(-45deg); }

.nav-mobile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: var(--gutter);
  left: var(--gutter);
  z-index: 1;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 20px;
  background: rgba(251, 243, 231, 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  box-shadow: 0 22px 48px -24px rgba(42, 34, 48, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.985);
  transform-origin: top right;
  transition:
    opacity var(--dur-quick) var(--ease-brand),
    visibility var(--dur-quick) var(--ease-brand),
    transform var(--dur-quick) var(--ease-brand);
}

.nav-mobile-menu a:not(.nav-mobile-cta) {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
}

.nav-mobile-menu a:not(.nav-mobile-cta):hover { background: rgba(255, 255, 255, 0.55); }

.nav-mobile-cta {
  justify-content: center;
  margin: 8px 0 2px;
  padding-block: 14px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .nav-links { gap: 20px; }
}

/* The desktop nav runs all the way down to 768px, where the hamburger takes
   over. Between there and about 860px the four labels plus the wordmark and
   the CTA no longer fit at full size, so this band trades tracking and gap for
   the fit rather than letting anything wrap or the bar reflow. */
@media (max-width: 860px) {
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 13.5px; letter-spacing: -0.005em; }
  .nav-cta.btn-dark { padding: 10px 16px; font-size: 13.5px; }
}

@media (max-width: 767px) {
  .nav { padding-block: 14px; }
  .nav--scrolled { padding-block: 10px; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-wordmark { font-size: 21px; }
  .nav-menu-toggle { display: block; }
  .nav-mobile-menu { display: grid; }
  .nav.is-menu-open .nav-mobile-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .nav--scrolled,
  .nav-menu-toggle,
  .nav-mobile-menu {
    background: #fbf3e7;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}