/* Mobile scroll performance patch
   Purpose: reduce section-by-section stutter on phones without changing desktop layout.
   This file is intentionally loaded last on every HTML page. */

@media (max-width: 1024px) {
  html,
  body {
    scroll-behavior: auto !important;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  *,
  *::before,
  *::after {
    scroll-snap-type: none !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }

  /* Backdrop blur and glass effects are expensive on mobile while scrolling. */
  .site-header,
  .mobile-header,
  .mobile-menu,
  .mobile-nav,
  .smart-back,
  .smart-back-pill,
  .sticky-return-nav,
  .tap-to-call,
  .local-trust-card,
  .booking-widget-shell,
  .booking-widget-main-card,
  .booking-widget-aside-card,
  .hero-card,
  .trust-card,
  .service-card,
  .resource-card,
  .review-card,
  .patient-option-card,
  .insurance-card,
  .footer-card,
  [class*="glass"],
  [class*="blur"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Prevent decorative transforms/animations from forcing repaints during scroll. */
  .homepage-top-visual-banner *,
  .homepage-physician-intro *,
  .home-trust-panel *,
  .trust-card,
  .service-card,
  .resource-card,
  .review-card,
  .patient-option-card,
  .insurance-card,
  .booking-calendar-day,
  .btn,
  .button,
  .cta-button {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  /* Keep hover/tap effects from translating cards while a user scrolls on touch screens. */
  .trust-card:hover,
  .service-card:hover,
  .resource-card:hover,
  .review-card:hover,
  .patient-option-card:hover,
  .insurance-card:hover,
  .booking-calendar-day:hover,
  .btn:hover,
  .button:hover,
  .cta-button:hover {
    transform: none !important;
  }

  /* Help the browser skip offscreen rendering work on long stacked mobile pages. */
  section,
  main > div,
  .site-section,
  .section,
  .content-section,
  .page-section,
  .booking-widget-pane,
  .service-detail-card,
  .resource-detail-card,
  .review-card,
  .service-card,
  .trust-card {
    content-visibility: auto;
    contain-intrinsic-size: 1px 720px;
  }


  /* Keep floating navigation anchored to the viewport.
     content-visibility on the wrapper creates a containing block that can break position: fixed. */
  .return-nav-wrap,
  .smart-back-wrap,
  .sticky-return-wrap,
  .sticky-return-nav,
  .smart-back,
  .smart-back-pill,
  [data-smart-back],
  [data-sticky-return-nav] {
    content-visibility: visible !important;
    contain: none !important;
    contain-intrinsic-size: auto !important;
  }

  /* Keep header/menu layers stable without expensive visual effects. */
  .site-header,
  .mobile-header,
  .mobile-menu {
    transform: none !important;
    filter: none !important;
  }
}

@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: auto !important;
  }
}

@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  html,
  body {
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  *,
  *::before,
  *::after {
    scroll-snap-type: none !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }
}

/* Mobile form focus polish: prevent iOS Safari zooming fields below 16px. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  input,
  select,
  textarea,
  button {
    font-size: 16px !important;
  }
}

/* Mobile form focus polish override:
   This targets the more specific legacy form selectors that previously held fields at 15.5px. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .contact-page-field input,
  .contact-page-field select,
  .contact-page-field textarea,
  .booking-widget-form input,
  .booking-widget-form select,
  .booking-widget-form textarea,
  .booking-field-grid input,
  .booking-field-grid select,
  .booking-field-grid textarea,
  .form-field input,
  .form-field select,
  .form-field textarea,
  .js-form input,
  .js-form select,
  .js-form textarea {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
}