/*
 * Site-wide layout overrides for the legacy Scam Broker Watch theme.
 *
 * Loaded AFTER the minified legacy stylesheets in the (site) layout so these
 * rules win by source order. Three problems are fixed here:
 *
 *  1. Horizontal scroll on mobile. The legacy theme only guards the homepage
 *     (`home.min.css` sets `body { overflow-x: hidden }`); every other page had
 *     a wide element (fixed-width filters, 50px image margins) pushing the
 *     viewport out. `overflow-x: clip` on both roots stops it everywhere and,
 *     unlike `hidden`, does not create a scroll container that breaks sticky
 *     positioning.
 *
 *  2. iPad / small-tablet breakpoint gap. `responsive.min.css` still applies
 *     `.wrapper { padding: 0 40px 0 100px }` between 831px and 1296px, a rule
 *     written for a fixed 60px `#shortcuts` sidebar the React header no longer
 *     renders. At exactly iPad landscape widths that left a 100px dead gutter.
 *     The two rules below narrow that padding to a plain 40px for the whole
 *     band, then let the legacy 20px mobile padding take back over at 830px.
 *
 *  3. Fluid images. Legacy content ships `<img>`s with fixed `width` attributes;
 *     `max-width: 100%` keeps them inside the viewport on narrow screens.
 */

html,
body {
  overflow-x: clip;
}

/* Kill the dead `#shortcuts` gutter on tablets, keep mobile's own 20px. */
@media (min-width: 51.876em) and (max-width: 81em) {
  .wrapper,
  .wrapper-large {
    padding: 0 40px;
  }
}

img {
  max-width: 100%;
  height: auto;
}

/* Splide carousels and the hero grid must never force a global scrollbar. */
#intro_text,
#products_news,
#testimonials {
  overflow: hidden;
}