/* ==========================================================================
   Shared site header. Loaded first by every page, before site.css.
   ========================================================================== */

/* Layout and button primitives: the header needs them, and every page reuses them. */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
.btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 28px; border-radius: 6px; font-weight: 700; font-size: 17px; letter-spacing: 0.005em; transition: background .2s, transform .2s cubic-bezier(.22,1,.36,1); }
.btn:hover { transform: translateY(-1px); }
.btn-ink { background: #002533; color: #fbf9f6; } .btn-ink:hover { background: #0b3a4a; color: #fff; }
.btn:focus-visible { outline: 2px solid #ff800e; outline-offset: 3px; }

/* Header bar */
.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; background: #002533; transition: box-shadow .35s; font-family: 'Metropolis', 'Montserrat', 'Avenir Next', 'Helvetica Neue', sans-serif; }
.site-nav.solid, .site-nav.is-open { box-shadow: 0 6px 24px -12px rgba(0,37,51,.55); }
.site-nav .wrap { display: flex; align-items: center; gap: 44px; height: 88px; transition: height .3s; }
.site-nav.solid .wrap { height: 64px; }
.site-nav-logo { display: block; flex: none; }
.site-nav-logo img { height: 34px; display: block; }
.site-nav-menu { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.site-nav-links { display: flex; gap: 22px; font-weight: 600; font-size: 16px; white-space: nowrap; }
.site-nav-actions { display: flex; align-items: center; gap: 24px; white-space: nowrap; }
.site-nav a { color: #eaf1f4; text-decoration: none; }
.site-nav-links a:hover, .site-nav-signin:hover { color: #ff800e; }
.site-nav-signin { font-weight: 600; font-size: 16px; }
.site-nav .btn-ink { background: #ff800e; color: #002533; height: 46px; padding: 0 20px; font-size: 15px; }
.site-nav .btn-ink:hover { background: #ff9636; color: #002533; }
.site-nav a:focus-visible, .site-nav-toggle:focus-visible { outline: 2px solid #ff800e; outline-offset: 3px; }

/* Menu button: three bars that turn into an X when the menu is open. */
.site-nav-toggle { display: none; flex: none; margin-left: auto; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(234,241,244,.28); border-radius: 8px; background: transparent; color: #eaf1f4; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.site-nav-toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .2s ease; }
.site-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The header is fixed, so pages that put content straight after it need to
   clear its height. The homepage nests the header inside its hero, which
   supplies its own top padding, so this does not apply there. */
.site-nav + main { padding-top: 88px; }

/* Below 1200px the full header no longer fits on one line (it needs ~1160px),
   so the links and buttons move into a panel that drops down under the bar. */
@media (max-width: 1199px) {
  .site-nav-toggle { display: inline-flex; }
  .site-nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 32px 28px; background: #002533; border-top: 1px solid rgba(234,241,244,.12); box-shadow: 0 24px 40px -24px rgba(0,37,51,.7); max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; }
  .site-nav.is-open .site-nav-menu { display: flex; }
  .site-nav-links { flex-direction: column; gap: 0; font-size: 20px; white-space: normal; }
  .site-nav-links a { padding: 14px 0; border-bottom: 1px solid rgba(234,241,244,.12); }
  .site-nav-actions { flex-direction: column; align-items: stretch; gap: 16px; padding-top: 20px; }
  .site-nav-signin { font-size: 18px; padding: 4px 0; }
  .site-nav .btn-ink { height: 52px; font-size: 16px; }
}
@media (max-width: 600px) {
  .site-nav .wrap { padding: 0 20px; }
  .site-nav-menu { padding-left: 20px; padding-right: 20px; }
  .site-nav-logo img { height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav-toggle span { transition: none; }
}