/* FastCrest shared nav — canonical styles.
   Loaded by every landing page and by the dashboard.
   Does NOT redefine brand vars (--fg, --fg-bright, --accent, etc.)
   — those are owned by the host page's :root and inherited here.
   Uses system fonts only so it looks consistent across landing (system)
   and dashboard (Geist body) contexts. */

#nav-mount {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 -28px 60px;
  padding: 14px 28px;
  background: var(--header-bg, rgba(11, 13, 16, 0.85));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border, #232a33);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  min-height: 62px;
  box-sizing: border-box;
}

#nav-mount .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  border: none;
}
#nav-mount .brand img {
  width: 32px;
  height: 32px;
  display: block;
  filter: invert(0);
  transition: filter .2s ease;
}
#nav-mount .brand .wordmark {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--fg-bright, #ffffff);
}
:root[data-theme='light'] #nav-mount .brand img { filter: invert(1); }

#nav-mount .nav {
  display: flex;
  align-items: center;
  gap: 18px;
}
#nav-mount .nav a {
  color: var(--fg-dim, #8e9099);
  font-size: 0.93rem;
  transition: color .15s ease;
  text-decoration: none;
  border: none;
}
#nav-mount .nav a:hover { color: var(--fg-bright, #ffffff); }
#nav-mount .nav a.active {
  color: var(--fg-bright, #ffffff);
  font-weight: 600;
  border-bottom: 1.5px solid var(--accent, #5af0c4);
  padding-bottom: 3px;
  margin-bottom: -4.5px;
}
#nav-mount .nav a.gh-stars {
  color: var(--fg, #f0f1f4);
  border: 1px solid var(--border-bright, #3a4252);
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.85rem;
}
#nav-mount .nav a.gh-stars:hover { border-color: var(--fg, #f0f1f4); }

#nav-mount .theme-toggle {
  background: none;
  border: none;
  color: var(--fg-dim, #8e9099);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  font: inherit;
}
#nav-mount .theme-toggle:hover { color: var(--fg-bright, #ffffff); }
#nav-mount .theme-toggle svg { width: 18px; height: 18px; }
#nav-mount .theme-toggle .icon-light { display: none; }
:root[data-theme='light'] #nav-mount .theme-toggle .icon-dark { display: none; }
:root[data-theme='light'] #nav-mount .theme-toggle .icon-light { display: inline; }

#nav-mount .nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-bright, #3a4252);
  border-radius: 6px;
  padding: 7px 8px;
  cursor: pointer;
  color: var(--fg, #f0f1f4);
}
#nav-mount .nav-toggle:hover { border-color: var(--fg, #f0f1f4); }
#nav-mount .nav-toggle svg { width: 18px; height: 18px; display: block; }

@media (max-width: 900px) {
  #nav-mount .nav { display: none; }
  #nav-mount .nav-toggle { display: inline-flex; }
  body.nav-open #nav-mount .nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(280px, 80vw);
    background: var(--bg-elev, #15191f);
    border-left: 1px solid var(--border, #232a33);
    padding: 70px 20px 24px;
    z-index: 200;
    overflow-y: auto;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.5);
  }
  body.nav-open #nav-mount .nav a {
    padding: 12px 4px;
    border-bottom: 1px solid var(--border, #232a33);
    font-size: 1rem;
    margin-bottom: 0;
  }
  body.nav-open #nav-mount .nav a:last-of-type { border-bottom: none; }
  body.nav-open #nav-mount .nav a.active {
    border-bottom-color: var(--accent, #5af0c4);
    padding-bottom: 12px;
  }
  body.nav-open #nav-mount .nav .theme-toggle {
    margin-top: 12px;
    align-self: flex-start;
  }
  body.nav-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 150;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  body.nav-open { overflow: hidden; }
}

/* Once nav is wired and visible, remove the placeholder aria-hidden
   so screen readers see the links. bootstrap.js sets data-nav-ready. */
#nav-mount[data-nav-ready] { aria-hidden: false; }