/* ============================================
   Truvio — Mobile Fix Patch
   Add this file AFTER your main style.css
   <link rel="stylesheet" href="truvio-mobile-fixes.css">
   ============================================ */


/* ── 1. DUAL NAVBAR FIX ──────────────────────
   Two navbars render on mobile causing overlap.
   Keep whichever nav has class .main-header or
   similar and hide the duplicate. Adjust the
   selector below to match your actual class names.
   ─────────────────────────────────────────── */
@media (max-width: 991px) {
  /* Hide the first/duplicate navbar — update selector to match your HTML */
  header:first-of-type {
    display: none;
  }
}


/* ── 2. HERO SECTION FIX ─────────────────────
   Stack text above image on mobile.
   Update .hero-area / .hero-wrapper to your
   actual hero container class names.
   ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-area,
  .hero-wrapper,
  .hero-content-wrapper {
    flex-direction: column !important;
    text-align: center;
    padding: 40px 20px !important;
    overflow: hidden;
  }

  /* Push hero images below text, remove absolute positioning */
  .hero-area img,
  .hero-img,
  .hero-image-wrap {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 24px;
  }

  /* Shape/bg images — hide decorative ones on mobile */
  .hero-area .hero-shape,
  img[src*="shape"],
  img[src*="hero1-shape"] {
    display: none;
  }
}


/* ── 3. STATS BAR FIX (99.9% / 150+ / 2x) ───
   Stack stat items on small screens.
   ─────────────────────────────────────────── */
@media (max-width: 575px) {
  .counter-area,
  .fact-area,
  .stats-wrapper,
  [class*="counter"],
  [class*="fact"] {
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 16px !important;
    padding: 24px 20px !important;
  }

  /* If using flex row */
  .counter-area .row,
  .fact-area .row {
    flex-direction: column;
    align-items: center;
  }
}

@media (min-width: 576px) and (max-width: 768px) {
  .counter-area,
  .fact-area {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* ── 4. SERVICE CARDS FIX ────────────────────
   Single-column cards on mobile.
   ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .service-area .row,
  .services-grid,
  [class*="service"] .row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .service-area,
  .services-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Service cards — full width */
  [class*="service-item"],
  [class*="service-card"] {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* ── 5. CONTACT SECTION FIX ──────────────────
   Stack contact info + form vertically.
   ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .contact-area .row,
  .contact-wrapper,
  [class*="contact"] .row {
    flex-direction: column !important;
  }

  .contact-area,
  [class*="contact-section"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Form full width */
  .contact-area form,
  [class*="contact"] form {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
  }

  /* Inputs stretch full width */
  .contact-area input,
  .contact-area textarea,
  .contact-area select {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ── 6. FOOTER FIX ───────────────────────────
   Stack footer columns on mobile.
   ─────────────────────────────────────────── */
@media (max-width: 768px) {
  footer .row,
  .footer-top .row,
  .footer-widget-wrapper {
    flex-direction: column !important;
    gap: 2rem !important;
  }

  footer .col,
  footer [class*="col-"],
  footer .widget-col {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
    text-align: left;
  }

  /* Footer bottom bar — stack copyright on mobile */
  .footer-bottom .row {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
  }
}

@media (min-width: 576px) and (max-width: 991px) {
  footer .row,
  .footer-top .row {
    flex-wrap: wrap !important;
  }

  footer [class*="col-"] {
    width: 50% !important;
    max-width: 50% !important;
  }
}


/* ── GLOBAL MOBILE BASELINE ──────────────────
   Catch-all overflow and padding fixes.
   ─────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Prevent horizontal scroll */
  body,
  html {
    overflow-x: hidden !important;
  }

  /* Consistent section padding */
  section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Images never overflow */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Typography scale down */
  h1 { font-size: clamp(26px, 6vw, 48px) !important; }
  h2 { font-size: clamp(22px, 5vw, 38px) !important; }
  h3 { font-size: clamp(17px, 4vw, 24px) !important; }
}