/* responsive.css — phone and iPad fixes. Loaded AFTER style.css so it can adjust it without editing it. */

/* Stop iPhones from inflating text size when you rotate, and keep images inside their boxes. */
html { -webkit-text-size-adjust: 100%; }
img, svg, video { max-width: 100%; height: auto; }
/* Removes the old 300ms tap delay on buttons and links. */
a, button, summary, label, select { touch-action: manipulation; }

/* iPhone notch / home bar: keep content clear of the rounded corners and bottom bar. */
.site-footer { padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); }

/* The footer legal links (Privacy, Terms, Fuel Surcharge, Staff, Facebook, Instagram) used to sit in
   one unbreakable row. On a phone that made the whole page wider than the screen and pushed the
   menu button out of reach. Now they wrap onto extra lines. */
.footer-legal { flex-wrap: wrap; gap: 4px 20px; }
.footer-bottom { align-items: flex-start; }

/* Comfortable tap targets (Apple recommends at least 44px). */
.mobile-toggle { min-width: 44px; min-height: 44px; font-size: 24px; }
.mobile-menu a { padding-top: 14px; padding-bottom: 14px; }
.footer-nav a, .footer-legal a { display: inline-block; padding: 12px 0; }
.filter-btn, .tab-btn { min-height: 44px; }

@media (max-width: 900px) {
  /* iPhone Safari zooms into any form field smaller than 16px; this stops that. */
  input, select, textarea { font-size: 16px !important; }
  /* Hero text and stats should never run off the edge. */
  h1 { overflow-wrap: anywhere; }
  .container { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
  /* The fleet map is "sticky" on desktop; in one column it should just flow. */
  [style*="position: sticky"] { position: static !important; }
  /* Labels were 11px, too small to read comfortably on a phone. */
  label, .fact-row .k, .spec-row .k, .enquiry-item .k, .spec-box .heading { font-size: 12px; }
  .badge { font-size: 11px; }
}

@media (max-width: 700px) {
  /* Services tabs: show all four in a tidy 2x2 grid instead of a hidden sideways scroll. */
  .tab-row { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; margin-bottom: 40px; }
  .tab-btn { white-space: normal; text-align: left; }
  /* Spec tables: let long values use the full width. */
  .spec-row .v { max-width: 65%; }
  /* Buttons and form actions are easier to hit when full width. */
  .btn-primary, .btn-outline { text-align: center; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .cta-row { text-align: center; }
}

/* iPad portrait (about 744–900px wide): the desktop menu is hidden here, so keep two columns
   for cards and give pages a little more breathing room. */
@media (min-width: 700px) and (max-width: 900px) {
  .container { padding-left: 32px; padding-right: 32px; }
}

/* Respect people who turn off animation in iOS Accessibility settings. */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------- Home page hero ---------- */
/* 100vh on iPhone Safari includes the area hidden behind the address bar, so the hero ended up taller than the
   visible screen. 'svh' means "the visible screen height"; browsers that don't know it use 100vh. */
.hero { min-height: 100vh; min-height: 100svh; padding-top: 96px; /* keeps text clear of the fixed header */ }

@media (max-width: 900px) {
  /* The vertical city list down the right edge ran over the paragraph text on phones and iPad portrait. */
  .hero-ticker { display: none; }
  .hero-inner { padding-bottom: 56px; }
  .hero-copy p { font-size: 17px; margin-bottom: 32px; }
}
@media (max-width: 700px) {
  /* The four stats were staggered (a style-priority clash). Even two-column grid instead. */
  .stats-grid { gap: 28px 20px; margin-top: 48px; }
  .stats-grid .stat:not(:first-child) { padding-left: 0; }
  .stats-grid .stat { border-right: none; padding-right: 0; }
}