/**
 * CW Heading — Design Reference header pattern (CompressionWorks-Design-Reference.html § header).
 * Plain word(s) + gradient accent word; Barlow 800; tokens for gradient stops.
 */

.cw-cw-heading {
	display: inline-block;
	max-width: 100%;
	margin: 0;
	padding: 0;
	font-family: var(--cw-font-heading, "Barlow", system-ui, sans-serif);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.05;
	font-size: clamp(28px, 4vw, 44px);
	color: var(--cw-cw-heading-plain, var(--cw-text, #ffffff));
	box-sizing: border-box;
}

.cw-cw-heading__plain {
	color: inherit;
}

.cw-cw-heading__gradient {
	font-style: normal;
	font-weight: inherit;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	display: inline;
	background: linear-gradient(
		135deg,
		var(--cw-cw-heading-g-start, var(--cw-accent-primary, #dc2626)),
		var(--cw-cw-heading-g-end, var(--cw-accent-secondary, #00b7fa))
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

@supports not (background-clip: text) {
	.cw-cw-heading__gradient {
		color: var(--cw-cw-heading-g-start, var(--cw-accent-primary, #dc2626));
		background: none;
		-webkit-text-fill-color: inherit;
	}
}

.cw-cw-heading__link {
	text-decoration: none;
	color: inherit;
	display: inline-block;
	max-width: 100%;
}

.cw-cw-heading__link:hover,
.cw-cw-heading__link:focus {
	color: inherit;
}

/* Rich text in plain segment */
.elementor-widget-cw-cw-heading .cw-cw-heading__plain strong,
.elementor-widget-cw-cw-heading .cw-cw-heading__plain b {
	font-weight: 700;
}

/* Nested emphasis inside gradient: keep same fill as parent em */
.elementor-widget-cw-cw-heading .cw-cw-heading__gradient strong,
.elementor-widget-cw-cw-heading .cw-cw-heading__gradient b {
	font-weight: 700;
	font-style: normal;
	background: linear-gradient(
		135deg,
		var(--cw-cw-heading-g-start, var(--cw-accent-primary, #dc2626)),
		var(--cw-cw-heading-g-end, var(--cw-accent-secondary, #00b7fa))
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

@supports not (background-clip: text) {
	.elementor-widget-cw-cw-heading .cw-cw-heading__gradient strong,
	.elementor-widget-cw-cw-heading .cw-cw-heading__gradient b {
		color: var(--cw-cw-heading-g-start, var(--cw-accent-primary, #dc2626));
		background: none;
		-webkit-text-fill-color: inherit;
	}
}

/*
 * Accent pill — parity with cw-section-intro .text-pill and cw-hero__pill (no overflow:hidden; avoids clipping motion if split words are added later).
 */
.elementor-widget-cw-cw-heading .cw-cw-heading__pill {
	display: inline-block;
	padding: 0.25rem 1.25rem;
	background: color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 15%, transparent);
	border-radius: 999px;
	position: relative;
	z-index: 1;
	vertical-align: baseline;
	box-sizing: border-box;
	max-width: 100%;
}

.elementor-widget-cw-cw-heading .cw-cw-heading__pill--section {
	font-size: 0.92em;
}

.elementor-widget-cw-cw-heading .cw-cw-heading__pill--hero {
	padding: 0.25rem 1.5rem;
	font-size: 1.05em;
	line-height: 1.1;
}

@media (min-width: 768px) {
	.elementor-widget-cw-cw-heading .cw-cw-heading__pill--hero {
		font-size: 1.12em;
	}
}

@media (min-width: 1024px) {
	.elementor-widget-cw-cw-heading .cw-cw-heading__pill--hero {
		font-size: 1.2em;
	}
}

.elementor-widget-cw-cw-heading .cw-cw-heading__pill::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 999px;
	padding: 1px;
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--cw-accent-primary, #dc2626) 80%, transparent),
		color-mix(in srgb, var(--cw-accent-secondary, #00b7fa) 80%, transparent)
	);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	z-index: -1;
}

@supports not (color: color-mix(in srgb, red, blue)) {
	.elementor-widget-cw-cw-heading .cw-cw-heading__pill {
		background: rgba(0, 183, 250, 0.12);
	}

	.elementor-widget-cw-cw-heading .cw-cw-heading__pill::before {
		background: linear-gradient(
			135deg,
			rgba(220, 38, 38, 0.85),
			rgba(0, 183, 250, 0.85)
		);
	}
}

/*
 * Plain-text accent inside capsule: inherit heading plain color (no gradient text-fill).
 * Capsule tint + gradient ring (::before) unchanged.
 */
.elementor-widget-cw-cw-heading .cw-cw-heading__pill--plain .cw-cw-heading__gradient {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	color: inherit;
	-webkit-text-fill-color: currentColor;
}

.elementor-widget-cw-cw-heading .cw-cw-heading__pill--plain .cw-cw-heading__gradient strong,
.elementor-widget-cw-cw-heading .cw-cw-heading__pill--plain .cw-cw-heading__gradient b {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	color: inherit;
	-webkit-text-fill-color: currentColor;
	font-weight: 700;
	font-style: normal;
}

/*
 * Segmented mode — same split-word + pill mechanism as Operational Environments / Section intro,
 * scoped to the brand heading class so existing typography/color controls keep applying.
 * Mirrors cw-section-intro.css initial-state rules but targets .cw-cw-heading.split-reveal-heading.
 */
.cw-cw-heading.split-reveal-heading .split-word {
	display: inline-block;
	margin-right: 0.2em;
	will-change: transform, opacity;
}

.cw-cw-heading.split-reveal-heading .split-word:last-child {
	margin-right: 0;
}

.cw-section-intro.gsap-section-header .cw-cw-heading.split-reveal-heading .split-word {
	opacity: 0;
	transform: translate3d(0, 115%, 0);
}

@media (max-width: 767px) {
	.cw-section-intro.gsap-section-header .cw-cw-heading.split-reveal-heading .split-word {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cw-section-intro.gsap-section-header .cw-cw-heading.split-reveal-heading .split-word {
		opacity: 1;
		transform: none;
	}
}

.elementor-editor-active .cw-section-intro.gsap-section-header .cw-cw-heading.split-reveal-heading .split-word {
	opacity: 1;
	transform: none;
}

/* Pills inside segmented brand heading reuse the cw-section-intro .text-pill capsule (loaded as style dep). */
.cw-cw-heading-segmented .text-pill .split-word {
	margin-right: 0.15em;
}

.cw-cw-heading-segmented .text-pill .split-word:last-child {
	margin-right: 0;
}