/* Orbit Taxis - phone layout fixes, loaded by every page after its own styles.
 * Everything here applies to screens 760px wide or less (the same breakpoint
 * the pages already use), so the desktop design is untouched. */
@media (max-width:760px){

  /* ---------- header ----------
     The 34px gaps between logo, phone button and menu button were wider than
     a phone allows: the number wrapped onto three lines on the home page and
     pushed the menu button off the screen on every other page. */
  .nav__in{gap:10px}
  .nav__tel{flex:none;white-space:nowrap;gap:8px;padding:9px 12px;font-size:13px}
  .nav__burger{width:40px;height:40px;padding:8px 5px;margin-left:2px;box-sizing:border-box}

  /* ---------- hero numbers: two neat columns instead of a ragged row ---------- */
  .hero__foot{display:grid;grid-template-columns:1fr 1fr}

  /* ---------- booking forms ----------
     One field per row, so dates, times and addresses are readable and every
     box is big enough to tap. The phone code stays beside the number. */
  .row--2,.row--3{grid-template-columns:1fr}
  .row--2:has(select[id$="cc"]){grid-template-columns:96px 1fr}
  /* 16px stops iPhones zooming in every time a box is tapped. */
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px}
  .bacts{flex-direction:column}
  .bacts .big{min-width:0;width:100%}

  /* ---------- footer ----------
     Bigger tap areas for the links, and room on the right so the floating
     call and WhatsApp buttons never sit on top of the small print. */
  .ft ul{gap:0}
  .ft ul a{display:inline-block;padding:9px 0}
  .ft__base{padding-right:70px}
}

/* Narrow phones (iPhone SE, small Androids): smaller logo, and below 350px the
   number gives way to the word "Call" so the menu button always fits. */
@media (max-width:400px){
  .logo__img{height:36px}
  .nav__tel{padding:9px 10px;font-size:12.5px}
}
@media (max-width:350px){
  .nav__tel{font-size:0;gap:6px}
  .nav__tel::after{content:"Call";font-size:13px}
}