/* ==========================================================================
   District Estate — cross-page responsive fixes
   --------------------------------------------------------------------------
   Several city and blog pages were built standalone with their own inline
   styles, so they don't inherit styles.css. This file carries the small set of
   fixes those pages need and is safe to load anywhere: every rule is scoped to
   a specific overflow problem rather than restyling the page.

   Problems addressed:
     1. Wide comparison tables pushed the document 58–75px past a 375px
        viewport, so the whole page scrolled sideways on a phone.
     2. Inputs without border-box sizing overflowed their container once
        padding was added.
   ========================================================================== */

/* 1. Comparison tables scroll inside their own box instead of stretching
      the page. The wrapper keeps the table readable without shrinking the
      text to nothing. */
@media (max-width: 768px) {
  table.comparison-table,
  table.compare-table,
  table.pricing-table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* A scrolling table still needs its columns to keep their shape. */
  table.comparison-table > thead,
  table.comparison-table > tbody,
  table.compare-table > thead,
  table.compare-table > tbody,
  table.pricing-table > thead,
  table.pricing-table > tbody {
    display: table;
    width: max-content;
    min-width: 100%;
  }
}

/* 2. Form controls must include padding in their width, or a 100%-wide input
      inside a padded container overflows it. */
input,
select,
textarea,
button {
  box-sizing: border-box;
  max-width: 100%;
}

/* 3. Media and embeds should never exceed their container. */
img,
video,
iframe,
svg {
  max-width: 100%;
}

/* 4. Long unbroken strings (URLs, email addresses) wrap instead of forcing
      the layout wider. */
p, li, td, th, h1, h2, h3, h4 {
  overflow-wrap: break-word;
}