/* ga-mobile.css — mobile hit-area and input corrections for the route landing
 * pages. Loaded after each page's own styles, before its content paints.
 *
 * Roughly nine in ten Meta clicks are phones, so these pages are mobile pages
 * that happen to also render on a desktop. Measured at a 390px viewport on
 * 2026-08-06, they were not treated that way:
 *
 *   landing.html   17 of 34 tap targets under 44px tall. Sort chips (Soonest /
 *                  Closest to me / List / Map) at 34px. ZIP input at 15.5px.
 *   v3.html        "Use my location" 29px and "Just show the soonest times"
 *                  28px — the two alternative paths through the page are the
 *                  two hardest things on it to hit.
 *
 * The 15.5px input is the one that actually costs bookings. Mobile Safari zooms
 * the whole page when a text field under 16px takes focus, and it does not zoom
 * back out. Someone taps the ZIP box, the layout jumps, the stop list is now
 * off-screen, and they are pinching to recover. That is the top of this funnel.
 *
 * Everything here is additive and reversible: hit areas, font sizes and safe
 * areas only. No copy, no colour, no hierarchy, no layout order. The A/B test
 * between landing and v3 has to measure the difference between two page
 * strategies, and it cannot do that if this file quietly redesigns one of them.
 */

@media (max-width: 640px) {

  /* ---- iOS focus zoom -----------------------------------------------------
   * 16px is the exact threshold. Not 15.5px, not "about 16". Setting it on the
   * element rather than the container because these pages style inputs
   * individually.
   */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* ---- Minimum hit area ---------------------------------------------------
   * 44px is Apple's floor and roughly the width of an adult fingertip. Done
   * with min-height and centred content rather than height, so a control that
   * is already large enough is left exactly as it is and nothing reflows.
   */
  button,
  [role="button"],
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
  }

  /* The sort and view chips on landing.html — Soonest / Closest to me / List /
   * Map, all 34px and sitting side by side, which is the combination that
   * produces a mis-tap rather than a miss. Grow them through padding so the
   * label keeps its own size. Selector taken from the live DOM (.seg > button),
   * not guessed.
   */
  .seg button,
  .show-more {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* v3.html's two alternative paths: "Use my location" at 29px and "Just show
   * the soonest times" at 28px, both button.ghost inside .alt-row. These are
   * the escape hatches for anyone who will not type a ZIP, which on this page
   * is the difference between a bounce and a booking.
   */
  .alt-row .ghost,
  .alt-row button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* ---- Adjacent-target spacing -------------------------------------------
   * Two 44px targets touching each other still produce mis-taps at the seam.
   * 8px is the usual minimum separation. .alt-row stacks on mobile, so it gets
   * vertical breathing room rather than a gap between columns.
   */
  .seg {
    gap: 8px;
  }

  .alt-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
  }

  /* ---- Safe areas ---------------------------------------------------------
   * landing.html's sticky booking bar sits flush to the bottom edge, which on
   * every notched iPhone puts its buttons under the home indicator. env() is a
   * no-op on hardware without one, so this needs no feature query.
   */
  .bbar,
  .bookbar,
  .sticky-book {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  /* Content must be able to scroll clear of that bar. The pages set no bottom
   * padding at all, so the last row of the stop list can come to rest
   * underneath it with no way to reach it.
   */
  body {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  /* ---- The header CTA breaking out of the header --------------------------
   * On landing.html at 390px, "Book free appraisal" wraps to two lines. The
   * button grows to 75px inside a 64px nav and spills out of both edges of the
   * header, which is the broken-looking thing a visitor sees before anything
   * else. Keeping it on one line at a slightly smaller size fits it in 162px
   * with room to spare, and it still clears 44px.
   */
  .nav,
  .nav-right {
    align-items: center;
  }

  .nav-right .btn {
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.1;
    padding: 13px 16px;
    min-height: 44px;
  }

  /* The sticky bar's field is a bare 18px input sitting inside a 58px styled
   * wrapper. The wrapper looks like the control and the input is what actually
   * takes focus, so two thirds of every tap on the thing that looks like a
   * search box lands on padding and does nothing. Make the input fill it.
   */
  .bbar-field {
    display: flex;
    align-items: stretch;
  }

  .bbar-field input {
    flex: 1;
    min-height: 44px;
    padding: 12px 0;
  }

  /* Footer links are 20px blocks stacked directly on top of each other, which
   * is both hard to hit and easy to hit wrongly.
   */
  .foot-links a {
    display: block;
    padding: 12px 0;
  }

  /* ---- Legibility ---------------------------------------------------------
   * Footer and legal text measured at 11px. Small print is allowed to be small,
   * but 11px on a phone is below what the audience for this business reads
   * comfortably, and these pages skew older.
   */
  footer,
  .legal,
  .fineprint,
  .footnote {
    font-size: 13px;
    line-height: 1.5;
  }

  /* ---- Long words in tight columns ---------------------------------------
   * Addresses and location names are unpredictable and these columns are now
   * 390px wide. Breaking is better than a horizontal scrollbar.
   */
  .stop-title,
  .stop-address,
  .rev-name {
    overflow-wrap: anywhere;
  }
}

/* Touch devices that are not narrow — tablets, and phones in landscape — get
 * the hit areas without the phone-width layout assumptions.
 */
@media (pointer: coarse) {
  input,
  select,
  textarea {
    font-size: max(16px, 1em);
  }
}