/* header.css - the one shared site header + nav, used by every page
 * (static pages link it; the generators emit a <link> to it). Markup comes from
 * build/lib.mjs `header(active, cta)` for generated pages and the same markup
 * hand-written in the static pages. Selectors are scoped under .site-header so
 * this never restyles buttons/logos elsewhere on a page. Color vars fall back to
 * brand hex so pages without a :root palette (e.g. thanks.html) still render. */

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 880px; margin: 0 auto; padding: 20px 24px;
  flex-wrap: wrap; gap: 12px;
}
.site-header .logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; letter-spacing: 0.06em; font-size: 18px;
  text-decoration: none; color: inherit;
}
.site-header .logo img { border-radius: 8px; }

.topnav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.topnav a {
  color: var(--navy, #102A43); text-decoration: none;
  font-weight: 600; font-size: 0.95rem;
}
.topnav a:hover { color: var(--orange, #F97316); }
/* Active section highlight. */
.topnav a.active {
  color: var(--orange, #F97316);
  border-bottom: 2px solid var(--orange, #F97316);
  padding-bottom: 2px;
}

.site-header .cta-btn {
  display: inline-block;
  background: var(--orange, #F97316); color: #fff;
  font-weight: 700; font-size: 15px;
  padding: 10px 20px; border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
  transition: transform 0.15s ease;
}
.site-header .cta-btn:hover { transform: translateY(-1px); }
.topnav a.cta-btn { color: #fff; border-bottom: 0; padding-bottom: 10px; }

/* Mobile: let the nav wrap to its own full-width row, tidy and tappable. */
@media (max-width: 560px) {
  .site-header { padding: 16px 20px; }
  .topnav { gap: 14px; width: 100%; justify-content: flex-start; }
}