/* ============================================================
   cp-nav.css — ContextPass top navigation w/ mega-menu flyouts
   ------------------------------------------------------------
   - Sticky full-width header, content aligned to body's 1200px
     container edges via .cp-nav-shell.
   - Three hover-triggered flyout panels + one plain link.
   - Backdrop overlay dims+blurs page behind the open panel.
   - Below 1080px, collapses to a hamburger accordion.

   All class names are .cp-nav-* to avoid collisions with the
   existing .nav-links / .nav-cta marketing styles.
   ============================================================ */

:root {
  --cp-nav-ink: #1a1815;
  --cp-nav-ink-dim: rgba(26, 24, 21, 0.66);
  --cp-nav-ink-faint: rgba(26, 24, 21, 0.42);
  --cp-nav-bg: rgba(248, 243, 234, 0.92);
  --cp-nav-border: rgba(26, 24, 21, 0.10);
  /* Panel bg is SOLID. backdrop-filter on the panel was nested inside
     the header's own backdrop-filter and silently no-op'd, so page
     text bled through the panel. Solid cream + a stronger backdrop
     overlay below gives the right separation. */
  --cp-nav-panel-bg: #FBF8F2;
  --cp-nav-panel-border: rgba(26, 24, 21, 0.08);
  --cp-nav-panel-shadow: 0 24px 60px -16px rgba(26, 24, 21, 0.28),
                         0 8px 22px -10px rgba(26, 24, 21, 0.14);
  --cp-nav-lime: #C9F560;
  --cp-nav-blue: #3D45E0;
  --cp-nav-radius: 16px;
  --cp-nav-pill: 999px;
  --cp-nav-ease: cubic-bezier(0.32, 0.72, 0.32, 1);
  /* Shell width: was 1200, which on 1900+ viewports left huge empty bands
     on either side of the nav, making the brand + tabs + CTAs visually
     bunch toward the center. Bumped to 1900 to match the wallet's content
     width (the widest surface on the site) so the nav reads identically
     across every page regardless of body container width below it. */
  --cp-nav-shell-max: 1900px;
  --cp-nav-shell-pad: 32px;
  --cp-nav-shell-pad-sm: 20px;
}

/* ============================================================
   Header bar — full viewport width
   ============================================================ */
.cp-nav-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: var(--cp-nav-bg);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--cp-nav-border);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* The inner shell. Matches the body container's max-width
   and side padding so the brand + CTAs line up vertically
   with whatever the body content uses below. */
.cp-nav-shell {
  max-width: var(--cp-nav-shell-max);
  margin: 0 auto;
  padding: 0 var(--cp-nav-shell-pad);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  height: 64px;
}

/* Brand / logo (left, anchored to shell's left edge) */
.cp-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--cp-nav-ink);
  text-decoration: none;
  white-space: nowrap;
}
.cp-nav-brand:focus-visible {
  outline: 2px solid var(--cp-nav-blue);
  outline-offset: 4px;
  border-radius: 6px;
}
.cp-nav-brand-mark {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: var(--cp-nav-ink);
  transform: rotate(45deg);
  border-radius: 3px;
}

/* Center nav (between brand and CTAs) */
.cp-nav-center {
  justify-self: center;
}
.cp-nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cp-nav-item { position: relative; }

/* Trigger button (has chevron + opens panel) */
.cp-nav-trigger,
.cp-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  background: transparent;
  border: 0;
  border-radius: var(--cp-nav-pill);
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--cp-nav-ink);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s var(--cp-nav-ease),
              color 0.15s var(--cp-nav-ease);
}
.cp-nav-trigger:hover,
.cp-nav-trigger[aria-expanded="true"],
.cp-nav-link:hover {
  background: rgba(26, 24, 21, 0.06);
}
.cp-nav-trigger:focus-visible,
.cp-nav-link:focus-visible {
  outline: 2px solid var(--cp-nav-blue);
  outline-offset: 2px;
}
.cp-nav-chevron {
  width: 11px;
  height: 7px;
  flex-shrink: 0;
  transition: transform 0.2s var(--cp-nav-ease);
}
.cp-nav-trigger[aria-expanded="true"] .cp-nav-chevron {
  transform: rotate(180deg);
}

/* CTAs (right, anchored to shell's right edge) */
.cp-nav-ctas {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
}

/* Identity chip — "Signed in as you@example.com". Lives inside the
   CTAs area, before the CTA buttons, so signed-in users can verify
   their session at a glance. Small + ink-dim + monospace email so
   it sits under the visual weight of the actual CTAs. */
.cp-nav-identity {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  margin-right: 6px;
  font-size: 12.5px;
  line-height: 1;
  color: var(--cp-nav-ink-dim);
  background: rgba(26, 24, 21, 0.045);
  border: 1px solid rgba(26, 24, 21, 0.08);
  border-radius: var(--cp-nav-pill);
  max-width: 260px;
  overflow: hidden;
}
.cp-nav-identity-label {
  font-weight: 500;
  white-space: nowrap;
}
.cp-nav-identity-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--cp-nav-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
/* On narrower desktop widths hide the "Signed in as" label,
   keep just the email so the row doesn't crowd. */
@media (max-width: 1240px) {
  .cp-nav-identity { padding: 6px 8px; }
  .cp-nav-identity .cp-nav-identity-label { display: none; }
  .cp-nav-identity-value { max-width: 160px; }
}

/* Mobile identity chip lives inside the mobile drawer's CTA stack. */
.cp-nav-mobile-identity {
  padding: 10px 14px;
  margin-bottom: 6px;
  border: 1px solid rgba(26, 24, 21, 0.08);
  border-radius: 10px;
  background: rgba(26, 24, 21, 0.04);
  font-size: 13px;
  color: var(--cp-nav-ink-dim);
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.cp-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--cp-nav-pill);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s var(--cp-nav-ease),
              transform 0.18s var(--cp-nav-ease),
              box-shadow 0.18s var(--cp-nav-ease);
}
.cp-nav-cta:focus-visible {
  outline: 2px solid var(--cp-nav-blue);
  outline-offset: 2px;
}
.cp-nav-cta-primary {
  background: var(--cp-nav-lime);
  color: var(--cp-nav-ink);
  border: 1px solid var(--cp-nav-ink);
}
.cp-nav-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(26, 24, 21, 0.25);
}
.cp-nav-cta-ghost {
  background: transparent;
  color: var(--cp-nav-ink);
  border: 1px solid var(--cp-nav-border);
}
.cp-nav-cta-ghost:hover {
  background: rgba(26, 24, 21, 0.04);
}
.cp-nav-cta-text {
  background: transparent;
  color: var(--cp-nav-ink);
  border: 1px solid transparent;
  padding: 0 12px;
}
.cp-nav-cta-text:hover {
  background: rgba(26, 24, 21, 0.06);
}

/* Hamburger — hidden above the breakpoint */
.cp-nav-burger {
  display: none;
  background: transparent;
  border: 1px solid var(--cp-nav-border);
  width: 40px;
  height: 40px;
  border-radius: 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--cp-nav-ink);
}
.cp-nav-burger:focus-visible {
  outline: 2px solid var(--cp-nav-blue);
  outline-offset: 2px;
}
.cp-nav-burger-icon { width: 18px; height: 14px; }
.cp-nav-burger-icon line {
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  transition: transform 0.22s var(--cp-nav-ease),
              opacity 0.22s var(--cp-nav-ease);
  transform-origin: center;
}
.cp-nav-burger[aria-expanded="true"] .cp-nav-burger-icon line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.cp-nav-burger[aria-expanded="true"] .cp-nav-burger-icon line:nth-child(2) {
  opacity: 0;
}
.cp-nav-burger[aria-expanded="true"] .cp-nav-burger-icon line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ============================================================
   Flyout panels — anchored to top:100% of the header.
   Each panel is its own absolutely-positioned DOM node;
   only one is .is-open at a time.
   ============================================================ */
.cp-nav-flyouts {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 110;
}
.cp-nav-panel {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: max-content;
  max-width: min(880px, calc(100vw - 32px));
  background: var(--cp-nav-panel-bg);
  border: 1px solid var(--cp-nav-panel-border);
  border-radius: var(--cp-nav-radius);
  box-shadow: var(--cp-nav-panel-shadow);
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--cp-nav-ease),
              transform 180ms var(--cp-nav-ease);
}
.cp-nav-panel.is-open {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.cp-nav-panel[hidden] { display: none; }

/* Wider variants per layout */
.cp-nav-panel--wide { max-width: min(960px, calc(100vw - 32px)); }
.cp-nav-panel--narrow { max-width: min(560px, calc(100vw - 32px)); }

/* ----- Style: "grid" — 2 columns of (label > title + desc) ----- */
.cp-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 40px;
}
.cp-panel-column-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cp-nav-ink-faint);
  margin-bottom: 10px;
}
.cp-panel-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cp-panel-item {
  display: block;
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--cp-nav-ink);
  transition: background 0.12s var(--cp-nav-ease);
}
.cp-panel-item:hover {
  background: rgba(26, 24, 21, 0.04);
}
.cp-panel-item:focus-visible {
  outline: 2px solid var(--cp-nav-blue);
  outline-offset: 2px;
}
.cp-panel-item-title {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  margin-bottom: 2px;
}
.cp-panel-item-desc {
  display: block;
  font-size: 13px;
  color: var(--cp-nav-ink-dim);
  line-height: 1.45;
}
.cp-panel-divider {
  height: 1px;
  background: var(--cp-nav-border);
  margin: 20px -8px 16px;
}
.cp-panel-footer {
  display: block;
  text-decoration: none;
  color: var(--cp-nav-ink);
  padding: 12px;
  margin: 0 -12px;
  border-radius: 10px;
  transition: background 0.12s var(--cp-nav-ease);
}
.cp-panel-footer:hover { background: rgba(26, 24, 21, 0.04); }
.cp-panel-footer:focus-visible {
  outline: 2px solid var(--cp-nav-blue);
  outline-offset: 2px;
}
.cp-panel-footer-title {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  margin-bottom: 2px;
}
.cp-panel-footer-desc {
  display: block;
  font-size: 13px;
  color: var(--cp-nav-ink-dim);
}

/* ----- Style: "cards" — 2 large image-topped cards ----- */
.cp-panel-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cp-panel-card {
  display: block;
  text-decoration: none;
  color: var(--cp-nav-ink);
  border-radius: 12px;
  overflow: hidden;
  background: white;
  border: 1px solid var(--cp-nav-border);
  transition: transform 0.18s var(--cp-nav-ease),
              box-shadow 0.18s var(--cp-nav-ease);
}
.cp-panel-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(26, 24, 21, 0.18);
}
.cp-panel-card:focus-visible {
  outline: 2px solid var(--cp-nav-blue);
  outline-offset: 2px;
}
.cp-panel-card-image {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #f4f2ed 0%, #e9e6df 100%);
  background-size: cover;
  background-position: center;
}
.cp-panel-card-body { padding: 14px 16px 16px; }
.cp-panel-card-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}
.cp-panel-card-desc {
  display: block;
  font-size: 13px;
  color: var(--cp-nav-ink-dim);
  line-height: 1.45;
}

/* ----- Style: "links" — plain 2-col list of links ----- */
.cp-panel-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 32px;
}
.cp-panel-links a {
  display: block;
  padding: 8px 12px;
  margin: 0 -12px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  color: var(--cp-nav-ink);
  transition: background 0.12s var(--cp-nav-ease);
}
.cp-panel-links a:hover { background: rgba(26, 24, 21, 0.04); }
.cp-panel-links a:focus-visible {
  outline: 2px solid var(--cp-nav-blue);
  outline-offset: 2px;
}

/* ============================================================
   Backdrop — fixed full-viewport dim+blur behind panels
   ============================================================ */
.cp-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 24, 21, 0.30);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--cp-nav-ease);
  z-index: 90;
}
.cp-nav-backdrop.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   Mobile menu (below 1080px)
   ============================================================ */
.cp-nav-mobile {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  background: var(--cp-nav-bg);
  border-bottom: 1px solid var(--cp-nav-border);
  z-index: 95;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform 180ms var(--cp-nav-ease),
              opacity 180ms var(--cp-nav-ease);
}
.cp-nav-mobile.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.cp-nav-mobile[hidden] { display: none; }
.cp-nav-mobile-list {
  list-style: none;
  margin: 0;
  padding: 16px var(--cp-nav-shell-pad-sm) 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cp-nav-mobile-trigger,
.cp-nav-mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 12px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--cp-nav-ink);
  text-decoration: none;
  cursor: pointer;
}
.cp-nav-mobile-trigger:hover,
.cp-nav-mobile-link:hover { background: rgba(26, 24, 21, 0.05); }
.cp-nav-mobile-trigger .cp-nav-chevron {
  width: 13px; height: 8px;
}
.cp-nav-mobile-trigger[aria-expanded="true"] .cp-nav-chevron {
  transform: rotate(180deg);
}
.cp-nav-mobile-submenu {
  display: none;
  padding: 4px 12px 12px 24px;
  flex-direction: column;
  gap: 2px;
}
.cp-nav-mobile-submenu.is-open { display: flex; }
.cp-nav-mobile-submenu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--cp-nav-ink);
  font-size: 14.5px;
}
.cp-nav-mobile-submenu a:hover { background: rgba(26, 24, 21, 0.05); }
.cp-nav-mobile-subdesc {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--cp-nav-ink-dim);
  margin-top: 2px;
}
.cp-nav-mobile-ctas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px var(--cp-nav-shell-pad-sm) 24px;
  border-top: 1px solid var(--cp-nav-border);
}
.cp-nav-mobile-ctas .cp-nav-cta { height: 44px; font-size: 15px; }

/* ============================================================
   Breakpoint: collapse to mobile under 1080px
   ------------------------------------------------------------
   The center nav (mega-menu triggers) and most CTAs collapse
   into the hamburger drawer. BUT the primary CTA (My wallet
   when signed in, Sign up free when signed out) stays visible
   in the top bar at all viewports — it's the one action people
   tap the most and burying it behind the hamburger turned a
   one-tap path into three.
   ============================================================ */
@media (max-width: 1079px) {
  .cp-nav-center { display: none; }
  .cp-nav-burger { display: inline-flex; }
  .cp-nav-flyouts { display: none; }
  .cp-nav-shell {
    padding: 0 var(--cp-nav-shell-pad-sm);
    grid-template-columns: auto 1fr auto;
    gap: 0;
  }
  /* Keep the CTA row visible but hide the non-primary chips so
     the bar doesn't crowd on a phone. The primary CTA + the
     burger sit on the right; everything else (ghost, text,
     identity chip) goes into the drawer. */
  .cp-nav-ctas {
    display: inline-flex;
    gap: 8px;
    margin-right: 8px;
  }
  .cp-nav-ctas .cp-nav-cta-ghost,
  .cp-nav-ctas .cp-nav-cta-text,
  .cp-nav-ctas .cp-nav-identity { display: none; }
  .cp-nav-ctas .cp-nav-cta-primary {
    height: 34px;
    padding: 0 14px;
    font-size: 13.5px;
  }
}
@media (min-width: 1080px) {
  .cp-nav-mobile,
  .cp-nav-burger { display: none !important; }
}

/* Small safety gutter on huge screens so backdrop blur on
   the panels doesn't fight the screen edge. */
@media (min-width: 1440px) {
  .cp-nav-shell { padding-left: 40px; padding-right: 40px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cp-nav-panel,
  .cp-nav-backdrop,
  .cp-nav-mobile,
  .cp-nav-cta,
  .cp-nav-chevron {
    transition: none !important;
  }
}