/* ============================================================
   MOBILE-ONLY FIXES (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* ----------------------------------------------------------
     1. WAVE DIVIDER: Close gap between hero background and wave
     
     Non-homepage heroes use overflow-visible with wave dividers.
     Two wave patterns exist:
     - translate-y-[60%] (z-20): used by pb-48 heroes
     - translate-y-1/2 (z-40): used by pb-32 heroes & some pb-48
     
     Fix: Override Tailwind --tw-translate-y to pull wave up,
     extend hero background layers below the hero boundary.
     ---------------------------------------------------------- */

  /* Membership hero: reduce height on mobile */
  section.relative.overflow-visible:has(.bg-\[center_20\%\]) {
    padding-top: 12rem !important;
    padding-bottom: 7rem !important;
    min-height: auto !important;
  }

  /* Membership: pull section below wave divider up close */
  section.relative.overflow-visible:has(.bg-\[center_20\%\]) + section {
    margin-top: -4rem !important;
  }

  /* Pull the wave UP on mobile by overriding the Tailwind translate variable */
  section.relative.overflow-visible .translate-y-\[60\%\] {
    --tw-translate-y: 15% !important;
  }

  section.relative.overflow-visible .translate-y-1\/2 {
    --tw-translate-y: 15% !important;
  }

  /* Extend hero background/overlay layers further below the hero boundary
     so the hero image/color shows behind the wave instead of white. */
  section.relative.overflow-visible[class*="pb-48"] > .absolute[class*="inset-0"] {
    bottom: -80px !important;
  }

  section.relative.overflow-visible[class*="pb-32"]:not([class*="min-h-"]):not(:has(.bg-\[center_20\%\])) > .absolute[class*="inset-0"] {
    bottom: -80px !important;
  }

  /* Hero bottom padding: keep generous so content has breathing room above wave
     pb-48 pages: careers, fundraising, about, special-offers, membership, app, etc.
     pb-32 pages: shop, detailing, fleet */
  section.relative.overflow-visible[class*="pb-48"] {
    padding-bottom: 8rem !important;
  }

  section.relative.overflow-visible[class*="pb-32"] {
    padding-bottom: 8rem !important;
  }

  /* Pull the next section up behind the wave to close remaining gap */
  section.relative.overflow-visible[class*="pb-48"] + section,
  section.relative.overflow-visible[class*="pb-32"] + section {
    margin-top: -2rem !important;
    position: relative;
    z-index: 20 !important;
  }

  /* ----------------------------------------------------------
     1b. INLINE WAVE (homepage, Peoria, Surprise)
     These use a separate bg-[#00AEEF] container for the wave.
     Bring wave container in front of the section below it so
     the wave image is not clipped by the white background.
     ---------------------------------------------------------- */
  .relative.z-20.bg-\[\#00AEEF\] {
    line-height: 0;
    font-size: 0;
    z-index: 30 !important;
    position: relative;
  }

  .relative.z-20.bg-\[\#00AEEF\] > img {
    display: block;
  }

  .relative.z-20.bg-\[\#00AEEF\] + section {
    margin-top: -20px !important;
    position: relative;
    z-index: 10 !important;
  }

  /* Peoria/Surprise: sections below inline wave need more top space.
     These sections have -mt-8 which pulls them too close to the wave. */
  section.-mt-8[class*="bg-white"] {
    margin-top: 0 !important;
    padding-top: 3rem !important;
  }


  /* ----------------------------------------------------------
     1d. WAVE Z-INDEX: Ensure wave dividers sit in front of the
     sections below them so wave images are not clipped.
     translate-y-[60%] waves (z-20 in React) and
     translate-y-1/2 waves (z-40 in React) both need to be
     above the next section's background.
     ---------------------------------------------------------- */
  .translate-y-\[60\%\] {
    line-height: 0;
    font-size: 0;
    z-index: 45 !important;
  }

  .translate-y-1\/2 {
    z-index: 45 !important;
  }

  .translate-y-\[60\%\] > img,
  .translate-y-1\/2 > img {
    display: block;
  }

  /* ----------------------------------------------------------
     2. WASH MENU CARDS: increase gap on mobile single-column
     ---------------------------------------------------------- */
  .grid.gap-8.pt-40 {
    gap: 12rem !important;
  }

  /* ----------------------------------------------------------
     3. HORIZONTAL PADDING: prevent content touching side edges
     ---------------------------------------------------------- */
  .bg-white.-mt-8 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* ----------------------------------------------------------
     4. FOOTER: center items on mobile
     ---------------------------------------------------------- */
  footer .grid {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  footer .grid > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  footer .grid ul {
    text-align: center;
  }

  footer .grid img {
    margin-left: auto;
    margin-right: auto;
  }

  footer .flex.gap-4,
  footer .flex.gap-6 {
    justify-content: center;
  }

  footer .border-t {
    text-align: center;
  }

  footer .border-t .flex {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  /* ----------------------------------------------------------
     5. HAMBURGER MENU: full viewport overlay, scrollable, high z-index
     ---------------------------------------------------------- */
  .lg\:hidden.bg-\[\#00AEEF\] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 9999 !important;
    padding-top: 5rem !important;
  }

  header.fixed {
    z-index: 10000 !important;
  }

  .lg\:hidden.bg-\[\#00AEEF\] .py-2 > .ml-4 {
    display: flex !important;
    flex-direction: column;
    gap: 0.5rem;
  }

  #service-bubbles {
    padding-top: 6rem !important;
  }
}

/* (old gray footer override removed — now using brand blue below) */

/* ============================================================
   SURPRISE PAGE: Reduce white space above dog wash section
   The blue "More Ways to Shine" section (py-20 bg-[#00AEEF]) is
   followed by the dog wash section (py-20 bg-white). Both have
   5rem padding, creating 10rem total gap. Reduce dog wash top
   padding to match its bottom padding.
   ============================================================ */
section.bg-\[\#00AEEF\] + section.bg-white {
  padding-top: 4rem !important;
}

/* ============================================================
   TABLET FIX (769px - 1024px)
   Wash menu cards overlap in 3-col grid at narrow widths
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .grid.gap-8.pt-40 {
    grid-template-columns: 1fr !important;
    gap: 12rem !important;
  }
}

/* ============================================================
   LAPTOP/DESKTOP FIXES (1025px+)
   Per-page fixes for headings cut off below wave divider.
   Each rule targets a specific page's hero type + first section.
   ============================================================ */
@media (min-width: 1025px) {

  /* --- SPECIAL OFFERS, APP, ABOUT ---
     Hero: section.relative[class*="pt-48"][class*="pb-48"].overflow-visible (no min-h)
     First section: pt-52 built-in, needs full clearance below wave */
  section.relative.overflow-visible[class*="pb-48"][class*="pt-48"]:not([class*="min-h"]) + section {
    padding-top: 14rem !important;
  }

  /* --- FUNDRAISING, CAREERS ---
     Hero: section.relative.overflow-visible.min-h-[70vh]
     First section: pt-52 built-in */
  section.relative.overflow-visible[class*="min-h-[70vh]"] + section {
    padding-top: 14rem !important;
  }

  /* --- CONTACT US, FAQS ---
     Hero: section.relative.overflow-visible.min-h-[50vh]
     First section: pt-52 built-in */
  section.relative.overflow-visible[class*="min-h-[50vh]"] + section {
    padding-top: 14rem !important;
  }

  /* --- PEORIA, SURPRISE (inline wave) ---
     These use a bg-[#00AEEF] wave container, not overflow-visible hero */
  .relative.z-20.bg-\[\#00AEEF\] + section {
    padding-top: 6rem !important;
  }

  /* --- SURPRISE: dog wash section spacing ---  */
  section.bg-\[\#00AEEF\] + section.bg-white {
    padding-top: 4rem !important;
  }

  /* --- SHOP: Family Plans banner (py-48) --- */
  section.relative.overflow-hidden[class*="py-48"] {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }

  /* --- SHOP: Experience The section after Family Plans --- */
  section.relative.overflow-hidden[class*="py-48"] + section[class*="py-16"] {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

/* ============================================================
   FOOTER: Brand blue background (all viewports)
   ============================================================ */
footer.bg-white {
  background: #00AEEF !important;
  border-top: none !important;
}
footer.bg-white h4 {
  color: white !important;
}
footer.bg-white span,
footer.bg-white a {
  color: rgba(255,255,255,0.85) !important;
}
footer.bg-white a:hover {
  color: white !important;
}
footer.bg-white .border-t {
  border-color: rgba(255,255,255,0.3) !important;
}
footer.bg-white .text-gray-500 {
  color: rgba(255,255,255,0.7) !important;
}