/* ============================================================
   Metro West Lawn & Landscape — Mobile-First Enhancements
   Layered on top of Tailwind utilities. Loaded site-wide.
   Goal: bigger touch targets, centered content, always-visible
   conversion CTAs on phones (where majority of traffic lives).
   ============================================================ */

/* ---- Base typography bump on small screens ---- */
@media (max-width: 767px) {
  /* WCAG-friendly minimum body size */
  body { font-size: 16px; line-height: 1.55; }

  /* Section padding tighter on mobile so users see more above the fold */
  section { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  section .py-20, section .py-24 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

  /* Cap headline sizes so they don't overflow narrow viewports */
  h1 { word-break: break-word; }

  /* Make MOST tappable cards thumb-friendly (44px), but NOT inline links inside dense bars */
  main a, main button, section a:not(.text-sm):not(.text-xs), section button { min-height: 44px; }

  /* Always center prose paragraphs in headers/intros */
  .max-w-3xl > p, .max-w-3xl > .text-slate2,
  .max-w-2xl > p, .max-w-2xl > .text-slate2 { text-align: center; }

  /* Buttons should stretch to thumb-friendly width on mobile */
  .mw-stretch-mobile { width: 100% !important; max-width: 100%; }

  /* Reserve space at bottom so the sticky bar doesn't cover content */
  body { padding-bottom: 76px !important; }

  /* ============================================================
     TOP UTILITY BAR (green) — [FB][IG]  📞 phone  [LinkedIn]
     - Sticks to top of viewport (above the white header)
     - 3-segment symmetric layout: socials | centered phone | socials
     - Tight padding so it doesn't dominate the screen
     ============================================================ */
  body > .bg-primary-dark:first-of-type {
    padding: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 41 !important;       /* above white header so they stack properly */
  }
  body > .bg-primary-dark:first-of-type > div {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    min-height: 0 !important;
    /* leave justify-between in markup → 3 children spread evenly */
  }
  /* Don't force 44px min-height on the icons/phone in this dense bar */
  body > .bg-primary-dark:first-of-type a {
    min-height: 0 !important;
  }
  body > .bg-primary-dark:first-of-type .w-9 {
    width: 32px !important;
    height: 32px !important;
  }

  /* ============================================================
     WHITE HEADER (logo + brand)
     - Stuck to top BELOW the green phone bar (offset = green bar height ~32px)
     - Logo + "Metro West / Lawn & Landscape · Since 1989" CENTERED
     - Hamburger absolutely positioned on the right so it doesn't disturb the centering
     ============================================================ */
  header {
    position: sticky !important;
    top: 32px !important;          /* sits directly under the green phone bar */
    z-index: 40 !important;
  }
  header > div {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    justify-content: center !important;
    position: relative !important;
  }
  header img[src*="truck-dog-mark"] { width: 44px !important; height: 44px !important; }
  header .font-display.text-lg { font-size: 1rem !important; }
  header .text-xs { font-size: 11px !important; }
  /* Float the hamburger LEFT (1st Phorm pattern) without breaking the centering */
  header .mw-burger {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }
}

/* ---- Sticky bottom CTA bar (mobile only) ---- */
.mw-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;          /* below chat panel (9999), above page content */
  display: none;          /* hidden by default; revealed on mobile only */
  background: #1B5E20;
  border-top: 2px solid #66BB6A;
  padding: 8px 12px;
  box-shadow: 0 -4px 16px rgba(0,0,0,.18);
  gap: 8px;
}
.mw-sticky-cta a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'Manrope','Inter',sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 12px 8px;
  border-radius: 10px;
  text-decoration: none;
  min-height: 48px;
  transition: transform 0.1s, background 0.15s;
}
.mw-sticky-cta a:active { transform: scale(0.97); }
.mw-sticky-cta a.cta-primary {
  background: #66BB6A;
  color: #0F2E13;
}
.mw-sticky-cta a.cta-primary:hover { background: #fff; }
.mw-sticky-cta a.cta-secondary {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
}
.mw-sticky-cta a.cta-secondary:hover { background: rgba(255,255,255,0.22); }

/* Show only on mobile (below md = 768px) */
@media (max-width: 767px) {
  .mw-sticky-cta { display: flex; }
}

/* ---- Chat widget repositioning on mobile so it doesn't overlap CTAs ---- */
@media (max-width: 767px) {
  .mw-chat-fab { bottom: 84px !important; right: 14px !important; width: 54px !important; height: 54px !important; }
  .mw-chat-panel { bottom: 84px !important; right: 10px !important; left: 10px !important; max-width: none !important; }
}

/* ---- Center hero-style section headers on mobile (existing markup uses text-center already on most) ---- */
@media (max-width: 767px) {
  .hero-bg h1, .hero-bg p, .hero-bg .text-sm { text-align: center; }
}

/* ---- Iframes (maps) responsive on mobile ---- */
iframe { max-width: 100%; }

/* ---- Tighten oversized hero gradients on mobile ---- */
@media (max-width: 767px) {
  .py-16.md\:py-20, .py-20.md\:py-28 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}