/* AK Roadside: mobile layer over the original Webflow styles.
   Every rule sits inside a max-width query, so >=992px renders exactly as the Webflow site did
   (gate: python mobile_check.py --desktop). Loaded after the Webflow stylesheet on every page. */

@media screen and (max-width: 991px) {
  /* iOS Safari paints background-attachment:fixed as a hugely zoomed image */
  .start-save-section { background-attachment: scroll; }
  /* city pages: the address bar under the map was nowrap and pushed the page sideways at 768px */
  .map-bar .map-bar-text { white-space: normal; overflow-wrap: anywhere; }  /* beats the page's inline nowrap */
}

@media screen and (max-width: 767px) {
  /* text over photos: darken the photo so white/orange headings stay readable on a small screen */
  .start-save-section { box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.45); }

  /* tap targets: 44px minimum height (Apple HIG / WCAG 2.5.5) */
  .fot-links-menu, .footer-links, .flink, .ph-number, .link-5, .grey-link, .animation-link,
  .common-main-locations-linkblock {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  a.flink, a.fot-links-menu { min-width: 44px; justify-content: center; }
  .ak-nav-cta { min-height: 40px !important; }
  .social-link-box, .social-btn { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }

  /* form checkboxes were 13px */
  .w-checkbox-input { width: 22px; height: 22px; margin-top: 1px; flex-shrink: 0; }
  .w-checkbox { display: flex; gap: 8px; align-items: flex-start; padding-left: 0; }
  .w-checkbox-input { margin-left: 0; float: none; }

  /* nothing below 12.5px */
  .ak-nav-cta-text, .trust-item { font-size: 13px !important; }
  .common-small-tagline { font-size: 12.5px; }
}