/* ============================================================
   Haven Home Loans — Responsive overrides
   The site uses inline JSX styles everywhere, which can't be
   targeted by media queries directly. We use attribute-substring
   selectors with !important to override at specific breakpoints.
   Pattern matches the existing override approach in colors_and_type.css
   ============================================================ */

/* Prevent iOS auto-scaling but DON'T set overflow on html/body.
   `overflow-x: hidden` on html/body kills `position: sticky` because it
   creates a new scroll container — that broke the JourneyHero scroll
   story on mobile. Use `overflow-x: clip` on body instead (modern,
   doesn't create a scroll container). Supported iOS 16+, all modern
   browsers. Falls back to default (visible) on very old browsers, which
   is fine — worst case is a scrollable page. */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }

/* ============================================================
   ≤ 1080px : container fluidity
   The shared Nav, Footer, and section wrappers cap at 1080px.
   Below that, let them fill the viewport.
   ============================================================ */
@media (max-width: 1080px) {
  [style*="max-width: 1080"] {
    max-width: 100% !important;
  }
}

/* ============================================================
   ≤ 768px : phone / tablet portrait
   Major layout collapse: stack grids, shrink display type,
   hide the desktop nav menu cluster.
   ============================================================ */
@media (max-width: 768px) {

  /* ---- Display-sized inline text: shrink ---- */
  [style*="font-size: 72px"] { font-size: 36px !important; line-height: 1.1 !important; letter-spacing: -0.5px !important; }
  [style*="font-size: 68px"] { font-size: 34px !important; line-height: 1.1 !important; letter-spacing: -0.5px !important; }
  [style*="font-size: 62px"] { font-size: 32px !important; line-height: 1.1 !important; letter-spacing: -0.5px !important; }
  [style*="font-size: 56px"] { font-size: 30px !important; line-height: 1.1 !important; letter-spacing: -0.4px !important; }
  [style*="font-size: 48px"] { font-size: 26px !important; line-height: 1.15 !important; }
  [style*="font-size: 44px"] { font-size: 24px !important; line-height: 1.15 !important; }
  [style*="font-size: 40px"] { font-size: 24px !important; line-height: 1.2 !important; }
  [style*="font-size: 36px"] { font-size: 22px !important; line-height: 1.2 !important; }
  [style*="font-size: 32px"] { font-size: 20px !important; line-height: 1.25 !important; }
  [style*="font-size: 30px"] { font-size: 19px !important; line-height: 1.3 !important; }
  [style*="font-size: 28px"] { font-size: 18px !important; line-height: 1.3 !important; }

  /* ---- Grids: collapse ---- */
  /* 4-column grids (e.g. StatsStrip) → 2 columns */
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* 3-column grids → 1 column */
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  /* 2-column grids → 1 column */
  [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
  }
  /* Asymmetric 2-column grids (e.g. "1.4fr 1fr 1fr 1fr", "1fr 1.2fr") → 1 column */
  [style*="grid-template-columns: 1.4fr"],
  [style*="grid-template-columns: 1.1fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ---- Nav: hide desktop link cluster + Broker login, show hamburger ---- */
  .hv-nav-links,
  .hv-nav-broker {
    display: none !important;
  }
  .hv-nav-hamburger {
    display: inline-flex !important;
  }
  /* Tighten nav sticky padding on mobile */
  header[style*="position: sticky"] {
    padding: 0 8px !important;
  }
  header[style*="position: sticky"] nav {
    padding: 8px 12px !important;
  }

  /* ---- Vertical spacing: compress ---- */
  [style*="margin-top: 128"] { margin-top: 56px !important; }
  [style*="margin-top: 96"]  { margin-top: 48px !important; }
  [style*="margin-top: 80"]  { margin-top: 40px !important; }
  [style*="margin-top: 72"]  { margin-top: 36px !important; }
  [style*="margin-top: 64"]  { margin-top: 32px !important; }

  /* The auto-centered margin patterns from <section> wrappers */
  [style*="margin: 128px auto"] { margin: 56px auto 0 !important; }
  [style*="margin: 96px auto"]  { margin: 48px auto 0 !important; }
  [style*="margin: 72px auto"]  { margin: 36px auto 0 !important; }
  [style*="margin: 64px auto"]  { margin: 32px auto 0 !important; }

  [style*="padding: 96px"]   { padding: 40px 16px !important; }
  [style*="padding: 80px"]   { padding: 36px 16px !important; }
  [style*="padding: 64px"]   { padding: 32px 16px !important; }
  [style*="padding: 48px"]   { padding: 24px 16px !important; }

  /* ---- Inner padding for cards / panels ---- */
  [style*="padding: 32px"]   { padding: 20px !important; }
  [style*="padding: 40px"]   { padding: 24px !important; }
  [style*="padding: 26px 22px"] { padding: 18px 16px !important; }

  /* ---- Headings inside h1/h2/h3 (when fontSize uses spread/var, not literal) ---- */
  h1 { font-size: 30px !important; line-height: 1.1 !important; }
  h2 { font-size: 26px !important; line-height: 1.15 !important; }
  h3 { font-size: 22px !important; line-height: 1.2 !important; }

  /* ---- Forms / inputs: full-width and large enough to tap ---- */
  input, select, textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* prevent iOS zoom on focus */
  }

  /* ---- Buttons: ensure they don't overflow tiny columns ---- */
  button, a[style*="display: inline-block"][style*="background"] {
    max-width: 100%;
  }
}

/* ============================================================
   Hamburger button visibility — hidden on desktop, shown on phone
   The button is rendered always; CSS controls visibility.
   The mobile rule above takes care of showing it.
   ============================================================ */
@media (min-width: 769px) {
  .hv-nav-hamburger { display: none !important; }
  .hv-mobile-menu { display: none !important; }
}

/* ============================================================
   ≤ 480px : small phones — even tighter
   ============================================================ */
@media (max-width: 480px) {
  /* 4-column grids fully collapse on small phones */
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  /* Display type extra tight */
  [style*="font-size: 72px"] { font-size: 32px !important; }
  [style*="font-size: 62px"] { font-size: 28px !important; }
  [style*="font-size: 56px"] { font-size: 26px !important; }

  /* Section wrappers: zero side padding to maximize content width */
  [style*="padding: 0 16px"] { padding: 0 12px !important; }
}