/* ============================================================
   PlumberFinderUSA — Mobile CSS
   Full responsive pass. v6 brand system.
   Breakpoints: 768px (mobile), 991px (tablet), 1024px (small desktop)
   Last rebuilt: 2026-05-07
   ============================================================ */

/* ── Global mobile base ─────────────────────────────────────── */
@media (max-width: 768px) {
  html, body { overflow-x: hidden !important; }
  body { padding-bottom: 76px !important; }

  /* Containers */
  .container, .pf-container { padding-left: 16px !important; padding-right: 16px !important; }

  /* Typography scale-down */
  h1 { font-size: clamp(28px, 8vw, 40px) !important; }
  h2 { font-size: clamp(22px, 6vw, 30px) !important; }
  h3 { font-size: clamp(18px, 5vw, 22px) !important; }
  p  { font-size: 15px !important; }

  /* Bootstrap col fix — all cols full width on mobile */
  [class*="col-md-"], [class*="col-sm-"], [class*="col-lg-"] {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .row { margin-left: 0 !important; margin-right: 0 !important; }

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

  /* Tables scroll horizontally */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Header ─────────────────────────────────────────────────── */
@media (max-width: 991px) {
  #masthead {
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid var(--color-border) !important;
    box-shadow: none !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 500 !important;
  }
  .pfv6-nav, .pfusa-mainnav {
    padding: 0 16px !important;
    min-height: 60px !important;
    height: auto !important;
    background: transparent !important;
  }
  /* Brand */
  .pfv6-brand, .pfusa-brand-text {
    font-size: 17px !important;
    color: var(--ink-900) !important;
  }
  .pfv6-brand span, .pfusa-brand-text span { color: var(--color-accent) !important; }

  /* Hide desktop nav on mobile */
  .pfv6-navlinks, ul#menu-main-menu,
  .pfusa-navlinks, .pfv6-nav-actions,
  .main-nav, .nav-actions { display: none !important; }

  /* Show hamburger */
  .pfv6-mobile-toggle, .pfusa-mobile-toggle, .mobile-toggle {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding: 8px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
  }
  .pfv6-mobile-toggle span,
  .pfusa-mobile-toggle span { background: var(--ink-900) !important; width: 22px !important; height: 2px !important; border-radius: 2px !important; display: block !important; }
}

/* ── Mobile overlay nav ─────────────────────────────────────── */
@media (max-width: 991px) {
  .pfv6-overlay, .pfusa-mobile-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: #fff !important;
    z-index: 9999 !important;
    transform: translateX(100%) !important;
    transition: transform .3s cubic-bezier(.2,.8,.2,1) !important;
    overflow-y: auto !important;
    padding-top: env(safe-area-inset-top) !important;
  }
  .pfv6-overlay.open, .pfusa-mobile-overlay.open {
    transform: translateX(0) !important;
  }
}

/* ── Mobile sticky bar ──────────────────────────────────────── */
.pfv6-mobile-bar {
  display: none;
  position: fixed !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 999 !important;
  background: #fff !important;
  border-top: 1px solid var(--color-border) !important;
  padding: 10px 12px !important;
  padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  gap: 8px !important;
  box-shadow: 0 -4px 16px rgba(10,10,10,.08) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
@media (max-width: 768px) {
  .pfv6-mobile-bar { display: flex !important; }
  /* Hide old mobile bars */
  .mobile-sticky-cta, .mobile-call-bar { display: none !important; }
}
@media (min-width: 769px) {
  .pfv6-mobile-bar { display: none !important; }
}
.pfv6-mobile-bar .pf-mcb-search {
  flex: 2 !important;
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; gap: 8px !important;
  padding: 13px !important;
  background: var(--color-accent) !important; color: #fff !important;
  font-weight: 800 !important; font-size: 14px !important;
  border-radius: 12px !important; text-decoration: none !important;
}
.pfv6-mobile-bar .pf-mcb-emergency {
  flex: 1 !important;
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; gap: 6px !important;
  padding: 13px !important;
  background: var(--color-bg-muted) !important; color: var(--ink-900) !important;
  font-weight: 700 !important; font-size: 13px !important;
  border-radius: 12px !important; text-decoration: none !important;
  border: 1px solid var(--color-border) !important;
}

/* ── Homepage hero (front-page.php) ────────────────────────── */
@media (max-width: 768px) {
  .pf-hero {
    min-height: 480px !important;
    padding: 4vh 0 70px !important;
  }
  .pf-hero-content { padding: 0 8px !important; }
  .pf-hero h1 {
    font-size: clamp(30px, 8vw, 42px) !important;
    color: #fff !important;
    text-shadow: 0 2px 20px rgba(0,0,0,.60) !important;
    line-height: 1.1 !important;
  }
  .pf-hero-sub {
    font-size: 15px !important;
    color: rgba(255,255,255,.92) !important;
    text-shadow: 0 1px 8px rgba(0,0,0,.50) !important;
    padding: 0 4px !important;
  }
  .pf-hero-eyebrow { font-size: 10px !important; padding: 5px 10px !important; }
  .pf-hero-bottom { padding: 0 12px !important; max-width: 100% !important; }
  .pf-chat-input-row { border-radius: 18px !important; }
  .pf-chips { gap: 6px !important; padding: 0 4px !important; }
  .pf-chip { font-size: 12px !important; padding: 6px 11px !important; }

  /* Trust strip */
  .pf-trust-inner {
    gap: 12px 20px !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    padding: 0 16px !important;
  }
  .pf-trust-item { flex-shrink: 0 !important; font-size: 12px !important; }

  /* AI strip */
  .pf-ai-inner { flex-direction: column !important; gap: 20px !important; }
  .pf-ai-logos { flex-wrap: wrap !important; gap: 6px !important; }
  .pf-ai-logo { font-size: 12px !important; padding: 7px 11px !important; }

  /* Category grid */
  .pf-cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .pf-cat-card { aspect-ratio: 3/2 !important; }
  .pf-cat-card h3 { font-size: 15px !important; }

  /* Listings grid */
  .pf-listings-grid { grid-template-columns: 1fr !important; }

  /* Testimonials */
  .pf-testimonials-grid { grid-template-columns: 1fr !important; }
  .pf-testimonial { padding: 22px 18px !important; }
  .pf-testimonial-quote { font-size: 15px !important; }

  /* How it works */
  .pf-how-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .pf-how-img-wrap { display: none !important; } /* hide desktop image on mobile */
  .pf-how-step { padding: 18px !important; }
  .pf-how-step h3 { font-size: 16px !important; }

  /* States grid */
  .pf-states-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .pf-state-pill { padding: 11px 12px !important; font-size: 13px !important; }

  /* For Pros */
  .pf-pros-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .pf-pros-text h2 { font-size: clamp(26px, 7vw, 36px) !important; }
  .pf-pros-cta-row { flex-direction: column !important; gap: 10px !important; }
  .pf-btn-cta-large, .pf-btn-ghost { width: 100% !important; justify-content: center !important; }

  /* FAQ */
  .pf-faq-summary { font-size: 14px !important; padding: 14px 16px !important; }
  .pf-faq-answer { padding: 0 16px 16px !important; font-size: 14px !important; }
}

/* ── Sign-up page (signup.php) ──────────────────────────────── */
@media (max-width: 768px) {
  .sp2-announce { font-size: 11px !important; padding: 8px 12px !important; }
  .sp2-nav { padding: 12px 16px !important; }
  .sp2-hero { padding: 70px 16px 40px !important; }
  .sp2-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .sp2-h1 { font-size: clamp(26px, 7vw, 36px) !important; }
  .sp2-sub { font-size: 15px !important; }
  .sp2-form-card {
    padding: 20px 16px !important;
    border-radius: 16px !important;
    position: static !important;
  }
  .sp2-hiw-steps { flex-direction: column !important; }
  .sp2-preview-grid { grid-template-columns: 1fr !important; }
  .sp2-preview-phone-wrap { display: none !important; }
  .sp2-pricing-cards { grid-template-columns: 1fr !important; }
  .sp2-checkout-inner { flex-direction: column !important; gap: 24px !important; }
  .sp2-checkout-card { width: 100% !important; }
  .sp2-final-inner { flex-direction: column !important; gap: 24px !important; }
  .sp2-testimonials-grid { grid-template-columns: 1fr !important; }
}

/* ── Browse listings (zl-listings-render.php) ───────────────── */
@media (max-width: 768px) {
  .zl-wrap { flex-direction: column !important; }
  .zl-sidebar { display: none !important; } /* hide filters on mobile, use modal */
  .zl-results { width: 100% !important; }
  .zl-card { flex-direction: column !important; }
  .zl-card-photo { width: 100% !important; height: 180px !important; }
  .zl-card-body { padding: 14px !important; }
  .zl-map-col { height: 300px !important; }
  .zl-search-bar { flex-direction: column !important; gap: 8px !important; }
  .zl-search-field { width: 100% !important; }

  /* Mobile filter button */
  .zl-mobile-filter-btn {
    display: flex !important;
    width: 100% !important;
    margin-bottom: 12px !important;
  }
}

/* ── Single business listing (single-business.php / spv2) ───── */
@media (max-width: 768px) {
  .spv2-hero-inner { flex-direction: column !important; gap: 16px !important; }
  .spv2-hero-right { width: 100% !important; }
  .spv2-score-wrap { flex-direction: row !important; gap: 12px !important; }
  .spv2-tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .spv2-tab { white-space: nowrap !important; padding: 10px 14px !important; }
  .spv2-content-grid { grid-template-columns: 1fr !important; }
  .spv2-sidebar { order: -1 !important; } /* sidebar above content on mobile */
  .spv2-name-meta h1 { font-size: clamp(20px, 6vw, 28px) !important; }
  .spv2-call-actions { flex-direction: column !important; gap: 10px !important; }
  .spv2-btn-primary, .spv2-btn-outline { width: 100% !important; justify-content: center !important; }
  .spv2-gallery { grid-template-columns: repeat(2, 1fr) !important; }
  .spv2-reviews-header { flex-direction: column !important; gap: 12px !important; }
}

/* ── Blog posts (single.php) ────────────────────────────────── */
@media (max-width: 768px) {
  .blog-post-layout { grid-template-columns: 1fr !important; }
  .blog-post-sidebar { display: none !important; } /* hide sidebar on mobile */
  .blog-post-main { border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; }
  .blog-post-header { padding: 16px !important; }
  .blog-post-title { font-size: clamp(22px, 6vw, 30px) !important; }
  .blog-post-body { padding: 16px !important; }
  .blog-post-cta { margin: 0 !important; border-radius: 0 !important; }
  .blog-related-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .blog-card { flex-direction: column !important; }
  .blog-card-img-wrap { width: 100% !important; aspect-ratio: 16/9 !important; height: auto !important; min-height: 0 !important; flex-shrink: 0 !important; }
  .blog-card-body { padding: 14px !important; gap: 8px !important; justify-content: flex-start !important; }
  .blog-card-title { font-size: 15px !important; line-height: 1.3 !important; }
  .blog-card-excerpt { -webkit-line-clamp: 2 !important; font-size: 13px !important; }
}

/* ── Footer ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .site-footer, footer#colophon { padding-top: 40px !important; }
  .footer-main .row,
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px 16px !important; }
  .footer-brand-text { font-size: 18px !important; }
  .footer-desc { font-size: 13px !important; max-width: 100% !important; }
  .footer-heading { font-size: 12px !important; margin-bottom: 10px !important; }
  .footer-links a { font-size: 13px !important; }
  .footer-bottom-bar .row { flex-direction: column !important; text-align: center !important; gap: 8px !important; }
  .footer-legal-links, .footer-legal { justify-content: center !important; gap: 16px !important; }
  .footer-copy { font-size: 12px !important; }
  .footer-contact-list li { font-size: 13px !important; }
  .footer-social-wrap { text-align: center !important; }
  .footer-badges { justify-content: flex-start !important; flex-wrap: wrap !important; }
  .footer-cta-box { padding: 20px 16px !important; }
}

/* ── About page ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .about-hero-inner { flex-direction: column !important; gap: 24px !important; }
  .about-mission .container { flex-direction: column !important; }
  .about-how .container { flex-direction: column !important; gap: 24px !important; }
  .about-values-grid { grid-template-columns: 1fr !important; }
  .about-team-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}

/* ── How it works page ──────────────────────────────────────── */
@media (max-width: 768px) {
  .hiw-hero-inner { text-align: center !important; }
  .hiw-steps { flex-direction: column !important; gap: 0 !important; }
  .hiw-step { flex-direction: row !important; gap: 16px !important; padding: 16px 0 !important; }
  .hiw-step-num { flex-shrink: 0 !important; }
  .hiw-split { flex-direction: column !important; gap: 24px !important; }
}

/* ── FAQ page ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .faq-hero-inner { text-align: center !important; padding: 0 16px !important; }
  .faq-content-section .container { flex-direction: column !important; }
  .faq-sidebar { display: none !important; }
  .faq-item { margin-bottom: 8px !important; }
  .faq-summary { font-size: 14px !important; padding: 14px 16px !important; }
  .faq-answer p { font-size: 14px !important; }
}

/* ── State/taxonomy pages ───────────────────────────────────── */
@media (max-width: 768px) {
  .pfst-hero { padding: 40px 16px !important; }
  .pfst-hero-title { font-size: clamp(24px, 7vw, 32px) !important; }
  .pfst-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .pfst-state-card { padding: 12px !important; }
}

/* ── Contact page ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .contact-layout { flex-direction: column !important; }
  .contact-form-wrap { width: 100% !important; }
  .contact-info-wrap { width: 100% !important; }
}

/* ── Login page ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .login-layout { flex-direction: column !important; }
  .login-card { width: 100% !important; max-width: 100% !important; border-radius: 0 !important; }
}

/* ── Chat dialog (homepage) ─────────────────────────────────── */
@media (max-width: 768px) {
  dialog.pf-chat-dialog {
    width: calc(100% - 16px) !important;
    max-height: 88vh !important;
    border-radius: 20px !important;
    margin: auto !important;
  }
  dialog.pf-chat-dialog .pf-chat-dialog-inner {
    padding: 40px 12px 12px !important;
  }
  dialog.pf-chat-dialog .pf-dialog-chip {
    font-size: 12px !important;
    padding: 6px 11px !important;
  }
  .pf-chat-result-name { max-width: 140px !important; }
}

/* ── Tablet (769-1024px) ────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .pf-cat-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .pf-listings-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .pf-testimonials-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .sp2-hero-inner { gap: 28px !important; }
  .sp2-form-card { padding: 22px !important; }
  .blog-post-layout { grid-template-columns: 1fr 280px !important; }
}

/* ── Accessibility ──────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Minimum touch target 44x44px — scoped to CTA/nav links only, NOT decorative links */
  button,
  [role="button"],
  .pf-btn,
  .spv2-btn,
  .pfv6-nav-link,
  .sidebar-btn-search,
  .sidebar-emergency,
  .blog-cta-btn,
  .pfspec-cta-btn,
  .pfspec-hero-btn-primary,
  .pfspec-hero-btn-secondary,
  .pf-mcb-search,
  .pf-mcb-emergency,
  input[type="submit"],
  input[type="button"] { min-height: 44px !important; }
  input, select, textarea { font-size: 16px !important; } /* prevent iOS zoom */
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}