/* ==================================================================
   Shared Site Chrome — styling (single source of truth)
   ------------------------------------------------------------------
   The header/nav markup is rendered by /site-chrome.js into the
   [data-site-nav] placeholder on every page. This stylesheet is the
   matching single source of truth for how that nav LOOKS, so the
   structure, spacing, and responsive behaviour are IDENTICAL on the
   marketing pages and inside the /app shell. This is the home-page nav
   design, promoted to the global default. No page should re-declare
   these rules in its own stylesheet.

   Colours are theme-agnostic: each page's own stylesheet maps a small
   set of --chrome-* variables onto its design system (see the :root
   blocks in site.css and app/app.css). This file never hard-codes
   a colour, so it inherits whichever theme is active.
   ================================================================== */

/* The page provides the outer wrapper; [data-site-nav] becomes .site-nav. */
.navbar { width: 100%; }
.navbar-inner { width: 100%; }

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 80px;
  position: relative;
}

/* ---- Brand ---- */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  cursor: pointer;
}

.nav-brand img {
  height: 32px;
  border-radius: 4px;
  display: block;
}

.nav-brand-name {
  font-family: var(--chrome-font);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--chrome-text);
}

/* ---- Links ---- */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--chrome-muted);
}

.nav-link {
  color: var(--chrome-muted);
  transition: var(--chrome-transition);
}

.nav-link:hover { color: var(--chrome-text); }

.nav-menu .nav-link.is-active { color: var(--chrome-text); }

/* Logout renders as a <button> but must read as a plain nav link. */
button.nav-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.nav-sep {
  color: var(--chrome-border);
  margin: 0 4px;
}

/* ---- Credits pill — always-visible available-balance indicator (auth only).
   Sits in the nav bar (outside the collapsible menu) so it stays visible on
   mobile too. Colours come from the theme-agnostic --chrome-* vars. ---- */
.nav-credits {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto; /* desktop: push the pill + menu into the right cluster */
  padding: 6px 12px;
  border: 1px solid var(--chrome-border);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1;
  color: var(--chrome-text);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--chrome-transition);
}

.nav-credits:hover {
  border-color: var(--chrome-accent);
  color: var(--chrome-accent);
}

.nav-credits-icon {
  width: 15px;
  height: 15px;
  color: var(--chrome-accent);
  flex-shrink: 0;
}

.nav-credits-value { font-variant-numeric: tabular-nums; }

/* Until the first balance arrives, dim the placeholder so it reads as loading. */
.nav-credits.is-loading .nav-credits-value { opacity: 0.45; }

/* ---- Hamburger — hidden on desktop, shown on mobile ---- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 12px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--chrome-text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-toggle.open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobile: left-aligned brand with the hamburger pinned right and
   vertically centred against the brand row; the menu drops full-width
   beneath. The brand row is exactly --nav-row-h tall so the hamburger
   can be centred against it with a single, exact offset (no guesswork —
   this is what keeps the logo and hamburger perfectly aligned). ---- */
@media (max-width: 768px) {
  .site-nav {
    --nav-row-h: 64px;
    flex-wrap: wrap;
    min-height: var(--nav-row-h);
    justify-content: flex-start;
  }

  .nav-brand {
    order: 1;
    height: var(--nav-row-h); /* brand occupies the full row, centred vertically */
  }

  .nav-toggle {
    display: flex;
    order: 2;
    position: absolute;
    right: 0;
    top: 0;
    height: var(--nav-row-h); /* same height as the brand row → bars share its centre line */
  }

  .nav-menu {
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease;
  }

  .nav-menu.open {
    max-height: 520px;
    opacity: 1;
    margin-top: 10px;
    padding-top: 6px;
  }

  .nav-menu .nav-sep { display: none; }

  .nav-menu .nav-link {
    display: block;
    padding: 12px 8px;
    text-align: center;
    margin-left: 0;
    border-radius: 10px;
  }

  /* Keep the credits pill on the top row, right-aligned but clear of the
     absolute hamburger (44px wide) so it's always visible and never overlaps. */
  .nav-credits {
    order: 1;
    margin-left: auto;
    margin-right: 52px;
    padding: 5px 10px;
    font-size: 0.8rem;
  }
}