/* Heading. Sizes come from Site Settings; per-element overrides come from the page CSS. */

.mosaic-heading {
	margin: 0;
	color: var(--mosaic-color-headings, inherit);
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: break-word;
}

h1.mosaic-heading { font-size: var(--mosaic-fs-h1, 2.25rem); }
h2.mosaic-heading { font-size: var(--mosaic-fs-h2, 1.875rem); }
h3.mosaic-heading { font-size: var(--mosaic-fs-h3, 1.5rem); }
h4.mosaic-heading { font-size: var(--mosaic-fs-h4, 1.25rem); }
h5.mosaic-heading { font-size: var(--mosaic-fs-h5, 1.125rem); }
h6.mosaic-heading { font-size: var(--mosaic-fs-h6, 1rem); }

.mosaic-heading a {
	color: inherit;
	text-decoration: none;
}

.mosaic-heading a:hover {
	color: var(--mosaic-color-link-hover, currentColor);
	text-decoration: underline;
}

.mosaic-heading a:focus-visible {
	outline: var(--mosaic-focus-width, 3px) solid var(--mosaic-color-focus, currentColor);
	outline-offset: 2px;
}

/* Gradient text: the colours come from the two style properties. */
.mosaic-heading--gradient {
	background-image: linear-gradient(to right, var(--mosaic-hg-from, #2b4acb), var(--mosaic-hg-to, #c23a8f));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.mosaic-heading--gradient:dir(rtl) {
	background-image: linear-gradient(to left, var(--mosaic-hg-from, #2b4acb), var(--mosaic-hg-to, #c23a8f));
}

.mosaic-heading--gradient.mosaic-heading--g-bottom,
.mosaic-heading--gradient.mosaic-heading--g-bottom:dir(rtl) {
	background-image: linear-gradient(to bottom, var(--mosaic-hg-from, #2b4acb), var(--mosaic-hg-to, #c23a8f));
}

.mosaic-heading--gradient.mosaic-heading--g-diagonal,
.mosaic-heading--gradient.mosaic-heading--g-diagonal:dir(rtl) {
	background-image: linear-gradient(135deg, var(--mosaic-hg-from, #2b4acb), var(--mosaic-hg-to, #c23a8f));
}

.mosaic-heading--gradient a {
	-webkit-text-fill-color: transparent;
}

@media (forced-colors: active) {
	.mosaic-heading--gradient {
		background-image: none;
		-webkit-text-fill-color: currentColor;
		color: CanvasText;
	}
}