/* assets/css/jp-ios.css — Block 45 (2026-05-31)
   --------------------------------------------------------------------------
   iOS-aggressive polish layer for JetPatient mobile twins.

   Scoped strictly to @media (max-width:760px) and 'mobile-twin' bodies,
   so this file has ZERO effect on desktop. Provides:

     1. Safe-area-aware padding for notch + Dynamic Island + home indicator
     2. Standalone-mode enhancements (when launched from Add-to-Home-Screen)
     3. iOS tap polish — no blue tap-highlight, no double-tap-zoom delay,
        proper -webkit-tap-highlight-color
     4. Sheet-modal pattern (slide-up from bottom, iOS-native feel)
     5. Inertia scrolling on horizontal-scroll strips
     6. Status-bar-aware top spacing for the topbar/nav

   The destination of every native-feel mobile interaction lives here.
   --------------------------------------------------------------------------
*/

@media (max-width: 760px) {

  /* ── Safe-area variables (defaults so non-iOS browsers don't break) ── */
  :root {
    --jp-safe-top:    env(safe-area-inset-top, 0px);
    --jp-safe-bottom: env(safe-area-inset-bottom, 0px);
    --jp-safe-left:   env(safe-area-inset-left, 0px);
    --jp-safe-right:  env(safe-area-inset-right, 0px);

    /* iOS-tuned timing curves — matches iOS spring + ease patterns */
    --jp-ease-ios:        cubic-bezier(0.32, 0.72, 0, 1);     /* iOS spring */
    --jp-ease-ios-decel:  cubic-bezier(0.10, 0.40, 0.20, 1);  /* deceleration */
    --jp-ease-ios-accel:  cubic-bezier(0.50, 0.00, 0.95, 0.55); /* acceleration */
  }

  /* ── Remove iOS Safari's default blue tap-highlight ──────────────── */
  /* Replaced with subtle scale + opacity on .jp-card-tap / .jp-bnav-tab / etc */
  a, button, .jp-card-tap, .jp-bnav-tab, .jp-btn, [role="button"] {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; /* no long-press image save on icons */
    touch-action: manipulation;  /* eliminate 300ms double-tap delay */
  }

  /* ── Active-state subtle press feedback (replaces tap-highlight) ── */
  .jp-card-tap:active,
  .jp-bnav-tab:active,
  .jp-btn:active,
  a.clinic-card:active {
    opacity: 0.85;
    transform: scale(0.985);
    transition: transform 80ms var(--jp-ease-ios-accel),
                opacity 80ms var(--jp-ease-ios-accel);
  }

  /* ── Inertia-scroll horizontal strips (chip rows, card carousels) ── */
  .chip-row, .pill-row, .filter-chips, .tabs-scroll,
  [data-jp-hscroll], .jp-card-strip, .testimonial-strip {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .chip-row::-webkit-scrollbar,
  .pill-row::-webkit-scrollbar,
  .filter-chips::-webkit-scrollbar,
  .tabs-scroll::-webkit-scrollbar,
  [data-jp-hscroll]::-webkit-scrollbar,
  .jp-card-strip::-webkit-scrollbar,
  .testimonial-strip::-webkit-scrollbar {
    display: none;
  }

  /* ── Disable rubber-band overscroll on the main content (iOS) ─── */
  /* Bounce stays on internal scrollers; the page itself won't drag. */
  html, body {
    overscroll-behavior-y: none;
  }

  /* ── Safe-area-aware topbar / bottom-nav offsets ────────────────── */
  /* If the existing topbar uses .topbar or .jp-topbar, pad-top adds the
     notch inset so the navy bar visually starts behind the status bar
     and content starts below the inset. */
  .topbar, .jp-topbar, .trust-topbar, header[role="banner"] {
    padding-top: calc(var(--jp-safe-top, 0px) + 8px);
  }

  /* Bottom-nav: pad-bottom adds the home-indicator inset so the tab
     bar visually extends to the bottom but tap-targets remain above. */
  .jp-bnav, .bottom-nav, nav[aria-label="primary"][data-position="bottom"] {
    padding-bottom: calc(var(--jp-safe-bottom, 0px) + 8px);
  }

  /* ── Sticky bottom CTAs respect the home indicator ─────────────── */
  .jp-sticky-cta, [data-jp-sticky-bottom] {
    bottom: calc(var(--jp-safe-bottom, 0px) + 12px);
  }

  /* ── Left/right safe areas (landscape iPhone, hardly used but free) */
  .jp-app, main, [role="main"] {
    padding-left:  var(--jp-safe-left,  0px);
    padding-right: var(--jp-safe-right, 0px);
  }

  /* ── Sheet-modal pattern (iOS-native slide-up) ─────────────────── */
  .jp-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    transform: translateY(100%);
    transition: transform 320ms var(--jp-ease-ios);
    z-index: 1000;
    background: #fff;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.22);
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(var(--jp-safe-bottom, 0px) + 12px);
    will-change: transform;
  }
  .jp-sheet[data-jp-sheet-open="1"] {
    transform: translateY(0);
  }
  .jp-sheet-backdrop {
    position: fixed; inset: 0; z-index: 999;
    background: rgba(15, 23, 42, 0);
    transition: background 320ms var(--jp-ease-ios);
    pointer-events: none;
  }
  .jp-sheet-backdrop[data-jp-sheet-open="1"] {
    background: rgba(15, 23, 42, 0.45);
    pointer-events: auto;
  }
  .jp-sheet-grabber {
    width: 38px; height: 5px;
    margin: 10px auto 6px;
    background: rgba(15, 23, 42, 0.18);
    border-radius: 999px;
  }

  /* ── Backdrop-filter blur on sticky chrome (iOS Safari supports) ── */
  /* Falls back to opaque if filter unsupported (graceful) */
  .topbar, .jp-topbar, .trust-topbar {
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
  }
  .jp-bnav, .bottom-nav {
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }

  /* ── Form inputs: 16px font prevents iOS Safari auto-zoom on focus */
  /* (existing jp-mobile-polish.css §12 — duplicated here for safety) */
  input, textarea, select {
    font-size: 16px;
  }

  /* ── Hide scrollbars in body (iOS draws its own; cleaner) ──────── */
  body::-webkit-scrollbar { display: none; }
}

/* ────────────────────────────────────────────────────────────────────
   STANDALONE MODE — when launched from Add-to-Home-Screen
   These styles only apply in the installed-PWA window.
   iOS supports display-mode: standalone via @media query.
   ──────────────────────────────────────────────────────────────────── */
@media (display-mode: standalone) and (max-width: 760px) {

  /* Hide the "open in browser" affordances since we ARE the browser */
  [data-only-in-browser] { display: none !important; }

  /* In standalone, the entire viewport is ours — slightly relax the
     safe-area visual treatment (status bar overlay can be on/off) */
  body {
    background-color: #FFFFFF;
  }

  /* Small "installed" indicator in the top-right of the topbar so the
     user knows they're in the app */
  .jp-installed-pill {
    display: inline-flex !important;
  }
}

/* Outside standalone, hide the "installed" pill */
.jp-installed-pill {
  display: none;
}

/* ────────────────────────────────────────────────────────────────────
   DYNAMIC ISLAND / iPhone 14 Pro+ specific
   The Dynamic Island sits ~38px below the top, ~125px wide, centered.
   We make sure the topbar doesn't crowd it visually.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) and (min-height: 800px) {
  .topbar, .jp-topbar, .trust-topbar {
    /* env(safe-area-inset-top) already handles the notch; this adds
       a tiny extra cushion on Dynamic Island devices so logo + nav
       don't visually overlap the pill */
    padding-top: calc(var(--jp-safe-top, 0px) + 10px);
  }
}

/* ────────────────────────────────────────────────────────────────────
   reduce-motion is INTENTIONALLY NOT honored in this file per the
   founder's Block-44 decision. When that changes, wrap the .jp-card-tap
   :active and .jp-sheet transitions in @media (min-width: 0px)
   ──────────────────────────────────────────────────────────────────── */