/* ═══════════════════════════════════════════════════════════════════
 * hp-header-fix.css — one rule, one bug
 *
 * THE BUG: the RE/MAX logo in the site header extended 33px past the
 * right edge of the viewport, giving every page on the site a
 * horizontal scrollbar at desktop widths.
 *
 * WHY: .site-header .nav is a grid declared as
 *   grid-template-columns: 156px 1fr auto auto
 * The 1fr links column took 845px, leaving the actions column 237px for
 * content that needs ~330px (account link + CTA + logo). Flex children
 * do not shrink a replaced element below its intrinsic width, so the
 * logo simply overflowed.
 *
 * THE FIX, measured rather than guessed. Two candidates were applied to
 * the live page and the result read back:
 *
 *   img { min-width: 0 }                     overflow 0, but the logo
 *                                            collapsed to 35px wide
 *   auto minmax(0,1fr) max-content           overflow 0, logo stays
 *                                            128px  ← this one
 *
 * SCOPED ABOVE 1240px ON PURPOSE. Existing media queries at 1240, 980
 * and 640 already own the header below that width, and .remax is
 * display:none under 1240 anyway — so the bug cannot occur there and
 * this rule must not reach those breakpoints and fight them.
 * ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 1241px){
  .site-header .nav{
    grid-template-columns: auto minmax(0, 1fr) max-content;
  }
}