/* The marketing header, for pages a signed-out visitor reaches from search or a guide link.
   Everything is scoped under .pubheader so it cannot collide with the .top / .topbar app bar
   that dashboard.html, tracker.html, check.html, profile.html, signin.html and export.html still
   use. Values match index.html's own inline header CSS: the landing page is the look, this is
   the same look on the pages that should not show app chrome to a stranger. */

.pubheader { background: var(--card); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 40; padding-top: env(safe-area-inset-top); }
.pubheader .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.pubheader .logo { display: block; line-height: 0; }
.pubheader .logo img { height: 44px; width: auto; display: block; }
.pubheader .mainnav { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.pubheader .mainnav a { font-size: 15px; color: var(--ink-2); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.pubheader .mainnav a:hover { color: var(--ink); }
.pubheader .navcta { background: var(--stamp); color: #fff; font-size: 15px; font-weight: 600; padding: 9px 16px; border-radius: 8px; text-decoration: none; white-space: nowrap; flex: none; }
.pubheader .navcta:hover { background: #1d4ed8; color: #fff; }

/* Once the nav wraps the header is two rows tall, so it scrolls away rather than sticking,
   exactly as index.html does. */
@media (max-width: 640px) {
  .pubheader { position: static; }
  .pubheader .wrap { flex-wrap: wrap; row-gap: 6px; padding: 8px 16px; }
  .pubheader .logo img { height: 32px !important; }
  .pubheader .navcta { margin-left: auto; padding: 8px 14px; font-size: 14px; flex: none; }
  .pubheader .mainnav { order: 3; width: 100%; gap: 0; border-top: 1px solid var(--rule); padding: 8px 0 2px; font-size: 13.5px; display: flex; flex-wrap: nowrap; justify-content: space-between; margin-left: 0; white-space: nowrap; }
  .pubheader .mainnav a { flex: none; padding: 6px 0; letter-spacing: -.01em; }
}