/**
 * Zoooom shared navigation — one experience across every surface.
 *
 * GENERATED CONTRACT. This file is the single implementation of the nav's look
 * and behaviour; the static pages link it, and the React/Next navbars emit the
 * same class names so a visitor moving between the apex, the guides and the
 * marketplace never feels like they changed apps.
 *
 * One canonical breakpoint: 1024px. Below it the links collapse into a drawer.
 * The apps previously disagreed — HomeV2 broke at 1060px, the shared React
 * Navbar at 768px, and the guides at 820px with no drawer at all — so the same
 * person got three different navs depending on where they landed.
 *
 * Deliberately dependency-free and framework-agnostic: the guides are plain
 * HTML with no build step.
 */

.znav {
  position: relative;
  z-index: 900;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  font-family: inherit;
}
.znav__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.znav__brand { display: inline-flex; align-items: center; flex: none; }
.znav__brand img { height: 26px; width: auto; display: block; }

/* ---------- desktop links ---------- */
.znav__links { display: none; align-items: center; gap: 2px; margin-left: 8px; }
.znav__link,
.znav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 11px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  line-height: 1;
  color: #4b5563;
  text-decoration: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 120ms ease, background 120ms ease;
}
.znav__link:hover,
.znav__toggle:hover { color: #111827; background: #f3f4f6; }
.znav__link[aria-current="page"] { color: #3758f9; }
.znav__chevron { width: 12px; height: 12px; transition: transform 160ms ease; }
.znav__group[data-open="true"] .znav__chevron { transform: rotate(180deg); }

/* Dropdowns are always in the DOM so crawlers see the links; visibility only. */
.znav__group { position: relative; }
.znav__menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
}
.znav__group[data-open="true"] .znav__menu { opacity: 1; visibility: visible; transform: none; }
.znav__menu a {
  display: block;
  padding: 9px 12px;
  font-size: 13.5px;
  color: #374151;
  text-decoration: none;
  border-radius: 8px;
}
.znav__menu a:hover { background: #f3f4f6; color: #111827; }

/* ---------- CTAs ---------- */
.znav__ctas { display: none; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.znav__ghost,
.znav__primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
}
.znav__ghost { border-color: rgba(15, 23, 42, 0.12); background: rgba(15, 23, 42, 0.05); color: rgba(15, 23, 42, 0.78); }
.znav__ghost:hover { background: rgba(15, 23, 42, 0.1); }
.znav__primary { background: #3758f9; color: #fff; }
.znav__primary:hover { opacity: 0.92; }

/* Mobile-only sign-in, so the bar is never just a logo and a hamburger. The
   guides used to hide the CTA entirely below 1000px, leaving no way to log in. */
.znav__signin { display: inline-flex; margin-left: auto; }
.znav__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 8px;
  border: 0;
  background: none;
  color: #374151;
  cursor: pointer;
  border-radius: 8px;
}
.znav__burger:hover { background: #f3f4f6; }

/* ---------- drawer ---------- */
.znav__drawer {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #fff;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  padding: 20px;
}
.znav__drawer[data-open="true"] { display: flex; }
.znav__close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: #4b5563;
  cursor: pointer;
}
.znav__drawer nav { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.znav__drawer a,
.znav__drawer .znav__toggle {
  padding: 13px 6px;
  font-size: 16px;
  color: #111827;
  text-decoration: none;
  border-radius: 8px;
}
.znav__drawer .znav__group[data-open="true"] .znav__menu {
  position: static;
  border: 0;
  box-shadow: none;
  padding: 0 0 6px 14px;
  min-width: 0;
}
.znav__drawer .znav__menu { position: static; display: none; }
.znav__drawer .znav__group[data-open="true"] .znav__menu { display: block; }
.znav__drawer .znav__menu a { font-size: 15px; color: #4b5563; padding: 10px 6px; }
.znav__drawer .znav__ctas { display: flex; flex-direction: column; margin: 22px 0 0; gap: 10px; }
.znav__drawer .znav__ghost,
.znav__drawer .znav__primary { width: 100%; padding: 13px 16px; font-size: 14px; }

/* ---------- the one breakpoint ---------- */
@media (min-width: 1024px) {
  .znav__links { display: flex; }
  .znav__ctas { display: flex; }
  .znav__signin,
  .znav__burger { display: none; }
  .znav__drawer { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .znav__menu,
  .znav__chevron,
  .znav__link,
  .znav__toggle { transition: none; }
}

/**
 * Overlay variant — the apex homepage sits its nav on a dark hero.
 *
 * Same structure, same breakpoint, same interactions; only the colours change.
 * Consistency here means "one navigation", not "one palette" — a nav that
 * ignored the hero behind it would look broken, not consistent.
 *
 * FIXED, not absolute. The homepage is a scroll-snap container: an absolutely
 * positioned nav scrolls away with the first slot instead of staying put, which
 * is what broke the homepage when this first shipped.
 */
.znav--overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
  transition: background 300ms ease, border-color 300ms ease;
}

/* The free-reports promo banner is an overlay at the very top of the homepage.
   A fixed nav pinned to top:0 sits underneath it and the banner covers the
   links — which is exactly what broke on dev. The banner publishes its real
   height as --zoooom-promo-h (it wraps to two or three rows on mobile), so the
   offset tracks the true height rather than a guess; 44px is the desktop
   one-line fallback. Reverts on its own when the banner is dismissed.
   Only the fixed overlay needs this: the solid variant is in normal flow. */
.hv2-has-promo .znav--overlay {
  top: var(--zoooom-promo-h, 44px);
}

/* Scroll-driven states the homepage sets as you move off the hero and onto
   light sheets. Without these the nav stayed transparent over pale panels and
   the links became unreadable. */
.znav--overlay.is-solid {
  background: rgba(5, 6, 7, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.10);
}
.znav--overlay.is-onlight {
  background: rgba(255, 255, 255, 0.72);
  border-bottom-color: rgba(15, 23, 42, 0.08);
}
.znav--overlay.is-onlight .znav__link,
.znav--overlay.is-onlight .znav__toggle { color: rgba(15, 23, 42, 0.60); }
.znav--overlay.is-onlight .znav__link:hover,
.znav--overlay.is-onlight .znav__toggle:hover { color: #111827; background: rgba(15, 23, 42, 0.05); }
.znav--overlay.is-onlight .znav__burger { color: rgba(15, 23, 42, 0.70); }
.znav--overlay.is-onlight .znav__ghost {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(15, 23, 42, 0.05);
  color: rgba(15, 23, 42, 0.78);
}
.znav--overlay .znav__link,
.znav--overlay .znav__toggle { color: rgba(255, 255, 255, 0.72); }
.znav--overlay .znav__link:hover,
.znav--overlay .znav__toggle:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.znav--overlay .znav__burger { color: rgba(255, 255, 255, 0.8); }
.znav--overlay .znav__burger:hover { background: rgba(255, 255, 255, 0.08); }
.znav--overlay .znav__ghost {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
}
.znav--overlay .znav__ghost:hover { background: rgba(255, 255, 255, 0.14); }
/* The drawer is a full-screen white sheet in both variants, so its contents
   must NOT inherit the overlay's light-on-dark colours. */
.znav--overlay .znav__drawer .znav__link,
.znav--overlay .znav__drawer .znav__toggle { color: #111827; }
.znav--overlay .znav__drawer .znav__ghost {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(15, 23, 42, 0.05);
  color: rgba(15, 23, 42, 0.78);
}