/* ============================================================
   Responsive Fixes — ILI System Website
   ============================================================
   This file patches horizontal overflow issues and improves
   mobile responsiveness without touching the compiled source.
   ============================================================ */

/* 1. Prevent horizontal scroll / side whitespace on all viewports */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* 2. Remove the negative side-margins on <main> that push it
      wider than the viewport. Each inner <section> already carries
      its own px-6 / md:px-12 horizontal padding, so removing
      main's redundant margins/padding is fully safe. */
main {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3. Root wrapper: never exceed the viewport width */
#root {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

/* 4. Mobile nav improvements
      — make sure the logo+tagline row never overflows on small screens */
@media (max-width: 47.999rem) {
  nav .flex.items-center.gap-3 {
    gap: 0.5rem;
  }

  /* Slightly shrink logo on very small screens */
  nav img.w-29 {
    width: 6rem;   /* ≈ 96px instead of 116px */
    height: 3.5rem;
  }
}

/* 5. Hero section: cap the absolute logo image so it can never
      leak out of its overflow-hidden card on any screen size */
.w-\[960px\] {
  max-width: 100% !important;
}
.h-\[960px\] {
  max-height: 100% !important;
}

/* 6. Stats row on tiny screens — reduce gap so numbers don't crowd */
@media (max-width: 29.999rem) {
  .grid-cols-3.gap-8 {
    gap: 1rem;
  }
  /* Reduce border-left padding on stat items */
  .border-l.pl-8 {
    padding-left: 0.75rem;
  }
}

/* 7. Ensure the contact form grid stacks cleanly on mobile */
@media (max-width: 47.999rem) {
  form .grid.md\:grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

/* 8. MOBILE = DESKTOP LOOK WITH PHONE FORMATTING */
@media (max-width: 47.999rem) {
  /* Vertical scroll only */
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* Language dropdown menu - positioned below header bar */
  [role="menu"], .absolute, [class*="dropdown"] {
    position: absolute !important;
    top: 100% !important;
    right: 20px !important;
    left: auto !important;
    animation: none !important;
    transition: none !important;
    transform: none !important;
    will-change: auto !important;
    backface-visibility: hidden !important;
    perspective: none !important;
  }

  /* Remove dropdown item animations */
  [role="menuitem"], .dropdown a, .dropdown button {
    animation: none !important;
    transition: none !important;
  }

  /* Language dropdown button and menu - completely static */
  button[class*="bg-slate-50"][class*="rounded-xl"],
  .relative > div[class*="absolute"],
  [role="menu"] {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  /* Remove hover effects from language button */
  button[class*="bg-slate-50"][class*="rounded-xl"]:hover {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  /* Mobile menu - add small padding below header border line */
  .fixed.inset-0.z-40.bg-white.md\:hidden,
  div[class*="fixed"][class*="inset-0"][class*="bg-white"] {
    padding-top: 7rem !important;
  }

  .pt-20 {
    padding-top: 0 !important;
  }

  /* Mobile menu container */
  div[class*="fixed"][class*="inset-0"] > div {
    padding-top: 0 !important;
  }

  /* Make all menu content static */
  .fixed.inset-0.z-40.bg-white.md\:hidden * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  /* Menu items static */
  .flex.flex-col.gap-6.text-lg.font-medium.text-slate-800 a {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  /* Top header bar - completely static */
  nav.fixed.top-0.w-full.z-50,
  nav[class*="fixed"][class*="top-0"],
  header.fixed,
  .fixed.top-0 {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  /* Header elements static */
  nav.fixed.top-0.w-full.z-50 *,
  nav[class*="fixed"][class*="top-0"] * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  /* Header buttons - completely static */
  nav.fixed.top-0.w-full.z-50 button,
  nav[class*="fixed"][class*="top-0"] button,
  button.md\:hidden,
  button[class*="hover"] {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  /* Remove hover effects from header buttons */
  nav.fixed.top-0.w-full.z-50 button:hover,
  nav[class*="fixed"][class*="top-0"] button:hover,
  button.md\:hidden:hover {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  /* Hide animated arrow next to header */
  nav.fixed.top-0.w-full.z-50 svg,
  nav[class*="fixed"][class*="top-0"] svg,
  .lucide,
  svg[class*="arrow"],
  svg[class*="chevron"] {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  /* Hide any animated indicators */
  nav.fixed.top-0.w-full.z-50::before,
  nav.fixed.top-0.w-full.z-50::after,
  nav[class*="fixed"][class*="top-0"]::before,
  nav[class*="fixed"][class*="top-0"]::after {
    display: none !important;
  }

  /* Remove all vertical movement animations */
  * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  /* Disable scroll animations */
  .fixed.inset-0.z-40.bg-white.md\:hidden {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  #root, main {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* === HEADER: Logo far left, Lang+CTA right === */
  header, .header, nav {
    background: white !important;
    border-bottom: 1px solid #e5e7eb !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 999999 !important;
    padding: 0.5rem 0.75rem !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* HIDE the desktop nav links on mobile */
  .hidden.md\:flex.items-center.gap-8.text-sm.font-medium.text-slate-600 {
    display: none !important;
  }

  /* Header inner row: logo left, buttons right */
  nav .flex.items-center.justify-between {
    flex-direction: row !important;
    gap: 0 !important;
  }

  /* Logo section - push far left */
  nav .flex.items-center.gap-4:first-child,
  nav a.flex.items-center.gap-3 {
    margin-right: auto !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    gap: 0.5rem !important;
  }

  /* Logo image - smaller */
  nav img.w-29 {
    width: 4rem !important;
    height: 2.5rem !important;
  }

  /* Logo tagline text - smaller */
  nav .text-\[7px\] {
    font-size: 5px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.1em !important;
  }

  /* SHOW the ORIGINAL desktop language button on mobile */
  nav button[class*="bg-slate-50"][class*="rounded-xl"],
  nav .bg-slate-50.border.border-slate-200.rounded-xl,
  nav button.flex.items-center.gap-2.px-4.py-2.bg-slate-50 {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 0.625rem !important;
    padding: 0.25rem 0.5rem !important;
    white-space: nowrap !important;
    gap: 0.2rem !important;
    border-radius: 0.5rem !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
  }

  /* Language button icon smaller */
  nav button svg,
  nav .bg-slate-50 svg,
  nav [class*="bg-slate-50"] svg {
    width: 0.75rem !important;
    height: 0.75rem !important;
  }

  /* Remove all dropdown animations */
  [role="menu"], .absolute, [class*="dropdown"] {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  /* Remove dropdown item animations */
  [role="menuitem"], .dropdown a, .dropdown button {
    animation: none !important;
    transition: none !important;
  }

  /* Keep dropdown within header container */
  [role="menu"], .absolute, [class*="dropdown"] {
    position: absolute !important;
    animation: none !important;
    transition: none !important;
    transform: none !important;
    will-change: auto !important;
    backface-visibility: hidden !important;
    perspective: none !important;
    top: 100% !important;
    right: 20px !important;
    left: auto !important;
  }

  /* Ensure header has proper positioning for dropdown */
  header, nav, .header {
    position: relative !important;
    overflow: visible !important;
  }

  /* Force show ALL containers in nav */
  nav > div,
  nav > div > div {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  /* Force show the right-side container holding lang + CTA */
  nav > div:last-child,
  nav > div > div:last-child {
    display: flex !important;
    visibility: visible !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  /* SHOW Get Started button on mobile - smaller */
  nav a.hidden.sm\:block.px-6.py-2\.5 {
    display: inline-flex !important;
    font-size: 0.625rem !important;
    padding: 0.25rem 0.75rem !important;
    white-space: nowrap !important;
    align-items: center !important;
    border-radius: 9999px !important;
    order: 2 !important;
  }

  /* Language & CTA row stays horizontal */
  nav .flex.items-center.gap-3,
  nav .flex.items-center.gap-4 {
    flex-direction: row !important;
    flex-shrink: 0 !important;
    gap: 0.5rem !important;
    margin-left: auto !important;
    align-items: center !important;
  }

  /* Ensure language button is positioned right next to Get Started */
  nav button[class*="bg-slate-50"][class*="rounded-xl"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    order: 1 !important;
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
  }

  /* Force show the container that holds both buttons */
  nav > div:last-child,
  nav > div > div:last-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-left: auto !important;
  }

  /* Ensure both buttons are in the same row */
  nav > div:last-child > *,
  nav > div > div:last-child > * {
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Hide mobile hamburger - HIGHEST PRIORITY */
  nav .md\\:hidden,
  nav button.md\\:hidden,
  nav button[class*="menu"],
  nav .hamburger,
  nav .menu-toggle,
  nav button.p-2.text-slate-600 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* Remove all top padding that causes mobile issues */
  main, .main-content, #root > div:not(header):not(nav) {
    padding-top: 0 !important;
  }

  /* Remove extra padding that causes empty space but keep bottom padding */
  body {
    margin: 0 !important;
    padding: 0 0 100px 0 !important; /* Increased bottom padding */
  }

  #root {
    margin: 0 !important;
    padding: 0 0 60px 0 !important; /* Added bottom padding to root */
  }

  /* Fix mobile viewport and bottom content */
  html {
    height: 100% !important;
    overflow-y: auto !important;
  }

  body {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 100px !important; /* Increased bottom padding */
  }

  /* Ensure root container allows full content */
  #root {
    min-height: 100vh !important;
    padding-bottom: 60px !important; /* Increased root bottom padding */
  }

  /* Add bottom spacing to sections */
  section, .section, .container, .box, .card {
    margin-bottom: 30px !important; /* Increased section spacing */
  }

  /* Last element spacing */
  section:last-child, .section:last-child, .container:last-child, .box:last-child, .card:last-child {
    margin-bottom: 80px !important; /* Increased last element margin */
    padding-bottom: 50px !important; /* Increased last element padding */
  }

  /* Add extra space for very last content */
  section:last-child:last-child, .section:last-child:last-child, .container:last-child:last-child, .box:last-child:last-child, .card:last-child:last-child {
    margin-bottom: 120px !important; /* Maximum bottom space */
  }

  /* === CONTENT SECTIONS: Desktop look, phone width === */
  
  /* Enable page scrolling */
  html, body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Fix image formatting in containers */
  img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 0.5rem !important;
  }

  /* Fix images in boxes/containers */
  .container img, .box img, .card img, .img-container img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 0.5rem !important;
  }

  /* Add the image from assets/pic folder to fill the entire container */
  div[class*="relative"][class*="h-full"][class*="w-full"][class*="bg-white"][class*="rounded"][class*="border"][class*="border-slate-100"][class*="overflow-hidden"][class*="shadow-2xl"] {
    background-image: url("/assets/pic/Gemini_Generated_Image_q88o1bq88o1bq88o.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  /* Replace the specific img element with the image from assets/pic */
  img[class*="absolute"][class*="top-1/2"][class*="left-1/2"][class*="translate-x-1/2"][class*="translate-y-1/2"][class*="w-960"][class*="h-960"][class*="object-contain"][src*="logo.png"] {
    content: url("/assets/pic/Gemini_Generated_Image_q88o1bq88o1bq88o.png") !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Additional rule to target the exact img element */
  img[alt="ILI Inspection"][class*="absolute"][class*="top-1/2"][class*="left-1/2"][src="/logo/logo.png"] {
    content: url("/assets/pic/Gemini_Generated_Image_q88o1bq88o1bq88o.png") !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Universal replacement for all logo images with these classes */
  img[class*="absolute"][class*="top-1/2"][class*="left-1/2"] {
    content: url("/assets/pic/Gemini_Generated_Image_q88o1bq88o1bq88o.png") !important;
  }

  /* Also hide the original logo image completely */
  div[class*="relative"][class*="h-full"][class*="w-full"][class*="bg-white"][class*="rounded"] img[alt="ILI Inspection"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  
  /* Basic mobile layout fixes */
  .container, .box, .card, .img-container {
    padding: 20px !important;
    margin: 10px auto !important;
    max-width: 100% !important;
  }

  /* Basic text centering */
  .container p, .box p, .card p, .img-container p,
  .container h1, .box h1, .card h1, .img-container h1,
  .container h2, .box h2, .card h2, .img-container h2,
  .container h3, .box h3, .card h3, .img-container h3 {
    text-align: center !important;
    margin: 10px 0 !important;
  }

  /* Button and link centering */
  .container button, .box button, .card button, .img-container button,
  .container a, .box a, .card a, .img-container a {
    display: block !important;
    margin: 15px auto !important;
    text-align: center !important;
  }

  /* Hero */
  .hero, .hero-section, .banner,
  section[class*="hero"], section[class*="banner"] {
    padding: 2.5rem 1rem !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .hero h1, .hero-section h1,
  section[class*="hero"] h1 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.2 !important;
  }

  .hero p, .hero-section p,
  section[class*="hero"] p {
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
  }

  /* Features / Services */
  .features, .services, .solutions,
  section[class*="feature"], section[class*="service"] {
    padding: 2.5rem 1rem !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .features h2, .services h2 {
    font-size: 1.5rem !important;
    text-align: center !important;
    margin-bottom: 1.5rem !important;
  }

  .feature-grid, .service-grid, .cards-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .feature-card, .service-card, .card {
    padding: 1.25rem !important;
    border-radius: 0.5rem !important;
  }

  /* Stats */
  .stats, .counters, .numbers,
  section[class*="stat"] {
    padding: 2.5rem 1rem !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .stats-grid, .counter-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  .stat-number, .counter-number {
    font-size: 1.75rem !important;
  }

  /* Portfolio */
  .portfolio, .gallery, .projects,
  section[class*="portfolio"], section[class*="project"] {
    padding: 2.5rem 1rem !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .portfolio h2, .gallery h2 {
    font-size: 1.5rem !important;
    text-align: center !important;
    margin-bottom: 1.5rem !important;
  }

  .portfolio-grid, .gallery-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Testimonials */
  .testimonials, .reviews,
  section[class*="testimonial"] {
    padding: 2.5rem 1rem !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .testimonial-grid, .review-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Contact */
  .contact, .get-in-touch,
  section[class*="contact"] {
    padding: 2.5rem 1rem !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .contact h2, .get-in-touch h2 {
    font-size: 1.5rem !important;
    text-align: center !important;
    margin-bottom: 1.5rem !important;
  }

  .contact-form, .contact-form-wrapper {
    max-width: 100% !important;
  }

  .form-grid, .contact-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .form-group input, .form-group textarea,
  .form-field input, .form-field textarea {
    width: 100% !important;
    padding: 0.625rem !important;
    font-size: 0.875rem !important;
  }

  .submit-btn, .form-submit {
    width: 100% !important;
    padding: 0.75rem !important;
    font-size: 0.875rem !important;
  }

  /* Footer */
  footer, .footer {
    padding: 2rem 1rem !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .footer-content, .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .social-links, .social-media {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.75rem !important;
  }

  /* Images responsive */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Text no overflow */
  p, h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* ============================================================
   DESKTOP IMAGE REPLACEMENT - Works on Computer View
   ============================================================ */

/* Add the image from assets/pic folder to fill the entire container - DESKTOP */
div[class*="relative"][class*="h-full"][class*="w-full"][class*="bg-white"][class*="rounded"][class*="border"][class*="border-slate-100"][class*="overflow-hidden"][class*="shadow-2xl"] {
  background-image: url("/assets/pic/Gemini_Generated_Image_q88o1bq88o1bq88o.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Replace the specific img element with the image from assets/pic - DESKTOP */
img[class*="absolute"][class*="top-1/2"][class*="left-1/2"][class*="translate-x-1/2"][class*="translate-y-1/2"][class*="w-960"][class*="h-960"][class*="object-contain"][src*="logo.png"] {
  content: url("/assets/pic/Gemini_Generated_Image_q88o1bq88o1bq88o.png") !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Additional rule to target the exact img element - DESKTOP */
img[alt="ILI Inspection"][class*="absolute"][class*="top-1/2"][class*="left-1/2"][src="/logo/logo.png"] {
  content: url("/assets/pic/Gemini_Generated_Image_q88o1bq88o1bq88o.png") !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Universal replacement for all logo images with these classes - DESKTOP */
img[class*="absolute"][class*="top-1/2"][class*="left-1/2"] {
  content: url("/assets/pic/Gemini_Generated_Image_q88o1bq88o1bq88o.png") !important;
}

/* Hide the original logo image completely - DESKTOP */
div[class*="relative"][class*="h-full"][class*="w-full"][class*="bg-white"][class*="rounded"] img[alt="ILI Inspection"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}