/* ==========================================================================
   mihu-web mobile-fix.css
   Site-wide mobile responsiveness overrides. Loaded last so it wins.
   Targets the 43 pages built around the shared header / .container / mobile
   accordion drawer. Safe on the four zapier/zoho landing pages too.
   ========================================================================== */

/* ---- Global: kill horizontal overflow on every page -------------------- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img, svg, video, canvas, iframe {
  max-width: 100%;
}

/* ---- Tablet (<= 1024px) ------------------------------------------------ */
@media (max-width: 1024px) {
  .container,
  .integrations-strip-inner,
  .footer .container {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* Tighten header so the row never wraps */
  #header { padding: 10px 0 !important; }
  #header.scrolled { padding: 8px 0 !important; }
  #header .header-inner { gap: 12px; }

  /* The page sets `#header .nav { display: flex }` at higher specificity
     than the original mobile rule `.nav { display: none }`, so the desktop
     nav leaks through on mobile. Force it hidden, and make sure the
     hamburger wins its own visibility battle. */
  #header .nav { display: none !important; }
  .mobile-menu-toggle {
    display: flex !important;
    flex-shrink: 0;
  }

  /* The lang switcher is heavy; keep it but compact */
  .header-actions { gap: 8px !important; flex-shrink: 0; }
}

/* ---- Phone (<= 768px) -------------------------------------------------- */
@media (max-width: 768px) {
  .container,
  .integrations-strip-inner,
  .footer .container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Header: compact and never wider than the viewport */
  #header { padding: 8px 0 !important; }
  #header.scrolled { padding: 6px 0 !important; }
  #header .logo img { height: 16px !important; }
  #header .header-inner {
    gap: 8px;
    min-height: 44px;
  }

  /* At phone width, the header carries too much weight (Sign In + lang
     dropdown + Get Started + hamburger) which pushes the hamburger off
     the viewport edge — body overflow:hidden then clips it invisibly.
     Drop everything in header-actions; the drawer already exposes Sign
     In and Get Started. The hamburger remains the sole right-side affordance. */
  #header .header-actions > * { display: none !important; }
  .mobile-menu-toggle {
    width: 40px !important;
    height: 40px !important;
  }

  /* Drawer: sit flush under the real header height, not a hard-coded 64px */
  .mobile-menu {
    top: 52px !important;
    padding: 14px !important;
  }
  .mobile-menu-inner { padding: 0 !important; }
  .mobile-accordion-trigger {
    padding: 14px 12px !important;
    font-size: 15px !important;
  }
  .mobile-accordion-link {
    padding: 12px !important;
  }
  .mobile-accordion-link strong { font-size: 14px !important; }
  .mobile-accordion-link span { font-size: 12px !important; }
  .mobile-menu-actions { gap: 10px !important; }
  .mobile-menu-actions .btn {
    width: 100%;
    justify-content: center;
    padding: 12px 16px !important;
  }

  /* Body offset for the now-shorter header (was ~76px desktop) */
  .hero,
  section:first-of-type,
  main > section:first-child { padding-top: 64px; }

  /* Typography: scale down headings so they don't blow up the layout */
  h1, .hero-title, .hero-v2-title {
    font-size: clamp(28px, 7vw, 38px) !important;
    line-height: 1.15 !important;
  }
  h2, .section-title {
    font-size: clamp(22px, 5.5vw, 30px) !important;
    line-height: 1.2 !important;
  }
  h3 { font-size: clamp(18px, 4.5vw, 22px) !important; }
  .section-subtitle, .hero-subtitle {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* Hero CTA: stack and fill width on phones */
  .hero-cta, .hero-v2-cta, .hero-action-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    gap: 12px !important;
  }
  .hero-cta .btn,
  .hero-v2-cta .btn,
  .hero-action-buttons .hero-action-btn,
  .hero-action-buttons .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Stats row: wrap and breathe */
  .hero-stats { gap: 16px !important; }
  .hero-stats > * { flex: 1 1 45%; }

  /* Sections: less vertical air on phones */
  section { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* Any grid still set to multiple columns at this width collapses to one */
  .products-catalog,
  .industries-grid,
  .testimonials-grid,
  .cta-content,
  .smb-grid,
  .flexible-block,
  .pricing-grid,
  .features-grid,
  .agents-cards {
    grid-template-columns: 1fr !important;
  }

  /* Footer: stack columns cleanly */
  .footer-main {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
  .footer-brand { grid-column: span 2 !important; }
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  /* Cards / panels with hard-coded big paddings */
  .cta-card,
  .pricing-card,
  .feature-card,
  .case-card {
    padding: 24px !important;
  }

  /* Tables / code blocks shouldn't blow the viewport */
  table { display: block; overflow-x: auto; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
}

/* ---- Small phones (<= 380px) ------------------------------------------ */
@media (max-width: 380px) {
  .container,
  .integrations-strip-inner,
  .footer .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  #header .logo img { height: 14px !important; }
  .header-actions .btn-primary {
    padding: 7px 10px !important;
    font-size: 12px !important;
  }
}