/* OwlWatt canonical public site nav — single source of truth.
   Injected into all public marketing/learn/lp pages by bin/sync-nav.py.
   Edit HERE, then run sync-nav.py to propagate. */

/* ------------------------------------------------------------------
   CSS custom properties required by nav (pages must define --navy and
   --amber, or fall back to these hardcoded values via the cascade).
   ------------------------------------------------------------------ */
:root {
  --nav-navy: var(--navy, #0b2340);
  --nav-amber: var(--amber, #f5b041);
}

/* ------------------------------------------------------------------
   Site header / nav shell
   ------------------------------------------------------------------ */
header.site-header {
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(11, 35, 64, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ------------------------------------------------------------------
   Wordmark:  "Owl" in white,  "Watt" in amber/yellow (#f5b041)
   ------------------------------------------------------------------ */
a.wordmark {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #ffffff;           /* "Owl" is white */
  text-decoration: none;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0;
}

a.wordmark .watt {
  color: #f5b041;           /* "Watt" is amber/yellow */
}

a.wordmark img.owl-icon {
  vertical-align: middle;
  margin-right: 8px;
  height: 28px;
  width: auto;
}

/* ------------------------------------------------------------------
   Nav link list
   ------------------------------------------------------------------ */
nav.site-nav {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

nav.site-nav a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.15s;
}

nav.site-nav a:hover {
  color: #ffffff;
}

/* Sign up CTA button inside the nav */
nav.site-nav a.nav-cta {
  display: inline-block;
  padding: 8px 16px;
  background: #f5b041;
  color: #0b2340 !important;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.15s;
}

nav.site-nav a.nav-cta:hover {
  background: #e8a030;
  color: #0b2340 !important;
}

/* ------------------------------------------------------------------
   Mobile: hide nav links on narrow viewports, keep wordmark
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
  nav.site-nav a:not(.nav-cta) {
    display: none;
  }
}