/* nav-shared.css — canonical Trueleveler marketing header.
 *
 * Self-contained (literal color values, no CSS-var dependency) so it renders
 * identically on blog pages that load blog.css instead of _styles.css.
 * MUST be linked LAST on blog pages so it overrides the legacy `.nav` rules in
 * blueprint-amber.css (which set display:flex / height:76px for the old header).
 * Mirrors the .nav block in _styles.css / marketing-v2.css 1:1.
 */
.nav {
  display: block; position: sticky; top: 0; z-index: 50; height: auto;
  background: rgba(8, 21, 34, 0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09); padding: 14px 0;
}
.nav-inner { display: flex; align-items: center; gap: 32px; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.nav .brand { font-weight: 700; font-size: 17px; letter-spacing: 0.01em; color: #e9eef5; display: flex; align-items: center; gap: 8px; }
.nav .brand-logo { width: 210px; height: 42px; display: block; }
.nav-links { display: flex; gap: 2px; flex: 1; }
.nav-link { padding: 8px 12px; font-size: 13px; color: rgba(233, 238, 245, 0.78); border-radius: 3px; transition: background 120ms, color 120ms; position: relative; cursor: pointer; }
.nav-link:hover { background: rgba(255, 255, 255, 0.04); color: #e9eef5; }
.nav-link.has-sub:after { content: '\25BE'; font-size: 9px; color: rgba(233, 238, 245, 0.4); margin-left: 5px; }
.nav-link.active { color: #e8871e; }
.nav-link.dropdown-wrap { position: relative; }
.nav-link.dropdown-wrap:hover .dropdown { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.dropdown {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 130ms ease, visibility 0s linear 240ms;
  position: absolute; top: 100%; left: 0; min-width: 260px;
  background: #0f2236; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 4px; padding: 6px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45); margin-top: 4px;
}
/* Invisible bridge over the gap so the cursor can travel label->menu without the hover dropping. */
.dropdown::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.dropdown-group { padding: 8px 10px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(233, 238, 245, 0.4); }
.dropdown-link { display: block; padding: 7px 10px; font-size: 13px; color: rgba(233, 238, 245, 0.78); border-radius: 3px; }
.dropdown-link:hover { background: rgba(255, 255, 255, 0.04); color: #e9eef5; }
.dropdown-link.featured { color: #e8871e; }
.dropdown-link .pill-mini { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; padding: 1px 5px; border-radius: 2px; margin-left: 8px; vertical-align: middle; background: rgba(232, 135, 30, 0.12); border: 1px solid rgba(232, 135, 30, 0.35); color: #e8871e; }
.dropdown-link .pill-mini.beta { background: rgba(95, 179, 128, 0.1); border-color: rgba(95, 179, 128, 0.3); color: #5fb380; }
.nav-cta { background: #e8871e; color: #081522; padding: 8px 14px; border-radius: 3px; font-weight: 600; font-size: 13px; transition: background 120ms; }
.nav-cta:hover { background: #f7a340; color: #081522; }
.nav-signin { color: rgba(233, 238, 245, 0.78); font-size: 13px; padding: 8px 4px; }
.nav-signin:hover { color: #e9eef5; }
@media (max-width: 900px) { .nav-links { display: none; } }