/* Sitewide phone/tablet fixes, linked into every exported page by deploy/build.mjs.
   Loaded after each page's own <style>; every rule is prefixed `html body #dc-root` + !important
   so it wins over the page rules and inline styles regardless of order. */

/* One-column grids use `1fr`, which stretches to the widest child (photo stacks, cards,
   nowrap buttons) and pushes content past the screen edge. Let grid items shrink. */
@media (max-width: 900px) {
  html body #dc-root [style*="grid-template-columns"] > *,
  html body #dc-root [style*="grid-template-columns"] > [style*="display: contents"] > *,
  html body #dc-root [style*="grid-template-columns"] > [style*="display:contents"] > * { min-width: 0 !important; }
  html body #dc-root header[style*="sticky"] > div:first-child > a > span { font-size: 30px !important; }
  /* Chiropractic: page CSS stacks the MRI photo but its inline desktop `left` pushed it off screen */
  html body #dc-root .mri-photo { left: 0 !important; }
}

@media (max-width: 560px) {
  /* header: smaller logo, menu button on the logo row (was ~220px tall at 320px wide) */
  html body #dc-root header[style*="sticky"] > div:first-child { padding: 12px 60px 12px 20px !important; justify-content: flex-start !important; }
  html body #dc-root header[style*="sticky"] > div:first-child > a { text-align: left !important; }
  html body #dc-root header[style*="sticky"] > div:first-child > a > span { font-size: 19px !important; letter-spacing: 0.06em !important; line-height: 1.15 !important; display: inline-block !important; }
  html body #dc-root header[style*="sticky"] > div:nth-child(2) { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; padding: 0 10px !important; align-items: center !important; }
  html body #dc-root header[style*="sticky"] .mobile-nav-toggle { position: static !important; }

  /* 48px side gutters → 20px */
  html body #dc-root section[style*="48px"],
  html body #dc-root section > [style*="px 48px"],
  html body #dc-root footer [style*="px 48px"],
  html body #dc-root [style*="max-width"][style*="padding: 48px"],
  html body #dc-root [style*="max-width"][style*="padding:48px"],
  html body #dc-root [style*="max-width"][style*="padding: 0px 48px"],
  html body #dc-root [style*="max-width"][style*="padding:0 48px"],
  html body #dc-root [style*="max-width"][style*="px 48px 0px"],
  html body #dc-root [style*="max-width"][style*="0px 48px 88px"],
  html body #dc-root [style*="max-width"][style*="0 48px 88px"],
  html body #dc-root [style*="max-width"][style*="32px 48px 40px"] { padding-left: 20px !important; padding-right: 20px !important; }

  /* hero copy sized for a photo beside it (min-width:300px, max-width:min(…, 48%)) gets the full width */
  html body #dc-root [style*="min-width: 300px"],
  html body #dc-root [style*="min-width:300px"],
  html body #dc-root [style*="max-width: min("],
  html body #dc-root [style*="max-width:min("] { min-width: 0 !important; max-width: 100% !important; }

  /* long pill buttons wrap instead of running off the edge */
  html body #dc-root button { white-space: normal !important; max-width: min(100%, calc(100vw - 40px)) !important; text-align: center !important; }
  html body #dc-root button:not([style*="width: 100%"]):not([style*="width:100%"]) { width: max-content !important; }

  html body #dc-root img,
  html body #dc-root image-slot { max-width: 100% !important; }
}