/* ==================================================================
   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;
}

/* ---- 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: centred 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: center;
  }

  .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;
  }
}