/**
 * Card Theme Enforcement CSS
 * Converts all white-background cards and sections to match homepage dark semi-transparent style
 * This ensures consistent theming across all pages
 * 
 * Homepage card properties:
 * - Background: rgba(15, 23, 42, 0.78)
 * - Backdrop filter: blur(18px)
 * - Border: 1px solid rgba(148, 163, 184, 0.45)
 * - Box shadow: 0 18px 48px rgba(15, 23, 42, 0.35)
 * - Text: White (#ffffff) with text-shadow
 * 
 * UNIVERSAL RULE: Any element with a dark semi-transparent background automatically gets white text
 * This applies to ALL dark backgrounds (rgba with low lightness values) on pages with PageHero or CompactServiceHero
 */

/* ========================================
   CARD THEME ENFORCEMENT
   Convert all white-background cards to dark semi-transparent
   ======================================== */

/* CRITICAL: Convert ALL .core-service-card elements on pages with PageHero or CompactServiceHero */
/* This targets cards by class name, not just inline styles */
/* Use most general selector first to catch all cards on these pages */
body:has(.page-hero) .core-service-card:not(.core-service-card--inverted),
body:has(.core-services--service-highlights) .core-service-card:not(.core-service-card--inverted),
body:has(.page-hero) .core-services .core-service-card:not(.core-service-card--inverted),
body:has(.core-services--service-highlights) .core-services .core-service-card:not(.core-service-card--inverted),
/* Also target cards anywhere on the page if it has the hero component */
html:has(.page-hero) body .core-service-card:not(.core-service-card--inverted),
html:has(.core-services--service-highlights) body .core-service-card:not(.core-service-card--inverted) {
  background: rgba(15, 23, 42, 0.78) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.35) !important;
  border-radius: 12px !important;
}

/* Convert card headers to dark semi-transparent */
/* Override the gradient background from unified-cards.css */
body:has(.page-hero) .core-service-card:not(.core-service-card--inverted) .core-service-card__header,
body:has(.core-services--service-highlights) .core-service-card:not(.core-service-card--inverted) .core-service-card__header,
body:has(.page-hero) .core-services .core-service-card:not(.core-service-card--inverted) .core-service-card__header,
body:has(.core-services--service-highlights) .core-services .core-service-card:not(.core-service-card--inverted) .core-service-card__header,
html:has(.page-hero) body .core-service-card:not(.core-service-card--inverted) .core-service-card__header,
html:has(.core-services--service-highlights) body .core-service-card:not(.core-service-card--inverted) .core-service-card__header {
  background: rgba(15, 23, 42, 0.58) !important;
  background-image: none !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35) !important;
}

/* Convert card content areas */
body:has(.page-hero) .core-service-card:not(.core-service-card--inverted) .core-service-card__content,
body:has(.core-services--service-highlights) .core-service-card:not(.core-service-card--inverted) .core-service-card__content,
body:has(.page-hero) .core-services .core-service-card:not(.core-service-card--inverted) .core-service-card__content,
body:has(.core-services--service-highlights) .core-services .core-service-card:not(.core-service-card--inverted) .core-service-card__content {
  background: transparent !important;
}

/* Force white text on all converted cards */
body:has(.page-hero) .core-service-card:not(.core-service-card--inverted),
body:has(.page-hero) .core-service-card:not(.core-service-card--inverted) *:not(input):not(textarea):not(select),
body:has(.core-services--service-highlights) .core-service-card:not(.core-service-card--inverted),
body:has(.core-services--service-highlights) .core-service-card:not(.core-service-card--inverted) *:not(input):not(textarea):not(select),
body:has(.page-hero) .core-services .core-service-card:not(.core-service-card--inverted),
body:has(.page-hero) .core-services .core-service-card:not(.core-service-card--inverted) *:not(input):not(textarea):not(select),
body:has(.core-services--service-highlights) .core-services .core-service-card:not(.core-service-card--inverted),
body:has(.core-services--service-highlights) .core-services .core-service-card:not(.core-service-card--inverted) *:not(input):not(textarea):not(select),
html:has(.page-hero) body .core-service-card:not(.core-service-card--inverted),
html:has(.page-hero) body .core-service-card:not(.core-service-card--inverted) *:not(input):not(textarea):not(select),
html:has(.core-services--service-highlights) body .core-service-card:not(.core-service-card--inverted),
html:has(.core-services--service-highlights) body .core-service-card:not(.core-service-card--inverted) *:not(input):not(textarea):not(select) {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(15, 23, 42, 0.55) !important;
}

/* Specific text elements on converted cards */
body:has(.page-hero) .core-service-card:not(.core-service-card--inverted) .core-service-card__title,
body:has(.page-hero) .core-service-card:not(.core-service-card--inverted) .core-service-card__blurb,
body:has(.page-hero) .core-service-card:not(.core-service-card--inverted) .core-service-card__service-item,
body:has(.page-hero) .core-service-card:not(.core-service-card--inverted) .core-service-card__service-item span,
body:has(.page-hero) .core-service-card:not(.core-service-card--inverted) .core-service-card__checkmark,
body:has(.core-services--service-highlights) .core-service-card:not(.core-service-card--inverted) .core-service-card__title,
body:has(.core-services--service-highlights) .core-service-card:not(.core-service-card--inverted) .core-service-card__blurb,
body:has(.core-services--service-highlights) .core-service-card:not(.core-service-card--inverted) .core-service-card__service-item,
body:has(.core-services--service-highlights) .core-service-card:not(.core-service-card--inverted) .core-service-card__service-item span,
body:has(.core-services--service-highlights) .core-service-card:not(.core-service-card--inverted) .core-service-card__checkmark,
body:has(.page-hero) .core-services .core-service-card:not(.core-service-card--inverted) .core-service-card__title,
body:has(.page-hero) .core-services .core-service-card:not(.core-service-card--inverted) .core-service-card__blurb,
body:has(.page-hero) .core-services .core-service-card:not(.core-service-card--inverted) .core-service-card__service-item,
body:has(.page-hero) .core-services .core-service-card:not(.core-service-card--inverted) .core-service-card__service-item span,
body:has(.page-hero) .core-services .core-service-card:not(.core-service-card--inverted) .core-service-card__checkmark,
body:has(.core-services--service-highlights) .core-services .core-service-card:not(.core-service-card--inverted) .core-service-card__title,
body:has(.core-services--service-highlights) .core-services .core-service-card:not(.core-service-card--inverted) .core-service-card__blurb,
body:has(.core-services--service-highlights) .core-services .core-service-card:not(.core-service-card--inverted) .core-service-card__service-item,
body:has(.core-services--service-highlights) .core-services .core-service-card:not(.core-service-card--inverted) .core-service-card__service-item span,
body:has(.core-services--service-highlights) .core-services .core-service-card:not(.core-service-card--inverted) .core-service-card__checkmark {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(15, 23, 42, 0.55) !important;
}

/* Keep buttons with their original styling but ensure white text */
body:has(.page-hero) .core-service-card:not(.core-service-card--inverted) .core-service-card__learn-more-btn,
body:has(.core-services--service-highlights) .core-service-card:not(.core-service-card--inverted) .core-service-card__learn-more-btn,
body:has(.page-hero) .core-services .core-service-card:not(.core-service-card--inverted) .core-service-card__learn-more-btn,
body:has(.core-services--service-highlights) .core-services .core-service-card:not(.core-service-card--inverted) .core-service-card__learn-more-btn {
  color: #ffffff !important;
  background: rgba(59, 130, 246, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body:has(.page-hero) .core-service-card:not(.core-service-card--inverted) .core-service-card__learn-more-btn:hover,
body:has(.core-services--service-highlights) .core-service-card:not(.core-service-card--inverted) .core-service-card__learn-more-btn:hover,
body:has(.page-hero) .core-services .core-service-card:not(.core-service-card--inverted) .core-service-card__learn-more-btn:hover,
body:has(.core-services--service-highlights) .core-services .core-service-card:not(.core-service-card--inverted) .core-service-card__learn-more-btn:hover {
  background: rgba(59, 130, 246, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Target all cards with white backgrounds and convert to homepage style */
body:has(.page-hero) [class*="card"][style*="background: #fff"],
body:has(.page-hero) [class*="card"][style*="background:#fff"],
body:has(.page-hero) [class*="card"][style*="background: white"],
body:has(.page-hero) [class*="card"][style*="background:white"],
body:has(.page-hero) [class*="card"][style*="background: rgba(255"],
body:has(.page-hero) [class*="card"][style*="background:rgba(255"],
body:has(.page-hero) [class*="Card"][style*="background: #fff"],
body:has(.page-hero) [class*="Card"][style*="background:#fff"],
body:has(.core-services--service-highlights) [class*="card"][style*="background: #fff"],
body:has(.core-services--service-highlights) [class*="card"][style*="background:#fff"],
body:has(.core-services--service-highlights) [class*="card"][style*="background: white"],
body:has(.core-services--service-highlights) [class*="card"][style*="background:white"],
body:has(.core-services--service-highlights) [class*="card"][style*="background: rgba(255"],
body:has(.core-services--service-highlights) [class*="card"][style*="background:rgba(255"],
body:has(.core-services--service-highlights) [class*="Card"][style*="background: #fff"],
body:has(.core-services--service-highlights) [class*="Card"][style*="background:#fff"] {
  background: rgba(15, 23, 42, 0.78) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.35) !important;
  border-radius: 12px !important;
}

/* Convert white-background divs that act as cards */
body:has(.page-hero) div[style*="background: #fff"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select),
body:has(.page-hero) div[style*="background:#fff"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select),
body:has(.page-hero) div[style*="background: white"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select),
body:has(.page-hero) div[style*="background:white"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select),
body:has(.page-hero) div[style*="background: rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select),
body:has(.page-hero) div[style*="background:rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select),
body:has(.core-services--service-highlights) div[style*="background: #fff"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select),
body:has(.core-services--service-highlights) div[style*="background:#fff"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select),
body:has(.core-services--service-highlights) div[style*="background: white"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select),
body:has(.core-services--service-highlights) div[style*="background:white"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select),
body:has(.core-services--service-highlights) div[style*="background: rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select),
body:has(.core-services--service-highlights) div[style*="background:rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) {
  background: rgba(15, 23, 42, 0.78) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.35) !important;
  border-radius: 12px !important;
}

/* Force white text on all converted white-background divs - CRITICAL */
/* This applies to ALL child elements including nested p, div, span, strong, etc. */
body:has(.page-hero) [class*="card"][style*="background: #fff"] *,
body:has(.page-hero) [class*="card"][style*="background:#fff"] *,
body:has(.page-hero) [class*="card"][style*="background: white"] *,
body:has(.page-hero) [class*="card"][style*="background:white"] *,
body:has(.page-hero) [class*="card"][style*="background: rgba(255"] *,
body:has(.page-hero) [class*="card"][style*="background:rgba(255"] *,
body:has(.page-hero) div[style*="background: #fff"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select),
body:has(.page-hero) div[style*="background:#fff"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select),
body:has(.page-hero) div[style*="background: white"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select),
body:has(.page-hero) div[style*="background:white"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select),
body:has(.page-hero) div[style*="background: rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select),
body:has(.page-hero) div[style*="background:rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select),
body:has(.page-hero) div[style*="background: #fff"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) *,
body:has(.page-hero) div[style*="background:#fff"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) *,
body:has(.page-hero) div[style*="background: white"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) *,
body:has(.page-hero) div[style*="background:white"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) *,
body:has(.page-hero) div[style*="background: rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) *,
body:has(.page-hero) div[style*="background:rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) *,
body:has(.page-hero) div[style*="background: rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) p,
body:has(.page-hero) div[style*="background:rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) p,
body:has(.page-hero) div[style*="background: rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) div,
body:has(.page-hero) div[style*="background:rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) div,
body:has(.page-hero) div[style*="background: rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) span,
body:has(.page-hero) div[style*="background:rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) span,
body:has(.page-hero) div[style*="background: rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) strong,
body:has(.page-hero) div[style*="background:rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) strong,
body:has(.core-services--service-highlights) [class*="card"][style*="background: #fff"] *,
body:has(.core-services--service-highlights) [class*="card"][style*="background:#fff"] *,
body:has(.core-services--service-highlights) [class*="card"][style*="background: white"] *,
body:has(.core-services--service-highlights) [class*="card"][style*="background:white"] *,
body:has(.core-services--service-highlights) [class*="card"][style*="background: rgba(255"] *,
body:has(.core-services--service-highlights) [class*="card"][style*="background:rgba(255"] *,
body:has(.core-services--service-highlights) div[style*="background: #fff"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select),
body:has(.core-services--service-highlights) div[style*="background:#fff"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select),
body:has(.core-services--service-highlights) div[style*="background: white"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select),
body:has(.core-services--service-highlights) div[style*="background:white"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select),
body:has(.core-services--service-highlights) div[style*="background: rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select),
body:has(.core-services--service-highlights) div[style*="background:rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select),
body:has(.core-services--service-highlights) div[style*="background: #fff"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) *,
body:has(.core-services--service-highlights) div[style*="background:#fff"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) *,
body:has(.core-services--service-highlights) div[style*="background: white"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) *,
body:has(.core-services--service-highlights) div[style*="background:white"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) *,
body:has(.core-services--service-highlights) div[style*="background: rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) *,
body:has(.core-services--service-highlights) div[style*="background:rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) *,
body:has(.core-services--service-highlights) div[style*="background: rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) p,
body:has(.core-services--service-highlights) div[style*="background:rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) p,
body:has(.core-services--service-highlights) div[style*="background: rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) div,
body:has(.core-services--service-highlights) div[style*="background:rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) div,
body:has(.core-services--service-highlights) div[style*="background: rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) span,
body:has(.core-services--service-highlights) div[style*="background:rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) span,
body:has(.core-services--service-highlights) div[style*="background: rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) strong,
body:has(.core-services--service-highlights) div[style*="background:rgba(255, 255, 255"]:not([class*="btn"]):not(button):not(input):not(textarea):not(select) strong {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(15, 23, 42, 0.55) !important;
}

/* ========================================
   SECTION THEME ENFORCEMENT
   Make ALL sections transparent to show background image
   ======================================== */

/* CRITICAL: Override CSS CLASS-based white backgrounds - make sections transparent */
body:has(.page-hero) .main-content-section,
body:has(.page-hero) .seasonal-highlight-section,
body:has(.page-hero) .pond-maintenance-intro,
body:has(.page-hero) .pond-maintenance-page,
body:has(.page-hero) .seasonal-services-section,
body:has(.page-hero) .service-areas-section,
body:has(.page-hero) .contact-form-section,
body:has(.page-hero) .seasonal-highlight-card,
body:has(.page-hero) .seasonal-highlight-card__body,
body:has(.page-hero) .seasonal-highlight-grid,
body:has(.page-hero) .core-services,
body:has(.page-hero) .core-services__title,
body:has(.page-hero) .core-services__intro,
body:has(.page-hero) .core-services__grid,
body:has(.page-hero) .core-services__item,
body:has(.page-hero) .service-list,
body:has(.page-hero) .container,
body:has(.page-hero) [class*="main-content"],
body:has(.page-hero) [class*="seasonal"],
body:has(.page-hero) [class*="pond-maintenance"],
body:has(.core-services--service-highlights) .main-content-section,
body:has(.core-services--service-highlights) .seasonal-highlight-section,
body:has(.core-services--service-highlights) .pond-maintenance-intro,
body:has(.core-services--service-highlights) .pond-maintenance-page,
body:has(.core-services--service-highlights) .seasonal-services-section,
body:has(.core-services--service-highlights) .service-areas-section,
body:has(.core-services--service-highlights) .contact-form-section,
body:has(.core-services--service-highlights) .seasonal-highlight-card,
body:has(.core-services--service-highlights) .seasonal-highlight-card__body,
body:has(.core-services--service-highlights) .seasonal-highlight-grid,
body:has(.core-services--service-highlights) .core-services,
body:has(.core-services--service-highlights) .core-services__title,
body:has(.core-services--service-highlights) .core-services__intro,
body:has(.core-services--service-highlights) .core-services__grid,
body:has(.core-services--service-highlights) .core-services__item,
body:has(.core-services--service-highlights) .service-list,
body:has(.core-services--service-highlights) .container,
body:has(.core-services--service-highlights) [class*="main-content"],
body:has(.core-services--service-highlights) [class*="seasonal"],
body:has(.core-services--service-highlights) [class*="pond-maintenance"] {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* CRITICAL: Make FishHealthInfographic sections transparent to show background image */
body:has(.page-hero) .fish-health-infographic,
body:has(.page-hero) .fish-health-infographic__care-section,
body:has(.page-hero) .fish-health-infographic__treatments,
body:has(.page-hero) .fish-health-infographic__prevention,
body:has(.page-hero) .fish-health-infographic__footer,
body:has(.page-hero) .fish-health-infographic__pond-perfect,
body:has(.page-hero) .fish-health-infographic__image-wrapper,
body:has(.page-hero) .fish-health-infographic__fallback,
body:has(.page-hero) .fish-health-infographic__container,
body:has(.core-services--service-highlights) .fish-health-infographic,
body:has(.core-services--service-highlights) .fish-health-infographic__care-section,
body:has(.core-services--service-highlights) .fish-health-infographic__treatments,
body:has(.core-services--service-highlights) .fish-health-infographic__prevention,
body:has(.core-services--service-highlights) .fish-health-infographic__footer,
body:has(.core-services--service-highlights) .fish-health-infographic__pond-perfect,
body:has(.core-services--service-highlights) .fish-health-infographic__image-wrapper,
body:has(.core-services--service-highlights) .fish-health-infographic__fallback,
body:has(.core-services--service-highlights) .fish-health-infographic__container {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Force white text on FishHealthInfographic sections */
body:has(.page-hero) .fish-health-infographic,
body:has(.page-hero) .fish-health-infographic *:not(input):not(textarea):not(select):not(option):not(img),
body:has(.page-hero) .fish-health-infographic__care-section *:not(input):not(textarea):not(select):not(option):not(img),
body:has(.page-hero) .fish-health-infographic__treatments *:not(input):not(textarea):not(select):not(option):not(img),
body:has(.page-hero) .fish-health-infographic__prevention *:not(input):not(textarea):not(select):not(option):not(img),
body:has(.page-hero) .fish-health-infographic__footer *:not(input):not(textarea):not(select):not(option):not(img),
body:has(.page-hero) .fish-health-infographic__pond-perfect *:not(input):not(textarea):not(select):not(option):not(img),
body:has(.page-hero) .fish-health-infographic__title,
body:has(.page-hero) .fish-health-infographic__description,
body:has(.page-hero) .fish-health-infographic__care-title,
body:has(.page-hero) .fish-health-infographic__treatments-title,
body:has(.page-hero) .fish-health-infographic__note,
body:has(.page-hero) .fish-health-infographic__treatments-list li,
body:has(.page-hero) .fish-health-infographic__prevention-list li,
body:has(.page-hero) .fish-health-infographic__prevention-text,
body:has(.page-hero) .fish-health-infographic__pond-perfect-text,
body:has(.page-hero) .fish-health-infographic__link,
body:has(.core-services--service-highlights) .fish-health-infographic,
body:has(.core-services--service-highlights) .fish-health-infographic *:not(input):not(textarea):not(select):not(option):not(img),
body:has(.core-services--service-highlights) .fish-health-infographic__care-section *:not(input):not(textarea):not(select):not(option):not(img),
body:has(.core-services--service-highlights) .fish-health-infographic__treatments *:not(input):not(textarea):not(select):not(option):not(img),
body:has(.core-services--service-highlights) .fish-health-infographic__prevention *:not(input):not(textarea):not(select):not(option):not(img),
body:has(.core-services--service-highlights) .fish-health-infographic__footer *:not(input):not(textarea):not(select):not(option):not(img),
body:has(.core-services--service-highlights) .fish-health-infographic__pond-perfect *:not(input):not(textarea):not(select):not(option):not(img),
body:has(.core-services--service-highlights) .fish-health-infographic__title,
body:has(.core-services--service-highlights) .fish-health-infographic__description,
body:has(.core-services--service-highlights) .fish-health-infographic__care-title,
body:has(.core-services--service-highlights) .fish-health-infographic__treatments-title,
body:has(.core-services--service-highlights) .fish-health-infographic__note,
body:has(.core-services--service-highlights) .fish-health-infographic__treatments-list li,
body:has(.core-services--service-highlights) .fish-health-infographic__prevention-list li,
body:has(.core-services--service-highlights) .fish-health-infographic__prevention-text,
body:has(.core-services--service-highlights) .fish-health-infographic__pond-perfect-text,
body:has(.core-services--service-highlights) .fish-health-infographic__link {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(15, 23, 42, 0.55) !important;
}

/* Convert sections with inline white backgrounds to transparent */
body:has(.page-hero) section[style*="background: #fff"],
body:has(.page-hero) section[style*="background:#fff"],
body:has(.page-hero) section[style*="background: white"],
body:has(.page-hero) section[style*="background:white"],
body:has(.page-hero) section[style*="background: rgba(255, 255, 255"],
body:has(.page-hero) section[style*="background:rgba(255, 255, 255"],
body:has(.page-hero) section:not(header):not(footer):not(.header):not(.footer):not(.uwg-prefooter),
body:has(.core-services--service-highlights) section[style*="background: #fff"],
body:has(.core-services--service-highlights) section[style*="background:#fff"],
body:has(.core-services--service-highlights) section[style*="background: white"],
body:has(.core-services--service-highlights) section[style*="background:white"],
body:has(.core-services--service-highlights) section[style*="background: rgba(255, 255, 255"],
body:has(.core-services--service-highlights) section[style*="background:rgba(255, 255, 255"],
body:has(.core-services--service-highlights) section:not(header):not(footer):not(.header):not(.footer):not(.uwg-prefooter) {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* CRITICAL: Override CSS class-based dark text colors - force white text */
body:has(.page-hero) .main-content-section h2,
body:has(.page-hero) .main-content-section h3,
body:has(.page-hero) .main-content-section h4,
body:has(.page-hero) .main-content-section p,
body:has(.page-hero) .main-content-section *:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) .seasonal-highlight-section h2,
body:has(.page-hero) .seasonal-highlight-section h3,
body:has(.page-hero) .seasonal-highlight-section p,
body:has(.page-hero) .seasonal-highlight-section *:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) .seasonal-highlight-card,
body:has(.page-hero) .seasonal-highlight-card *:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) .seasonal-highlight-card__body,
body:has(.page-hero) .seasonal-highlight-card__body *:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) .pond-maintenance-intro *:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) .pond-maintenance-page *:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) .seasonal-services-section *:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) .core-services__title,
body:has(.page-hero) .core-services__intro,
body:has(.page-hero) .service-list,
body:has(.page-hero) .service-list li,
body:has(.page-hero) [class*="main-content"] *:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) [class*="seasonal"] *:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) [class*="pond-maintenance"] *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) .main-content-section h2,
body:has(.core-services--service-highlights) .main-content-section h3,
body:has(.core-services--service-highlights) .main-content-section h4,
body:has(.core-services--service-highlights) .main-content-section p,
body:has(.core-services--service-highlights) .main-content-section *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) .seasonal-highlight-section h2,
body:has(.core-services--service-highlights) .seasonal-highlight-section h3,
body:has(.core-services--service-highlights) .seasonal-highlight-section p,
body:has(.core-services--service-highlights) .seasonal-highlight-section *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) .seasonal-highlight-card,
body:has(.core-services--service-highlights) .seasonal-highlight-card *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) .seasonal-highlight-card__body,
body:has(.core-services--service-highlights) .seasonal-highlight-card__body *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) .pond-maintenance-intro *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) .pond-maintenance-page *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) .seasonal-services-section *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) .core-services__title,
body:has(.core-services--service-highlights) .core-services__intro,
body:has(.core-services--service-highlights) .service-list,
body:has(.core-services--service-highlights) .service-list li,
body:has(.core-services--service-highlights) [class*="main-content"] *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) [class*="seasonal"] *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) [class*="pond-maintenance"] *:not(input):not(textarea):not(select):not(option) {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(15, 23, 42, 0.55) !important;
}

/* Force white text on converted sections */
body:has(.page-hero) section[style*="background: #fff"] *,
body:has(.page-hero) section[style*="background:#fff"] *,
body:has(.page-hero) section[style*="background: white"] *,
body:has(.page-hero) section[style*="background:white"] *,
body:has(.page-hero) section[style*="background: rgba(255, 255, 255"] *,
body:has(.page-hero) section[style*="background:rgba(255, 255, 255"] *,
body:has(.core-services--service-highlights) section[style*="background: #fff"] *,
body:has(.core-services--service-highlights) section[style*="background:#fff"] *,
body:has(.core-services--service-highlights) section[style*="background: white"] *,
body:has(.core-services--service-highlights) section[style*="background:white"] *,
body:has(.core-services--service-highlights) section[style*="background: rgba(255, 255, 255"] *,
body:has(.core-services--service-highlights) section[style*="background:rgba(255, 255, 255"] * {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(15, 23, 42, 0.55) !important;
}

/* Keep input fields, textareas, and selects with dark text for readability */
body:has(.page-hero) section[style*="background: #fff"] input,
body:has(.page-hero) section[style*="background:#fff"] input,
body:has(.page-hero) section[style*="background: white"] input,
body:has(.page-hero) section[style*="background:white"] input,
body:has(.page-hero) section[style*="background: rgba(255, 255, 255"] input,
body:has(.page-hero) section[style*="background:rgba(255, 255, 255"] input,
body:has(.page-hero) section[style*="background: #fff"] textarea,
body:has(.page-hero) section[style*="background:#fff"] textarea,
body:has(.page-hero) section[style*="background: white"] textarea,
body:has(.page-hero) section[style*="background:white"] textarea,
body:has(.page-hero) section[style*="background: rgba(255, 255, 255"] textarea,
body:has(.page-hero) section[style*="background:rgba(255, 255, 255"] textarea,
body:has(.page-hero) section[style*="background: #fff"] select,
body:has(.page-hero) section[style*="background:#fff"] select,
body:has(.page-hero) section[style*="background: white"] select,
body:has(.page-hero) section[style*="background:white"] select,
body:has(.page-hero) section[style*="background: rgba(255, 255, 255"] select,
body:has(.page-hero) section[style*="background:rgba(255, 255, 255"] select,
body:has(.core-services--service-highlights) section[style*="background: #fff"] input,
body:has(.core-services--service-highlights) section[style*="background:#fff"] input,
body:has(.core-services--service-highlights) section[style*="background: white"] input,
body:has(.core-services--service-highlights) section[style*="background:white"] input,
body:has(.core-services--service-highlights) section[style*="background: rgba(255, 255, 255"] input,
body:has(.core-services--service-highlights) section[style*="background:rgba(255, 255, 255"] input,
body:has(.core-services--service-highlights) section[style*="background: #fff"] textarea,
body:has(.core-services--service-highlights) section[style*="background:#fff"] textarea,
body:has(.core-services--service-highlights) section[style*="background: white"] textarea,
body:has(.core-services--service-highlights) section[style*="background:white"] textarea,
body:has(.core-services--service-highlights) section[style*="background: rgba(255, 255, 255"] textarea,
body:has(.core-services--service-highlights) section[style*="background:rgba(255, 255, 255"] textarea,
body:has(.core-services--service-highlights) section[style*="background: #fff"] select,
body:has(.core-services--service-highlights) section[style*="background:#fff"] select,
body:has(.core-services--service-highlights) section[style*="background: white"] select,
body:has(.core-services--service-highlights) section[style*="background:white"] select,
body:has(.core-services--service-highlights) section[style*="background: rgba(255, 255, 255"] select,
body:has(.core-services--service-highlights) section[style*="background:rgba(255, 255, 255"] select {
  color: #0f172a !important;
  background: rgba(255, 255, 255, 0.95) !important;
  text-shadow: none !important;
}

/* ========================================
   ULTIMATE CATCH-ALL: FORCE ALL TEXT TO WHITE
   Override EVERYTHING - highest priority rule
   ======================================== */

/* CRITICAL: Force ALL text elements to white on pages with PageHero or CompactServiceHero */
/* This overrides ALL inline styles, CSS classes, and computed styles */
/* Target ALL text elements including p, span, div, strong, em, etc. */
body:has(.page-hero) p:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) span:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) div:not(input):not(textarea):not(select):not(option):not([style*="background: rgba(255, 255, 255"]):not([style*="background:rgba(255, 255, 255"]):not([style*="background: #fff"]):not([style*="background:#fff"]):not([style*="background: white"]):not([style*="background:white"]),
body:has(.page-hero) strong:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) em:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) small:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) li:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) *:not(input):not(textarea):not(select):not(option):not([style*="background: rgba(255, 255, 255"]):not([style*="background:rgba(255, 255, 255"]):not([style*="background: #fff"]):not([style*="background:#fff"]):not([style*="background: white"]):not([style*="background:white"]),
body:has(.core-services--service-highlights) p:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) span:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) div:not(input):not(textarea):not(select):not(option):not([style*="background: rgba(255, 255, 255"]):not([style*="background:rgba(255, 255, 255"]):not([style*="background: #fff"]):not([style*="background:#fff"]):not([style*="background: white"]):not([style*="background:white"]),
body:has(.core-services--service-highlights) strong:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) em:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) small:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) li:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) *:not(input):not(textarea):not(select):not(option):not([style*="background: rgba(255, 255, 255"]):not([style*="background:rgba(255, 255, 255"]):not([style*="background: #fff"]):not([style*="background:#fff"]):not([style*="background: white"]):not([style*="background:white"]) {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(15, 23, 42, 0.55) !important;
}

/* Override inline color styles specifically - even higher priority for nested elements */
body:has(.page-hero) [style*="color"]:not(input):not(textarea):not(select):not(option):not([style*="background: rgba(255, 255, 255"]):not([style*="background:rgba(255, 255, 255"]):not([style*="background: #fff"]):not([style*="background:#fff"]):not([style*="background: white"]):not([style*="background:white"]),
body:has(.page-hero) [style*="color"] *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) [style*="color"]:not(input):not(textarea):not(select):not(option):not([style*="background: rgba(255, 255, 255"]):not([style*="background:rgba(255, 255, 255"]):not([style*="background: #fff"]):not([style*="background:#fff"]):not([style*="background: white"]):not([style*="background:white"]),
body:has(.core-services--service-highlights) [style*="color"] *:not(input):not(textarea):not(select):not(option) {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(15, 23, 42, 0.55) !important;
}

/* ========================================
   UNIVERSAL DARK BACKGROUND RULE
   ANY element with a dark semi-transparent background automatically gets white text
   This catches all dark backgrounds, not just cards
   ======================================== */

/* CRITICAL: Override ALL inline text colors on pages with PageHero/CompactServiceHero */
/* Force white text regardless of inline style color declarations - HIGHEST PRIORITY */
/* Target ALL text elements including nested ones */
body:has(.page-hero) [style*="color: #0f172a"],
body:has(.page-hero) [style*="color:#0f172a"],
body:has(.page-hero) [style*="color: #64748b"],
body:has(.page-hero) [style*="color:#64748b"],
body:has(.page-hero) [style*="color: #374151"],
body:has(.page-hero) [style*="color:#374151"],
body:has(.page-hero) [style*="color: #475569"],
body:has(.page-hero) [style*="color:#475569"],
body:has(.page-hero) [style*="color: #1e293b"],
body:has(.page-hero) [style*="color:#1e293b"],
body:has(.page-hero) [style*="color: #334155"],
body:has(.page-hero) [style*="color:#334155"],
body:has(.page-hero) strong[style*="color"],
body:has(.page-hero) span[style*="color"],
body:has(.page-hero) p[style*="color"],
body:has(.page-hero) div[style*="color"],
body:has(.page-hero) h1[style*="color"],
body:has(.page-hero) h2[style*="color"],
body:has(.page-hero) h3[style*="color"],
body:has(.page-hero) h4[style*="color"],
body:has(.page-hero) h5[style*="color"],
body:has(.page-hero) h6[style*="color"],
body:has(.page-hero) [style*="color: #0f172a"] *,
body:has(.page-hero) [style*="color:#0f172a"] *,
body:has(.page-hero) [style*="color: #1e293b"] *,
body:has(.page-hero) [style*="color:#1e293b"] *,
body:has(.page-hero) [style*="color: #64748b"] *,
body:has(.page-hero) [style*="color:#64748b"] *,
body:has(.core-services--service-highlights) [style*="color: #0f172a"],
body:has(.core-services--service-highlights) [style*="color:#0f172a"],
body:has(.core-services--service-highlights) [style*="color: #64748b"],
body:has(.core-services--service-highlights) [style*="color:#64748b"],
body:has(.core-services--service-highlights) [style*="color: #374151"],
body:has(.core-services--service-highlights) [style*="color:#374151"],
body:has(.core-services--service-highlights) [style*="color: #475569"],
body:has(.core-services--service-highlights) [style*="color:#475569"],
body:has(.core-services--service-highlights) [style*="color: #1e293b"],
body:has(.core-services--service-highlights) [style*="color:#1e293b"],
body:has(.core-services--service-highlights) [style*="color: #334155"],
body:has(.core-services--service-highlights) [style*="color:#334155"],
body:has(.core-services--service-highlights) strong[style*="color"],
body:has(.core-services--service-highlights) span[style*="color"],
body:has(.core-services--service-highlights) p[style*="color"],
body:has(.core-services--service-highlights) div[style*="color"],
body:has(.core-services--service-highlights) h1[style*="color"],
body:has(.core-services--service-highlights) h2[style*="color"],
body:has(.core-services--service-highlights) h3[style*="color"],
body:has(.core-services--service-highlights) h4[style*="color"],
body:has(.core-services--service-highlights) h5[style*="color"],
body:has(.core-services--service-highlights) h6[style*="color"],
body:has(.core-services--service-highlights) [style*="color: #0f172a"] *,
body:has(.core-services--service-highlights) [style*="color:#0f172a"] *,
body:has(.core-services--service-highlights) [style*="color: #1e293b"] *,
body:has(.core-services--service-highlights) [style*="color:#1e293b"] *,
body:has(.core-services--service-highlights) [style*="color: #64748b"] *,
body:has(.core-services--service-highlights) [style*="color:#64748b"] * {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(15, 23, 42, 0.55) !important;
}

/* Target ALL elements with dark rgba backgrounds and force white text */
/* This applies to divs, sections, articles, and any other elements with dark backgrounds */
body:has(.page-hero) [style*="background: rgba(15, 23, 42"],
body:has(.page-hero) [style*="background:rgba(15, 23, 42"],
body:has(.page-hero) [style*="background: rgba(30, 41, 59"],
body:has(.page-hero) [style*="background:rgba(30, 41, 59"],
body:has(.page-hero) [style*="background: rgba(51, 65, 85"],
body:has(.page-hero) [style*="background:rgba(51, 65, 85"],
body:has(.page-hero) [style*="background: rgba(30, 64, 175"],
body:has(.page-hero) [style*="background:rgba(30, 64, 175"],
body:has(.page-hero) [style*="background: rgba(37, 99, 235"],
body:has(.page-hero) [style*="background:rgba(37, 99, 235"],
body:has(.page-hero) [style*="background: rgba(0, 0, 0"],
body:has(.page-hero) [style*="background:rgba(0, 0, 0"],
body:has(.page-hero) [style*="background: rgba(17, 24, 39"],
body:has(.page-hero) [style*="background:rgba(17, 24, 39"],
body:has(.page-hero) [style*="background: rgba(31, 41, 55"],
body:has(.page-hero) [style*="background:rgba(31, 41, 55"],
body:has(.core-services--service-highlights) [style*="background: rgba(15, 23, 42"],
body:has(.core-services--service-highlights) [style*="background:rgba(15, 23, 42"],
body:has(.core-services--service-highlights) [style*="background: rgba(30, 41, 59"],
body:has(.core-services--service-highlights) [style*="background:rgba(30, 41, 59"],
body:has(.core-services--service-highlights) [style*="background: rgba(51, 65, 85"],
body:has(.core-services--service-highlights) [style*="background:rgba(51, 65, 85"],
body:has(.core-services--service-highlights) [style*="background: rgba(30, 64, 175"],
body:has(.core-services--service-highlights) [style*="background:rgba(30, 64, 175"],
body:has(.core-services--service-highlights) [style*="background: rgba(37, 99, 235"],
body:has(.core-services--service-highlights) [style*="background:rgba(37, 99, 235"],
body:has(.core-services--service-highlights) [style*="background: rgba(0, 0, 0"],
body:has(.core-services--service-highlights) [style*="background:rgba(0, 0, 0"],
body:has(.core-services--service-highlights) [style*="background: rgba(17, 24, 39"],
body:has(.core-services--service-highlights) [style*="background:rgba(17, 24, 39"],
body:has(.core-services--service-highlights) [style*="background: rgba(31, 41, 55"],
body:has(.core-services--service-highlights) [style*="background:rgba(31, 41, 55"] {
  /* Container rule - text color handled by child selector below */
}

body:has(.page-hero) [style*="background: rgba(15, 23, 42"] *:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) [style*="background:rgba(15, 23, 42"] *:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) [style*="background: rgba(30, 41, 59"] *:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) [style*="background:rgba(30, 41, 59"] *:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) [style*="background: rgba(51, 65, 85"] *:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) [style*="background:rgba(51, 65, 85"] *:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) [style*="background: rgba(30, 64, 175"] *:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) [style*="background:rgba(30, 64, 175"] *:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) [style*="background: rgba(37, 99, 235"] *:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) [style*="background:rgba(37, 99, 235"] *:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) [style*="background: rgba(0, 0, 0"] *:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) [style*="background:rgba(0, 0, 0"] *:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) [style*="background: rgba(17, 24, 39"] *:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) [style*="background:rgba(17, 24, 39"] *:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) [style*="background: rgba(31, 41, 55"] *:not(input):not(textarea):not(select):not(option),
body:has(.page-hero) [style*="background:rgba(31, 41, 55"] *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) [style*="background: rgba(15, 23, 42"] *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) [style*="background:rgba(15, 23, 42"] *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) [style*="background: rgba(30, 41, 59"] *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) [style*="background:rgba(30, 41, 59"] *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) [style*="background: rgba(51, 65, 85"] *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) [style*="background:rgba(51, 65, 85"] *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) [style*="background: rgba(30, 64, 175"] *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) [style*="background:rgba(30, 64, 175"] *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) [style*="background: rgba(37, 99, 235"] *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) [style*="background:rgba(37, 99, 235"] *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) [style*="background: rgba(0, 0, 0"] *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) [style*="background:rgba(0, 0, 0"] *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) [style*="background: rgba(17, 24, 39"] *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) [style*="background:rgba(17, 24, 39"] *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) [style*="background: rgba(31, 41, 55"] *:not(input):not(textarea):not(select):not(option),
body:has(.core-services--service-highlights) [style*="background:rgba(31, 41, 55"] *:not(input):not(textarea):not(select):not(option) {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(15, 23, 42, 0.55) !important;
}