/* ==========================================================================
   Advanced Pest Solutions, responsive.css
   Mobile-first breakpoint adjustments. Applies on top of style.css.
   Breakpoints: <576px (mobile), <992px (tablet), <1200px (small desktop)
   ========================================================================== */

/* ---------- Small desktop (<1200px) ---------- */
@media (max-width: 1199px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .industries-grid { grid-template-columns: repeat(3, 1fr); }
  .cities-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card-grid { grid-template-columns: repeat(2, 1fr); }
  .location-service-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-strip { grid-template-columns: repeat(4, 1fr); margin-top: -100px; }
}

/* ---------- Tablet (<992px) ---------- */
@media (max-width: 991px) {
  section { padding: 64px 0; }
  h1 { font-size: 2.3rem; }
  h2 { font-size: 1.85rem; }

  .main-nav { display: none; }
  .hamburger { display: flex; flex-shrink: 0; }
  .header-cta { display: none; }
  .logo { min-width: 0; }
  .logo .logo-text-sub { white-space: nowrap; }
  :root { --header-height: 80px; }
  .header-inner { padding: 8px 24px; }
  .logo-img { height: 60px; max-width: 230px; }

  /* Full-screen takeover panel. This lives in its own element
     (.mobile-nav-overlay) placed directly after </header> in the markup,
     rather than being the header's own <nav>. Reason: .site-header uses
     backdrop-filter, and an element with backdrop-filter/filter establishes
     a new containing block for any position:fixed descendant, so a fixed
     panel nested INSIDE the header was being sized/positioned relative to
     the (short) header box instead of the actual viewport, which is why it
     kept rendering too short with content hidden above/below. Being a
     sibling of the header instead of a descendant removes that containing
     block entirely, so top/right/bottom/left:0 below is always relative to
     the real viewport. The hamburger/close button sits above this panel
     (see .hamburger z-index) so it stays usable even though the panel
     visually covers the header underneath it. */
  .mobile-nav-overlay.is-open {
    display: flex;
    position: fixed;
    /* Explicit longhand instead of the "inset" shorthand: some in-app/older
       mobile browsers don't support "inset" and silently drop the whole
       declaration, which collapses this panel down to its content height
       instead of covering the full screen. top/right/bottom/left has been
       supported everywhere for years. */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    flex-direction: column;
    padding: 112px 24px 100px;
    overflow-y: auto;
    z-index: 650;
  }
  .mobile-nav-overlay.is-open .nav-list { flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
  .mobile-nav-overlay.is-open .nav-list > li { width: 100%; }
  .mobile-nav-overlay.is-open .nav-list a { display: block; padding: 14px 4px; width: 100%; border-bottom: 1px solid #EEF1F2; }
  .mobile-nav-overlay.is-open .dropdown-menu {
    position: static; transform: none; box-shadow: none; opacity: 1; visibility: visible;
    display: none; padding-left: 14px; margin-top: 4px;
  }
  .mobile-nav-overlay.is-open .dropdown-parent.is-open .dropdown-menu { display: block; }
  .mobile-nav-overlay.is-open .mobile-nav-close { display: flex; }

  .hero-inner { grid-template-columns: 1fr; padding-top: 20px; }
  .hero { padding: 46px 0 70px; }
  .hero h1 { font-size: 2.15rem; line-height: 1.2; }
  .hero-visual .visual-panel { min-height: auto; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); margin-top: -60px; }

  .split-block { grid-template-columns: 1fr; gap: 34px; }
  .split-block .split-media { order: -1; }

  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
  .cities-grid { grid-template-columns: repeat(2, 1fr); }
  .process-steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .before-after-grid { grid-template-columns: 1fr; }
  .service-card-grid { grid-template-columns: 1fr; }
  .pest-problem-grid { grid-template-columns: 1fr; }
  .benefits-list-two-col { columns: 1; }
  .location-service-grid { grid-template-columns: repeat(2, 1fr); }
  .location-service-cta .btn { padding: 13px 22px; font-size: 0.9rem; }

  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }

  .rating-banner, .emergency-banner { flex-direction: column; text-align: center; }
  .emergency-banner .emergency-text { flex-direction: column; }
}

/* ---------- Mobile (<576px) ---------- */
@media (max-width: 575px) {
  .container { padding: 0 18px; }
  .hero-inner { padding: 0 18px; }
  section { padding: 52px 0; }
  h1 { font-size: 1.95rem; }
  h2 { font-size: 1.6rem; }
  .hero { padding: 28px 0 60px; }
  .hero h1 { font-size: 1.7rem; line-height: 1.22; letter-spacing: -0.3px; }
  .hero-badge { font-size: 0.68rem; padding: 6px 12px 6px 10px; gap: 7px; }
  .hero-badge svg { width: 13px; height: 13px; }
  .hero-badge .badge-dot { width: 6px; height: 6px; }
  .hero-cta-group { flex-direction: column; }
  .hero-cta-group .btn { width: 100%; }
  .page-hero .hero-cta-group { flex-direction: row; }
  .page-hero .hero-cta-group .btn { width: auto; }
  .hero-trust-row { flex-direction: column; gap: 12px; }
  .hero-trust-row .trust-item { border-right: none; margin-right: 0; padding-right: 0; }
  .hero-visual .visual-panel { padding: 20px; gap: 12px; }
  .hero-visual .stat-box { padding: 14px 16px; gap: 12px; }
  .hero-visual .stat-box .stat-icon { width: 38px; height: 38px; }
  .hero-visual .stat-icon svg { width: 18px; height: 18px; }
  .hero-visual .stat-box .stat-num { font-size: 1.05rem; }
  .hero-visual .stat-box .stat-label { font-size: 0.78rem; }

  :root { --header-height: 66px; }
  .header-inner { padding: 6px 18px; }
  .logo-img { height: 52px; max-width: 200px; }
  p { font-size: 13px; }

  .stats-strip { grid-template-columns: repeat(2, 1fr); padding: 30px 18px; margin-top: -40px; }
  .stat-item .counter { font-size: 1.8rem; }

  .services-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
  .cities-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .location-service-grid { grid-template-columns: 1fr; gap: 16px; }
  .location-service-card { padding: 22px 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .testimonial-card { padding: 30px 22px; }
  .rating-banner .score-num { font-size: 2.3rem; }

  .form-row { grid-template-columns: 1fr; }
  .contact-form-card { padding: 26px; }

  .status-page { padding: 90px 0; }
  .status-page .status-code { font-size: 4rem; }

  /* Mobile sticky CTA bar */
  .mobile-cta-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 590;
    background: #fff;
    box-shadow: 0 -6px 20px rgba(15,76,92,0.14);
  }
  .mobile-cta-bar a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 10px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.92rem;
    color: #fff;
  }
  .mobile-cta-bar a svg { width: 18px; height: 18px; }
  .mobile-cta-bar .mcb-call { background: var(--color-primary); }
  .mobile-cta-bar .mcb-whatsapp { background: #25D366; }

  body { padding-bottom: 58px; }
  .floating-actions { bottom: 74px; right: 16px; }
  .floating-btn { width: 52px; height: 52px; }
  .back-to-top { bottom: 74px; left: 16px; width: 42px; height: 42px; }
}

/* When mobile CTA bar is present, only show on mobile; floating buttons still shown but nudged up (handled above) */