/* ── Canonical desktop header (2026-09-07) ──────────────────────────────
 * Every public page now carries the same link set. The labels must stay on
 * one line: at ~1024px "How it works" / "Why HaulGuard" / "Free Resources"
 * broke in two and the nav grew from 62px to 96px. Loaded everywhere the
 * drawer is, so this is the one place it is stated.
 * Two class idioms exist across the pages; both are covered. */
.nav-links .nav-link,
.nav-links .nav-cta,
.nav .links a { white-space: nowrap; }
/* Tighten the row before it has to wrap, rather than after. */
@media (max-width: 1100px) {
  .nav-links { gap: 4px; }
  .nav-links .nav-link { padding-left: 9px; padding-right: 9px; }
  .nav .links { gap: 2px; }
  .nav .links a { padding-left: 9px; padding-right: 9px; }
}

/* Signed-in managers (public/js/site-nav.js): the header CTA is repointed
 * at /fleet and restyled here, so it reads the same on every page whatever
 * that page's own .nav-cta / .cta looked like. Bright green on dark text,
 * with a ring, so it is the most obvious thing in the header — this is the
 * one way back to the dashboard from a marketing page. */
.hg-has-menu a.hg-fleet-cta {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 9px 18px;
  border-radius: 7px;
  background: #22c55e;
  /* !important because site-nav injects this class onto whatever `.cta` the
     host page already styles, and several pages' own `.cta` colour wins on
     specificity — on /pricing that produced #c7d4e0 on #22c55e, 1.51:1. */
  color: #03130a !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.28);
}
.hg-has-menu a.hg-fleet-cta:hover { background: #15803d; color: #fff !important; }
.hg-has-menu a.hg-fleet-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 420px) {
  .hg-has-menu a.hg-fleet-cta { padding: 9px 11px; font-size: 13px; margin-left: 2px; }
}

/* Site-wide mobile menu (public/js/site-nav.js).
 *
 * Every marketing page carries its own inline header CSS, and below ~600px
 * each one hides most of its links (data-hide-mobile / .hide-sm) with no
 * control to reveal them — a phone visitor could not reach Pricing or
 * Contact from any header. This file styles the one shared control:
 * a hamburger the script appends to the page's own nav, and a full-height
 * drawer appended to <body>. Colors are fixed (navy drawer, white text)
 * so the drawer reads the same on dark pages and on the light /pricing.
 * The button inherits its color from the host nav so the bars match
 * whatever the page's links use. */

.hg-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  flex: 0 0 auto;
}
.hg-menu-btn:focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; }
.hg-menu-btn .hg-bars {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.hg-menu-btn .hg-bars::before,
.hg-menu-btn .hg-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.hg-menu-btn .hg-bars::before { top: -6px; }
.hg-menu-btn .hg-bars::after { top: 6px; }

@media (max-width: 700px) {
  .hg-menu-btn { display: inline-flex; }
  /* Login moves into the drawer so the header has room for logo + CTA + menu
     at 390px. !important because the host pages force this link visible
     with their own mobile rules at the same specificity. */
  .hg-has-menu a[href="/login"] { display: none !important; }
  /* Below this width the drawer carries every text link, so the header keeps
     only the logo, the page's call to action and the button. Covers both
     class idioms; :not(.cta) is what stopped /pricing losing its own CTA
     when it gained one with the canonical link set. */
  .hg-has-menu .nav-link,
  .hg-has-menu .links a:not(.cta):not(.hg-fleet-cta) { display: none !important; }
  .hg-has-menu .links, .hg-has-menu.nav-links { align-items: center; }
  /* /shipper, /for-brokers, /why-haulguard: the header CTA wrapped onto two
     lines once the menu button took its 44px. */
  .hg-has-menu .cta { white-space: nowrap; }
}
@media (max-width: 420px) {
  .hg-has-menu .cta { padding-left: 11px; padding-right: 11px; font-size: 13px; }
  .hg-menu-btn { margin-left: 0; width: 40px; }
}

.hg-drawer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  background: rgba(3, 10, 20, 0.6);
}
.hg-drawer.open { display: block; }
.hg-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 88vw);
  overflow-y: auto;
  background: #0a1628;
  color: #fff;
  border-left: 1px solid rgba(42, 157, 92, 0.25);
  padding: 14px 18px 32px;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}
.hg-drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.hg-drawer-title { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #22c55e; }
.hg-drawer-close {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.hg-drawer-close:focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; }
.hg-drawer-ctas { display: grid; gap: 10px; margin: 6px 0 18px; }
.hg-drawer-ctas a {
  display: block;
  text-align: center;
  padding: 13px 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.hg-drawer-ctas .hg-cta-primary { background: #22c55e; color: #03130a; }
.hg-drawer-ctas .hg-cta-secondary { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); }
.hg-drawer-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.hg-drawer-links li { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.hg-drawer-links a {
  display: block;
  padding: 13px 4px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  text-decoration: none;
}
.hg-drawer-links a:hover, .hg-drawer-links a:focus-visible { color: #22c55e; }
.hg-drawer-links .hg-group { padding: 14px 4px 4px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #8a9caf; }
.hg-drawer-foot { margin-top: 18px; font-size: 14px; color: #8a9caf; line-height: 1.6; }
.hg-drawer-foot a { color: #7eb8d6; text-decoration: none; }
body.hg-drawer-open { overflow: hidden; }