/*--------------------------------------------------------------
  Mobile-first overrides — Yatri Vista Vacation
  Loaded last on both public layouts:
    - layouts/headernew-1 (home, package listing, about, events, payu)
    - layouts/website-header (destinations, activities, contact, detail)
  Base rules target phones; min-width queries restore desktop styles.
----------------------------------------------------------------*/

/* ==================== Global safety net ==================== */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

img,
video {
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;
}

/* Prevent iOS auto-zoom when focusing form fields */
@media (max-width: 767.98px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Comfortable touch targets in menus and buttons */
  .menu__nav a,
  .dropdown-item,
  .main-navigation a,
  .slicknav_nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Long content tables scroll instead of blowing the layout open */
  main table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Fluid headings */
  h1, .display-4 { font-size: clamp(1.75rem, 6vw, 2.5rem) !important; }
  h2 { font-size: clamp(1.4rem, 5vw, 2rem) !important; }
  h3 { font-size: clamp(1.2rem, 4.5vw, 1.6rem) !important; }
}

/* ==================== Travele layout (headernew-1) ==================== */

/* Mega-menu columns: single column on phones, 3 columns from tablet up.
   Replaces the fixed min-width:500px that overflowed small screens. */
.third-level {
  min-width: 0;
  column-count: 1;
  column-gap: 1rem;
}

@media (min-width: 768px) {
  .third-level {
    min-width: 500px;
    column-count: 3;
  }
}

/* Hero video section */
@media (max-width: 767.98px) {
  .hero {
    height: 70svh;
    min-height: 420px;
  }

  .hero-content {
    padding: 30px 16px;
  }

  .hero-content .btn {
    width: 100%;
    max-width: 320px;
  }
}

/* Trip search bar: stack fields full-width on phones */
@media (max-width: 991.98px) {
  .trip-search-section .trip-search-inner {
    flex-wrap: wrap;
    gap: 12px;
  }

  .trip-search-section .trip-search-inner .input-group,
  .trip-search-section .trip-search-inner .input-group.width-col-3 {
    width: 100%;
    flex: 0 0 100%;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .trip-search-section .trip-search-inner .input-group,
  .trip-search-section .trip-search-inner .input-group.width-col-3 {
    flex: 0 0 calc(50% - 6px);
    width: calc(50% - 6px);
  }
}

/* Destination carousels: native touch scrolling on mobile.
   The markup uses Bootstrap's .overflow-hidden, which blocks touch
   scrolling entirely, leaving only the arrow buttons. */
@media (max-width: 991.98px) {
  .destination-scroll-container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 8px;
  }

  .destination-scroll-container::-webkit-scrollbar {
    display: none;
  }

  .destination-card {
    scroll-snap-align: start;
    width: min(250px, 72vw);
  }

  .scroll-btn {
    display: none !important;
  }
}

/* Popups (contact / brochure) fit the viewport */
@media (max-width: 767.98px) {
  .popup-content,
  .broucher-popup-content {
    width: min(92vw, 600px);
    max-height: 85vh;
    overflow-y: auto;
  }

  .broucher-popup-content iframe {
    height: 65vh;
  }

  /* Footer bottom row: center everything when columns stack */
  .buttom-footer .footer-menu ul,
  .buttom-footer .copy-right {
    text-align: center;
    justify-content: center;
  }

  .buttom-footer .copy-right.text-right {
    text-align: center;
  }

  .newslatter-form input[type="email"],
  .newslatter-form input[type="submit"] {
    width: 100%;
  }
}

/* ==================== front-end layout (website-header) ==================== */

/* Desktop nav offset previously hard-coded inline as padding-left:500px,
   which pushed the mobile menu toggle off-screen on phones. */
.header-menu__content {
  padding-left: 0;
}

@media (min-width: 1200px) {
  .header-menu__content {
    padding-left: 500px;
  }
}

@media (max-width: 991.98px) {
  .header__container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .header-logo img {
    max-height: 48px;
    width: auto;
  }
}