/* Responsive overrides to enhance mobile & tablet experience */

/* Base fluid media */
img, video { max-width: 100%; height: auto; display: block; }

/* Enhanced image optimization for mobile */
.features_item img, .contact_card img { 
  width: 100%; 
  height: auto; 
  object-fit: cover; 
  border-radius: 4px; 
}

/* Service page images */
.service-content img { 
  max-width: 100%; 
  height: auto; 
  margin: 16px 0; 
  border-radius: 4px; 
}

/* Background images optimization */
.index-banner, .page-header { 
  background-attachment: scroll; 
  background-position: center center; 
  background-size: cover; 
}

/* Containers padding on small screens */
.am-container, .container { padding-left: 16px; padding-right: 16px; }

/* Logo sizing - Original dimensions with responsive optimization */
.logo img { max-width: 160px; height: auto; }
.m-logo img { max-width: 140px; height: auto; }

/* Desktop logo - Override common.min.css */
.header .logo img { 
    width: 359px !important; /* Original size */
    max-width: 359px;
    height: auto;
}

/* Mobile responsive logo optimization */
@media screen and (max-width: 640px) {
    .m-header .m-logo {
        width: 259px !important; /* Original mobile size */
        margin: 8px auto;
    }
    
    .m-header .m-logo img {
        width: 259px !important; /* Original mobile size */
        max-width: 259px;
        margin: 0 auto;
    }
}

/* Additional responsive breakpoints for better mobile display */
@media screen and (max-width: 480px) {
    .header .logo img {
        width: 280px !important;
        max-width: 280px;
    }
    
    .m-header .m-logo {
        width: 200px !important;
        margin: 5px auto;
    }
    
    .m-header .m-logo img {
        width: 200px !important;
        max-width: 200px;
    }
}

@media screen and (max-width: 360px) {
    .header .logo img {
        width: 240px !important;
        max-width: 240px;
    }
    
    .m-header .m-logo {
        width: 180px !important;
        margin: 5px auto;
    }
    
    .m-header .m-logo img {
        width: 180px !important;
        max-width: 180px;
    }
}

/* Buttons - Enhanced touch targets */
.contact-btn button { width: 100%; min-height: 44px; padding: 12px 16px; }
.am-btn { min-height: 44px; padding: 12px 20px; font-size: 16px; }

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

/* Enhanced typography for mobile readability */
body { font-size: 16px; line-height: 1.6; }
p { margin-bottom: 1.2em; }
h1, h2, h3, h4, h5, h6 { line-height: 1.3; margin-bottom: 0.8em; }

/* Touch-friendly navigation */
.am-menu-nav a { 
  padding: 16px 20px; 
  min-height: 44px; 
  display: flex; 
  align-items: center; 
  font-size: 16px; 
}

/* Mobile menu trigger enhancement */
.m-menu-trigger { 
  min-width: 44px; 
  min-height: 44px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding: 8px; 
}

/* Contact cards touch optimization */
.contact_card { 
  padding: 40px 20px 32px; 
  margin: 16px 8px; 
}
.contact_card .am-btn-secondary { 
  min-height: 44px; 
  padding: 12px 24px; 
  font-size: 16px; 
}

/* Index page adjustments */
.index-page .index-banner { height: 420px; background-position: center center; background-size: cover; }
.features_item { text-align: center; }
.features_item img { width: 100%; }
.features_item--title { font-size: 18px; line-height: 1.3; }
.features_item--text { font-size: 14px; line-height: 1.6; }

/* Service pages header & breadcrumb */
.page-header { padding: 24px 0; }
.page-header-title { font-size: 24px; text-align: center; }
.breadcrumb-box { padding: 8px 0; }
.am-breadcrumb { display: flex; flex-wrap: wrap; }

/* Footer spacing */
.footer { padding-top: 16px; padding-bottom: 16px; }
.footer .am-container { padding-left: 16px; padding-right: 16px; }
.footer--bg { min-height: 80px; background-size: cover; background-position: center; }

/* Breakpoints */
@media (max-width: 767px) {
  /* Hide desktop nav container if any residual shows */
  .layout-header .nav-contain { display: none; }

  /* Stack grid columns */
  .am-u-md-3, .am-u-lg-2, .am-u-md-10 { width: 100% !important; float: none !important; }

  /* Mobile Menu Icon Fix - Replace Font Awesome with CSS */
  .m-menu-trigger {
    position: relative;
    display: inline-block;
    padding: 10px;
    cursor: pointer;
    background: transparent;
    border: none;
    outline: none;
  }

  .m-menu-trigger .am-icon-bars {
    display: none; /* Hide the Font Awesome icon */
  }

  /* Create hamburger menu icon with CSS */
  .m-menu-trigger::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 18px;
    background: linear-gradient(
        to bottom,
        #333 0%,
        #333 20%,
        transparent 20%,
        transparent 40%,
        #333 40%,
        #333 60%,
        transparent 60%,
        transparent 80%,
        #333 80%,
        #333 100%
    );
    border-radius: 2px;
  }

  /* Hover effect for menu trigger */
  .m-menu-trigger:hover::before {
    background: linear-gradient(
        to bottom,
        #6975a6 0%,
        #6975a6 20%,
        transparent 20%,
        transparent 40%,
        #6975a6 40%,
        #6975a6 60%,
        transparent 60%,
        transparent 80%,
        #6975a6 80%,
        #6975a6 100%
    );
  }

  /* Ensure the menu trigger is visible and clickable */
  .m-header .m-menu-trigger {
    display: block;
    position: relative;
    z-index: 1000;
    padding: 15px;
    margin: 5px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .m-header .menu-bars {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  /* Header optimizations */
  .header { padding: 16px 0; }
  .header-right { margin-top: 12px; }
  .header-contact { padding: 0 !important; margin-bottom: 12px; }
  .header_contacts--item { margin-bottom: 8px; }
  .contact_mini { padding: 8px 0 8px 40px; }
  .contact_mini strong { font-size: 16px; }
  .contact_mini span { font-size: 14px; }

  /* Banner optimizations */
  .index-page .index-banner { height: 38vh; min-height: 240px; }
  
  /* Features section */
  .features_item { margin-bottom: 24px; padding: 16px; }
  .features_item--title { font-size: 18px; margin-bottom: 8px; }
  .features_item--text { font-size: 15px; line-height: 1.5; }

  /* Service pages */
  .page-header { padding: 32px 0; }
  .page-header-title { font-size: 24px; margin-bottom: 8px; }
  
  /* Content sections */
  .section { padding: 40px 0; }
  .section--title { font-size: 28px !important; margin-bottom: 16px; }
  .section--description { font-size: 16px !important; line-height: 1.6; }
  
  /* Footer improvements */
  .footer_main--column { margin: 32px 0 0; }
  .footer_main--column_title { font-size: 18px; margin-bottom: 12px; }
  .footer_about--text { font-size: 16px; line-height: 1.6; }
  .footer_navigation--item { padding: 14px 25px 14px 0; }
  .footer_contact_info--item { padding: 12px 0; font-size: 16px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  /* Tablet optimizations */
  .header { padding: 20px 0; }
  .index-page .index-banner { height: 50vh; min-height: 320px; }
  
  /* Features section for tablets */
  .features_item { margin-bottom: 20px; padding: 20px; }
  .features_item--title { font-size: 20px; margin-bottom: 10px; }
  .features_item--text { font-size: 16px; line-height: 1.5; }
  
  /* Service pages for tablets */
  .page-header { padding: 48px 0; }
  .page-header-title { font-size: 36px; }
  
  /* Content sections for tablets */
  .section { padding: 60px 0; }
  .section--title { font-size: 40px !important; }
  .section--description { font-size: 18px !important; }
  
  /* Contact cards for tablets */
  .contact_card { padding: 60px 30px 40px; margin: 20px 10px; }
  
  /* Footer for tablets */
  .footer_main--column { margin: 40px 0 0; }
}