/* ==========================================================================
   Desktop header on one line
   The menu gained a fifth item ("Guide") and pushed the action buttons onto a
   second row, so the header grew from one line to two. These rules tighten the
   brand, the menu and the buttons just enough to keep everything on one line
   from tablet width upwards. Loaded last, after the other desktop sheets.
   ========================================================================== */

@media (min-width: 900px) {
  header .header-content {
    flex-wrap: nowrap !important;
    gap: clamp(0.5rem, 1.1vw, 1.1rem) !important;
  }

  header .nav-links {
    flex-wrap: nowrap !important;
    gap: clamp(0.45rem, 1vw, 1.3rem) !important;
  }

  header .nav-links a {
    white-space: nowrap !important;
    font-size: clamp(0.72rem, 0.82vw, 0.85rem) !important;
    padding: 0.45rem 0 !important;
  }

  header .header-brand .brand-name {
    font-size: clamp(13px, 1.15vw, 19px) !important;
    letter-spacing: -0.01em !important;
  }

  header .header-brand .brand-tagline,
  header .header-brand .brand-tagline span {
    font-size: clamp(9px, 0.7vw, 11px) !important;
  }

  header .header-logo-wrapper {
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }

  header .nav-cta {
    flex-wrap: nowrap !important;
    gap: 0.38rem !important;
  }

  header .nav-cta .phone {
    padding: 0.45rem 0.7rem !important;
    font-size: 0.78rem !important;
  }

  header .nav-cta .nav-icon-btn {
    padding: 0.42rem !important;
  }
}

/* Between tablet and laptop widths the row only fits without the number
   spelled out beside the phone icon. */
@media (min-width: 900px) and (max-width: 1279px) {
  header .nav-cta .phone span {
    display: none !important;
  }
}