/* ── Root ──────────────────────────────────────────────────────────────── */
/* Match live site typography (Satoshi). Inherited into all nav text.        */
.nav-root {
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Logo pinned to the live-site rendered width (120px), height auto.          */
.nav-logo svg {
  width: 120px;
  height: auto;
  display: block;
}

/* Smaller logo below the nav breakpoint (≤767px) — applies to both the closed
   bar and the open mobile drawer header (both use .nav-logo, and the drawer only
   ever appears on mobile). Matches the hamburger range. Adjust the 96px to taste. */
@media (max-width: 767px) {
  .nav-logo svg {
    width: 96px;
  }
}

/* ── Nav bar ───────────────────────────────────────────────────────────── */
/* Explicit stacking context so the absolutely-positioned dropdown panel     */
/* always sits above sibling page content (e.g. collection-search cards     */
/* whose images/transforms create their own stacking contexts).              */
.nav-bar {
  position: relative;
  z-index: 10;
}

/* Bar layout + reserved height (kills layout shift — CODE-REVIEW §1.2).      */
/* min-height keeps the 64px bar stable across the two-stage paint            */
/* (navItems renders [] first, then fills in), so the bar never grows/shrinks */
/* once the component mounts. Height lives here in plain CSS (not the Tailwind */
/* `h-16` utility) because it is layout-critical and Tailwind utilities lose  */
/* cascade priority in the shadow DOM — see the @layer note below.            */
/* NOTE (pre-hydration CLS): with ssr:false nothing exists until hydration,   */
/* so the content *below* the nav can still jump as the component mounts. To  */
/* fully reserve space before hydration, wrap the component slot in a native  */
/* Webflow element with min-height:64px. This rule only stabilises the bar    */
/* itself once mounted; the wrapper handles the page-level reservation.       */
.nav-bar-inner {
  display: flex;
  align-items: center;
  /* No horizontal padding: the component is placed inside Webflow's page
     container, which already supplies the 64px side gutter the live site uses
     (the .nav-bar outer edges sit at the same 64 / viewport-64 as prod). Adding
     padding here double-insets the content and pushes the logo/triggers ~24px
     inward of the live header. Keep this gutterless so it aligns. */
  min-height: 4rem;
}

/* ── Shared nav-bar link text (navy primary token in one place) ──────────── */
/* Logo, Borrow/Invest, and every trigger label share this navy + 24px/500.   */
/* Previously the token was inlined at ~6 sites (CODE-REVIEW §2b).             */
.nav-link-text {
  color: var(--colour-primary-400, #002a61);
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 500;
}

.nav-logo-link {
  color: var(--colour-primary-400, #002a61);
  line-height: 0;
}

/* ── Panel ─────────────────────────────────────────────────────────────── */
.nav-panel {
  background-color: var(--colour-primary-400, #002a61);
  color: #fff;
  border-radius: 0.75rem;
  box-shadow: -20px 20px 40px -4px rgba(0,0,0,.18), 0 0 2px 0 rgba(0,0,0,.12);
  width: 17.5rem;
  overflow: hidden;
  animation: nav-panel-in 0.15s ease-out both;
}

@keyframes nav-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Icon tile ─────────────────────────────────────────────────────────── */
.nav-icon-tile {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  background-color: #fff;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── Panel item ────────────────────────────────────────────────────────── */
.nav-panel-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  min-height: 4.75rem;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.1s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.nav-panel-item:hover {
  background-color: rgba(255,255,255,.07);
}

/* ── Panel loading skeleton ────────────────────────────────────────────── */
/* Shown in place of a trigger's panel content when its button (menuLabel/  */
/* loginLabel) is already visible but the matching CMS data hasn't parsed  */
/* from the slot yet.                                                       */
.nav-panel-skeleton {
  padding: 0.5rem 0;
}
.nav-panel-skeleton-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  min-height: 4.75rem;
}
.nav-panel-skeleton-icon,
.nav-panel-skeleton-text {
  background-color: rgba(255,255,255,.15);
  border-radius: 0.5rem;
  animation: nav-skeleton-pulse 1.2s ease-in-out infinite;
}
.nav-panel-skeleton-icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
}
.nav-panel-skeleton-text {
  flex: 1;
  height: 1rem;
  border-radius: 0.25rem;
}
@keyframes nav-skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

/* ── Trigger wrapper ───────────────────────────────────────────────────── */
/* Anchors each trigger's dropdown panel to that trigger's own right edge   */
/* (not a fixed offset from the nav bar), so Log in and Menu open in        */
/* different positions matching the button that was clicked.                */
.nav-trigger-wrap {
  position: relative;
}

/* ── Trigger button ────────────────────────────────────────────────────── */
.nav-trigger-btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: none;
  padding: 0.25rem 0 0.375rem;
  cursor: pointer;
  text-decoration: none;
}

.nav-trigger-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #c40000;
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.15s ease;
}
.nav-trigger-btn:hover .nav-trigger-indicator,
.nav-trigger-btn[data-open="true"] .nav-trigger-indicator {
  transform: scaleX(1);
}

/* ── Drill back button ─────────────────────────────────────────────────── */
.nav-back-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.55);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.1s ease;
}
.nav-back-btn:hover {
  color: rgba(255,255,255,.9);
}

/* Mobile back button needs a larger tap target (item 4: mobile touch polish). */
.nav-back-btn--mobile {
  min-height: 44px;
}

/* ── Drill slider (item 2: slide animation) ────────────────────────────── */
/* Both panes are rendered side-by-side inside a clipped row.               */
/* translateX on both panes simultaneously slides the visible one.          */
.nav-drill-slider {
  display: flex;
  /* Clip the second (off-screen) pane without adding a scrollbar.          */
  overflow: hidden;
}

.nav-drill-pane {
  flex: 0 0 100%;
  transition: transform 0.22s ease;
  /* Off-screen pane must not receive pointer events (it's still in DOM).   */
  pointer-events: none;
}

/* Re-enable pointer events on the active (visible) pane only.              */
.nav-drill-slider[data-view="categories"] .nav-drill-pane:first-child,
.nav-drill-slider[data-view="leaves"] .nav-drill-pane:last-child {
  pointer-events: auto;
}

/* When "leaves" view is active, shift both panes left by 100%.             */
.nav-drill-slider[data-view="leaves"] .nav-drill-pane {
  transform: translateX(-100%);
}

/* ── Scroll container ──────────────────────────────────────────────────── */
.nav-scroll-container {
  overflow-y: auto;
  max-height: 30rem;
  overscroll-behavior: contain;
  scrollbar-width: none;
  /* iOS momentum scrolling (item 4: mobile touch polish) */
  -webkit-overflow-scrolling: touch;
}
.nav-scroll-container::-webkit-scrollbar {
  display: none;
}

/* ── Scroll shadow ─────────────────────────────────────────────────────── */
.nav-scroll-shadow-wrap {
  position: relative;
}
.nav-scroll-shadow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.5rem;
  background: linear-gradient(to bottom, transparent, var(--colour-primary-400, #002a61));
  pointer-events: none;
  border-radius: 0 0 0.75rem 0.75rem;
}

/* ── Responsive nav bar elements ──────────────────────────────────────── */
/* Use explicit CSS (not Tailwind responsive utilities) so that the rules  */
/* copy correctly into shadow DOM without @layer precedence issues.        */
.nav-desktop-links   { display: none; }
.nav-desktop-triggers { display: none; }
/* Hamburger toggle: navy + button reset live here alongside its visibility   */
/* so all of the element's styling is in one place (CODE-REVIEW §2a/§2b).      */
.nav-mobile-toggle {
  display: flex;
  color: var(--colour-primary-400, #002a61);
  padding: 0.25rem;
  background: transparent;
  border: none;
  cursor: pointer;
}

@media (min-width: 768px) {
  .nav-desktop-links    { display: flex; }
  .nav-desktop-triggers { display: flex; }
  .nav-mobile-toggle    { display: none; }
}

/* ── Mobile drawer ─────────────────────────────────────────────────────── */
/* Flex column: header is a fixed-height non-scrolling row; nav-mobile-body  */
/* fills the rest and owns all scrolling. This keeps the header + close      */
/* button pinned even through iOS overscroll bounce, unlike position:sticky  */
/* which lives inside the scroll container and can be pulled away.           */
.nav-mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: var(--colour-primary-400, #002a61);
  color: #fff;
  display: flex;
  flex-direction: column;
  /* Slide-up + fade-in animation on open */
  animation: nav-drawer-in 0.22s ease-out both;
}

@keyframes nav-drawer-in {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-mobile-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

/* Scrollable region below the header */
.nav-mobile-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.nav-mobile-body::-webkit-scrollbar {
  display: none;
}

/* ScrollContainer inside the body must not re-impose its own scroll */
.nav-mobile-body .nav-scroll-container {
  max-height: none;
  overflow-y: visible;
}

/* Heading above a flattened root's items (e.g. "Menu") — not shown for a */
/* collapsed root, which renders as its own single row instead.            */
.nav-mobile-section-label {
  padding: 0.625rem 1rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}