/**
 * Page Hero Theme CSS
 * Clean, modern hero styling - no wave effects, no compact hero classes
 * This file should load AFTER legacy CSS to override old styles
 * 
 * CRITICAL: Background images are set by PageHero COMPONENT via JavaScript inline styles
 * CSS should NEVER set background-image on body/html - only adjust text colors and transparency
 * 
 * THEME ENFORCEMENT:
 * - Applies white text to ALL pages using PageHero (.page-hero) OR CompactServiceHero (.core-services--service-highlights)
 * - White text is enforced via multiple CSS layers for maximum compatibility
 * - Cards with white backgrounds (rgba(255, 255, 255, 0.92)) keep dark text for readability
 * - All theme values are centralized in next/lib/theme.js
 */

/* Page Hero - Clean implementation matching homepage theme */
.page-hero {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important; /* Allow content to flow naturally */
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  z-index: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobile: Ensure hero doesn't block scrolling */
@media (max-width: 768px) {
  .page-hero {
    overflow: visible !important;
    height: auto !important;
    min-height: 60vh !important; /* Reduced from full viewport on mobile */
    max-height: none !important;
  }
}

/* Image wrapper - ensures image displays correctly */
/* NOTE: These classes are not used by PageHero component - background is set on body/html */
/* Keeping for legacy compatibility, but hidden on mobile to prevent overlaying images */
.page-hero__image-wrapper {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* Hero image */
/* NOTE: These classes are not used by PageHero component - background is set on body/html */
/* Keeping for legacy compatibility, but hidden on mobile to prevent overlaying images */
.page-hero__image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobile: Hide any image elements to prevent overlaying the background */
@media (max-width: 768px) {
  .page-hero__image-wrapper,
  .page-hero__image,
  .page-hero img,
  .page-hero picture {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
  }
}

/* Container */
.page-hero__container {
  position: relative !important;
  z-index: 1 !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 clamp(1.5rem, 4vw, 2.5rem) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  line-height: normal !important;
}

/* Header */
.page-hero__header {
  max-width: 900px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  alignItems: center !important;
}

/* Eyebrow text - Force white with high specificity */
.page-hero__eyebrow,
body:has(.page-hero) .page-hero__eyebrow,
.page-hero .page-hero__eyebrow {
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.28em !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* Title - Force white with high specificity */
.page-hero__title,
body:has(.page-hero) .page-hero__title,
.page-hero .page-hero__title,
body:has(.page-hero) h1.page-hero__title {
  font-size: clamp(2rem, 5vw, 3.25rem) !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-shadow: 0 10px 35px rgba(15,23,42,0.45) !important;
  margin: 0 !important;
}

/* Subtitle - Force white with high specificity */
.page-hero__subtitle,
body:has(.page-hero) .page-hero__subtitle,
.page-hero .page-hero__subtitle,
body:has(.page-hero) p.page-hero__subtitle {
  font-size: clamp(1.05rem, 2.5vw, 1.25rem) !important;
  line-height: 1.7 !important;
  color: #fff !important;
  margin: 0 !important;
}

/* Static full-page background for pages with PageHero */
/* Background is handled by hero-background.css - clean implementation */
/* All background properties are set there - do not override */

/* CRITICAL: Make ALL sections and wrappers transparent so static background shows through */
/* This overrides globals.css default section styling */
body:has(.page-hero) section,
body:has(.page-hero) div[class*="section"],
body:has(.page-hero) .container,
body:has(.page-hero) main,
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) .cleaning-intro,
body:has(.page-hero) .cleaning-proof,
body:has(.page-hero) .AnimatedSection,
body:has(.page-hero) [class*="intro"],
body:has(.page-hero) [class*="proof"],
body:has(.page-hero) [class*="content"],
body:has(.page-hero) [class*="Section"] {
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  /* Override globals.css section defaults */
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Service grids and unified components should be transparent */
body:has(.page-hero) .core-services,
body:has(.page-hero) .UnifiedServiceGrid,
body:has(.page-hero) [class*="ServiceGrid"],
body:has(.page-hero) [class*="service-grid"],
body:has(.page-hero) .unified-service-grid {
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
}

/* Cards should use dark semi-transparent background matching homepage */
/* This is now handled by card-theme-enforcement.css which converts all white cards */
/* Keeping this section for reference but actual enforcement is in card-theme-enforcement.css */

/* CRITICAL: Force white text for ALL text on pages with PageHero - HIGHEST PRIORITY */
/* This applies to ALL elements including header, footer, prefooter, and all sections */
body:has(.page-hero),
body:has(.page-hero) *,
body:has(.page-hero) header,
body:has(.page-hero) header *,
body:has(.page-hero) .header,
body:has(.page-hero) .header *,
body:has(.page-hero) footer,
body:has(.page-hero) footer *,
body:has(.page-hero) .footer,
body:has(.page-hero) .footer *,
body:has(.page-hero) .uwg-prefooter,
body:has(.page-hero) .uwg-prefooter *,
body:has(.page-hero) section,
body:has(.page-hero) section *,
body:has(.page-hero) .container,
body:has(.page-hero) .container *,
body:has(.page-hero) main,
body:has(.page-hero) main *,
body:has(.page-hero) h1,
body:has(.page-hero) h2,
body:has(.page-hero) h3,
body:has(.page-hero) h4,
body:has(.page-hero) h5,
body:has(.page-hero) h6,
body:has(.page-hero) p,
body:has(.page-hero) span,
body:has(.page-hero) div:not([class*="card"]):not([style*="background: rgba(255"]):not([style*="background:rgba(255"]),
body:has(.page-hero) li,
body:has(.page-hero) a:not(.btn):not(button),
body:has(.page-hero) label,
body:has(.page-hero) small,
body:has(.page-hero) strong,
body:has(.page-hero) em,
body:has(.page-hero) blockquote {
  color: #fff !important;
}

/* Cards with white/semi-transparent backgrounds should have dark text for readability */
/* But exclude header, footer, and prefooter - they should always be white */
body:has(.page-hero) [class*="card"]:not(.header):not(.footer):not(.uwg-prefooter):not([class*="header"]):not([class*="footer"]):not([class*="prefooter"]),
body:has(.page-hero) [style*="background: rgba(255, 255, 255"]:not(.header):not(.footer):not(.uwg-prefooter):not([class*="header"]):not([class*="footer"]):not([class*="prefooter"]),
body:has(.page-hero) [style*="background:rgba(255, 255, 255"]:not(.header):not(.footer):not(.uwg-prefooter):not([class*="header"]):not([class*="footer"]):not([class*="prefooter"]),
body:has(.page-hero) [style*="background: #fff"]:not(.header):not(.footer):not(.uwg-prefooter):not([class*="header"]):not([class*="footer"]):not([class*="prefooter"]),
body:has(.page-hero) [style*="background:#fff"]:not(.header):not(.footer):not(.uwg-prefooter):not([class*="header"]):not([class*="footer"]):not([class*="prefooter"]) {
  color: #0f172a !important;
}

body:has(.page-hero) [class*="card"]:not(.header):not(.footer):not(.uwg-prefooter):not([class*="header"]):not([class*="footer"]):not([class*="prefooter"]) *,
body:has(.page-hero) [style*="background: rgba(255, 255, 255"]:not(.header):not(.footer):not(.uwg-prefooter):not([class*="header"]):not([class*="footer"]):not([class*="prefooter"]) *,
body:has(.page-hero) [style*="background:rgba(255, 255, 255"]:not(.header):not(.footer):not(.uwg-prefooter):not([class*="header"]):not([class*="footer"]):not([class*="prefooter"]) *,
body:has(.page-hero) [style*="background: #fff"]:not(.header):not(.footer):not(.uwg-prefooter):not([class*="header"]):not([class*="footer"]):not([class*="prefooter"]) *,
body:has(.page-hero) [style*="background:#fff"]:not(.header):not(.footer):not(.uwg-prefooter):not([class*="header"]):not([class*="footer"]):not([class*="prefooter"]) * {
  color: #0f172a !important;
}

/* CRITICAL: Force white text for all hero text elements - highest priority */
body:has(.page-hero) .page-hero__eyebrow,
body:has(.page-hero) .page-hero__title,
body:has(.page-hero) .page-hero__subtitle {
  color: #fff !important;
}

/* Buttons and links should maintain their styling for visibility */
body:has(.page-hero) .btn,
body:has(.page-hero) button,
body:has(.page-hero) a.btn,
body:has(.page-hero) [class*="btn"] {
  color: inherit !important;
}

/* FINAL CATCH-ALL: Force white text for EVERYTHING on pages with PageHero */
/* This rule comes last to override any other conflicting rules */
body:has(.page-hero) header,
body:has(.page-hero) header *,
body:has(.page-hero) .header,
body:has(.page-hero) .header *,
body:has(.page-hero) [class*="header"],
body:has(.page-hero) [class*="header"] *,
body:has(.page-hero) footer,
body:has(.page-hero) footer *,
body:has(.page-hero) .footer,
body:has(.page-hero) .footer *,
body:has(.page-hero) [class*="footer"],
body:has(.page-hero) [class*="footer"] *,
body:has(.page-hero) .uwg-prefooter,
body:has(.page-hero) .uwg-prefooter *,
body:has(.page-hero) [class*="prefooter"],
body:has(.page-hero) [class*="prefooter"] *,
body:has(.page-hero) section,
body:has(.page-hero) section *,
body:has(.page-hero) article,
body:has(.page-hero) article *,
body:has(.page-hero) aside,
body:has(.page-hero) aside *,
body:has(.page-hero) nav,
body:has(.page-hero) nav *,
body:has(.page-hero) .contact-form,
body:has(.page-hero) .contact-form *,
body:has(.page-hero) .form-header,
body:has(.page-hero) .form-header *,
body:has(.page-hero) .form-group,
body:has(.page-hero) .form-group *,
body:has(.page-hero) .contact-form label,
body:has(.page-hero) .contact-form h2,
body:has(.page-hero) .contact-form p {
  color: #fff !important;
}

/* Override any white background inline styles to be transparent */
body:has(.page-hero) [style*="background: #fff"],
body:has(.page-hero) [style*="background:#fff"],
body:has(.page-hero) [style*="background: #ffffff"],
body:has(.page-hero) [style*="background:#ffffff"],
body:has(.page-hero) [style*="background: white"],
body:has(.page-hero) [style*="background:white"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* Mobile: Use scroll instead of fixed for better performance and scrolling */
@media (max-width: 768px) {
  body:has(.page-hero),
  html:has(.page-hero) {
    /* Background attachment, size, position, and image are handled by hero-background.css */
    /* Do not override - hero-background.css sets fixed attachment for sticky background */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
    position: relative !important;
  }
  
  /* Ensure main can scroll past hero */
  main:has(.page-hero) {
    overflow-y: visible !important;
    overflow-x: hidden !important;
    height: auto !important;
    position: relative !important;
  }
  
  /* Hero section should not block scroll */
  .page-hero {
    position: relative !important;
    overflow: visible !important;
  }
}

/* Ensure main doesn't block hero */
main:has(.page-hero) {
  background: transparent !important;
  padding-top: 0 !important;
}

/* ULTIMATE OVERRIDE: Force white text for EVERYTHING - highest priority, loads last */
/* This must override ALL other CSS files including globals.css, forms.css, gradient-override.css */
/* Applies to both PageHero (.page-hero) and CompactServiceHero (.core-services--service-highlights) pages */
html body:has(.page-hero),
html body:has(.core-services--service-highlights),
html body:has(.page-hero) *:not(input):not(textarea):not(select):not(option),
html body:has(.core-services--service-highlights) *:not(input):not(textarea):not(select):not(option),
html body:has(.page-hero) header,
html body:has(.core-services--service-highlights) header,
html body:has(.page-hero) header *:not(input):not(textarea):not(select):not(option),
html body:has(.core-services--service-highlights) header *:not(input):not(textarea):not(select):not(option),
html body:has(.page-hero) .header,
html body:has(.core-services--service-highlights) .header,
html body:has(.page-hero) .header *:not(input):not(textarea):not(select):not(option),
html body:has(.core-services--service-highlights) .header *:not(input):not(textarea):not(select):not(option),
html body:has(.page-hero) footer,
html body:has(.core-services--service-highlights) footer,
html body:has(.page-hero) footer *:not(input):not(textarea):not(select):not(option),
html body:has(.core-services--service-highlights) footer *:not(input):not(textarea):not(select):not(option),
html body:has(.page-hero) .footer,
html body:has(.core-services--service-highlights) .footer,
html body:has(.page-hero) .footer *:not(input):not(textarea):not(select):not(option),
html body:has(.core-services--service-highlights) .footer *:not(input):not(textarea):not(select):not(option),
html body:has(.page-hero) .uwg-prefooter,
html body:has(.core-services--service-highlights) .uwg-prefooter,
html body:has(.page-hero) .uwg-prefooter *:not(input):not(textarea):not(select):not(option),
html body:has(.core-services--service-highlights) .uwg-prefooter *:not(input):not(textarea):not(select):not(option),
html body:has(.page-hero) section,
html body:has(.core-services--service-highlights) section,
html body:has(.page-hero) section *:not(input):not(textarea):not(select):not(option),
html body:has(.core-services--service-highlights) section *:not(input):not(textarea):not(select):not(option),
html body:has(.page-hero) article,
html body:has(.core-services--service-highlights) article,
html body:has(.page-hero) article *:not(input):not(textarea):not(select):not(option),
html body:has(.core-services--service-highlights) article *:not(input):not(textarea):not(select):not(option),
html body:has(.page-hero) aside,
html body:has(.core-services--service-highlights) aside,
html body:has(.page-hero) aside *:not(input):not(textarea):not(select):not(option),
html body:has(.core-services--service-highlights) aside *:not(input):not(textarea):not(select):not(option),
html body:has(.page-hero) nav,
html body:has(.core-services--service-highlights) nav,
html body:has(.page-hero) nav *:not(input):not(textarea):not(select):not(option),
html body:has(.core-services--service-highlights) nav *:not(input):not(textarea):not(select):not(option),
html body:has(.page-hero) h1,
html body:has(.core-services--service-highlights) h1,
html body:has(.page-hero) h2,
html body:has(.core-services--service-highlights) h2,
html body:has(.page-hero) h3,
html body:has(.core-services--service-highlights) h3,
html body:has(.page-hero) h4,
html body:has(.core-services--service-highlights) h4,
html body:has(.page-hero) h5,
html body:has(.core-services--service-highlights) h5,
html body:has(.page-hero) h6,
html body:has(.core-services--service-highlights) h6,
html body:has(.page-hero) p,
html body:has(.core-services--service-highlights) p,
html body:has(.page-hero) span,
html body:has(.core-services--service-highlights) span,
html body:has(.page-hero) div:not([class*="card"]):not([style*="background: rgba(255"]):not([style*="background:rgba(255"]):not([style*="background: #fff"]):not([style*="background:#fff"]),
html body:has(.core-services--service-highlights) div:not([class*="card"]):not([style*="background: rgba(255"]):not([style*="background:rgba(255"]):not([style*="background: #fff"]):not([style*="background:#fff"]),
html body:has(.page-hero) li,
html body:has(.core-services--service-highlights) li,
html body:has(.page-hero) a:not(.btn):not(button),
html body:has(.core-services--service-highlights) a:not(.btn):not(button),
html body:has(.page-hero) label,
html body:has(.core-services--service-highlights) label,
html body:has(.page-hero) small,
html body:has(.core-services--service-highlights) small,
html body:has(.page-hero) strong,
html body:has(.core-services--service-highlights) strong,
html body:has(.page-hero) em,
html body:has(.core-services--service-highlights) em,
html body:has(.page-hero) .contact-form,
html body:has(.core-services--service-highlights) .contact-form,
html body:has(.page-hero) .contact-form *:not(input):not(textarea):not(select):not(option),
html body:has(.core-services--service-highlights) .contact-form *:not(input):not(textarea):not(select):not(option),
html body:has(.page-hero) .form-header,
html body:has(.core-services--service-highlights) .form-header,
html body:has(.page-hero) .form-header *:not(input):not(textarea):not(select):not(option),
html body:has(.core-services--service-highlights) .form-header *:not(input):not(textarea):not(select):not(option),
html body:has(.page-hero) .form-group,
html body:has(.core-services--service-highlights) .form-group,
html body:has(.page-hero) .form-group *:not(input):not(textarea):not(select):not(option),
html body:has(.core-services--service-highlights) .form-group *:not(input):not(textarea):not(select):not(option),
html body:has(.page-hero) .contact-form label,
html body:has(.core-services--service-highlights) .contact-form label,
html body:has(.page-hero) .contact-form h2,
html body:has(.core-services--service-highlights) .contact-form h2,
html body:has(.page-hero) .contact-form p,
html body:has(.core-services--service-highlights) .contact-form p {
  color: #fff !important;
}