/* ===========================================================================
   SMS Speedway — mobile responsiveness
   Added 2026-08-24.

   Loaded AFTER the inline <style> block on every page so these rules win on
   source order. Purely additive: it changes no markup and removes nothing.

   Scope note: everything that changes the *look* of an element is confined to
   the phone/tablet breakpoint, so the desktop rendering is unchanged from what
   production served before this change. The only global rules are the fluid
   type ramps, and those clamp to the original 70px / 30px at desktop widths
   (verified at 1440px against the live site).

   Every rule below fixes a defect measured with Playwright at 320 / 375 / 390 /
   393 px in both Chromium and WebKit.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Hero typography
   .hero-title was a fixed 70px and .hero-text a fixed 30px. On a 320px phone
   the single word "Management" on the BCM page measured 533px inside a 258px
   container, pushing that page 244px wider than the screen. clamp() holds the
   original sizes on desktop and scales down smoothly on narrow screens.
   --------------------------------------------------------------------------- */
.hero-title {
  font-size: clamp(2.125rem, 9vw, 70px);
  line-height: 1.08;
  overflow-wrap: break-word;
  word-wrap: break-word;          /* legacy Safari */
  hyphens: auto;
}

.hero-text {
  font-size: clamp(1.0625rem, 4.5vw, 30px);
  line-height: 1.35;
}

/* ===========================================================================
   Phone and small-tablet only — desktop is deliberately left alone.
   =========================================================================== */
@media only screen and (max-width: 767.98px) {

  /* -------------------------------------------------------------------------
     2. Nothing may force a horizontal scrollbar.
     NOTE: deliberately no blanket `height: auto` — several logos are sized by
     an HTML height attribute and resetting it would blow them up to their
     natural size (fsqs.jpg is 868x1057).
     ------------------------------------------------------------------------- */
  img,
  svg,
  iframe,
  video,
  table {
    max-width: 100%;
  }

  body {
    overflow-x: hidden;           /* belt and braces against a stray widget */
  }

  /* The Kerfuffle review widget renders a fixed 300px iframe, which overflows
     a 320px viewport once body padding is taken into account. */
  #review-embed-code iframe {
    max-width: 100%;
    width: 100%;
  }

  /* -------------------------------------------------------------------------
     3. Accreditation logo strip
     The three logos sat in bare `.col` columns that never stack, each sized by
     a fixed height attribute. Their aspect ratios differ wildly (FSQS is
     portrait 868x1057, ICG landscape 863x271, Kerfuffle 270x51), so they
     rendered at 49x60, 191x60 and 212x40 and the Kerfuffle column was pushed
     onto a line of its own, 390px wide. Here they are sized to a common visual
     box and allowed to wrap and centre.
     ------------------------------------------------------------------------- */
  #accreditations .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.125rem 1.5rem;
  }

  #accreditations .col {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    padding: 0;
  }

  /* Sized by an explicit height, exactly as the original markup did. NOT
     `height: auto` — icgLogo.svg carries only a viewBox with no width/height,
     so `auto` collapses it to 0x0 (measured). max-width + object-fit: contain
     keeps the wide Kerfuffle wordmark inside a common box without distorting
     any of them. */
  #accreditations img {
    height: 42px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
  }

  /* FSQS is the only portrait badge; at a height matched to the landscape
     logos it reads far heavier than the rest of the strip, so it is capped
     tighter. */
  #accreditations img[alt="FSQS Registered"],
  #accreditations a[href*="hellios"] img {
    height: 38px;
    max-width: 38px;
  }

  /* -------------------------------------------------------------------------
     4. Footer legibility and tap targets
     ------------------------------------------------------------------------- */
  .footer-copyright {
    font-size: 0.8125rem;
    line-height: 1.6;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .footer-copyright a {
    display: inline-block;
    padding: 0.15rem 0;
  }

  /* -------------------------------------------------------------------------
     5. Keep the hero off the screen edge
     ------------------------------------------------------------------------- */
  .jumbotron {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}