/**
 * HERO BACKGROUND - ULTIMATE OVERRIDE
 * This file MUST load LAST and has ABSOLUTE highest priority
 * Uses: /images/tropical-pool-freddy-s-landscape-img~1f316d2002839a75_14-7824-1-849a828.jpg
 * 
 * CRITICAL: This overrides ALL other CSS rules
 * Uses contain to show FULL image without cropping/zooming
 */

/* ========================================
   ULTIMATE OVERRIDE - Highest Specificity Possible
   ======================================== */

/* Force background image on html and body - highest specificity */
html,
body,
html body,
body html,
html:not([style*="background-image"]),
body:not([style*="background-image"]),
html[class],
body[class],
html[id],
body[id] {
  background-image: url('/images/tropical-pool-freddy-s-landscape-img~1f316d2002839a75_14-7824-1-849a828.jpg') !important;
  background-size: 100% auto !important; /* Full width on all devices */
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-color: transparent !important;
  /* Remove all filters that might blur */
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* Ensure sharp rendering */
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  transform: translateZ(0) !important;
}

/* Override any :has() selectors that might interfere */
body:has(.page-hero),
html:has(.page-hero),
body:has(.core-services--service-highlights),
html:has(.core-services--service-highlights),
body:has(.homepage--inverted),
html:has(.homepage--inverted) {
  background-image: url('/images/tropical-pool-freddy-s-landscape-img~1f316d2002839a75_14-7824-1-849a828.jpg') !important;
  background-size: 100% auto !important; /* Full width on all devices */
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important; /* Sticky on all devices */
  background-color: transparent !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ========================================
   MOBILE (≤768px) - Sticky Background, Full Screen
   ======================================== */

@media (max-width: 768px) {
  html,
  body,
  html body,
  body html,
  body:has(.page-hero),
  html:has(.page-hero),
  body:has(.core-services--service-highlights),
  html:has(.core-services--service-highlights) {
    background-image: url('/images/tropical-pool-freddy-s-landscape-img~1f316d2002839a75_14-7824-1-849a828.jpg') !important;
    background-attachment: fixed !important; /* Sticky background on mobile - same as desktop */
    background-size: cover !important; /* Full screen coverage - connects with header */
    background-position: center top !important; /* Start from top to connect with header */
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    /* Remove any gaps - full screen coverage */
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-width: 100vw !important;
    height: 100% !important;
    min-height: 100vh !important;
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Ensure sharp rendering on mobile */
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
  }
  
  /* Ensure no gaps between header and background */
  body {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  html {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Remove any padding/margin from main that creates gaps */
  main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Ensure header connects with background */
  .header {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* ========================================
   iPAD (769px - 1024px)
   ======================================== */

@media (min-width: 769px) and (max-width: 1024px) {
  html,
  body,
  html body,
  body html,
  body:has(.page-hero),
  html:has(.page-hero),
  body:has(.core-services--service-highlights),
  html:has(.core-services--service-highlights) {
    background-image: url('/images/tropical-pool-freddy-s-landscape-img~1f316d2002839a75_14-7824-1-849a828.jpg') !important;
    background-attachment: fixed !important;
    background-size: 100% auto !important; /* Full width on all devices */
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ========================================
   DESKTOP (>1024px) - Full Width
   ======================================== */

@media (min-width: 1025px) {
  html,
  body,
  html body,
  body html,
  body:has(.page-hero),
  html:has(.page-hero),
  body:has(.core-services--service-highlights),
  html:has(.core-services--service-highlights) {
    background-image: url('/images/tropical-pool-freddy-s-landscape-img~1f316d2002839a75_14-7824-1-849a828.jpg') !important;
    background-attachment: fixed !important;
    background-size: 100% auto !important; /* Full width on desktop */
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ========================================
   REMOVE DUPLICATE BACKGROUNDS FROM OTHER ELEMENTS
   ======================================== */

/* Only remove from child elements, NOT from body/html */
body *: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;
}

section,
div[class*="section"],
.container,
main,
.main-content-gradient,
.unified-gradient-wrapper,
.page-template,
.service-page-template {
  background-image: none !important;
  background-color: transparent !important;
  background: transparent !important;
}

/* CRITICAL: Never remove background from body/html */
html,
body {
  /* Background image is set above - never override it */
}