/* ════════════════════════════════════════════════════════
   COMPLIABLE.AI · SHARED TOP NAV STYLES
   Single source of truth — used by all pages.
   Edit here → changes cascade to every page on next load.
   ══════════════════════════════════════════════════════ */

/* Sticky lives on the mount, not the inner <nav>. The mount is what
   sits in the page's normal flow; the <nav> inside it would otherwise
   only have the mount's own height as its sticky range (= zero scroll). */
#site-nav {
  position: sticky; top: 0; z-index: 100;
  display: block;
}
.nav {
  height: 68px;
  background: #0C2855;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center;
  padding: 0 48px;
}
.nav-inner {
  width: 100%; max-width: 1320px; margin: 0 auto;
  display: flex; align-items: center;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; margin-right: auto;
}
.nav-logo-wordmark {
  font-size: 14px; font-weight: 700;
  letter-spacing: 1.5px;
  color: #fff;
}
.nav-links {
  display: flex; align-items: center; gap: 40px;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.nav-link {
  font-size: 14px; font-weight: 450;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color 0.15s;
}
.nav-link:hover { color: #fff; }

.nav-actions {
  display: flex; align-items: center; gap: 24px;
  margin-left: auto;
}
.nav-signin {
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  transition: color 0.15s;
}
.nav-signin:hover { color: #fff; }

/* Tagline link — replaces the old Sign in slot.
   Subtle inviting prompt, navigates to the demo request page.
   Explicit :link and :visited rules override the browser's default
   visited-link styling (purple + underline) which has higher
   specificity than a plain class selector. */
.nav-tagline,
.nav-tagline:link,
.nav-tagline:visited,
.nav-tagline:active {
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,.82) !important;
  text-decoration: none;
  letter-spacing: 0.005em;
  white-space: nowrap;
  transition: color 0.15s;
}
.nav-tagline:hover,
.nav-tagline:focus {
  color: #fff;
  text-decoration: none;
}

/* CTA button. display:inline-flex baked in so it renders correctly
   whether the underlying tag is <button> or <a>. */
.btn-nav {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 16px;
  background: var(--gold); color: var(--primary);
  border: none; border-radius: 6px;
  font-size: 12px; font-weight: 700;
  font-family: inherit; cursor: pointer;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}
.btn-nav:hover { background: #E8B33F; transform: translateY(-1px); }

/* Responsive */
@media (max-width: 1100px) {
  /* Below ~1100px the tagline starts to crowd the demo button — hide it. */
  .nav-tagline { display: none; }
}
@media (max-width: 1024px) {
  .nav { padding: 0 32px; }
}
@media (max-width: 767px) {
  /* Centered top-nav links collapse on mobile; navigation moves to the
     footer accordion. This rule lives here in nav.css — the LAST-loaded
     shared nav stylesheet — so it reliably overrides the base
     `.nav-links { display: flex }` rule above (equal specificity, so source
     order decides) and applies to every page, including those that don't
     load responsive.css (e.g. about.html, ai-agents.html). Without this the
     absolutely-positioned links overlap the logo on phones. */
  .nav-links { display: none; }
}
@media (max-width: 720px) {
  .nav { padding: 0 20px; }
  /* On mobile, the demo button moves to a sticky bottom CTA bar
     (defined in assets/responsive.css). Hide the desktop one. */
  .nav-actions .btn-nav { display: none; }
  .nav-signin { font-size: 13px; }
  .nav-logo-wordmark { font-size: 13px; letter-spacing: 1.3px; }
  .nav-logo svg { width: 22px; height: 22px; }
}