/* ===================================================================
   Urban Haul — mobile refinements
   ===================================================================
   Every rule in this file sits inside @media (max-width: 899px).

   900px is the site's own breakpoint — the width at which styles.css
   swaps the hamburger for the full desktop menu. Matching it means the
   desktop layout is byte-for-byte unchanged; nothing here can load at
   900px or above.

   Loaded last in <head> so it wins ties against the inline <style>
   block in index.html without needing !important.
   =================================================================== */

@media (max-width: 899px) {

  /* -----------------------------------------------------------------
     1. Header — was overflowing the viewport by 11px
     -----------------------------------------------------------------
     "Get the App" at full desktop size left no room for the brand, so
     "Urban Haul" wrapped onto two lines, the bar grew past its 68px
     height, and the hamburger was clipped off the right edge.

     Shrinking the button reclaims about 100px, which is enough for
     everything to sit on one line. The button keeps its label and its
     colour, so it reads as the same button, just phone-sized.
     ----------------------------------------------------------------- */

  .nav__inner { gap: var(--space-3); }

  /* The wrap was the visible symptom; this prevents it outright. */
  .nav__brand {
    font-size: 1rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .nav__logo { width: 30px; height: 30px; }

  .nav__actions { gap: 8px; }

  .nav__actions .btn--primary {
    padding: 9px 13px;
    font-size: 0.8125rem;
    white-space: nowrap;
  }
  /* The download arrow is decorative and costs ~26px of width. */
  .nav__actions .btn--primary .btn__icon { display: none; }

  /* Both were 37px wide — under the 40px minimum for a reliable tap. */
  .nav__toggle-btn,
  .nav__mobile-btn {
    min-width: 40px;
    min-height: 40px;
  }

  /* -----------------------------------------------------------------
     2. Hero was sliding underneath the fixed header
     -----------------------------------------------------------------
     .hero in styles.css clears the header with
     padding-top: calc(68px + var(--space-16)).

     The newer .uh2-hero never got that rule. It uses
     clamp(32px, 6vw, 72px), which resolves to 72px on desktop — just
     clear of the 68px bar — but collapses to 32px on a phone. The
     result was the first line of the h1 rendering behind the header.
     ----------------------------------------------------------------- */

  .uh2-hero { padding-top: calc(68px + var(--space-6)); }

  /* -----------------------------------------------------------------
     3. Carousel dots were 8-10px targets
     -----------------------------------------------------------------
     Expanded with an invisible overlay rather than by resizing the
     dots, so they look identical but accept a 40px thumb press.
     ----------------------------------------------------------------- */

  .uh2-dot { position: relative; }
  .uh2-dot::after {
    content: "";
    position: absolute;
    inset: -16px;
  }

  /* -----------------------------------------------------------------
     4. Footer link rows were 18px tall
     -----------------------------------------------------------------
     Too tight to hit accurately, and adjacent links were easy to
     catch by mistake. 34px is comfortable without stretching the
     footer to an unreasonable length.
     ----------------------------------------------------------------- */

  .footer__grid ul li a {
    display: inline-block;
    padding: 8px 0;
  }
  .footer__socials a {
    min-width: 40px;
    min-height: 40px;
    display: inline-grid;
    place-items: center;
  }

  /* -----------------------------------------------------------------
     5. Onboarding form — the step strip
     -----------------------------------------------------------------
     .ob__progress already scrolls horizontally by design, which is
     correct. But with no visible edge, the later steps look absent
     rather than off-screen. A fade hints that it moves.
     ----------------------------------------------------------------- */

  .ob__progress {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
            mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
  .ob__step { scroll-snap-align: start; }

  /* Full-width buttons are easier to hit while holding a phone. */
  .ob__nav .btn { min-height: 48px; }

  /* -----------------------------------------------------------------
     6. Long unbroken strings
     -----------------------------------------------------------------
     Email addresses and reference codes are the usual culprits for
     stretching a narrow container sideways.
     ----------------------------------------------------------------- */

  .contact__info-row strong,
  .ob__success,
  .ob__ref {
    overflow-wrap: anywhere;
  }
}
