/* ============================================================
   HEADER OVERRIDES — added on top of assets/css/style.css
   Scope: site header (.topbar) + its mobile flyout (.menu) only.
   Nothing outside the header/menu is touched by this file.

   IMPORTANT: the real style.css hides .links and shows .burger at
   max-width:940px. Every desktop-only rule below is wrapped in the
   matching min-width:941px query so nothing here ever fights that
   breakpoint again (that's what broke the mobile menu last round).
   ============================================================ */

/* Header bar + mobile flyout panel: white/blur -> solid navy.
   Set inline on the elements too (belt & braces) since .nav's own
   background is blank in the real CSS (it relies on backdrop-filter),
   so painting it only on .topbar is what actually shows through. */
.topbar,
.menu {
  background: #163049 !important;
}

/* Logo image removed; replaced by a text wordmark in the same slot,
   both in the desktop bar and the mobile flyout header */
.brandtext {
  color: #ffffff;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ---------- DESKTOP ONLY (940px is the site's own breakpoint) ---------- */
@media (min-width: 941px) {
  /* 3-zone layout: wordmark left / links centred / button right.
     "Get a Quote" was moved out of .links in the HTML so it can be
     pinned independently of the now-centred nav links. */
  .topbar .nav {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    justify-content: initial !important;
  }
  .topbar .links {
    display: flex !important;
    justify-self: center !important;
  }
  .topbar .nav > a.btn {
    justify-self: end !important;
  }
}

/* ---------- MOBILE ONLY ----------
   Keep the collapsed bar to exactly what was asked for: wordmark +
   toggle. The nav links are already hidden by the site's own
   .links{display:none} rule at this width — we only need to also
   hide the CTA button, since it's no longer inside .links now that
   it's been pulled out for the desktop layout above. */
@media (max-width: 940px) {
  .topbar .nav > a.btn {
    display: none !important;
  }
}

/* Nav links -> white text (desktop + mobile flyout) */
.topbar .links a,
.menu .mlinks a {
  color: #ffffff !important;
}

/* Keep the current-page link visibly distinct now that every
   link is white */
.topbar .links a.on {
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Subtle hover feedback on nav links */
.topbar .links a:hover,
.menu .mlinks a:hover {
  opacity: 0.78;
}

/* Header + mobile-menu buttons ("Get a Quote" / "Get a Free Quote")
   text -> white. Scoped so it does NOT affect .btn elsewhere
   on the page (hero, CTA band, etc.) */
.topbar .btn,
.menu .btn {
  color: #ffffff !important;
}

/* Hamburger icon bars -> white, so it stays visible on navy */
.topbar .burger span {
  background: #ffffff !important;
}

/* Mobile menu close ("×") button -> white, same reason */
.menu .mtop button {
  color: #ffffff !important;
}