/* Canonical site header — ONE definition for every page on reliasim.com.
 *
 * The nav was defined per-page and had drifted: index carried seven links,
 * method six, the guides five, pricing/training/case-study three, and
 * conferences, license, privacy, signup and walkthrough had no header at all.
 * This file is the single source.
 *
 * Colours are LITERAL, and there is deliberately no :root block. An earlier
 * version declared the shared tokens here; because this sheet loads last it
 * overrode pages that define the same names for their own palette —
 * license.html sets --text for a light page, and its body copy turned pale
 * grey on white. The nav is a fixed dark bar and does not need to be themeable,
 * so it carries its own values and cannot leak into the page.
 */

nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(7,17,30,0.92); backdrop-filter: blur(14px);
  border-bottom: 1px solid #2d3f55;
  padding: 0 5vw; height: 64px;
  display: flex; align-items: center; gap: 20px;
}
.nav-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-brand img { height: 32px; }
.nav-links { display: flex; gap: 26px; flex: 1; justify-content: center; }
.nav-links a { font-size: 13px; color: #94a3b8; font-weight: 600; transition: color 0.15s; }
.nav-links a:hover { color: #e2e8f0; text-decoration: none; }
.nav-links a.primary { color: #61CE70; }
.nav-links a.primary:hover { color: #7de88c; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nav-logo-link { display: flex; align-items: center; padding: 4px 8px; border-radius: 6px;
  border: 1px solid transparent; transition: border-color 0.15s, opacity 0.15s; opacity: 0.8; }
.nav-logo-link:hover { border-color: #2d3f55; opacity: 1; }
.nav-cta {
  background: #37A88F; color: #fff; font-size: 12px; font-weight: 700;
  padding: 10px 18px; border-radius: 0.3rem; border: none;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: filter 0.15s; flex-shrink: 0;
}
.nav-cta:hover { filter: brightness(1.15); text-decoration: none; }
.nav-mobile-toggle { display: none; background: rgba(255,255,255,.06); border: 1px solid #2d3f55; border-radius: 6px; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; padding: 6px 12px; }

@media (max-width: 768px) {
  .nav-mobile-toggle { display: block; margin-left: auto; }
  .nav-links { display: none !important; }
  .nav-links.mobile-open {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(7,17,30,0.97);
    padding: 14px 5vw;
    gap: 12px;
    z-index: 90;
    border-bottom: 1px solid #2d3f55;
  }
}