/* ══════════════════════════════════════════════════════════════════════════
   TFL GLOBAL NAV & FOOTER  —  redesign-faithful, theme-aware, self-contained
   ──────────────────────────────────────────────────────────────────────────
   Ported from the Final Leap redesign design system (DM Sans / Fraunces / DM
   Mono · single electric-blue accent · frosted glass). This file is GLOBAL:
   it is injected into every page via nav.js into #site-header / #site-footer.

   THEME: the redesign's native token mechanism. We define a private --nav-*
   token set with LIGHT defaults, then flip those tokens under
   html[data-theme="dark"]. Every nav/footer rule reads the tokens, so dark
   pages (Echo, Nucleus — which set <html data-theme="dark">) recolor from one
   token flip instead of the old per-element patch. Tokens are --nav-* prefixed
   and scoped to the nav/footer, so this file neither depends on nor clobbers
   each page's own design tokens.
   ══════════════════════════════════════════════════════════════════════════ */

/* Fonts — so the wordmark + labels render correctly even on legacy pages that
   don't already load them. font-display:swap, scoped via --nav-font-* tokens. */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600&family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&display=swap');

/* ── TOKENS · LIGHT (default) ───────────────────────────────────────────── */
#tfl-nav,
#tfl-mobile-menu,
#tfl-footer {
  --nav-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --nav-font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --nav-font-mono:    'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --nav-text-strong:   #0a0a0a;
  --nav-text-body:     #3a3a3a;
  --nav-text-muted:    #6a6a6a;
  --nav-text-faint:    #8a8a8a;
  --nav-text-disabled: #c4c4c4;
  --nav-accent:        var(--accent);

  --nav-glass-surface: rgba(255, 255, 255, 0.56);
  --nav-glass-strong:  rgba(255, 255, 255, 0.74);
  --nav-glass-border:  rgba(255, 255, 255, 0.70);
  --nav-hairline:      rgba(10, 10, 10, 0.08);
  --nav-bg-page:       #fdfcfa;

  --nav-cta-bg:        #0a0a0a;
  --nav-cta-fg:        #ffffff;
  --nav-signout:       #cc2200;

  --nav-blur:          blur(12px);
  --nav-ease:          cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── TOKENS · DARK (opt-in via <html data-theme="dark">) ────────────────── */
html[data-theme="dark"] #tfl-nav,
html[data-theme="dark"] #tfl-mobile-menu,
html[data-theme="dark"] #tfl-footer {
  --nav-text-strong:   rgba(255, 255, 255, 0.94);
  --nav-text-body:     rgba(255, 255, 255, 0.70);
  --nav-text-muted:    rgba(255, 255, 255, 0.55);
  --nav-text-faint:    rgba(255, 255, 255, 0.45);
  --nav-text-disabled: rgba(255, 255, 255, 0.34);

  --nav-glass-surface: rgba(46, 44, 41, 0.55);
  --nav-glass-strong:  rgba(46, 44, 41, 0.74);
  --nav-glass-border:  rgba(255, 255, 255, 0.14);
  --nav-hairline:      rgba(255, 255, 255, 0.10);
  --nav-bg-page:       #161514;

  /* invert the solid CTA so it stays high-contrast on dark surfaces */
  --nav-cta-bg:        #ffffff;
  --nav-cta-fg:        #0a0a0a;
  --nav-signout:       #ff6b5e;
}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════════════════ */
#tfl-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 64px;
  background: var(--nav-glass-surface);
  backdrop-filter: var(--nav-blur);
  -webkit-backdrop-filter: var(--nav-blur);
  border-bottom: 1px solid transparent;
  transition: border-color var(--nav-ease) 0.4s, background var(--nav-ease) 0.4s;
}

#tfl-nav.scrolled {
  background: var(--nav-glass-strong);
  border-bottom-color: var(--nav-hairline);
}

/* ── LOGO ── */
#tfl-nav .nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--nav-text-strong);
}

#tfl-nav .logo-svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

/* strokes use currentColor → follow the theme automatically; the dot stays blue */
#tfl-nav .logo-svg path { stroke: currentColor; }

#tfl-nav .nav-name {
  font-family: var(--nav-font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--nav-text-strong);
}

/* ── NAV LINKS ── */
#tfl-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#tfl-nav .nav-links a {
  font-family: var(--nav-font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--nav-text-muted);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color var(--nav-ease) 0.2s;
}

#tfl-nav .nav-links a:hover {
  color: var(--nav-text-strong);
}

/* ── THEME TOGGLE (bare icon button) ── */
#tfl-nav .nav-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--nav-text-muted);
  cursor: pointer;
  transition: color var(--nav-ease) 0.2s, background var(--nav-ease) 0.2s;
}
#tfl-nav .nav-theme-toggle:hover {
  color: var(--nav-text-strong);
  background: var(--nav-hairline);
}
#tfl-nav .nav-theme-toggle svg { display: block; }

#tfl-mobile-menu .mobile-theme-toggle {
  margin-top: 6px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--nav-font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--nav-text-body);
  padding: 14px 0;
  border-bottom: 1px solid var(--nav-hairline);
  transition: color var(--nav-ease) 0.2s;
}
#tfl-mobile-menu .mobile-theme-toggle:hover { color: var(--nav-text-strong); }

/* ── SIGN IN LINK ── */
#tfl-nav .nav-signin {
  font-family: var(--nav-font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--nav-text-muted);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color var(--nav-ease) 0.2s;
  margin-right: 14px;
}

#tfl-nav .nav-signin:hover {
  color: var(--nav-text-strong);
}

/* ── CTA (Join us) — primary pill, redesign Button variant=primary size=sm ── */
#tfl-nav .nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--nav-font-body) !important;
  background: var(--nav-cta-bg);
  color: var(--nav-cta-fg) !important;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1;
  text-decoration: none;
  transition: opacity var(--nav-ease) 0.2s, transform var(--nav-ease) 0.15s, box-shadow var(--nav-ease) 0.2s;
}

#tfl-nav .nav-cta:hover {
  opacity: 0.85;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(10, 10, 10, 0.10);
}

#tfl-nav .nav-cta .cta-arrow {
  transition: transform var(--nav-ease) 0.2s;
}
#tfl-nav .nav-cta:hover .cta-arrow {
  transform: translateX(2px);
}

/* ── AVATAR (signed-in) ── */
#tfl-nav .nav-avatar-wrap { position: relative; }

#tfl-nav .nav-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--nav-hairline);
  cursor: pointer;
  display: block;
}

#tfl-nav .avatar-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  background: var(--nav-glass-strong);
  backdrop-filter: var(--nav-blur);
  -webkit-backdrop-filter: var(--nav-blur);
  border: 1px solid var(--nav-glass-border);
  border-radius: 14px;
  padding: 6px;
  min-width: 240px;
  box-shadow: 0 12px 40px rgba(10, 10, 10, 0.28);
  display: none;
}

#tfl-nav .avatar-dropdown.open { display: block; }

/* identity header — name on top, email small underneath */
#tfl-nav .dropdown-id {
  padding: 12px 14px 13px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--nav-hairline);
}

#tfl-nav .dropdown-name {
  font-family: var(--nav-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--nav-text-strong);
  word-break: break-word;
}

#tfl-nav .dropdown-email {
  margin-top: 3px;
  font-family: var(--nav-font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--nav-text-faint);
  word-break: break-all;
}

#tfl-nav .dropdown-link {
  display: block;
  padding: 10px 14px;
  font-family: var(--nav-font-body);
  font-size: 13px;
  color: var(--nav-text-strong);
  text-decoration: none;
  border-radius: 8px;
  transition: background var(--nav-ease) 0.2s;
}

#tfl-nav .dropdown-link:hover { background: var(--nav-hairline); }
#tfl-nav .dropdown-signout { color: var(--nav-signout); }

/* ── HAMBURGER ── */
#tfl-nav .hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

#tfl-nav .hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--nav-text-strong);
  transition: all 0.25s var(--nav-ease);
  transform-origin: center;
}

#tfl-nav .hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#tfl-nav .hamburger.open span:nth-child(2) { opacity: 0; }
#tfl-nav .hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── FOCUS RINGS ──
   Kill the browser-default (blue) focus ring on pointer/click, and give keyboard
   users an accent ring instead. Covers every interactive nav control. */
#tfl-nav .nav-theme-toggle:focus,
#tfl-nav .nav-signin:focus,
#tfl-nav .nav-cta:focus,
#tfl-nav .hamburger:focus,
#tfl-nav .nav-avatar:focus,
#tfl-mobile-menu .mobile-theme-toggle:focus { outline: none; }

#tfl-nav .nav-theme-toggle:focus-visible,
#tfl-nav .nav-signin:focus-visible,
#tfl-nav .nav-cta:focus-visible,
#tfl-nav .hamburger:focus-visible,
#tfl-nav .nav-avatar:focus-visible,
#tfl-mobile-menu .mobile-theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE MENU
   ══════════════════════════════════════════════════════════════════════════ */
#tfl-mobile-menu {
  display: none;
  position: fixed;
  top: 64px; left: 0; right: 0;
  background: var(--nav-glass-strong);
  backdrop-filter: var(--nav-blur);
  -webkit-backdrop-filter: var(--nav-blur);
  border-bottom: 1px solid var(--nav-hairline);
  z-index: 99;
  padding: 16px 24px 24px;
  flex-direction: column;
  gap: 0;
}

#tfl-mobile-menu.open { display: flex; }

#tfl-mobile-menu a {
  font-family: var(--nav-font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--nav-text-body);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--nav-hairline);
  transition: color var(--nav-ease) 0.2s;
}

#tfl-mobile-menu a:last-child { border-bottom: none; }
#tfl-mobile-menu a:hover { color: var(--nav-text-strong); }

#tfl-mobile-menu .mobile-cta {
  margin-top: 10px;
  color: var(--nav-accent);
  font-weight: 500;
  border-bottom: none;
}

#tfl-mobile-menu .mobile-signout { color: var(--nav-signout); }

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER  —  global, multi-column: wordmark + Products / Company / Legal + © line
   ══════════════════════════════════════════════════════════════════════════ */
#tfl-footer {
  display: block;
  padding: 64px 10% 40px;
  border-top: 1px solid var(--nav-hairline);
  background: var(--nav-bg-page);
}

#tfl-footer .footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto 48px;
}

#tfl-footer .footer-left {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#tfl-footer .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--nav-text-strong);
  text-decoration: none;
}

#tfl-footer .footer-social {
  display: flex;
  align-items: center;
  gap: 16px;
}

#tfl-footer .footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nav-text-muted);
  transition: color var(--nav-ease) 0.2s;
}

#tfl-footer .footer-social a:hover { color: var(--nav-text-strong); }

#tfl-footer .footer-brand .logo-svg { width: 24px; height: 24px; flex-shrink: 0; }
#tfl-footer .footer-brand .logo-svg path { stroke: currentColor; }

#tfl-footer .footer-brand .nav-name {
  font-family: var(--nav-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--nav-text-strong);
}

#tfl-footer .footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, auto));
  gap: 40px 64px;
}

#tfl-footer .footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#tfl-footer .footer-col h4 {
  margin: 0 0 4px;
  font-family: var(--nav-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nav-text-faint);
}

#tfl-footer .footer-col a {
  font-family: var(--nav-font-body);
  font-size: 14px;
  color: var(--nav-text-muted);
  text-decoration: none;
  transition: color var(--nav-ease) 0.2s;
}

#tfl-footer .footer-col a:hover { color: var(--nav-text-strong); }

#tfl-footer .footer-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid var(--nav-hairline);
  font-family: var(--nav-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--nav-text-faint);
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE BREAKPOINT
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  #tfl-nav { padding: 0 24px; }
  #tfl-nav .nav-links { display: none; }
  #tfl-nav .hamburger { display: flex; }

  #tfl-footer { padding: 48px 24px 32px; }
  #tfl-footer .footer-top { gap: 32px; margin-bottom: 36px; }
  #tfl-footer .footer-cols { grid-template-columns: 1fr 1fr; gap: 28px 32px; }
}

@media (max-width: 520px) {
  #tfl-footer .footer-cols { grid-template-columns: 1fr 1fr; }
}