/* ==========================================================================
   Hero colours (2026-11-06) - one standard for the heroes of the global site.
   H1 white | first paragraph under the H1 #470000 | every hero pill #470000 with a #FF0000 icon and white text.
   Colour only: nothing here touches size, weight, spacing, layout or animation.
   Loaded by head-open.php after typography.css (which sets every page title and hero pill icon to #470000), hence the doubled
   :not(#_) and the !important on the targeted hero elements only.
   Left out on purpose, because the new colours would disappear on their backgrounds:
   - light heroes: Industries detail pages (.iv3-hero), AliveCRM, MLM, blog posts;
   - the maroon paragraph on dark heroes (Products and company pages .s2-hero, Solutions, Global Presence, legacy service pages): those keep their light paragraph.
   The service-page heroes (.wcat-hero) get the same colours from css/service-category-content.css.
   ========================================================================== */

/* 1. H1 - the whole title, including any highlighted span, is white */
html body :is(.banner-04, .abx-hero, .svp-hero, .inp-hero, .inx-hero, .csp-hero, .ctp-hero, .gqp-hero, .s2-hero, .solh-hero, .sol-hero, .sl3-hero, .sv3-hero, .hb-hero, .career-hero, .header-team) h1:not(#_):not(#_),
html body :is(.banner-04, .abx-hero, .svp-hero, .inp-hero, .inx-hero, .csp-hero, .ctp-hero, .gqp-hero, .s2-hero, .solh-hero, .sol-hero, .sl3-hero, .sv3-hero, .hb-hero, .career-hero, .header-team) h1 *:not(#_):not(#_),
html body h1.hero-animate:not(#_):not(#_) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* 2. The first paragraph directly under the H1 (the lead line of each red hero) - the other hero paragraphs keep their colour */
html body :is(
  .banner-subtitle,
  .abx-hero h1 + p,
  :is(.svp-hero, .inp-hero, .csp-hero, .ctp-hero, .gqp-hero) h1 + p,
  .inx-hero h1 + h2.inx-lead,
  .career-hero p.hero-p,
  p.hero-animate-delay
):not(#_):not(#_),
html body :is(.banner-subtitle, .abx-hero h1 + p) :is(strong, em, span, a):not(#_):not(#_) {
  color: #470000 !important;
  -webkit-text-fill-color: #470000 !important;
}

/* 3. Pills / tags / badges inside the hero: maroon fill, white label, red icon (shape, padding and border are untouched) */
html body :is(
  :is(.banner-04, .abx-hero, .svp-hero, .inp-hero, .csp-hero, .ctp-hero, .gqp-hero) .hp-kicker,
  .inx-hero :is(.inx-pill, .inx-chips-hero li),
  .inp-hero .inp-hero-tag,
  .s2-hero :is(.s2-tag, .lfp-pill),
  .sv3-hero :is(.sv3-kicker, .sv3-eyebrow, .sv3-tag),
  .sl3-hero :is(.sl3-tag, .sl3-kick),
  .sol-hero .sol-tag
):not(#_):not(#_) {
  background: #470000 !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
html body :is(
  :is(.banner-04, .abx-hero, .svp-hero, .inp-hero, .csp-hero, .ctp-hero, .gqp-hero) .hp-kicker,
  .inx-hero :is(.inx-pill, .inx-chips-hero li),
  .inp-hero .inp-hero-tag,
  .s2-hero :is(.s2-tag, .lfp-pill),
  .sv3-hero :is(.sv3-kicker, .sv3-eyebrow, .sv3-tag),
  .sl3-hero :is(.sl3-tag, .sl3-kick),
  .sol-hero .sol-tag
) :is(i, svg, svg *):not(#_):not(#_) {
  color: #ff0000 !important;
  -webkit-text-fill-color: #ff0000 !important;
  fill: #ff0000 !important;
}