/* ════════════════════════════════════════════════════════════════
   InSifter — Site Navbar styles
   Scoped under .sn- prefix. Single source of truth.

   IMPORTANT: navbar uses an explicit font-family stack that does NOT
   depend on any Google Font import. Different pages historically
   imported different fonts (Outfit, DM Sans, Inter, etc.) which made
   the navbar render at visibly different sizes/weights from page to
   page. Hardcoding the stack here guarantees pixel-identical rendering
   regardless of what fonts the host page loads.
   ════════════════════════════════════════════════════════════════ */

#siteNav,
#siteNav *,
.sn-nav,
.sn-nav *,
.sn-mm,
.sn-mm * {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
}

#siteNav { display: block; }

.sn-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(9, 9, 11, 0.85);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sn-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 28px;
}

/* ── Brand ──────────────────────────────────────────────────── */
.sn-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #FAFAFA;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.sn-brand:hover { opacity: 0.85; }
.sn-brand .nav-logo { width: 26px; height: 26px; flex-shrink: 0; }

/* ── Links list ─────────────────────────────────────────────── */
.sn-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.sn-links .nav-li { display: flex; align-items: center; }
.sn-links .nav-spacer { flex: 1; }

/* ── Link base style ────────────────────────────────────────── */
.sn-links .nav-a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
  transition: color 0.12s, background 0.12s;
}
.sn-links .nav-a:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.04);
}
.sn-links .nav-a.is-active {
  color: #FFFFFF;
}

/* ── Caret on Tools/Learn ───────────────────────────────────── */
.sn-links .nav-caret {
  margin-left: 2px;
  opacity: 0.6;
  transition: transform 0.2s, opacity 0.12s;
}
.sn-links .nav-a:hover .nav-caret { opacity: 1; }
.sn-links .nav-has-menu.is-open .nav-caret { transform: rotate(180deg); opacity: 1; }
.sn-links .nav-has-menu.is-open .nav-a { color: #FFFFFF; background: rgba(255, 255, 255, 0.04); }

/* ── Auth area: secondary, CTA, user, logout ────────────────── */
.sn-links .nav-a-secondary {
  color: rgba(255, 255, 255, 0.7);
  padding: 8px 14px;
}
.sn-links .nav-a-cta {
  background: #06B6D4;
  color: #09090B;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
}
.sn-links .nav-a-cta:hover { background: #22D3EE; color: #09090B; }
.sn-links .nav-a-user { color: #06B6D4; font-weight: 600; }
.sn-links .nav-a-user:hover { color: #22D3EE; background: rgba(6, 182, 212, 0.08); }
.sn-links .nav-a-logout { color: rgba(255, 255, 255, 0.45); font-size: 13px; }
.sn-links .nav-a-logout:hover { color: rgba(255, 255, 255, 0.85); }

/* ── Auth-aware show/hide via html/body class ───────────────── */
.sn-links .nav-auth-logged-in,
.sn-links .nav-auth-logged-out { display: none; }
html.is-logged-in .sn-links .nav-auth-logged-in,
body.is-logged-in .sn-links .nav-auth-logged-in { display: flex; }
html.is-logged-out .sn-links .nav-auth-logged-out,
body.is-logged-out .sn-links .nav-auth-logged-out { display: flex; }

/* ── Mobile toggle ──────────────────────────────────────────── */
.sn-mobile-toggle {
  display: none;
  background: none;
  border: none;
  width: 36px; height: 36px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.sn-mobile-toggle span {
  display: block;
  width: 20px; height: 2px;
  background: rgba(255,255,255,0.85);
  border-radius: 1px;
  transition: 0.2s;
}

/* ── Mega-menu dropdown ─────────────────────────────────────── */
.sn-mm {
  position: fixed;
  top: 60px;
  left: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.sn-mm.open {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}
.sn-mm-arrow {
  position: absolute;
  top: 6px;
  width: 14px; height: 14px;
  background: #0F0F14;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateX(-50%) rotate(45deg);
  transition: left 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
  z-index: 1;
}
.sn-mm-card {
  margin-top: 12px;
  background: #0F0F14;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transition: width 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
  width: 720px;
}
.sn-mm-inner { padding: 22px 24px 0; }
.sn-mm-cols { display: grid; gap: 28px; padding-bottom: 18px; }
.sn-mm-col-title {
  font-size: 11px; font-weight: 600;
  color: #06B6D4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 0 10px;
}
.sn-mm-item {
  display: block;
  padding: 9px 10px;
  margin: 0 -2px;
  border-radius: 6px;
  text-decoration: none;
  color: #FAFAFA;
  transition: background 0.12s;
}
.sn-mm-item:hover { background: rgba(255, 255, 255, 0.04); }
.sn-mm-item-nm { font-size: 13.5px; font-weight: 500; line-height: 1.3; margin-bottom: 2px; }
.sn-mm-item-desc { font-size: 12px; color: rgba(255, 255, 255, 0.55); line-height: 1.4; }
.sn-mm-item:hover .sn-mm-item-nm { color: #06B6D4; }
.sn-mm-footer {
  display: block;
  padding: 13px 24px;
  font-size: 13px; font-weight: 500;
  color: #06B6D4;
  text-decoration: none;
  background: rgba(6, 182, 212, 0.04);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.12s;
}
.sn-mm-footer:hover { background: rgba(6, 182, 212, 0.08); }

/* ── Mobile breakpoint ──────────────────────────────────────── */
@media (max-width: 900px) {
  .sn-mobile-toggle { display: flex; margin-left: auto; }
  .sn-links {
    position: fixed; top: 60px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: #0B0B0F;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 12px 16px;
    gap: 4px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: 0.18s ease;
  }
  .sn-links.is-mobile-open {
    transform: translateY(0); opacity: 1; pointer-events: auto;
  }
  .sn-links .nav-li { width: 100%; }
  .sn-links .nav-a { width: 100%; padding: 12px 14px; font-size: 15px; }
  .sn-links .nav-spacer { display: none; }
  .sn-mm { display: none !important; }
  .sn-links .nav-caret { display: none; }
}

/* Body padding so content sits under the fixed navbar */
body { padding-top: 60px; }
body.db-page { padding-top: 60px; }