/* ============================================
   FLAVIO TAXI - Mobile & Tablet Responsive Fix
   ============================================ */

/* -----------------------------------------------
   1. NAVBAR FIX - Phone number vertical wrap
   ----------------------------------------------- */

/* Force ALL phone links in nav to stay on one line */
nav a[href^="tel:"] {
  white-space: nowrap !important;
}

/* Mobile: hide phone number (it's in the hero section) */
@media (max-width: 639px) {
  nav > div > div > div:last-child a[href^="tel:"] {
    display: none !important;
  }

  /* Tighten the mobile nav row */
  nav > div > div > div:last-child {
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
  }
}

/* Tablet: show phone but compact */
@media (min-width: 640px) and (max-width: 1023px) {
  nav > div > div > div:last-child a[href^="tel:"] {
    white-space: nowrap !important;
    font-size: 0.7rem !important;
    letter-spacing: -0.02em;
    flex-shrink: 0;
  }

  nav > div > div > div:last-child {
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
  }
}

/* -----------------------------------------------
   2. MOBILE MENU FIX - Transparent background
   ----------------------------------------------- */

/* Give the nav a solid background always */
nav.fixed {
  background-color: rgba(10, 10, 20, 0.98) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* Mobile menu panel - target by structure: second child of nav container */
@media (max-width: 1023px) {
  nav > div > div:nth-child(2) {
    background-color: rgba(10, 10, 20, 0.98) !important;
    padding-bottom: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Mobile menu links */
  nav > div > div:nth-child(2) a {
    display: block !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    color: #e5e7eb !important;
    transition: color 0.2s, background-color 0.2s;
    min-height: auto !important;
  }

  nav > div > div:nth-child(2) a:hover {
    color: #fbbf24 !important;
    background-color: rgba(251, 191, 36, 0.05) !important;
  }
}

/* -----------------------------------------------
   3. TABLET NAV (768px - 1023px)
   ----------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  nav > div > div > div:last-child {
    gap: 0.75rem !important;
  }

  nav > div > div > div:last-child a[href^="tel:"] {
    font-size: 0.75rem !important;
  }
}

/* -----------------------------------------------
   4. HERO SECTION - Mobile optimization
   ----------------------------------------------- */
@media (max-width: 640px) {
  h1 {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
  }
}

/* -----------------------------------------------
   5. FARE ESTIMATOR - Mobile (prevent iOS zoom)
   ----------------------------------------------- */
@media (max-width: 640px) {
  input[type="text"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* -----------------------------------------------
   6. FLEET SECTION - Cards responsive
   ----------------------------------------------- */
@media (max-width: 768px) {
  img[alt="Flavio Taxi Berline"],
  img[alt="Flavio Taxi Van"] {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 0.75rem;
  }
}

/* -----------------------------------------------
   7. REVIEWS SECTION - Carousel fix
   ----------------------------------------------- */
@media (max-width: 640px) {
  [class*="overflow-x"] {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  [class*="overflow-x"] > div {
    scroll-snap-align: start;
    flex-shrink: 0;
  }
}

/* -----------------------------------------------
   8. FOOTER - Mobile stacking
   ----------------------------------------------- */
@media (max-width: 768px) {
  footer > div > div:first-child {
    flex-direction: column !important;
  }

  footer > div > div:first-child > div {
    width: 100% !important;
    margin-bottom: 1.5rem;
  }

  footer > div > div:nth-child(2) {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  footer > div > div:nth-child(2) > div {
    width: 100% !important;
  }
}

/* -----------------------------------------------
   9. GLOBAL MOBILE OPTIMIZATIONS
   ----------------------------------------------- */

/* Prevent horizontal overflow */
html, body {
  overflow-x: hidden;
}

/* Better touch targets on mobile */
@media (max-width: 768px) {
  a, button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* But not menu links inside the mobile menu */
  nav > div > div:nth-child(2) a {
    min-height: auto !important;
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* iOS safe area */
@supports (padding: env(safe-area-inset-bottom)) {
  footer {
    padding-bottom: env(safe-area-inset-bottom);
  }

  nav.fixed {
    padding-top: env(safe-area-inset-top);
  }
}