/* responsive-fixes.css
 * Targeted safety-net for inline-styled grids/flex/tables that escape design-system.css.
 * Scoped via opt-in classes (.rgrid, .tablewrap) so it never overrides intentional layouts.
 * NO global !important rules. NO brand-token changes. NO selector matches against [style*="..."].
 *
 * Usage:
 *   <table> wrapped in <div class="tablewrap"> for horizontal scroll on narrow screens
 *   <div class="rgrid">…</div> for inline grids that need predictable mobile stacking
 *
 * Existing design-system.css already handles:
 *   - .grid-2/3/4 → 1fr at <=768px
 *   - .navbar-nav mobile flyout (.navbar-mobile-toggle + .mobile-menu)
 *   - .hero-cta column at <=768px
 *   - .footer-grid stacking at 1024px and 768px
 */

/* ── Page baseline ──────────────────────────────────────── */
html, body { -webkit-text-size-adjust: 100%; }
img, svg { max-width: 100%; height: auto; }

/* ── Table horizontal-scroll wrapper (opt-in) ───────────── */
.tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 16px 0;
}
.tablewrap table {
  margin: 0;
}

/* ── Generic responsive grid wrapper (opt-in) ───────────── */
.rgrid {
  display: grid;
  gap: 24px;
}
@media (max-width: 768px) {
  .rgrid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ── Mobile-menu visibility helper ──────────────────────── */
/* The design system shows .navbar-nav.open via existing rules at <=768px.
 * This adds Esc-key + outside-click compatibility hooks (used by the
 * inline JS that already exists on every page). No layout effect. */
@media (max-width: 768px) {
  body.menu-open { overflow: hidden; }
}