/**
 * Universal Page Theme CSS
 * Applies theme consistency across ALL pages
 * This file ensures all pages follow the theme.js configuration
 */

/* ========================================
   PAGES WITH PAGEHERO - TRANSPARENT SECTIONS
   ======================================== */

/* Make ALL wrapper elements transparent - but NOT body/html */
body:has(.page-hero) .page-template,
body:has(.page-hero) .service-page-template,
body:has(.page-hero) .main-content-gradient,
body:has(.page-hero) .unified-gradient-wrapper,
body:has(.page-hero) .home,
body:has(.page-hero) .services-stack {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* CRITICAL: Never override body/html background - hero-background.css handles it */
body:has(.page-hero),
html:has(.page-hero) {
  /* Background image is set by hero-background.css - do not override */
}

/* Make ALL sections transparent - override globals.css */
body:has(.page-hero) section,
body:has(.page-hero) section[class],
body:has(.page-hero) section[id] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Make containers transparent */
body:has(.page-hero) .container,
body:has(.page-hero) [class*="container"],
body:has(.page-hero) [class*="Container"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* AGGRESSIVE: Override ALL inline white backgrounds - highest priority */
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"],
body:has(.page-hero) [style*="background-color: #fff"],
body:has(.page-hero) [style*="background-color:#fff"],
body:has(.page-hero) [style*="background-color: #ffffff"],
body:has(.page-hero) [style*="background-color:#ffffff"],
body:has(.page-hero) [style*="background: 'white'"],
body:has(.page-hero) [style*="background: 'white'"],
body:has(.page-hero) [style*="background: '#fff'"],
body:has(.page-hero) [style*="background: '#ffffff'"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Override any CSS class-based white backgrounds */
body:has(.page-hero) [class*="white"],
body:has(.page-hero) [class*="bg-white"],
body:has(.page-hero) .bg-white,
body:has(.page-hero) .white-bg {
  background: transparent !important;
  background-color: transparent !important;
}

/* Service grids and unified components */
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,
body:has(.page-hero) .AnimatedSection,
body:has(.page-hero) [class*="Section"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* Cards should have semi-transparent white for readability */
body:has(.page-hero) .core-service-card,
body:has(.page-hero) [class*="card"],
body:has(.page-hero) [class*="Card"] {
  background-color: rgba(255, 255, 255, 0.92) !important;
  background: rgba(255, 255, 255, 0.92) !important;
}

/* Ensure text is readable on transparent backgrounds */
body:has(.page-hero) section,
body:has(.page-hero) .container,
body:has(.page-hero) h1:not(.page-hero__title),
body:has(.page-hero) h2,
body:has(.page-hero) h3,
body:has(.page-hero) h4,
body:has(.page-hero) p:not(.page-hero__subtitle),
body:has(.page-hero) li,
body:has(.page-hero) span:not(.page-hero__eyebrow) {
  color: var(--color-text-primary, #0f172a) !important;
}

/* But keep hero text white */
body:has(.page-hero) .page-hero,
body:has(.page-hero) .page-hero * {
  color: inherit !important;
}

/* ========================================
   MOBILE: Use fixed attachment for sticky background
   ======================================== */
/* Background attachment is handled by hero-background.css - do not override */