/* The colour-roles standard, applied (docs/specs/site-program/colour-roles-standard.md).
   Generated from lib/site-program/colour-roles-css.ts; a test holds the two equal.
   Every selector starts with :root so it outranks the widget rule it restates,
   in the plugin and in a stored page's preview overlay alike. Light-band rules
   exclude dark, primary and secondary bands, which keep their own rules. */

/* Rule 1: the solid button's hover is a darker Action, never Brand. */
:root .hero-block:not([data-hero-bg="dark"]):not([data-hero-bg="primary"]):not([data-hero-bg="secondary"]) .hero-block__button[data-hero-style="solid"]:hover {
  background: color-mix(in srgb, var(--hero-primary) 84%, #000); border-color: color-mix(in srgb, var(--hero-primary) 84%, #000); color: var(--hero-on-primary);
}

/* Rule 1: a form's submit button is the Action button, whatever the form plugin's theme sets. */
:root .hero-block .gform_wrapper { --gf-color-primary: var(--hero-primary); --gf-color-primary-contrast: var(--hero-on-primary); --gf-color-primary-darker: color-mix(in srgb, var(--hero-primary) 84%, #000); --gf-ctrl-btn-bg-color-primary: var(--hero-primary); --gf-ctrl-btn-bg-color-hover-primary: color-mix(in srgb, var(--hero-primary) 84%, #000); --gf-ctrl-btn-color-primary: var(--hero-on-primary); --gf-ctrl-btn-border-color-primary: var(--hero-primary); }
:root .hero-block .gform_wrapper :is(.gform_button, input[type="submit"], button[type="submit"]) { background: var(--hero-primary); border-color: var(--hero-primary); color: var(--hero-on-primary); }
:root .hero-block .gform_wrapper :is(.gform_button, input[type="submit"], button[type="submit"]):hover { background: color-mix(in srgb, var(--hero-primary) 84%, #000); border-color: color-mix(in srgb, var(--hero-primary) 84%, #000); color: var(--hero-on-primary); }
:root .hero-block:is([data-hero-bg="dark"], [data-hero-bg="primary"], [data-hero-bg="secondary"]) .hero-cta__form .gform_wrapper :is(.gform_button, input[type="submit"], button[type="submit"]) { background: var(--hero-dark-cta-bg); border-color: var(--hero-dark-cta-bg); color: var(--hero-dark-cta-text); }

/* Rule 3: eyebrows, checks, numerals and marks take the mark colour, never Action. */
:root .hero-block:not([data-hero-bg="dark"]):not([data-hero-bg="primary"]):not([data-hero-bg="secondary"]):not(.hero-banner):not(.hero-masthead) [class*="__eyebrow"] { color: var(--hero-mark); }
:root .hero-block[data-hero-eyebrow="pill"]:not([data-hero-bg="dark"]):not([data-hero-bg="primary"]):not([data-hero-bg="secondary"]):not(.hero-banner):not(.hero-masthead) [class*="__eyebrow"] { color: var(--hero-mark); }
:root .hero-masthead[data-hero-layout="title-bar"] .hero-block__eyebrow,
:root .hero-masthead[data-hero-layout="breadcrumb"] .hero-block__eyebrow { color: var(--hero-mark); }
:root .hero-cards:not([data-hero-bg="dark"]):not([data-hero-bg="primary"]):not([data-hero-bg="secondary"]) .hero-cards__icon { color: var(--hero-on-accent-tile); background-image: linear-gradient(var(--hero-accent-tile), var(--hero-accent-tile)); }
:root .hero-block [class*="__icon"] :is(svg.e-font-icon-svg, svg:not([fill])) { fill: currentColor; }
:root .hero-cards[data-hero-presentation="checklist"]:not([data-hero-bg="dark"]):not([data-hero-bg="primary"]):not([data-hero-bg="secondary"]) .hero-cards__card::before { background: var(--hero-accent-fill); }
:root .hero-cta:not([data-hero-bg="dark"]):not([data-hero-bg="primary"]):not([data-hero-bg="secondary"]) .hero-cta__body ul li::before { border-color: var(--hero-mark); }
:root .hero-split:not([data-hero-bg="dark"]):not([data-hero-bg="primary"]):not([data-hero-bg="secondary"]) .hero-split__body ul li::before { border-color: var(--hero-mark); }
:root .hero-editorial:not([data-hero-bg="dark"]):not([data-hero-bg="primary"]):not([data-hero-bg="secondary"]) .hero-editorial__item::before { background: var(--hero-accent-fill); }
:root .hero-editorial:not([data-hero-bg="dark"]):not([data-hero-bg="primary"]):not([data-hero-bg="secondary"]) .hero-editorial__stat-value { color: var(--hero-mark); }
:root .hero-steps:not([data-hero-bg="dark"]):not([data-hero-bg="primary"]):not([data-hero-bg="secondary"]) .hero-steps__marker { background: var(--hero-accent-fill); color: var(--hero-on-accent-fill); }
:root .hero-steps:not([data-hero-bg="dark"]):not([data-hero-bg="primary"]):not([data-hero-bg="secondary"]):is([data-hero-layout="horizontal"], [data-hero-layout="grid"])[data-hero-marker="number"] .hero-steps__marker { background: transparent; color: var(--hero-mark); }
:root .hero-steps:not([data-hero-bg="dark"]):not([data-hero-bg="primary"]):not([data-hero-bg="secondary"])[data-hero-marker="icon"] .hero-steps__marker { color: var(--hero-mark); }
:root .hero-tiles:not([data-hero-bg="dark"]):not([data-hero-bg="primary"]):not([data-hero-bg="secondary"])[data-hero-caption="below"] .hero-tiles__icon,
:root .hero-tiles:not([data-hero-bg="dark"]):not([data-hero-bg="primary"]):not([data-hero-bg="secondary"])[data-hero-pattern="stack"][data-hero-caption] .hero-tiles__icon { color: var(--hero-mark); }
:root .hero-local-map:not([data-hero-bg="dark"]):not([data-hero-bg="primary"]):not([data-hero-bg="secondary"])[data-hero-areas="columns"] .hero-local-map__area::before { background: var(--hero-accent-fill); }

/* Rule 6a: a heading on a light block is the Text colour. */
:root .hero-banner[data-hero-layout="boxed-card"] .hero-banner__heading { color: var(--hero-text); }
:root .hero-banner[data-hero-layout="boxed-card"] .hero-banner__eyebrow { color: var(--hero-mark); }

/* Rule 6b: the label pill on a light gray section is a step darker gray, never a brand tint. */
:root .hero-block[data-hero-eyebrow="pill"][data-hero-bg="muted"]:not(.hero-banner):not(.hero-masthead) [class*="__eyebrow"] { background: color-mix(in srgb, #000000 6%, var(--hero-surface-muted)); }

/* Rule 5: the boxed panel and the brand-band hero are Brand; their buttons are Action or its fallback. */
:root .hero-cta[data-hero-layout="boxed"] .hero-cta__inner { background: var(--hero-secondary); color: var(--hero-on-secondary); }
:root .hero-banner[data-hero-layout="minimal"] { background: var(--hero-secondary); color: var(--hero-on-secondary); }
:root .hero-banner[data-hero-layout="minimal"] .hero-banner__heading { color: var(--hero-on-secondary); }
:root .hero-banner[data-hero-layout="minimal"] .hero-block__button[data-hero-style="solid"] { background: var(--hero-dark-cta-bg); border-color: var(--hero-dark-cta-bg); color: var(--hero-dark-cta-text); }
:root .hero-banner[data-hero-layout="minimal"] .hero-block__button:is([data-hero-style="outline"], [data-hero-style="ghost"], [data-hero-style="link"]) { color: var(--hero-on-secondary); }
:root .hero-banner[data-hero-layout="minimal"][data-hero-eyebrow="pill"] [class*="__eyebrow"] { background: rgba(255, 255, 255, .16); color: inherit; }

/* Rule 2: the phone on a Brand band is Action where it reads, else the band's text. */
:root .hero-site-header[data-hero-layout="dark-band"] .hero-site-header__phone[data-hero-prominence="prominent"] { color: var(--hero-dark-phone); }
:root .hero-site-footer:is([data-hero-bg="dark"], [data-hero-bg="primary"], [data-hero-bg="secondary"]) .hero-site-footer__phone { color: var(--hero-dark-phone); }

/* Rule 1: the primary button keeps Action on every band, with no ring and no
   change of fill. The scope refuses a palette where Primary is under 3:1 on
   Secondary (WCAG 2.2, 1.4.11; EXEC, 2026-09-14). */

/* Material: Accent fills a light thin bar when the Action button stands out on it (EXEC, 2026-09-14). */
:root .hero-cta[data-hero-format="bar"]:is([data-hero-bg="muted"], [data-hero-bg="surface"]) { background-image: linear-gradient(var(--hero-accent-bar), var(--hero-accent-bar)); color: var(--hero-on-accent-bar); }
:root .hero-cta[data-hero-format="bar"]:is([data-hero-bg="muted"], [data-hero-bg="surface"]) :is(.hero-cta__heading, .hero-cta__phone) { color: var(--hero-on-accent-bar); }

/* Material: Action as text (links, Read more, the footer phone) uses its readable shade. */
:root .hero-block:not([data-hero-bg="dark"]):not([data-hero-bg="primary"]):not([data-hero-bg="secondary"]) :is(.hero-detail__label, .hero-reviews__all, .hero-block__button[data-hero-style="link"], .hero-block__button[data-hero-style="outline"]:not(:hover)) { color: var(--hero-action-text); }
:root .hero-site-footer:not([data-hero-bg="dark"]):not([data-hero-bg="primary"]):not([data-hero-bg="secondary"]) .hero-site-footer__phone { color: var(--hero-action-text); }

/* Rule 3: a step marker disc on a dark band is the band's heading colour, not Action. */
:root .hero-steps[data-hero-bg="dark"] .hero-steps__marker { background: var(--hero-dark-heading); color: var(--hero-dark-bg); }