/* ============================================================
   ANP-INSIGHT — HEADER LOCK  (v2026-08-21)
   Canonical header geometry shared by:
     - index.html            (.header / .nav-wrap / .brand-horizontal / .nav)
     - React pages           (.siteHeader / .navRow / .brandImage / .desktopNav)
   Both stylesheets use IDENTICAL numbers. Edit both together.
   ------------------------------------------------------------
   Baseline (desktop >= 1181px)
     row height ......... 82px
     logo width ......... 230px
     nav gap ............ 14px
     nav font ........... .78rem / 700
     CTA pill ........... 11px 17px / .78rem / radius 999
   ============================================================ */

/* ---------- shell / bar ---------- */
.siteHeader {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .86) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(7, 31, 69, .08) !important;
}

.siteHeader .navRow {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-height: 82px !important;
}

/* ---------- brand / logo ----------
   flex:none is the fix: without it the logo is squeezed by the nav
   and renders ~202px instead of 230px. ---------- */
.siteHeader .brand {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  min-width: 0;
}

.siteHeader .brandImage,
.siteHeader .brand img {
  display: block !important;
  width: 230px !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

/* ---------- primary navigation ---------- */
.siteHeader .desktopNav {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-left: auto !important;
  min-width: 0;
  font-size: .78rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

.siteHeader .desktopNav a {
  color: #33445e !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

.siteHeader .desktopNav a:hover {
  color: #0f6795 !important;
}

.siteHeader .desktopNav a.navActive {
  position: relative;
  color: #0f6795 !important;
}

.siteHeader .desktopNav a.navActive::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 2px;
  border-radius: 999px;
  background: #0f6795;
}

/* ---------- contact pill ---------- */
.siteHeader .buttonSmall {
  flex: 0 0 auto;
  min-height: auto !important;
  padding: 11px 17px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #071f45, #0f6795) !important;
  color: #fff !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  box-shadow: 0 10px 24px rgba(15, 103, 149, .2) !important;
}

/* ---------- step-down breakpoints ---------- */
@media (max-width: 1180px) {
  .siteHeader .brandImage,
  .siteHeader .brand img { width: 210px !important; }
  .siteHeader .desktopNav { gap: 12px !important; font-size: .745rem !important; }
  .siteHeader .buttonSmall { padding: 10px 15px !important; font-size: .745rem !important; }
}

@media (max-width: 1024px) {
  .siteHeader .brandImage,
  .siteHeader .brand img { width: 196px !important; }
  .siteHeader .desktopNav { gap: 10px !important; font-size: .705rem !important; }
  .siteHeader .buttonSmall { padding: 10px 14px !important; font-size: .705rem !important; }
}

/* ---------- mobile menu switch (identical breakpoint on both sites) ---------- */
@media (max-width: 900px) {
  .siteHeader .navRow { min-height: 72px !important; }
  .siteHeader .brandImage,
  .siteHeader .brand img { width: 190px !important; }
  .siteHeader .desktopNav,
  .siteHeader .navRow > .buttonSmall { display: none !important; }
  .siteHeader .mobileNav { display: block !important; margin-left: auto !important; }
}

@media (max-width: 520px) {
  .siteHeader .navRow { min-height: 66px !important; }
  .siteHeader .brandImage,
  .siteHeader .brand img { width: 168px !important; }
}

/* ---------- mobile trigger + dropdown panel (matched to index.html) ---------- */
.siteHeader .mobileNav summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(7, 31, 69, .14) !important;
  border-radius: 12px !important;
  background: #fff;
  color: #071f45;
  font-size: .85rem !important;
  font-weight: 800 !important;
  list-style: none;
  cursor: pointer;
}

.siteHeader .mobileNav nav {
  right: 0;
  left: auto;
  min-width: 280px !important;
  max-width: calc(100vw - 36px);
  top: calc(100% + 10px) !important;
  padding: 14px !important;
  border: 1px solid rgba(7, 31, 69, .1) !important;
  border-radius: 18px !important;
  background: #fff;
  box-shadow: 0 18px 40px rgba(7, 31, 69, .16) !important;
  gap: 4px;
}

.siteHeader .mobileNav nav a {
  padding: 11px 10px !important;
  border-radius: 10px !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
}

/* ---------- small-screen gutter parity with index.html (18px each side) ---------- */
@media (max-width: 680px) {
  .shell { width: min(100% - 36px, 1180px) !important; }
}