/* ============================================================================
   jp-mobile-polish.css — Block 14 (2026-05-28)
   ----------------------------------------------------------------------------
   Site-wide mobile polish. Loaded on every marketing page so we don't have to
   modify each page's inline <style> to fix common iPhone-class issues.

   Targets:
     • Horizontal-scroll prevention (most common iPhone visual bug)
     • Safe-area-inset awareness (notch / Dynamic Island / home indicator)
     • Tap-target minimums (Apple HIG: 44×44 pt)
     • Modal + toast sizing at narrow viewports
     • Language toggle visibility in cramped headers
     • Block-7 trust-pill / source-pill legibility on small screens
     • Trip Plan + PCP Bridge wrap behavior

   All rules are scoped to mobile breakpoints (≤760px and ≤520px); desktop is
   completely untouched.
   ========================================================================== */

/* ── 0a. Block 45d — Topbar 3-slot symmetric layout (universal) ─────────── */
/* Goal: feel like a high-design iOS app — logo centered, hamburger as a
   deliberate navy-glass pill on the right, invisible spacer on the left to
   balance. Logo height bumped from 20px → 28px (Block 45c overcorrected
   too small). Hamburger gets background + border so it reads as a real
   UI element instead of floating chrome.
   These rules win against jp-marketing-mobile-v2.css via !important. */
@media (max-width: 760px) {
  /* Topbar chrome: deliberate weight via subtle navy-tinted shadow + hairline */
  .topbar,
  header.topbar,
  .jp-m-appbar {
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: saturate(180%) blur(18px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(18px) !important;
    border-bottom: 1px solid rgba(10,45,110,.08) !important;
    box-shadow: 0 1px 0 rgba(10,45,110,.04), 0 4px 16px rgba(10,45,110,.04) !important;
  }
  /* Inner row: 56px tall, content centered, generous horizontal padding */
  .topbar .topbar-inner,
  header.topbar .topbar-inner,
  .jp-m-appbar-inner {
    min-height: 56px !important;
    padding: 8px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  /* LEFT spacer — invisible 42x42 to balance the right hamburger */
  .topbar-spacer {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    display: block !important;
  }
  /* CENTER logo — flex:1, content centered, 28px image height */
  .topbar-logo,
  .jp-m-appbar-logo,
  header.topbar .topbar-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
    text-decoration: none !important;
  }
  .topbar-logo img,
  .jp-m-appbar-logo img,
  header.topbar .topbar-logo img,
  header.topbar .jp-m-appbar-logo img {
    height: 28px !important;
    max-height: 28px !important;
    width: auto !important;
    max-width: 148px !important;
    display: block !important;
  }
  /* Sub-page pattern: when a back-chevron is present, logo is hidden by shell.js
     and the title takes the center slot. Keep the title centered. */
  .jp-m-appbar-title,
  header.topbar .topbar-title {
    flex: 1 1 auto !important;
    text-align: center !important;
    font-weight: 800 !important;
    color: #0A2D6E !important;
    font-size: 16px !important;
    letter-spacing: -.005em !important;
  }
  /* RIGHT hamburger — navy-glass pill, deliberate weight */
  .topbar-menu,
  .jp-m-appbar-menu {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(10,45,110,.06) !important;
    border: 1px solid rgba(10,45,110,.10) !important;
    color: #0A2D6E !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(10,45,110,.04) !important;
    transition: background .14s ease, transform .14s ease, border-color .14s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .topbar-menu:hover,
  .jp-m-appbar-menu:hover {
    background: rgba(10,45,110,.10) !important;
    border-color: rgba(10,45,110,.16) !important;
  }
  .topbar-menu:active,
  .jp-m-appbar-menu:active {
    background: rgba(10,45,110,.14) !important;
    transform: scale(.94) !important;
  }
  .topbar-menu svg,
  .jp-m-appbar-menu svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    stroke: currentColor !important;
    stroke-width: 2.4 !important;
  }
  /* Back-chevron treatment — same pill weight on the LEFT slot for symmetry */
  header.topbar .topbar-back {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    background: rgba(10,45,110,.06) !important;
    border: 1px solid rgba(10,45,110,.10) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(10,45,110,.04) !important;
  }
  header.topbar .topbar-back:active {
    background: rgba(10,45,110,.14) !important;
    transform: scale(.94) !important;
  }
}

/* ── 0b. Block 45b — universal .grad text-bleed fix ─────────────────────── */
/* The .hero h1 .grad pattern (gradient + background-clip:text + transparent
   text-fill) was used across 32 mobile twins to give the last clause of the
   hero headline a gradient treatment. On iOS Safari this caused the SURROUNDING
   text to render washed-out — the gradient's transparent fill leaked through
   to the background. Replace with solid colors that always contrast.
   Light-hero pages default to teal-dark; pages with dark navy heroes get an
   override via .hero.is-dark or by explicitly setting --grad-color. */
@media (max-width: 760px) {
  .hero h1 .grad {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--grad-color, #00A89F) !important;
    color: var(--grad-color, #00A89F) !important;
    display: inline !important;
  }
  /* Dark-hero variant (navy hero background) — teal-bright contrasts cleanly */
  .hero[data-hero-tone="dark"] h1 .grad,
  .hero.is-dark h1 .grad,
  .hero.hero-dark h1 .grad {
    --grad-color: #00C9C0;
  }
}

/* ── 1. Hard horizontal-scroll prevention ──────────────────────────────── */
@media (max-width: 760px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  /* Common offenders that overflow on iPhone */
  .container,
  .wrap,
  .hero-in,
  .nav-in,
  .nav-inner,
  section,
  main {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* ── 2. iPhone notch / Dynamic Island / home-indicator safe areas ──────── */
@media (max-width: 760px) {
  :root {
    --jp-safe-top:    env(safe-area-inset-top, 0px);
    --jp-safe-bot:    env(safe-area-inset-bottom, 0px);
    --jp-safe-left:   env(safe-area-inset-left, 0px);
    --jp-safe-right:  env(safe-area-inset-right, 0px);
  }
  /* Fixed top nav: respect notch */
  nav#nav,
  nav#mainNav,
  .topnav,
  .jp-topbar,
  .topbar,
  header.app-topbar {
    padding-top: env(safe-area-inset-top, 0px);
  }
  /* Anything pinned to bottom: respect home indicator */
  .jp-pe-fab,
  .jp-ui-toasts,
  .cam-bottom-bar,
  [class*="bottom-cta"],
  [class*="sticky-cta"] {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── 3. Tap-target minimums (Apple HIG 44×44 pt) ───────────────────────── */
@media (max-width: 760px) {
  button,
  a.btn,
  a.nv-link,
  a.nv-cta,
  .nav-links a,
  .nav-links button,
  .nav-dropdown-toggle,
  .si-role,
  .jp-pe-side-action button,
  .jp-ui-modal-btn,
  .jp-ui-banner-btn,
  .jp-ui-toast-action,
  .card-wishlist,
  .panel-option,
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  /* Heart / wishlist / compare icons on cards specifically need more padding */
  .card-wishlist {
    width: 44px !important;
    height: 44px !important;
  }
}

/* ── 4. Modal sizing at narrow viewports ───────────────────────────────── */
@media (max-width: 520px) {
  .jp-ui-modal {
    width: 100% !important;
    max-width: calc(100vw - 16px);
    border-radius: 14px !important;
  }
  .jp-ui-modal-actions {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
  }
  .jp-ui-modal-btn {
    width: 100% !important;
    text-align: center !important;
  }
  .jp-pcp-paper {
    width: 100% !important;
    max-width: calc(100vw - 16px);
    border-radius: 12px !important;
  }
  .jp-pcp-doc {
    padding: 22px 18px 26px !important;
  }
  .jp-pcp-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 5. Language toggle — keep it visible in cramped nav ───────────────── */
@media (max-width: 760px) {
  #jp-lang-toggle {
    padding: 7px 12px !important;
    font-size: 12px !important;
  }
  #jp-lang-fab {
    /* The FAB is overkill on small screens; reduce footprint */
    padding: 8px 12px !important;
    font-size: 12px !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #jp-lang-li {
    /* Squeeze the in-nav language toggle next to the hamburger */
    margin-left: auto !important;
    padding-left: 8px !important;
  }
}

/* ── 6. Block-7 / Block-9 / Block-11 source pills + trust pills ────────── */
@media (max-width: 760px) {
  .card-trust-pill,
  .jp-pe-trust,
  .jp-pe-livepill,
  .jp-trip-pill,
  .jp-ai-sample-badge {
    font-size: 10.5px !important;
    padding: 2px 8px !important;
  }
  .jp-ai-sample-badge {
    max-width: 100% !important;
    margin: 0 12px 12px !important;
  }
}

/* ── 7. Trip Plan responsive grid (Block 7) ────────────────────────────── */
@media (max-width: 760px) {
  .jp-trip-grid {
    grid-template-columns: 1fr !important;
  }
  .jp-trip-hd {
    flex-direction: column;
    align-items: flex-start !important;
  }
  .jp-trip-hd-controls {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
  }
}

/* ── 8. Profile sub-nav (Block 7) — horizontal scroll on narrow ────────── */
@media (max-width: 760px) {
  .jp-pe-subnav {
    top: 56px !important;
  }
  .jp-pe-subnav-inner {
    padding: 0 12px !important;
    gap: 2px !important;
  }
  .jp-pe-subnav a {
    padding: 7px 11px !important;
    font-size: 12px !important;
  }
}

/* ── 9. Reviews card grid (Block 10) ──────────────────────────────────── */
@media (max-width: 760px) {
  #jp-pe-reviews [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── 10. Marketplace card row — preserve readability on iPhone ─────────── */
@media (max-width: 520px) {
  .clinic-card {
    /* The marketplace already has its own media queries; this just guards
       against the rare case where the card row escapes its container. */
    max-width: 100%;
  }
  .card-rating-row {
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* ── 11. iPhone-specific text rendering fixes ──────────────────────────── */
@media (max-width: 760px) {
  body {
    -webkit-text-size-adjust: 100%;  /* prevent landscape font-boost */
    text-size-adjust: 100%;
  }
  h1, h2, h3 {
    /* iOS Safari sometimes renders descenders with cut-off when
       letter-spacing is negative; keep some breathing room. */
    line-height: 1.18;
  }
}

/* ── 12. Form inputs zoom-prevention (iOS auto-zooms on inputs <16px) ──── */
@media (max-width: 760px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select,
  .jp-ui-modal-input,
  .jp-ui-modal-select,
  .jp-ui-modal-textarea,
  .si-input {
    font-size: 16px !important;
  }
}

/* ── 13. Hide non-essential decorative elements on very narrow screens ─── */
@media (max-width: 380px) {
  /* The Dynamic Island / nav notch / animations that don't add value
     on 320–380px wide screens. */
  .bg-conic,
  .bg-beams b,
  .hero-stars [aria-hidden],
  [class*="float"] {
    display: none !important;
  }
}

/* ── 14. Print-friendly fallback (already mostly handled by PCP Bridge) ── */
@media print {
  nav, .topnav, .nav-in, .jp-pe-subnav, #jp-lang-toggle, #jp-lang-fab,
  .jp-pe-fab, .jp-ui-toasts {
    display: none !important;
  }
  body { padding-top: 0 !important; }
}