/*
 * Per-text colors: hfs-color--{slug} on desktop, hfs-mcolor--{slug} on mobile.
 * Set on the text itself (rating, title, description) or on the features row.
 */
.hfs-color--beverly { --hfs-color: var(--color-beverly, #113E23); }
.hfs-color--guava { --hfs-color: var(--color-guava, #FF5A50); }
.hfs-color--hawaiian-guava { --hfs-color: var(--color-hawaiian-guava, #FF7E76); }
.hfs-color--white { --hfs-color: #fff; }
.hfs-color--golden { --hfs-color: var(--color-golden, #FFDD9F); }
.hfs-color--blush { --hfs-color: var(--color-blush, #FFE4E3); }
.hfs-color--vanilla { --hfs-color: var(--color-vanilla, #FFFAF1); }

.hfs-mcolor--beverly { --hfs-mcolor: var(--color-beverly, #113E23); }
.hfs-mcolor--guava { --hfs-mcolor: var(--color-guava, #FF5A50); }
.hfs-mcolor--hawaiian-guava { --hfs-mcolor: var(--color-hawaiian-guava, #FF7E76); }
.hfs-mcolor--white { --hfs-mcolor: #fff; }
.hfs-mcolor--golden { --hfs-mcolor: var(--color-golden, #FFDD9F); }
.hfs-mcolor--blush { --hfs-mcolor: var(--color-blush, #FFE4E3); }
.hfs-mcolor--vanilla { --hfs-mcolor: var(--color-vanilla, #FFFAF1); }

/* Light text gets a soft shadow so it holds up over busy photos. */
.hfs {
	--hfs-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 2px 18px rgba(0, 0, 0, .35);
}

@media (max-width: 767px) {
	/* Default text follows the fade: white on the dark one. */
	.hfs--mfade-dark .hfs__text {
		color: #fff;
	}

	.hfs--mfade-dark .hfs__divider {
		background-color: #fff;
	}

	.hfs .hfs__text[class*="hfs-mcolor--"],
	.hfs [class*="hfs-mcolor--"] .hfs__text {
		color: var(--hfs-mcolor);
	}

	.hfs [class*="hfs-mcolor--"] .hfs__divider {
		background-color: var(--hfs-mcolor);
	}

	.hfs--mfade-none .hfs__text:is(.hfs-mcolor--white, .hfs-mcolor--golden, .hfs-mcolor--blush, .hfs-mcolor--vanilla),
	.hfs--mfade-none :is(.hfs-mcolor--white, .hfs-mcolor--golden, .hfs-mcolor--blush, .hfs-mcolor--vanilla) .hfs__text {
		text-shadow: var(--hfs-shadow);
	}

	/* A title colored white in the editor disappears on the light fade. */
	.hfs--mfade-light .hfs__title span:is([style*="#fff" i], [style*="rgb(255, 255, 255)"], [style*="white" i]) {
		color: inherit !important;
	}
}

@media (min-width: 768px) {
	.hfs--text-light .hfs__text {
		color: #fff;
		text-shadow: var(--hfs-shadow);
	}

	.hfs--text-light .hfs__divider {
		background-color: #fff;
	}

	.hfs .hfs__text[class*="hfs-color--"],
	.hfs [class*="hfs-color--"] .hfs__text {
		color: var(--hfs-color);
		text-shadow: none;
	}

	.hfs [class*="hfs-color--"] .hfs__divider {
		background-color: var(--hfs-color);
	}

	.hfs .hfs__text:is(.hfs-color--white, .hfs-color--golden, .hfs-color--blush, .hfs-color--vanilla),
	.hfs :is(.hfs-color--white, .hfs-color--golden, .hfs-color--blush, .hfs-color--vanilla) .hfs__text {
		text-shadow: var(--hfs-shadow);
	}
}