/* Shared marketing nav.
   Home and About each shipped their own nav in the design files, with
   different type, different items and a different logo weight. This is one
   nav for both, so they cannot drift again. Rules are the home page's — it
   was the newer of the two — re-scoped under .site-nav and given the handful
   of tokens they depend on, so this file stands alone. */

.site-nav {
  --sn-primary: #2563eb;
  --sn-primary-2: #1d4ed8;
  --sn-ink: #0f172a;
  --sn-ink-2: #475569;
  --sn-muted: #94a3b8;
  --sn-border: #e2e8f0;
  --sn-border-strong: #cbd5e1;
  --sn-page: #f8fafc;

  position: fixed;
  inset: 0 0 auto 0;
  z-index: 300;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sn-border);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* The nav is fixed, so every page using it owes itself the same offset. */
.site-nav-offset { padding-top: 66px; }

/* Signed-in pages carry the same bar, with two differences: it scrolls away
   with the content instead of pinning (the tab row underneath is too tall to
   give up a permanent band of every screen), and so it owes no offset. */
.site-nav.is-app {
  position: static;
  /* Nothing scrolls under a bar in the flow, so the blur has nothing to do
     but tint the page colour through it. Plain white, as it was. */
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* The marketplace surface is the one part of the product with a dark mode, and
   the bar has to follow it. Rather than a second set of rules, it re-points the
   nav's own tokens at the marketplace palette, which already flips on
   [data-theme]. Everything below then themes itself. Scoped to .is-buyer on
   purpose: the marketing pages have no dark styling, so a dark bar over them
   would be the only dark thing on the page. */
.site-nav.is-buyer {
  position: sticky;
  inset: auto;
  top: 0;
  background: var(--ex-nav-bg);
  border-bottom-color: var(--ex-nav-border);

  --sn-ink: var(--ex-text);
  --sn-ink-2: var(--ex-text-2);
  --sn-muted: var(--ex-text-muted);
  --sn-primary: var(--ex-blue);
  --sn-border: var(--ex-input-border);
  --sn-border-strong: var(--ex-text-muted);
  --sn-page: var(--ex-blue-dim);
}

/* The secondary button hardcodes white, which is a hole in the dark bar. */
.site-nav.is-buyer .btn-secondary { background: transparent; }

/* Full width, not a centred 1180px column: the logo belongs against the left
   edge of the window, where every other page in the product puts it. */
.site-nav .nav-inner {
  padding: 0 32px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* The one-word qualifier after the logo — "Admin". */
.site-nav .nav-logo-note {
  margin-left: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0;
  color: var(--sn-muted);
}

/* The wordmark is an inline SVG drawn in currentColor, so `color` here is what
   paints the letters. Height is set so its cap height matches the old 1.35rem
   text logo; the X's blades and the sparkle reach past the caps, which is why
   the box is taller than the letters look. */
.site-nav .nav-logo {
  display: inline-flex;
  align-items: center;
  color: var(--sn-ink);
  text-decoration: none;
  line-height: 0;
}
.site-nav .nav-logo svg {
  height: 26px;
  width: auto;
  display: block;
}
/* The sparkle tracks the theme's primary instead of its hardcoded fill, the
   same way "ORA" did in the text logo. */
.site-nav .nav-logo .spark { fill: var(--sn-primary); }
.site-nav .nav-logo .nav-logo-note { line-height: normal; }

.site-nav .nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav .nav-links a {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--sn-ink-2);
  text-decoration: none;
}
.site-nav .nav-links a:hover { color: var(--sn-primary); }
.site-nav .nav-links a.active { color: var(--sn-primary); font-weight: 600; }

.site-nav .nav-right { display: flex; align-items: center; gap: 10px; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.site-nav .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.site-nav .btn-primary {
  background: var(--sn-primary);
  color: #fff;
  border-color: var(--sn-primary);
}
.site-nav .btn-primary:hover { background: var(--sn-primary-2); }

.site-nav .btn-secondary {
  background: #fff;
  color: var(--sn-ink-2);
  border-color: var(--sn-border);
}
.site-nav .btn-secondary:hover { border-color: var(--sn-border-strong); color: var(--sn-ink); }

/* The page you are already on — still a link, but it does not invite a click. */
.site-nav .btn.is-current {
  background: var(--sn-page);
  color: var(--sn-primary);
  border-color: var(--sn-primary);
}

.site-nav a:focus-visible,
.site-nav button:focus-visible {
  outline: 2px solid var(--sn-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Product dropdown ────────────────────────────────────────────────── */
.site-nav .nav-links li.has-drop { position: relative; }

.site-nav .drop-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--sn-ink-2);
  cursor: pointer;
}
.site-nav .drop-toggle:hover { color: var(--sn-primary); }

.site-nav .drop-toggle::after {
  content: '';
  width: 5px;
  height: 5px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.16s;
}
.site-nav li.has-drop.open .drop-toggle::after { transform: rotate(225deg) translateY(1px); }

.site-nav .drop {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  width: 372px;
  transform: translateX(-50%) translateY(-6px);
  background: #fff;
  border: 1px solid var(--sn-border);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.13);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s, transform 0.16s, visibility 0.16s;
}

/* Bridges the gap so the pointer can travel from toggle to panel. */
.site-nav .drop::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}

.site-nav li.has-drop:hover .drop,
.site-nav li.has-drop.open .drop,
.site-nav li.has-drop:focus-within .drop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.site-nav .drop a {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.14s;
}
.site-nav .drop a:hover { background: var(--sn-page); }

.site-nav .drop .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.site-nav .drop b { display: block; font-size: 0.86rem; font-weight: 700; color: var(--sn-ink); letter-spacing: -0.012em; }
.site-nav .drop em { display: block; font-style: normal; font-size: 0.75rem; color: var(--sn-muted); margin-top: 3px; line-height: 1.5; }
.site-nav .drop em s { text-decoration: none; font-weight: 600; color: var(--sn-ink-2); }

.site-nav .drop-group {
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sn-muted);
  padding: 10px 12px 5px;
}
.site-nav .drop hr { border: none; border-top: 1px solid var(--sn-border); margin: 7px 10px; }

@media (max-width: 1000px) {
  .site-nav .nav-links { display: none; }
  .site-nav .nav-inner { padding: 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav .btn, .site-nav .drop, .site-nav .drop-toggle::after { transition: none; }
}