/* ==========================================================================
   Workflow Studio — showreel
   nav.css
   The navbar, and what it does once the page has moved.
   ========================================================================== */

/* --- Navbar --------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  /* Transparent, with no plate and no rule under it: the bar sits over the
     section rather than on top of it, so what changes between sections is the
     ink, not the furniture. Legibility is therefore the section's job — a
     section busy enough to swallow the bar marks itself (see below). */
  background: transparent;
  color: var(--text);
  transition: color 0.3s ease;
}

/* --- Ink, per section -----------------------------------------------------
   The bar has no background of its own, so its colour has to follow whatever
   is under it. A section that is light says so with data-nav-theme="light" and
   nav.js flips the ink while that section is the one behind the bar; every
   other section is the dark surface and gets the default.
   -------------------------------------------------------------------------- */

.is-nav-light .nav {
  color: var(--surface);
}

.is-nav-light .nav-links {
  color: rgba(15, 15, 15, 0.62);
}

.is-nav-light .nav-links a:hover {
  color: var(--surface);
}

.nav .container {
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
  /* The bar is a fixed 64px and the name is two words: let it wrap and the
     mark ends up beside a two-line block that no longer fits its own bar.
     Narrow enough that the row cannot hold both, the links are what give way
     (see responsive.css), never the name. */
  white-space: nowrap;
}

.brand svg {
  width: 22px;
  height: 22px;
}

.nav-links {
  display: flex;
  gap: 28px;
  margin-right: auto;
  font-size: 14px;
  color: var(--text-muted);
}

.nav-links a {
  transition: color 0.2s ease;
}

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

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}