/* ============================================================
   sitenav: the dark site header on pages that do not load v2/v3
   ------------------------------------------------------------
   Home, Features, Pricing and the calculator draw .topnav from
   v2.css + v3.css. About, the blog, the changelog and the legal
   pages had their own white headers with their own links (design
   audit 2026-10-05, P1 #2). They now carry the same markup with
   .sitehdr added, and this file draws it to match, self-contained
   so it does not depend on each page's own variables.
   The Resources menu opens on hover and keyboard focus, no script.
   ============================================================ */
.topnav.sitehdr {
  display: block; position: sticky; top: 0; left: 0; right: 0; z-index: 50; height: 56px;
  background: #141822; border-bottom: 1px solid #232840;
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  margin: 0; padding: 0; box-shadow: none;
}
.topnav.sitehdr .wrap {
  display: flex; align-items: center; gap: 24px; height: 100%;
  max-width: none; margin: 0; box-sizing: border-box;
  padding-left: clamp(20px, 3.2vw, 56px);
  padding-right: max(clamp(20px, 3.2vw, 56px), calc(50% - 528px));
}
.topnav.sitehdr .wordmark {
  font-weight: 800; letter-spacing: -0.028em; font-size: 18px; color: #fff;
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
}
.topnav.sitehdr .wm-t { color: #fff; }
.topnav.sitehdr .wm-t .cal { color: #7d9bff; }
.topnav.sitehdr .nav-links { display: flex; align-items: center; gap: 24px; margin: 0 0 0 8px; padding: 0; }
.topnav.sitehdr .nav-links a,
.topnav.sitehdr .nav-menu-trigger {
  color: #c6cbe0; text-decoration: none; font-size: 13px; font-weight: 500;
  transition: color 0.15s; border: 0; background: none; padding: 0;
}
.topnav.sitehdr .nav-links a:hover,
.topnav.sitehdr .nav-menu-trigger:hover,
.topnav.sitehdr .nav-links a[aria-current="page"] { color: #fff; }
.topnav.sitehdr .nav-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }

.topnav.sitehdr .nav-menu { position: relative; display: flex; align-items: center; }
.topnav.sitehdr .nav-menu-trigger {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-family: inherit;
}
.topnav.sitehdr .chev { display: inline-flex; color: #9aa0bb; transition: transform 0.18s ease; }
.topnav.sitehdr .chev svg { width: 13px; height: 13px; }
.topnav.sitehdr .nav-menu-panel {
  position: absolute; top: calc(100% + 12px); left: -14px; z-index: 60; width: 304px;
  background: #fff; border: 0; border-radius: 4px; padding: 6px;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,0.42);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
/* A bridge over the 12px gap so the menu does not close on the way down. */
.topnav.sitehdr .nav-menu-panel::after { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.topnav.sitehdr .nav-menu:hover .nav-menu-panel,
.topnav.sitehdr .nav-menu:focus-within .nav-menu-panel { opacity: 1; visibility: visible; transform: none; }
.topnav.sitehdr .nav-menu:hover .chev,
.topnav.sitehdr .nav-menu:focus-within .chev { transform: rotate(180deg); }
.topnav.sitehdr .nav-menu-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px;
  text-decoration: none; transition: background 0.13s;
}
.topnav.sitehdr .nav-menu-item:hover { background: #f0f1f5; }
.topnav.sitehdr .nmi-ic {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 4px; display: grid; place-items: center;
  color: #3a62e0; background: rgba(58,98,224,0.07); border: 1px solid rgba(58,98,224,0.26);
}
.topnav.sitehdr .nmi-ic svg { width: 17px; height: 17px; }
.topnav.sitehdr .nmi-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.topnav.sitehdr .nmi-t { font-size: 13px; font-weight: 600; color: #1a1d27; }
.topnav.sitehdr .nmi-s { font-size: 13px; color: #4a4f6a; line-height: 1.35; }

.topnav.sitehdr .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 32px; padding: 0 14px; font-size: 13px; font-weight: 600; font-family: inherit;
  border-radius: 0; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.topnav.sitehdr .btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.topnav.sitehdr .btn-primary { background: #3a62e0; color: #fff; border: 0; }
.topnav.sitehdr .btn-primary:hover { background: #2f50c4; }
.topnav.sitehdr .btn-ghost { background: transparent; color: #fff; border: 1px solid #3b4260; }
.topnav.sitehdr .btn-ghost:hover { border-color: #5a628a; }

@media (max-width: 920px) {
  .topnav.sitehdr .nav-links { display: none; }
  .topnav.sitehdr .nav-signin { display: none; }
}
@media (max-width: 380px) {
  .topnav.sitehdr .wrap { padding: 0 14px; gap: 12px; }
  .topnav.sitehdr .nav-right { gap: 8px; }
}

/* Menu button on the dark bar (design audit #19): no fill, white icon. */
.topnav.sitehdr .nav-burger { background: transparent; border-color: #3b4260; color: #fff; }
.topnav.sitehdr .nav-burger:hover { border-color: #5a628a; }