/*
 * site.fixes.css
 *
 * Targeted overrides for measured layout/perf defects on top of the legacy
 * S3 style.cssz bundle and site.supplement.css. Deliberately NOT wrapped in
 * @layer: layered styles always lose to unlayered CSS, and every rule here
 * has to beat the legacy bundle.
 *
 * Revert: remove the <link> to this file from
 * _includes/common_scripts_and_styles.inc.php. This file can stay on disk.
 */

/* Fix 1: Store badges clip at narrow widths.
   site.cssz sets min-width: 338px on the Mac badge and tries to undo it with
   `#stores .storeBtn#Mac`, but the markup id is `store`, not `stores`, so
   that selector never matches. */
.stores .storeBtn#Mac,
.stores .storeBtn.Mac {
  min-width: 0;
}

/* min() keeps auto-fit tracks from exceeding a narrow container */
#store,
#stores {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
}
.storeItem {
  box-sizing: border-box;
}

/* Fix 3: Make print work.
   The only print CSS today is the h5bp default inside the gzipped bundle. */
@media print {
  .top-navigation,
  .footer-container,
  .st-sticky-share-buttons,
  .sharethis-inline-share-buttons,
  .xpromo-container,
  .mash-download-ad,
  .newsletter-signup,
  .social-widgets,
  .widgets,
  #facebookLikeWidget {
    display: none !important;
  }

  /* Legacy h5bp appends href to every anchor. Keep it only where a URL is
     actually useful on paper. */
  a[href]::after {
    content: none;
  }
  a[href^="http"]:not([href*="mashplus.com"])::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }

  /* site.supplement.css sets these with !important */
  html,
  body {
    background-image: none !important;
    background-color: #fff !important;
  }
  .content,
  .frosted-glass,
  .intro {
    background: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
  }
  img,
  li {
    break-inside: avoid;
  }
}

/* Fix 4: Stop applying the prose measure to the whole homepage column.
   body.editorial .content-body { max-width: 68ch } caps the container, so
   the 8-card feature grid renders narrower than its card. Moving the
   measure from the container to its text children fixes both the grid width
   and the h1/prose left-edge misalignment. Scoped to body#home so the
   editorial blog pages are untouched. */
body#home .content-body {
  max-width: none;
}
body#home .content-body > :where(p, ol, ul, h3) {
  max-width: 68ch;
}