/* ============================================
   MOBILE RESPONSIVENESS FIXES
   Fixes common mobile usability issues
   ============================================ */

/* Fix fixed position footer on mobile */
@media screen and (max-width: 767px) {
  footer.position-fixed {
    position: relative !important;
    width: 100%;
    margin-top: 2rem;
    padding: 1rem 0.5rem !important;
    font-size: 0.875rem;
  }
  
  /* Add bottom padding to main content to prevent footer overlap */
  main {
    padding-bottom: 2rem !important;
  }
}

/* Fix certificate logos on mobile */
@media screen and (max-width: 767px) {
  .position-fixed.bottom-0.end-0 {
    position: relative !important;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
  }
  
  .position-fixed.bottom-0.end-0 img {
    max-width: 80px !important;
    height: auto !important;
    margin: 0.25rem;
  }
}

/* Make buttons responsive */
@media screen and (max-width: 767px) {
  .custombtnw {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0.5rem;
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem;
  }
  
  /* Ensure all buttons are touch-friendly (min 44x44px) */
  .btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 1rem;
  }
}

/* Fix product page column layouts on mobile */
@media screen and (max-width: 767px) {
  .bg-body-tertiary.shadow-sm {
    width: 95% !important;
    height: auto !important;
    min-height: auto !important;
    padding: 1rem !important;
  }
  
  .bg-body-tertiary.shadow-sm .row {
    flex-direction: column;
  }
  
  .bg-body-tertiary.shadow-sm .col-3,
  .bg-body-tertiary.shadow-sm .col-4,
  .bg-body-tertiary.shadow-sm .col-5 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100%;
    margin-bottom: 1rem;
  }
  
  .bg-body-tertiary.shadow-sm .col-3 h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    text-align: center;
  }
  
  .bg-body-tertiary.shadow-sm img {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
  }
}

/* Fix navigation logo on mobile */
@media screen and (max-width: 767px) {
  .nav__logo img {
    max-width: 150px !important;
    width: auto !important;
    height: auto !important;
  }
  
  .navbar-brand {
    font-size: 1rem;
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
  }
  
  .navbar-brand img {
    max-height: 40px !important;
    width: auto !important;
    height: auto !important;
  }
}

/* Fix main content padding on mobile */
@media screen and (max-width: 767px) {
  .text-bg-dark {
    padding: 1.5rem 1rem !important;
  }
  
  .pt-6, .pt-md-5 {
    padding-top: 1.5rem !important;
  }
  
  .px-6, .px-md-5 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .my-6, .my-md-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  
  .py-6 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* Fix display-5 heading size on mobile */
@media screen and (max-width: 767px) {
  .display-5 {
    font-size: 1.75rem !important;
    line-height: 1.3;
  }
  
  h1.display-5,
  h2.display-5 {
    font-size: 1.5rem !important;
  }
}

/* Fix text width constraints on mobile */
@media screen and (max-width: 767px) {
  .mx-auto[style*="width: 80%"] {
    width: 95% !important;
    max-width: 100% !important;
  }
  
  p {
    font-size: 0.95rem;
    line-height: 1.6;
  }
}

/* Fix images in main content */
@media screen and (max-width: 767px) {
  main img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Home page hero image */
  main .text-bg-dark img {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Fix slick carousel on mobile */
@media screen and (max-width: 767px) {
  .slick-slide {
    margin: 0px 10px !important;
  }
  
  .customer-logos.slider {
    padding: 0 1rem;
  }
  
  .customer-logos .slide img {
    max-width: 120px;
    height: auto;
  }
}

/* Fix container spacing */
@media screen and (max-width: 767px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .d-md-flex {
    flex-direction: column;
  }
  
  .me-md-6,
  .me-md-3 {
    margin-right: 0 !important;
    margin-bottom: 1rem;
  }
}

/* Fix offcanvas menu on mobile */
@media screen and (max-width: 767px) {
  .offcanvas {
    width: 85% !important;
  }
  
  .navbar-nav {
    gap: 0.5rem;
  }
  
  .nav-link {
    padding: 0.75rem 1rem !important;
    font-size: 1rem;
  }
}

/* Ensure touch targets are adequate */
@media screen and (max-width: 767px) {
  a, button, .nav-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Fix overflow issues */
@media screen and (max-width: 767px) {
  body {
    overflow-x: hidden;
  }
  
  .overflow-hidden {
    overflow: visible !important;
  }
}

/* Improve readability on small screens */
@media screen and (max-width: 767px) {
  body {
    font-size: 16px; /* Prevent iOS zoom on input focus */
    -webkit-text-size-adjust: 100%;
  }
  
  .lead {
    font-size: 1rem;
  }
}

/* Fix spacing between sections */
@media screen and (max-width: 767px) {
  .d-md-flex.flex-md-equal {
    margin-bottom: 1.5rem;
  }
  
  br {
    display: block;
    margin: 0.5rem 0;
  }
}

/* Fix about page specific issues */
@media screen and (max-width: 767px) {
  .text-bg-dark .mx-auto {
    padding: 0 0.5rem;
  }
}

/* Fix products page button spacing */
@media screen and (max-width: 767px) {
  .bg-body-tertiary.shadow-sm p {
    margin-bottom: 0.75rem;
  }
  
  .bg-body-tertiary.shadow-sm .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* Extra small devices (phones in portrait) */
@media screen and (max-width: 375px) {
  .display-5 {
    font-size: 1.25rem !important;
  }
  
  .position-fixed.bottom-0.end-0 img {
    max-width: 60px !important;
  }
  
  .nav__logo img {
    max-width: 120px !important;
  }
  
  footer {
    font-size: 0.75rem !important;
    padding: 0.75rem 0.25rem !important;
  }
}

/* Landscape orientation fixes */
@media screen and (max-width: 767px) and (orientation: landscape) {
  footer.position-fixed {
    position: relative !important;
  }
  
  .position-fixed.bottom-0.end-0 {
    position: relative !important;
  }
}