/* Canonical BloqBot public navbar.
   This component loads after page-owned styles so every visible public navbar
   uses the landing hero's geometry, type, controls, and interaction language. */

body:not(.dashboard-body):not(.tour-body) .site-navbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1300;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(205, 218, 240, 0.05);
  /* Near-black navy glass: a translucent, blurred control bar that reads as
     part of the page rather than a separate strip. */
  background: rgba(5, 9, 16, 0.55);
  box-shadow: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body:not(.dashboard-body):not(.tour-body) .site-navbar.scrolled {
  padding: 0;
  border-bottom-color: rgba(205, 218, 240, 0.08);
  background: rgba(5, 9, 16, 0.82);
  box-shadow: none;
}

/* The canonical bar stays dark in the light theme too, but the page behind is
   pale — a translucent dark glass would read muddy, so keep it opaque there. */
[data-theme="light"] body:not(.dashboard-body):not(.tour-body) .site-navbar,
[data-theme="light"] body:not(.dashboard-body):not(.tour-body) .site-navbar.scrolled {
  background: #060a12;
  border-bottom-color: rgba(15, 23, 42, 0.16);
}

body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-inner {
  width: 100%;
  max-width: none;
  min-height: 0;
  padding: 14px clamp(20px, 5vw, 88px);
}

/* Focused pre-login chrome (trader login, contact): the marketing links are
   removed from the DOM, so collapse the 3-track grid to logo-left / actions-right
   instead of leaving the actions stranded in the empty centre track. */
body:not(.dashboard-body):not(.tour-body) .site-navbar.nav-focused .nav-inner {
  grid-template-columns: 1fr auto;
}

body:not(.dashboard-body):not(.tour-body) .site-navbar.nav-focused .nav-logo {
  justify-self: start;
}

body:not(.dashboard-body):not(.tour-body) .site-navbar.nav-focused .nav-right {
  justify-self: end;
}

body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-logo {
  gap: 4px;
}

body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-center {
  gap: clamp(6px, 0.9vw, 13px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-right {
  gap: 10px;
}

/* Curated two-column menu (Learn / Discover), not a tall settings list. The
   panel is anchored to the trigger's right edge (see left/right below) so it
   reads as belonging to "Explore" rather than floating off to the left. */
body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-resource-menu {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  left: auto;
  right: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(146px, max-content));
  gap: 3px 16px;
  min-width: 0;
  /* A controlled, architectural surface: nearly opaque navy glass, a very thin
     low-contrast border, a slight inner highlight, a controlled shadow and a
     mild backdrop blur. Smaller radius than before so it reads crisp, not soft. */
  padding: 10px;
  border: 1px solid rgba(170, 195, 230, 0.08);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 60%),
    rgba(6, 10, 18, 0.97);
  box-shadow:
    0 22px 48px -16px rgba(0, 0, 0, 0.6),
    0 1px 3px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* Resting (pre-open) transform — right-anchored twin of the base rule. */
  transform: translate3d(0, -8px, 0) scale(0.98);
  transform-origin: top right;
}

/* Open-state transform, right-anchored (overrides the centred base rule). */
body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-resource.is-open .nav-resource-menu {
  transform: translate3d(0, 0, 0) scale(1);
}

.nav-resource-col {
  display: grid;
  gap: 2px;
  align-content: start;
}

/* Restrained uppercase column label — a quiet category marker, not a heading. */
.nav-resource-heading {
  margin: 0;
  padding: 3px 10px 5px;
  color: rgba(200, 214, 232, 0.42);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* Compact interactive rows: modest padding, a small radius, no fixed height —
   the panel is ~35% shorter than the old six-row list. */
body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-resource-item {
  position: relative;
  min-height: 0;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background-color 150ms ease, color 150ms ease;
}

/* Hover/active affordance stays flat — a faint elevated surface only, never a
   scale. The active route rests on the same tint so it reads as selected. */
body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-resource-item:hover,
body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-resource-item:focus-visible,
body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-resource-item.is-active {
  background: rgba(255, 255, 255, 0.045);
}

/* A subtle right-facing chevron that eases in only on hover/focus — masked so it
   takes the row's (brightening) text colour. No icons on the rows themselves. */
body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-resource-item::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  margin-left: auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity 150ms ease, transform 150ms ease;
}

body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-resource-item:hover::after,
body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-resource-item:focus-visible::after {
  opacity: 0.5;
  transform: translateX(0);
}

.nav-resource-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.nav-resource-title {
  color: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.15;
}

.nav-resource-description {
  color: rgba(184, 197, 192, 0.62);
  font-size: 0.69rem;
  font-weight: 500;
  line-height: 1.3;
}

/* Desktop dropdown only (scoped so the mobile drawer keeps its larger sizing):
   compact semibold titles that don't compete with page headings, and smaller,
   dimmer one-line descriptions that still hold sufficient contrast. */
.nav-resource-menu .nav-resource-title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.004em;
  line-height: 1.2;
}

.nav-resource-menu .nav-resource-description {
  color: rgba(184, 197, 192, 0.5);
  font-size: 0.655rem;
  line-height: 1.25;
  white-space: nowrap;
}

.nav-resource-item:hover .nav-resource-description,
.nav-resource-item:focus-visible .nav-resource-description,
.nav-resource-item.is-active .nav-resource-description,
.nav-drawer-resource-link:hover .nav-resource-description,
.nav-drawer-resource-link:focus-visible .nav-resource-description {
  color: rgba(238, 245, 241, 0.72);
}

.nav-drawer-resource-link.is-active .nav-resource-description {
  color: rgba(35, 209, 139, 0.68);
}

.nav-drawer-resource.is-open .nav-drawer-resource-panel {
  max-height: 280px;
}

.nav-drawer-resource-link {
  min-height: 58px;
}

body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-link {
  padding: 8px 12px;
  border-radius: 8px;
  /* Lighter, quieter links — present but never demanding, letting the logo
     and the primary CTA carry the bar. */
  color: rgba(216, 228, 242, 0.5);
  background-color: transparent;
  /* No page-level background-image underline may resurface beneath the
     component's ::after line — the two animating at once reads as flicker. */
  background-image: none;
  font-family: "Inter", "Manrope", system-ui, sans-serif;
  /* Scaled up so the links read at 14.5–15px on the laptop target instead of
     sitting tiny beside the logo, hero, and buttons. Max reached by 1440px
     per the clamp rule (coeff = max_px / 14.4). */
  font-size: clamp(0.9rem, 1.01vw, 0.96rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  text-transform: none;
  transition: color 220ms ease;
}

body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-center .nav-link {
  padding: 8px 11px;
}

/* button.nav-link's `font: inherit` (site-core) re-inherits line-height ~1.6,
   making the Resources trigger ~7px taller than its sibling links. That
   stretches .nav-center, so the active indicator (bottom: 5px of nav-center)
   sat lower than the links' own bottom-5px hover line. Pinning the trigger
   back to the links' line-height makes both 5px seats the same pixel. */
body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-resource-trigger {
  line-height: 1;
}

/* The 14px chevron would out-grow the trigger's text line and re-stretch the
   trigger past its siblings; the negative block margin keeps the svg visually
   centered while the label's line sets the height. */
body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-resource-chevron {
  margin-block: -4px;
  /* A subtle indicator, not a demanding one. */
  opacity: 0.5;
  stroke-width: 1.6;
}

body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-right .nav-link {
  padding-inline: 8px;
}

/* Forgiving hit target: the interactive area reaches ~10px above the label,
   3px beside it, and all the way down to the navbar's bottom edge (invisible,
   no layout shift, underline geometry untouched). 3px stays under half the
   smallest desktop item gap, so neighboring hit areas never overlap.
   Bottom reach: the bar is 14px block padding around a 40px button row with
   the link (1em text + 16px padding) centered in it, so the gap below the
   link is 14px + (40px - 1em - 16px) / 2 + 1px border = 27px - 0.5em. */
body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-link::before {
  content: "";
  position: absolute;
  inset: -10px -3px calc(0.5em - 27px);
}

/* Hover line is the active indicator's twin — identical gradient, glow, full
   link width, and bottom seat — grown in from the center on hover. The
   .nav-link base already carries position: relative (site-core.css). The
   resting state transitions opacity only, so leaving a link snaps its line
   away instead of shrinking back — no ghost line trailing the pointer. */
body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 6%, rgba(35, 209, 139, 0.55), transparent 94%);
  box-shadow: 0 0 4px rgba(35, 209, 139, 0.07);
  opacity: 0;
  transform: scaleX(0);
  transition: opacity 120ms ease;
  pointer-events: none;
}

/* The Explore trigger's hover line is the moving indicator's twin, so it must
   also center on the word — not the whole button, whose box runs out under the
   dropdown chevron. Pull the right edge in by the chevron (14px) + flex gap
   (5px) so the line spans the label plus its mirrored 11px lead padding: the
   same span the JS indicator computes (core.js excludes the chevron the same
   way). scaleX still grows from the now-recentred box, i.e. the word's centre. */
body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-resource-trigger::after {
  right: 19px;
}

body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-link:hover,
body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-link:focus-visible {
  color: rgba(234, 243, 250, 0.92);
  background-color: transparent;
}

body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-link:hover::after,
body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-link:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1), opacity 160ms ease;
}

body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-link.is-active {
  color: rgba(230, 240, 250, 0.82);
  background-color: transparent;
}

/* The shared moving indicator owns the active link's line. */
body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-link.is-active::after {
  opacity: 0;
  transform: scaleX(0);
}

/* The seat (bottom offset) must equal the .nav-link::after seat above — the
   trigger height normalization makes nav-center's bottom sit exactly on the
   links' bottom, so the two lines land on the same pixel. */
body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-active-indicator {
  top: auto;
  bottom: 3px;
  height: 1px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, transparent 6%, rgba(35, 209, 139, 0.55), transparent 94%);
  box-shadow: 0 0 4px rgba(35, 209, 139, 0.07);
}

body:not(.dashboard-body):not(.tour-body) .site-navbar .btn-nav {
  /* Taller control so the label sits optically centered with breathing room
     above and below, never cramped against the button edges. */
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 10px;
  /* Less boxy: a hairline over glass rather than a solid filled rectangle,
     so the quieter secondary CTA (Trader Login) doesn't read as a chip. */
  border-color: rgba(210, 226, 235, 0.13);
  background: rgba(255, 255, 255, 0.022);
  color: rgba(230, 240, 248, 0.8);
  font-family: "Inter", "Manrope", system-ui, sans-serif;
  font-size: clamp(0.84rem, 0.95vw, 0.9rem);
  font-weight: 650;
  letter-spacing: -0.012em;
  text-transform: none;
  box-shadow: none;
}

body:not(.dashboard-body):not(.tour-body) .site-navbar .btn-nav:hover {
  border-color: rgba(210, 226, 235, 0.24);
  background: rgba(255, 255, 255, 0.045);
  color: #ffffff;
}

body:not(.dashboard-body):not(.tour-body) .site-navbar .btn-nav-primary {
  /* One restrained green-button language across the landing: a translucent
     brand fill (same rgba(35,209,139) hue as the in-page primaries) over a
     black seat — no green halo. Matches landing.css .depth-btn-primary and
     pricing .plan-cta-primary so every primary reads as one system. */
  border-color: rgba(35, 209, 139, 0.5);
  background: rgba(35, 209, 139, 0.86);
  color: #05110c;
  /* Tight, grounded seat — no downward bloom, so the filled primary reads at
     the exact same height as the outlined Trader Login beside it. */
  box-shadow: 0 2px 6px -4px rgba(0, 0, 0, 0.3);
}

body:not(.dashboard-body):not(.tour-body) .site-navbar .btn-nav-primary:hover {
  /* Hover deepens the seat, never brighter than the brand accent. */
  border-color: rgba(35, 209, 139, 0.6);
  background: rgba(35, 209, 139, 0.95);
  color: #05110c;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.46), 0 2px 6px rgba(0, 0, 0, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-link::after {
    transition-duration: 0.001ms;
  }
}

@media (min-width: 901px) {
  body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(18px, 2.4vw, 36px);
    padding-inline: clamp(24px, 4vw, 72px);
  }

  body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-logo {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-items: flex-start;
  }

  body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-center {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    justify-self: center;
    gap: clamp(2px, 0.5vw, 8px);
  }

  body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-right {
    display: flex;
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-end;
    justify-self: end;
    gap: 8px;
  }

  body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-right .btn-nav {
    /* Slightly shorter, tighter control so Trader Login / Request Access sit
       trimmer in the bar; width (padding-inline) is left unchanged. */
    min-height: 37px;
    padding-block: 7px;
    padding-inline: clamp(14px, 1.2vw, 18px);
    border-radius: 6px;
    font-family: "Inter", "Manrope", system-ui, sans-serif;
    font-size: clamp(0.79rem, 0.89vw, 0.84rem);
    font-weight: 700;
    letter-spacing: -0.012em;
    text-transform: none;
    box-shadow: none;
  }

  body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-right .btn-nav-secondary {
    /* A quiet hairline over glass, not a filled teal chip. */
    color: rgba(230, 240, 248, 0.82);
    border-color: rgba(207, 220, 245, 0.14);
    background: rgba(255, 255, 255, 0.025);
  }

  body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-right .btn-nav-secondary:hover {
    color: rgba(238, 245, 250, 0.92);
    border-color: rgba(207, 220, 245, 0.26);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: none;
  }

  body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-right .btn-nav-primary {
    /* Desktop (>=901px) winning rule — kept in lockstep with the base
       .btn-nav-primary above: translucent brand fill, black seat, no halo. */
    color: #05110c;
    border-color: rgba(35, 209, 139, 0.5);
    background: rgba(35, 209, 139, 0.9);
    /* Tight, grounded seat with no downward bloom so the primary matches the
       Trader Login button's height exactly and doesn't compete with the
       hero's primary. */
    box-shadow: 0 2px 6px -4px rgba(0, 0, 0, 0.3);
  }

  body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-right .btn-nav-primary:hover {
    color: #05110c;
    border-color: rgba(35, 209, 139, 0.6);
    background: rgba(35, 209, 139, 0.95);
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.46), 0 2px 6px rgba(0, 0, 0, 0.22);
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-inner {
    gap: clamp(8px, 1.2vw, 14px);
    padding-inline: clamp(18px, 2.7vw, 34px);
  }

  body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-center {
    gap: 8px;
  }

  body:not(.dashboard-body):not(.tour-body) .site-navbar .btn-nav {
    padding-inline: clamp(11px, 1vw, 13px);
  }
}

@media (max-width: 860px) {
  body:not(.dashboard-body):not(.tour-body) .site-navbar,
  body:not(.dashboard-body):not(.tour-body) .site-navbar.scrolled {
    padding: 0;
    border-bottom: 1px solid rgba(205, 218, 240, 0.05);
    background: rgba(5, 9, 16, 0.9);
    box-shadow: none;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 8px 14px;
  }

  /* The focused pre-login chrome (auth pages) uses a 2-track logo-left/
     actions-right grid on desktop; on mobile the actions collapse into the
     drawer, so restore the standard 3-track grid — otherwise the desktop
     `.nav-focused .nav-inner` rule (higher specificity, unaffected by the media
     query) keeps the logo pinned to the trailing track on the right edge. */
  body:not(.dashboard-body):not(.tour-body) .site-navbar.nav-focused .nav-inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-burger {
    justify-self: start;
  }

  body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-logo {
    justify-self: center;
    align-items: center;
    min-width: 0;
  }

  body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-logo-img {
    height: 24px;
  }

  body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-center,
  body:not(.dashboard-body):not(.tour-body) .site-navbar .nav-right {
    display: none !important;
  }
}

/* Mobile phones (≤700px): drop the fixed navbar's backdrop-filter blur. A live
   backdrop blur on a position:fixed bar re-samples and repaints every frame as
   content scrolls behind it — and especially while the iOS bottom toolbar
   animates the layout viewport — which can read as a shimmer/jitter at the top
   of the page. The mobile bar is already near-opaque (0.9), so a solid background
   looks essentially identical without the per-frame blur cost. Tablet (701–860px)
   and desktop keep the glass. Kept last so it wins the cascade. */
@media (max-width: 700px) {
  body:not(.dashboard-body):not(.tour-body) .site-navbar,
  body:not(.dashboard-body):not(.tour-body) .site-navbar.scrolled {
    background: rgba(6, 10, 17, 0.97);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}