/* ============================================================================
   GoCheckMyMortgage — SHARED SITE HEADER (disclosure bar + top nav)
   ONE source of truth for the header. Linked by every page. Do not paste
   header CSS inline anywhere else; edit here so the nav never drifts.
   Self-contained (the GoCheckMy Brand Kit Rev. 4 palette + font stacks are
   hardcoded) so the header holds whether or not the host page's CSS variables
   have loaded. Mortgage skin: deep teal #184454, warm ivory #F5F4EF ground.
   ============================================================================ */

.gc-disclosure {
  background: #123842; color: #D5DCE0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .03em; text-align: center; padding: 6px 12px;
}

.gc-nav {
  border-bottom: 1px solid #E3DFD4;
  background: rgba(245,244,239,.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 60;
}
.gc-nav .gc-bar {
  max-width: 1180px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.gc-nav .gc-brand {
  display: flex; align-items: center; gap: 9px;
  font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 17px;
  color: #184454; text-decoration: none; flex: none;
}
.gc-nav .gc-brand .gc-mark { width: 22px; height: 22px; flex: none; display: inline-flex; }
/* Wordmark: "GoCheckMy" holds the brand deep teal; the site word "Mortgage" is
   the warm copper accent in italic, echoing the hero's italicised accent word.
   Wrapped in one inline .gc-word so the flex gap sits only between logo and text. */
.gc-nav .gc-brand .gc-word { white-space: nowrap; }
.gc-nav .gc-brand .gc-site { color: #9C4A21; font-style: italic; }
.gc-nav .gc-links {
  display: flex; align-items: center; gap: 22px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.gc-nav .gc-links::-webkit-scrollbar { display: none; }
.gc-nav .gc-links a {
  font-family: 'Inter', system-ui, sans-serif; font-size: 13.5px; font-weight: 500;
  color: #5C6A72; text-decoration: none; white-space: nowrap;
}
.gc-nav .gc-links a:hover { color: #184454; }
.gc-nav .gc-links a.active { color: #184454; font-weight: 600; }

/* Keyboard focus stays visible on the header's links (matches the site ring). */
.gc-nav .gc-brand:focus-visible,
.gc-nav .gc-links a:focus-visible { outline: 3px solid #184454; outline-offset: 3px; }

@media (max-width: 640px) {
  .gc-nav .gc-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .gc-nav .gc-links { gap: 20px; }
}