/*
 * Corrections on top of the mirrored stylesheets.
 *
 * Kept separate so assets/css/{style,homecolor,responsive,bootstrap}.css stay faithful copies of
 * the original site and every deliberate change is reviewable in one place.
 * Loaded last, so these rules win without needing !important.
 */

/* ------------------------------------------------------------------
 * Horizontal scroll on phones (home page).
 *
 * Measured at 375px: document scrollWidth was 400px. Two causes:
 *   1. the decorative #circle is 529px wide and sticks out to x=400;
 *   2. `.row.ful-border` keeps Bootstrap's -15px gutter without a padded .container around it,
 *      so it starts at x=-15 and its content is clipped off the left edge.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
  html,
  body {
    overflow-x: hidden;
  }

  /* decorative only: never let it create scroll area */
  #circle {
    max-width: 100vw;
    overflow: hidden;
  }

  /* restore the gutter so the cards are not cut off on the left */
  .row.ful-border {
    margin-left: 0;
    margin-right: 0;
  }

  .row.ful-border > [class^="col-"],
  .row.ful-border > [class*=" col-"] {
    padding-left: 12px;
    padding-right: 12px;
  }
}