/**
 * Text on gray, from the American Red Cross brand guide (August 2025).
 *
 * Red Cross Red #E21224 passes on white but not on the site's gray panels:
 * 4.35:1 on #f2f3f5 and 3.73:1 on the #e2e2e2 tag cloud. The guide's answer,
 * and redcross.org's own practice, is Red Cross Gray #212529 for text on
 * gray, 13.89:1 and 11.91:1 there. Approved by the client 15 Oct 2026.
 *
 * Only enqueued on the American sites (.us and .org). Canada has its own brand
 * red and its own decision, and this file must not reach it.
 *
 * The theme colors links and menus from its own variables - --link_color and
 * palette slot 6 - so those are redefined inside gray containers rather than
 * fought with specificity. Everything outside a gray panel keeps the red.
 */

/*
 * Gray columns and full-width containers. Avada writes the background as a
 * variable in the element's style attribute, which is the only thing that
 * marks a panel as gray, so the selectors read it from there.
 */
.fusion-layout-column[style*="--awb-bg-color:var(--awb-color3)"],
.fusion-layout-column[style*="--awb-bg-color:var(--awb-color4)"],
.fusion-layout-column[style*="--awb-bg-color:#f2f3f5"],
.fusion-layout-column[style*="--awb-bg-color:#e2e2e2"],
.fusion-layout-column[style*="--awb-bg-color:#f0f0f0"],
.fusion-fullwidth[style*="--awb-background-color:var(--awb-color3)"],
.fusion-fullwidth[style*="--awb-background-color:var(--awb-color4)"],
.fusion-fullwidth[style*="--awb-background-color:#f2f3f5"],
.fusion-fullwidth[style*="--awb-background-color:#e2e2e2"],
.fusion-fullwidth[style*="--awb-background-color:#f0f0f0"] {
	--link_color: #212529;
	--awb-color6: #212529;
}

/*
 * Buttons inside those panels draw white text on their own red, which passes
 * at 4.83:1, so they keep it.
 */
.fusion-layout-column[style*="--awb-bg-color"] .fusion-button,
.fusion-fullwidth[style*="--awb-background-color"] .fusion-button {
	--awb-color6: var( --primary_color, #e21224 );
}

/*
 * The Resource Center tag cloud: red text on #e2e2e2 tags, 90 of the audit's
 * findings. The element sets --tag-text-color in its own style attribute, so
 * the override goes on the links inside it, where it takes precedence.
 */
.fusion-tagcloud-element a.tag-cloud-link {
	--tag-text-color: #212529;
	--tag-text-color-hover: #7f181b;
}

/* The skip link shows on #d8d8d8 when focused. */
a.skip-link.screen-reader-text:focus {
	color: #212529;
}