/* ========================================
   MOBILE HOMEPAGE FIXES
   Fixes for background image quality, scrolling, and footer visibility
   
   IMPORTANT: Background images are set by COMPONENTS (PageHero, CompactServiceHero) via JavaScript
   CSS should NEVER set background-image on body/html - only adjust properties like attachment
   ======================================== */

@media (max-width: 768px) {
  /* Background is now handled by hero-background.css - clean implementation */
  /* This section kept for legacy compatibility but hero-background.css takes precedence */

  /* ========================================
     CRITICAL: REMOVE ALL DUPLICATE BACKGROUND IMAGES ON MOBILE
     ======================================== */
  
  /* ULTIMATE OVERRIDE: Remove background images from EVERYTHING except body/html */
  /* This ensures no duplicate images overlay the body background */
  /* Only body/html should have the tropical pool background image on mobile */
  body:has(.page-hero) *:not(html):not(body):not(.header):not(.footer):not(.uwg-prefooter):not([class*="card"]):not([style*="background: rgba(15"]):not([style*="background:rgba(15"]) {
    background-image: none !important;
  }
  
  html:has(.page-hero) *:not(html):not(body):not(.header):not(.footer):not(.uwg-prefooter):not([class*="card"]):not([style*="background: rgba(15"]):not([style*="background:rgba(15"]) {
    background-image: none !important;
  }
  
  /* CRITICAL: Remove background images from ALL sections on mobile */
  /* Sections should not have background images - only body/html should */
  body:has(.page-hero) section,
  body:has(.page-hero) section[class],
  body:has(.page-hero) section[id],
  body:has(.page-hero) div[class*="section"],
  body:has(.page-hero) div[id*="section"] {
    background-image: none !important;
    background: transparent !important;
  }
  
  /* Remove background images from any divs with inline styles */
  body:has(.page-hero) div[style*="background-image"],
  body:has(.page-hero) div[style*="backgroundImage"] {
    background-image: none !important;
  }
  
  /* Remove background images from pseudo-elements globally */
  body:has(.page-hero) *::before,
  body:has(.page-hero) *::after {
    background-image: none !important;
    content: none !important;
  }
  
  html:has(.page-hero) *::before,
  html:has(.page-hero) *::after {
    background-image: none !important;
    content: none !important;
  }
  
  /* ========================================
     FIX MOBILE BACKGROUND IMAGE QUALITY
     ======================================== */

  /* Background is now handled by hero-background.css - clean implementation */
  /* All background sizing and positioning is handled there */

  /* ========================================
     FIX MOBILE BACKGROUND IMAGE FOR PAGE HERO
     Prevent zoomed-in background images and duplicates
     ======================================== */

  /* Background is now handled by hero-background.css - clean implementation */
  /* All background sizing, positioning, and image settings are handled there */
  
  /* CRITICAL: Remove filters from body/html that might blur background */
  body:has(.page-hero),
  html:has(.page-hero) {
    filter: none !important;
    -webkit-filter: none !important;
  }

  /* CRITICAL: Prevent any CSS from overriding PageHero's mobile background image */
  /* This ensures the tropical pool image always shows on mobile for PageHero pages */
  body:has(.page-hero),
  html:has(.page-hero) {
    /* Remove any CSS variable-based background images that might interfere */
    /* PageHero sets background-image via inline styles, which should win */
    /* But we also ensure no CSS variables are used */
  }
  
  /* Override any CSS that might try to use --hero-background-image or other variables */
  body:has(.page-hero)[style*="background-image"],
  html:has(.page-hero)[style*="background-image"] {
    /* Inline styles from PageHero should already have !important */
    /* This is just a safety net */
  }

  /* Ensure no duplicate background images on page-hero section itself */
  .page-hero,
  section.page-hero {
    background-image: none !important;
    background: transparent !important;
    background-color: transparent !important;
  }
  
  /* CRITICAL: Hide any image elements that might overlay the background on mobile */
  /* These could be from legacy code or CSS that creates pseudo-elements */
  /* Target ALL possible image elements that could overlay */
  .page-hero__image-wrapper,
  .page-hero__image,
  .page-hero img,
  .page-hero picture,
  .page-hero [class*="image"],
  .page-hero [class*="Image"],
  body:has(.page-hero) .page-hero__image-wrapper,
  body:has(.page-hero) .page-hero__image,
  html:has(.page-hero) .page-hero__image-wrapper,
  html:has(.page-hero) .page-hero__image,
  /* Also hide any img elements that might be positioned absolutely over the hero */
  body:has(.page-hero) img[style*="position: absolute"],
  body:has(.page-hero) img[style*="position:absolute"],
  body:has(.page-hero) img[style*="position:fixed"],
  body:has(.page-hero) img[style*="position: fixed"],
  /* Hide any Next.js Image components that might overlay */
  body:has(.page-hero) [class*="Image"],
  body:has(.page-hero) [id*="image"],
  body:has(.page-hero) [id*="Image"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    z-index: -1 !important;
    pointer-events: none !important;
  }
  
  /* Hide any pseudo-elements that might create duplicate images */
  .page-hero::before,
  .page-hero::after,
  .page-hero__image-wrapper::before,
  .page-hero__image-wrapper::after,
  .page-hero__image::before,
  .page-hero__image::after {
    display: none !important;
    content: none !important;
    background-image: none !important;
  }

  /* Prevent any other elements from adding duplicate backgrounds */
  body:has(.page-hero) main,
  body:has(.page-hero) .main-content,
  body:has(.page-hero) .page-template,
  body:has(.page-hero) .main-content-gradient,
  body:has(.page-hero) .unified-gradient-wrapper,
  body:has(.page-hero) .page-template,
  body:has(.page-hero) .service-page-template,
  body:has(.page-hero) [class*="wrapper"],
  body:has(.page-hero) [class*="Wrapper"],
  body:has(.page-hero) [class*="content"],
  body:has(.page-hero) [class*="Content"],
  html:has(.page-hero) main,
  html:has(.page-hero) .main-content,
  html:has(.page-hero) .page-template {
    background-image: none !important;
    background: transparent !important;
    background-color: transparent !important;
  }
  
  /* CRITICAL: Remove background images from ALL elements that might overlay */
  /* This ensures no duplicate images appear on top of the body background */
  body:has(.page-hero) *:not(.header):not(.footer):not(.uwg-prefooter):not([class*="card"]):not([style*="background: rgba(15"]):not([style*="background:rgba(15"]),
  html:has(.page-hero) *:not(.header):not(.footer):not(.uwg-prefooter):not([class*="card"]):not([style*="background: rgba(15"]):not([style*="background:rgba(15"]) {
    background-image: none !important;
  }
  
  /* Specifically target any pseudo-elements that might have background images */
  body:has(.page-hero) *::before,
  body:has(.page-hero) *::after,
  html:has(.page-hero) *::before,
  html:has(.page-hero) *::after {
    background-image: none !important;
  }

  /* REMOVED: Preload background image - this was causing conflicts */
  /* Components handle their own image preloading */

  /* Improve image rendering for better quality */
  .main-content-gradient,
  .unified-gradient-wrapper {
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }

  /* ========================================
     FIX SCROLLING ON MOBILE
     ======================================== */
  
  /* Ensure only html scrolls, not body or other containers */
  html {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100% !important;
    -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
    scroll-behavior: smooth !important;
  }

  body {
    overflow-y: visible !important; /* Body never scrolls */
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
    position: relative !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Ensure main content doesn't create scroll containers */
  main,
  #main,
  .main-content,
  .page-template,
  .main-content-gradient,
  .unified-gradient-wrapper {
    overflow-y: visible !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: auto !important;
    position: relative !important;
    /* Remove any padding/margin that creates gaps with header */
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Fix touch scrolling on iOS */
  * {
    -webkit-tap-highlight-color: transparent !important;
  }

  /* ========================================
     FIX FOOTER VISIBILITY ON MOBILE
     ======================================== */
  
  /* Ensure footer is visible and properly positioned */
  footer,
  .footer,
  .page-footer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important; /* Ensure footer is above other content */
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--footer-bg, linear-gradient(180deg, rgba(15,23,42,0.9) 0%, rgba(15,23,42,0.95) 100%)) !important;
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
  }

  /* Ensure footer content is visible */
  .footer-container,
  .page-primary-footer,
  .region-primary-footer,
  .seo-footer,
  .seo-footer__grid,
  .seo-footer__brand,
  .seo-footer__group,
  .seo-footer__list,
  .seo-footer__cta,
  .seo-footer__bottom {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 11 !important;
  }

  /* Ensure footer text is readable */
  .footer,
  .footer *,
  .seo-footer,
  .seo-footer * {
    color: #ffffff !important;
  }

  /* Fix footer links */
  .seo-footer a,
  .seo-footer__list a,
  .seo-footer__cta a {
    color: #ffffff !important;
    text-decoration: underline !important;
  }

  .seo-footer__cta-primary,
  .seo-footer__cta-secondary {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* ========================================
     ENSURE PREFOOTER DOESN'T HIDE FOOTER
     ======================================== */
  
  .uwg-prefooter,
  .pre-footer-section {
    position: relative !important;
    z-index: 5 !important; /* Below footer */
    margin-bottom: 0 !important;
  }

  /* ========================================
     FIX HOMEPAGE SPECIFIC ISSUES
     ======================================== */
  
  /* Ensure homepage content is scrollable */
  .homepage--inverted,
  .service-page-template {
    overflow-y: visible !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
  }

  /* Fix hero section on mobile */
  .core-services--service-highlights {
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
    margin-top: calc(var(--header-offset, 190px) + var(--header-wave-height, 40px)) !important;
  }

  /* Ensure cards don't block scrolling */
  .core-service-card,
  .core-services__grid,
  .core-services__item {
    overflow: visible !important;
    position: relative !important;
  }

  /* ========================================
     FIX SECTIONS WITH OVERFLOW:HIDDEN BLOCKING SCROLL - ALL PAGES
     ======================================== */
  
  /* CRITICAL: Override overflow:hidden on ALL sections that block mobile scrolling */
  /* Sections with overflow:hidden prevent touch scrolling when user touches/hovers over them */
  /* This applies to ALL pages, not just homepage */
  #core-services,
  .core-services--retail,
  .core-services--service-highlights,
  .hero-cards-section,
  section,
  .section,
  div:not([class*="image"]):not([class*="Image"]):not([id*="image"]):not([id*="Image"]),
  article,
  aside,
  [class*="section"]:not([class*="image"]):not([class*="Image"]),
  [class*="Section"]:not([class*="image"]):not([class*="Image"]),
  [class*="container"]:not([class*="image"]):not([class*="Image"]),
  [class*="Container"]:not([class*="image"]):not([class*="Image"]),
  [class*="wrapper"]:not([class*="image"]):not([class*="Image"]),
  [class*="Wrapper"]:not([class*="image"]):not([class*="Image"]),
  [class*="content"]:not([class*="image"]):not([class*="Image"]),
  [class*="Content"]:not([class*="image"]):not([class*="Image"]),
  [id*="section"]:not([id*="image"]):not([id*="Image"]),
  [id*="Section"]:not([id*="image"]):not([id*="Image"]) {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    touch-action: pan-y !important; /* Allow vertical page scroll */
    -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
  }

  /* Override page-specific CSS files that have overflow:hidden */
  /* These are from PondGalleryPage.css, CommercialProjectsPage.css, LongFormPage.css, etc. */
  [class*="gallery"],
  [class*="Gallery"],
  [class*="project"],
  [class*="Project"],
  [class*="form"],
  [class*="Form"],
  [class*="feature"],
  [class*="Feature"],
  [class*="city"],
  [class*="City"],
  [class*="calculator"],
  [class*="Calculator"] {
    overflow: visible !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }
}