/* Additional Responsive Enhancements */

/* Ensure images are responsive */
img {
  max-width: 100%;
  height: auto;
}

/* Prevent horizontal scroll */
html,
body {
  overflow-x: hidden;
  width: 100%;
}

/* Smooth responsive video */
video {
  max-width: 100%;
  height: auto;
}

/* Better mobile touch targets */
/* @media (max-width: 767px) {
  button, a, input, select, textarea {
    min-height: 44px;
    min-width: 44px;
  }
} */

/* Improve text readability on mobile */
@media (max-width: 479px) {
  body {
    font-size: 16px !important; /* Prevents zoom on iOS */
    -webkit-text-size-adjust: 100%;
  }

  input,
  textarea,
  select {
    font-size: 16px !important; /* Prevents zoom on iOS when focused */
  }
}

/* Better container spacing on small screens */
@media (max-width: 479px) {
  .u-container,
  .w-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Ensure flex items don't overflow */
.w-layout-vflex,
.w-layout-hflex {
  min-width: 0;
}

/* Better image loading for performance */
img[loading="lazy"] {
  content-visibility: auto;
}

/* Prevent text overflow */
* {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Mobile navigation improvements */
@media (max-width: 991px) {
  .w-nav-menu {
    width: 100%;
  }
}

/* Tablet optimizations */
@media (min-width: 768px) and (max-width: 991px) {
  .u-hide-tablet {
    display: none !important;
  }

  .u-show-tablet {
    display: block !important;
  }
}

/* Mobile optimizations */
@media (max-width: 767px) {
  .u-hide-mobile {
    display: none !important;
  }

  .u-show-mobile-landscape {
    display: block !important;
  }
}

/* Small mobile optimizations */
@media (max-width: 479px) {
  .u-hide-mobile-portrait {
    display: none !important;
  }
}

/* Desktop only */
@media (min-width: 992px) {
  .u-hide-desktop {
    display: none !important;
  }
}

/* Improve slider/swiper responsiveness */
.swiper-slide {
  width: 100%;
  flex-shrink: 0;
}

/* Better form elements on mobile */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    width: 100%;
    box-sizing: border-box;
  }
}