/* Shared site header — loaded by both the homepage and /audit.

   Deliberately self-contained: the two pages use different colour palettes
   (styles.css defines --navy/--teal/--cream, audit/styles.css defines
   --ink/--accent/--paper), so this file declares its own header-scoped
   --hdr-* variables rather than depending on either. Change the header here
   once and both pages follow. */

.site-header {
  --hdr-ink: #0b1f2a;
  --hdr-ink-inverse: #ffffff;
  --hdr-accent: #0f8b8d;
  --hdr-accent-soft: #d9f1ef;
  --hdr-accent-border: rgba(15, 139, 141, 0.35);
  --hdr-surface: rgba(247, 244, 239, 0.92);
  --hdr-surface-solid: #f7f4ef;
  --hdr-line: rgba(11, 31, 42, 0.08);

  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 6vw;
  background: var(--hdr-surface);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hdr-line);
}

.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; color: var(--hdr-ink); }
.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--hdr-ink);
  color: var(--hdr-ink-inverse);
  font-size: 14px;
  letter-spacing: -0.04em;
}
.brand-text { font-size: 18px; }

.nav { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 650; color: var(--hdr-ink); }
.nav a { opacity: 0.9; }
.nav a:hover { color: var(--hdr-accent); }
.nav-cta { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--hdr-accent-border); background: var(--hdr-accent-soft); }

/* Used on /audit only, to step back up to the main site. */
.nav-back { padding-right: 16px; border-right: 1px solid var(--hdr-line); margin-right: 2px; }

.menu-button { display: none; background: none; border: 0; font-size: 26px; color: var(--hdr-ink); }

@media (max-width: 960px) {
  .menu-button { display: block; }
  .nav {
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    background: var(--hdr-surface-solid);
    padding: 20px 6vw 28px;
    border-bottom: 1px solid var(--hdr-line);
  }
  .nav.open { display: flex; }
  .nav-back { border-right: 0; padding-right: 0; margin-right: 0; }
}

@media (max-width: 560px) {
  .site-header { padding: 14px 5vw; }
  .brand-text { font-size: 16px; }
}