/* ═══════════════════════════════════════════════════════
   mobile.css — Pest OFF Company
   Mobile-first enhancements. Add to ALL pages:
   <link rel="stylesheet" href="/mobile.css">
   Place just before </head>
═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ──────────────────────────────────────────────
     1. STICKY BOTTOM CTA BAR
     Injected by mobile.js — styles live here
  ────────────────────────────────────────────── */
  .mob-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9999;
    display: flex;
    align-items: stretch;
    background: #ffffff;
    border-top: 1px solid #dddddd;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
  }

  .mob-bar a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 13px 12px;
    border-radius: 4px;
    transition: opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mob-bar a:active { opacity: 0.8; }

  .mob-bar-call {
    background: #ffffff;
    color: #1e1e1e;
    border: 1.5px solid #1e1e1e;
  }

  .mob-bar-quote {
    background: #8f2b2b;
    color: #ffffff;
    border: 1.5px solid #8f2b2b;
  }

  .mob-bar svg {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
  }

  /* Push footer/body above the bar */
  body { padding-bottom: 76px !important; }

  /* ──────────────────────────────────────────────
     2. HERO — strip verbose copy, keep what converts
  ────────────────────────────────────────────── */

  /* Index hero: hide the long paragraph and support line */
  .hero-sub,
  .hero-support {
    display: none !important;
  }

  /* Service page heroes: hide the long paragraph */
  .page-hero-content > p {
    display: none !important;
  }

  /* ──────────────────────────────────────────────
     3. READ-MORE — collapsible body copy
     JS targets .mob-expandable added by mobile.js
  ────────────────────────────────────────────── */

  .mob-expandable {
    position: relative;
    overflow: hidden;
    max-height: 4.8em; /* ~3 lines at 1.6 line-height */
    line-height: 1.6;
    transition: max-height 0.35s ease;
  }

  .mob-expandable.expanded {
    max-height: 2000px;
  }

  .mob-expandable:not(.expanded)::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2.4em;
    background: linear-gradient(to bottom, transparent, #ffffff);
    pointer-events: none;
  }

  /* Alt-background sections: match their bg color */
  .content-section.alt .mob-expandable:not(.expanded)::after,
  .alt .mob-expandable:not(.expanded)::after {
    background: linear-gradient(to bottom, transparent, #f7f7f5);
  }

  .mob-read-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #8f2b2b;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mob-read-more svg {
    transition: transform 0.25s ease;
    flex-shrink: 0;
  }

  .mob-read-more.expanded svg {
    transform: rotate(180deg);
  }

  /* ──────────────────────────────────────────────
     4. TRUST STRIP — horizontal scroll on mobile
  ────────────────────────────────────────────── */

  .trust-strip .container { padding: 0 !important; }

  .trust-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 0 !important;
    padding: 0 20px;
    /* hide scrollbar */
    scrollbar-width: none;
  }
  .trust-grid::-webkit-scrollbar { display: none; }

  .trust-item {
    flex: 0 0 auto !important;
    width: 160px !important;
    scroll-snap-align: start;
    border: none !important;
    border-right: 1px solid var(--border) !important;
    border-radius: 0 !important;
    padding: 20px 16px !important;
    text-align: center;
  }

  .trust-item:last-child { border-right: none !important; }
  .trust-item::before { display: none !important; }

  /* Override the 2-col grid overrides from main CSS */
  .trust-item:nth-child(3) { grid-column: unset !important; }

  /* ──────────────────────────────────────────────
     5. SPACING & DENSITY — tighter on mobile
  ────────────────────────────────────────────── */

  .content-section { padding: 48px 0 !important; }
  .section-header { margin-bottom: 24px !important; }

  /* Signs grid — keep 2-col, tighten cards */
  .sign-card { padding: 18px 14px !important; }
  .sign-title { font-size: 13px !important; }
  .sign-desc { font-size: 13px !important; }

  /* Service cards grid on index — 2 col stays, reduce padding */
  .service-card { padding: 20px 16px !important; }
  .service-card-desc { display: none; }

  /* FAQ accordion — bigger tap target */
  .faq-question {
    padding: 18px 0 !important;
    font-size: 15px !important;
  }

  /* Pricing rows — cleaner on mobile */
  .pricing-section .eyebrow { display: none; }

  /* ──────────────────────────────────────────────
     6. PRICE CLARITY BAR — compact on mobile
  ────────────────────────────────────────────── */

  .price-clarity {
    position: sticky;
    top: 72px;
    z-index: 80;
    background: #ffffff;
  }

  /* ──────────────────────────────────────────────
     7. REVIEWS — show only 2 on mobile
  ────────────────────────────────────────────── */

  .review-card:nth-child(n+3) { display: none; }

  /* ──────────────────────────────────────────────
     8. FOOTER — reduce text density
  ────────────────────────────────────────────── */

  .footer-tagline { display: none; }

}

/* ────────────────────────────────────────────────
   SMALL PHONES (≤ 390px)
──────────────────────────────────────────────── */
@media (max-width: 390px) {
  .mob-bar a {
    font-size: 11px;
    padding: 12px 8px;
  }
  .trust-item { width: 140px !important; }
}