/* Phone fixes from the mobile audit (Oct 2026). Loaded last on every page of the classic site,
   the redesign and /app/, so these rules win without fighting each file's own styles.
   Re-test with: scratchpad tools/mobile-audit.mjs (iPhone SE → Pro Max, 360px Android). */

/* iOS: don't let Safari inflate text after rotating to landscape */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (max-width: 768px) {
  /* 1. iPhone zooms the whole page into any field whose text is under 16px when it's tapped.
        16px stops that on every search box, filter and form. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
  select,
  textarea { font-size: 16px !important; }

  /* 2. Nothing smaller than 12px: labels and badges people actually need to read */
  .meta-item, .detail-item, .card-badge, .card-posted,
  .mea-dock-label, #mea-dock-role-text,
  .article-tag, .section-kicker, .btn-sub, .badge-text,
  .web-amenity-chip, .mandate-badge, .web-rating-badge, .web-card-ref, .web-card-agent,
  .meta-label, .pd-sim-badge,
  .agent-card__detail-label, .agent-cert-badge, .va-card__area-tag,
  .acc-stat__label, .acc-alltime__label,
  .law-banner__ref, .law-banner__category, .law-banners__label,
  .ntfy-item-time, .card-location span, .search-field label span, .rc-wrap > div:first-child,
  .inspector-agent-info span, .hero-scene-label strong, .style-content p, .cta-pill,
  table th { font-size: 12px !important; }

  /* 3. Comfortable thumb targets (44px tall) for links and buttons used on their own */
  .mea-footer-more, .verify-apply-link, .va-register-link, .pd-map-link, .gd-chip,
  .law-banner__cta, #clinic-copy-btn, .web-btn-inspect,
  .ap-crumbs a, .ab-crumbs a, .gd-crumbs a, .contact-secondary a, .agents-trust-strip__item a, .inspector-body > a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .btn-like-icon { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
  #web-state-select { min-height: 44px; }
  details > summary { padding-top: 10px; padding-bottom: 10px; }

  /* 4. Property pages have a fixed contact bar on phones: keep the end of the page above it */
  body:has(.pd-mobile-contact) { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
  /* …and when the floating "Install app" button is showing, keep the page end clear of it too */
  html.mea-has-install body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
  html.mea-has-install body:has(.mea-mobile-dock, .pd-mobile-contact) { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* /properties/ on phones: filters fold behind one button (layouts/properties/list.html) */
.sf-toggle[hidden] { display: none; }
@media (max-width: 768px) {
  .filters-section.is-collapsed .search-bar-container { display: none; }
  .sf-toggle {
    display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); margin: 0 16px 14px;
    min-height: 56px; padding: 10px 16px; border-radius: 14px; border: 1px solid #d1d5db;
    background: #ffffff; color: #111827; font: inherit; text-align: left; cursor: pointer;
  }
  .sf-toggle svg { flex: none; color: #15803d; }
  .sf-toggle__text { display: flex; flex-direction: column; flex: 1; line-height: 1.25; }
  .sf-toggle__text strong { font-size: 16px; }
  .sf-toggle__text small { font-size: 13px; color: #4b5563; }
  .sf-toggle__count { flex: none; padding: 4px 10px; border-radius: 999px; background: #15803d; color: #fff; font-size: 13px; font-weight: 700; }
  .sf-toggle:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  html[data-theme="dark"] .sf-toggle { background: #111a2c; color: #e8edf5; border-color: #2a3850; }
  html[data-theme="dark"] .sf-toggle__text small { color: #a8b4c7; }
}