/* ============================================================================
   MP NATIVE FEEL — site-wide "feels like an iPhone app" + perceived-speed pass.
   ============================================================================
   Unlike mobile-ios.css (which only repaints the bottom nav, and only for
   real iOS user agents via body.is-ios), everything in this file applies to
   EVERY visitor on EVERY device. The goal isn't to fake an iPhone for
   Android/desktop users — it's to borrow the specific things that make iOS
   UI feel fast and alive (momentum scrolling, instant tap response, spring-
   like press feedback, frosted sticky surfaces, no layout jank) and apply
   them everywhere, while iPhone/iPad visitors additionally get System
   Font = San Francisco for free via style.css's --font-body/--font-display.

   Loaded after mp-style (see functions.php mp_enqueue_assets), so it can
   safely override.
   ========================================================================= */

/* ── 1. Kill the old mobile 300ms tap delay + selection chrome ─────────────
   touch-action: manipulation tells the browser "this element only ever
   taps/scrolls, never double-tap-zooms" so it fires click immediately
   instead of waiting ~300ms to see if a second tap is coming. This alone
   is one of the biggest "why does this feel laggy" fixes on mobile web. */
a, button, input, select, textarea, label,
.mp-btn, .mp-card, [role="button"], [onclick] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── 2. Native momentum scrolling everywhere there's an overflow area ──────
   iOS Safari needs this explicitly on custom scroll containers (carousels,
   modals, drawers) or they scroll "dead" instead of with inertia. */
.mp-scroll, .mp-carousel, .mp-row-scroll, .mp-drawer-panel,
[style*="overflow-x"], [style*="overflow-y"], .modal-body {
  -webkit-overflow-scrolling: touch;
}

/* Smooth anchor/programmatic scrolling site-wide (respects the
   prefers-reduced-motion override already declared in mp-tokens.css). */
html {
  scroll-behavior: smooth;
  /* Stop a swipe at the top/bottom of the page from triggering the
     browser's own pull-to-refresh/back-navigation gesture — the same
     "contained" scroll feel a native app has. */
  overscroll-behavior-y: contain;
}

/* ── 3. Continuous-curvature corners, the iOS "squircle" language ──────────
   iOS's corner radius isn't a single circular arc — it LOOKS softer than
   the same radius on Android because of the continuous-curvature curve.
   True squircles need clip-path/SVG, which is too heavy to retrofit
   everywhere; superellipse-like curvature is approximated well enough by
   pairing a slightly larger radius with `overflow: hidden`, which is what
   the rules below do for the most visible surfaces. */
.mp-card, .property-card, .listing-card, .mp-modal, .mp-sheet,
.mp-btn, button.mp-btn, .mp-input, input, select, textarea {
  border-radius: var(--mp-r-lg, 14px);
}

/* ── 4. iOS-style press feedback (dim + slight scale, no color flash) ──────
   Applied globally so every button/card, not just the bottom nav, responds
   the instant a finger touches it — the #1 thing that makes an interface
   feel "alive" rather than laggy, independent of actual network speed. */
.mp-btn, button, a.mp-btn, .property-card, .listing-card, .mp-card-tappable {
  transition: transform var(--mp-fast, .15s) var(--mp-ease, cubic-bezier(.4,0,.2,1)),
              opacity var(--mp-fast, .15s) var(--mp-ease, cubic-bezier(.4,0,.2,1));
}
.mp-btn:active, button:active, a.mp-btn:active,
.property-card:active, .listing-card:active, .mp-card-tappable:active {
  transform: scale(0.97);
  opacity: 0.85;
}

/* ── 5. Frosted / glass sticky surfaces everywhere, not just iOS UA ────────
   Any sticky or fixed header/toolbar/filter-bar gets the same translucent
   blur treatment as the bottom tab bar, so scrolling content visibly slides
   *under* glass instead of disappearing behind a flat color — the signature
   iOS chrome look. Falls back to a solid background automatically on the
   (now rare) browsers without backdrop-filter support. */
#site-header,
.mp-sticky-bar,
.mp-filter-bar.is-sticky,
.mp-toolbar.is-sticky {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
body.dark-mode #site-header,
body.dark-mode .mp-sticky-bar,
body.dark-mode .mp-filter-bar.is-sticky,
body.dark-mode .mp-toolbar.is-sticky {
  background: rgba(15, 23, 42, 0.82);
}

/* ── 6. Prevent images from ever overflowing/collapsing their box ─────────
   A page that doesn't jump around while it loads FEELS faster even when the
   actual byte count/timing is identical. Actual aspect-ratio reservation
   still needs width/height attributes set per-image in the template PHP
   (attr()-based CSS aspect-ratio isn't supported by browsers yet). */
img {
  height: auto;
  max-width: 100%;
}

/* ── 7. Below-the-fold render deferral (perceived + actual speed) ──────────
   content-visibility: auto tells the browser to skip layout/paint work for
   sections that are off-screen until they're about to be scrolled into
   view — free speed-up on long listing/property pages with zero visual
   change. contain-intrinsic-size keeps scrollbar length stable so it
   doesn't jump as sections are hit. */
.mp-below-fold, .mp-lazy-section, footer#colophon {
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}

/* ── 8. Native-feeling focus ring (keyboard users only, no mouse/touch noise) */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent, #7C3AED);
  outline-offset: 2px;
}

/* ── 9. Safe-area padding for anything pinned to a screen edge ─────────────
   Covers notch/home-indicator devices for any fixed element the theme adds
   later, beyond the bottom nav which already handles its own inset. */
.mp-fixed-top    { padding-top: max(env(safe-area-inset-top, 0px), 0px); }
.mp-fixed-bottom { padding-bottom: max(env(safe-area-inset-bottom, 0px), 0px); }
.mp-fixed-left   { padding-left: max(env(safe-area-inset-left, 0px), 0px); }
.mp-fixed-right  { padding-right: max(env(safe-area-inset-right, 0px), 0px); }