/* ═══════════════════════════════════════════════════════════════════════
   USLA MOBILE LAYER — phone-first upgrades. Desktop is untouched: every
   layout rule lives behind @media (max-width: 720px). Load this file AFTER
   styles.css / usla-alive.css (index) and after the inline page styles
   (florida-map) so equal-specificity overrides win on source order.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {

  /* ── Never allow horizontal scroll — a transient overflow during first render
     could leave the page shifted sideways (cut-off footer). ── */
  html, body { max-width: 100vw; overflow-x: clip; }

  /* ── Footer: force clean stacking ── */
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* ── Buttons: allow wrapping so long labels never overflow the screen ── */
  .btn { white-space: normal; line-height: 1.3; }

  /* ── HERO — content first, the live Florida map right under it ──────── */
  .hero { display: flex; flex-direction: column; }
  .hero .hero-inner { order: 1; width: 100%; padding: 60px 20px 10px; }
  .hero .hero-florida {
    order: 2;
    display: block;
    position: relative;
    right: auto; top: auto;
    width: 100%;
    max-width: 520px;
    margin: 10px auto 42px;
    padding: 12px 10px 22px;
    transform: none;
    animation: uslaHfFloatM 9s ease-in-out infinite;
  }
  .hero .us-market-map svg { min-height:0; }
  .hero .us-map-head { margin-bottom:4px; }
  .hero .us-map-tooltip { min-height:64px; }
  .hero .us-map-legend { gap:5px 7px; }
  .hero h1 { font-size: clamp(38px, 11.4vw, 46px); }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 34px; }
  .hero-ctas .btn { width: 100%; min-height: 54px; }
  .hero-ctas .btn-primary { animation: uslaBreath 3.8s ease-in-out infinite; }
  .hero-calling-card-wrap { margin-top: 26px; }
  .eyebrow .dot { animation: uslaDotPulse 2.2s ease-in-out infinite; }

  /* ── ACTIVE MARKETS ──────────────────────────────────────────────────── */
  .acq-cta-row .btn-map-feature { width: 100%; justify-content: center; text-align: center; }

  /* injected mobile market search (usla-mobile.js) */
  .usla-msearch { position: relative; margin: 0 0 16px; }
  .usla-msearch input {
    -webkit-appearance: none; appearance: none;
    width: 100%;
    background: #0c0c0e;
    border: 1px solid var(--border-hi, #2a2a2a);
    border-radius: 10px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 16px; /* ≥16px stops iOS zoom-on-focus */
    padding: 14px 46px 14px 16px;
    outline: none;
    transition: border-color .16s, box-shadow .16s;
  }
  .usla-msearch input:focus { border-color: var(--red, #c8102e); box-shadow: 0 0 0 3px rgba(200,16,46,.16); }
  .usla-msearch input::placeholder { color: #6a6a72; }
  .usla-msearch input::-webkit-search-cancel-button { -webkit-appearance: none; }
  .usla-msearch-ico {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    color: var(--red, #c8102e); font-size: 19px; line-height: 1; pointer-events: none;
  }
  .acq-county-tile.usla-msearch-hide { display: none !important; }
  .usla-msearch-empty {
    display: block; margin: 14px 2px 0;
    font-size: 13px; line-height: 1.55;
    color: var(--text-dim, #b8b8b8); text-decoration: none;
  }
  .usla-msearch-empty b { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(200,16,46,.6); }
  .usla-msearch-empty[hidden] { display: none; }

  /* ── INVESTOR PORTAL TEASER ──────────────────────────────────────────── */
  .portal-teaser { padding: 38px 22px; }
  .portal-action-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .portal-access-btn { width: 100%; min-height: 52px; }
  .portal-invite-pill { justify-content: center; }

  /* ── FOOTER CTA ──────────────────────────────────────────────────────── */
  .footer-cta-ctas { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .footer-cta-ctas .btn { width: 100%; min-height: 52px; }

  /* ── STICKY BOTTOM ACTION BAR (usla-mobile.js, home only) ────────────── */
  .usla-sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 960;
    display: flex; gap: 1px;
    background: #000;
    border-top: 1px solid rgba(200,16,46,.4);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(110%);
    transition: transform .32s cubic-bezier(.22,.61,.36,1);
    box-shadow: 0 -14px 40px rgba(0,0,0,.55);
  }
  .usla-sticky-cta.on { transform: none; }
  .usla-sticky-main {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, #c8102e 0%, #9f0c24 100%);
    color: #fff; text-decoration: none;
    font-family: 'Inter Tight', sans-serif; font-weight: 800; font-size: 13.5px;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 17px 10px;
    animation: uslaBreath 3.8s ease-in-out infinite;
  }
  .usla-sticky-call {
    flex: 0 0 64px;
    display: flex; align-items: center; justify-content: center;
    background: #0d0d0d; color: #fff; font-size: 20px; text-decoration: none;
    border-left: 1px solid #1f1f1f;
  }

  /* ── SCROLL PROGRESS HAIRLINE (usla-mobile.js) ───────────────────────── */
  .usla-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 970;
    background: linear-gradient(90deg, #c8102e, #ff4d6a);
    transform-origin: 0 50%; transform: scaleX(0);
    pointer-events: none; transition: opacity .2s;
    box-shadow: 0 0 12px rgba(200,16,46,.55);
  }

  /* ── HERO EMBERS CANVAS (usla-mobile.js) ─────────────────────────────── */
  .usla-embers { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

  /* ── FLORIDA-MAP PAGE: Check-My-City overlay + inline offer form ─────── */
  .uslk-form { margin: 4px 14px 18px; padding: 14px; }
  .uslk-form input { font-size: 16px; padding: 13px 14px; } /* stops iOS zoom */
  .uslk-form .uslk-btn {
    justify-self: stretch; width: 100%;
    white-space: normal; line-height: 1.35;
    padding: 15px 14px; font-size: 12.5px; letter-spacing: .06em;
  }
  .uslk-form-note { text-align: center; }
  .uslk-btn { white-space: normal; line-height: 1.35; }
  .uslk-search { font-size: 16px; }

  /* ── PORTAL GATE: stop iOS zoom on the access-code field ─────────────── */
  .gate-input { font-size: 16px; }

  /* ── INVESTOR PORTAL (Market Desk) phone fit ─────────────────────────── */
  .usd-search input { font-size: 16px; padding: 12px 12px 12px 36px; } /* no iOS zoom */
  .usd-tab span { font-size: 9px; letter-spacing: .08em; }
  .usd-top { padding: 0 14px; }
  .usd-brand-name { font-size: 12px; }
  .usd-user-meta { display: none; } /* avatar only — frees header space */
  .usd-sheet input, .usd-sheet textarea, .usd-sheet select { font-size: 16px; }
  .usd-dealwrap input, .usd-dealwrap textarea, .usd-dealwrap select { font-size: 16px; }
}

@media (max-width: 560px) {
  /* name + phone side-by-side is too cramped on small phones */
  .uslk-frow { grid-template-columns: 1fr; }
}

/* keyframes — referenced only by the mobile-scoped rules above */
@keyframes uslaHfFloatM { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes uslaBreath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,16,46,0); }
  50%      { box-shadow: 0 0 26px 2px rgba(200,16,46,.38); }
}
@keyframes uslaDotPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hero-ctas .btn-primary,
  .usla-sticky-main,
  .eyebrow .dot,
  .hero .hero-florida { animation: none !important; }
}