/* ============================================================================
   Mobile responsiveness for the Aequitas marketing site.

   The Claude Design export ships desktop-only inline styles (no media queries).
   The dc-runtime renders those through React, so the browser NORMALIZES each
   inline style — `font-size: 54px` (space after colon), `.98fr` -> `0.98fr`,
   `repeat(3,1fr)` -> `repeat(3, 1fr)`. The attribute selectors below match those
   NORMALIZED forms (verified against the live DOM), then override with
   `!important` at small viewports. Linked from every page's helmet. If the
   export is regenerated, re-verify the normalized strings.
   ========================================================================== */

/* never allow the page to scroll sideways */
html, body { max-width: 100%; overflow-x: hidden; }

/* ------------------------------------------------------------ navigation */
/* Desktop links/CTAs show by default; the hamburger + mobile menu are hidden
   until the breakpoint. The mobile menu's open/close is driven by the nav's
   own runtime state (max-height/opacity); these rules only gate by viewport. */
@media (min-width: 861px) {
  .nav-mobile { display: none !important; }
}
@media (max-width: 860px) {
  .nav-desktop { display: none !important; }
  .nav-burger { display: inline-flex !important; }
}

/* ------------------------------------------------------------------ tablet */
@media (max-width: 900px) {
  /* multi-column CONTENT grids collapse to a single column.
     (Data/comparison tables — 2.2fr 1fr 1fr, 2fr 1fr 1fr 1fr, 1.4fr 1fr 1fr —
     are deliberately left alone so their rows stay aligned.) */
  [style*="grid-template-columns: 1.02fr 0.98fr"],
  [style*="grid-template-columns: 1.05fr 0.95fr"],
  [style*="grid-template-columns: 0.9fr 1.1fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 1.2fr 0.8fr"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* 4-up stat grids drop to two columns */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* tighten the 1200px section gutters */
  [style*="max-width: 1200px"] {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

/* ------------------------------------------------------------------- phone */
@media (max-width: 640px) {
  /* remaining 2-up grids stack (this value starts with "1fr 1fr", so it does
     NOT match 1.4fr/2.2fr/2fr table columns) */
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* hero + section headings scale down */
  [style*="font-size: 54px"] { font-size: 32px !important; }
  [style*="font-size: 50px"] { font-size: 31px !important; }
  [style*="font-size: 46px"] { font-size: 29px !important; }
  [style*="font-size: 42px"] { font-size: 28px !important; }
  [style*="font-size: 40px"] { font-size: 27px !important; }
  [style*="font-size: 38px"] { font-size: 26px !important; }
  [style*="font-size: 36px"] { font-size: 25px !important; }
  [style*="font-size: 34px"] { font-size: 24px !important; }

  /* tighter gutters on phones */
  [style*="max-width: 1200px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* data/comparison tables we keep as grids: shrink type so columns fit.
     (1.4fr 1fr 1fr is omitted — its selector would also match the footer's
     1.4fr 1fr 1fr 1fr, which is stacked, and shrink its text.) */
  [style*="grid-template-columns: 2.2fr 1fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] {
    font-size: 11px !important;
  }
}