/**
 * Responsive Mobile Fixes - Helmets Integrated Projects
 * Ensures the website fits perfectly on mobile devices
 */

/* Hide mobile menu when closed - prevents "Home" peeking below header */
header.header-mobile:not(.menu-open) #mainmenu {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Prevent horizontal overflow on mobile */
html, body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

#wrapper {
  overflow-x: hidden;
}

/* Responsive images */
img, iframe, video {
  max-width: 100%;
  height: auto;
}

/* Better touch targets on mobile (min 44px) */
@media (max-width: 768px) {
  .btn-main, .btn-line, button[type="submit"] {
    min-height: 44px;
    padding: 12px 24px;
  }
  
  #menu-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  
  header.header-mobile #mainmenu li a {
    padding: 14px 0;
    display: block;
  }
}

/* Container padding on small screens */
@media (max-width: 576px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  section {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Topbar - stack or hide on very small screens */
@media (max-width: 480px) {
  #topbar .d-flex {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  
  #topbar .topbar-widget {
    font-size: 0.85rem;
  }
}

/* Contact form - full width inputs on mobile */
@media (max-width: 768px) {
  #section-contact .form-control {
    font-size: 16px; /* Prevents zoom on iOS when focusing inputs */
  }
  
  #section-contact .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  /* reCAPTCHA - scale down on small screens */
  .g-recaptcha {
    transform-origin: left center;
  }
  
  @media (max-width: 400px) {
    .g-recaptcha {
      transform: scale(0.85);
    }
  }
}

/* Map iframe - ensure it doesn't overflow */
.map-container {
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.map-container iframe {
  width: 100% !important;
  max-width: 100%;
}

/* Clients/partners grid - better on mobile */
@media (max-width: 576px) {
  .col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  .bg-light.rounded-1.p-4 {
    padding: 1rem !important;
  }
}

/* Typography - prevent overflow on headings */
h1, h2, h3, h4, h5, h6 {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Slider text - scale down on mobile */
@media (max-width: 768px) {
  .sw-text-wrapper h1 {
    font-size: 1.75rem;
  }
  
  .sw-text-wrapper .lead {
    font-size: 1rem;
  }
}

/* Testimonial carousel - ensure cards fit */
@media (max-width: 576px) {
  .owl-carousel .item {
    padding: 0 10px;
  }
}

/* Footer - stack on mobile */
@media (max-width: 768px) {
  footer .container p {
    font-size: 0.9rem;
    line-height: 1.6;
  }
  
  footer .container img {
    max-width: 120px;
  }
}

/* Fix for mobile menu - ensure it doesn't overflow viewport */
header.header-mobile.menu-open {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}