/**
 * Site-wide brand typography.
 *
 * Add the `handwriting` class to an Elementor widget or HTML element that
 * should use the Alex Brush treatment. The alias classes support existing
 * content that may already describe script text with a similar name.
 */
:root {
	--brand-font-primary: "Roboto", sans-serif;
	--brand-font-handwriting: "Alex Brush", cursive;
	--brand-color-copy: #9fa2a6;
	--brand-color-handwriting: #0d6690;

	/* Keep Elementor global typography in sync with the site brand. */
	--e-global-typography-primary-font-family: var(--brand-font-primary);
	--e-global-typography-secondary-font-family: var(--brand-font-primary);
	--e-global-typography-text-font-family: var(--brand-font-primary);
	--e-global-typography-accent-font-family: var(--brand-font-primary);
	--e-global-color-text: var(--brand-color-copy);
}

body {
	font-family: var(--brand-font-primary);
	color: var(--brand-color-copy);
}

:where(
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	li,
	dt,
	dd,
	figcaption,
	blockquote,
	label,
	input,
	select,
	textarea,
	.elementor-heading-title,
	.elementor-widget-text-editor,
	.woocommerce-loop-category__title,
	.woocommerce-loop-product__title,
	.product_title,
	.woocommerce-product-details__short-description,
	.woocommerce-Tabs-panel--description,
	.elementor-widget-text-editor span,
	.woocommerce-product-details__short-description span,
	.woocommerce-Tabs-panel--description span,
	.woocommerce-loop-category__title mark
) {
	/* These brand rules intentionally override per-widget Elementor typography. */
	font-family: var(--brand-font-primary) !important;
	color: var(--brand-color-copy) !important;
}

:where(.handwriting, .handwritten, .font-handwriting, .alex-brush),
:where(.handwriting, .handwritten, .font-handwriting, .alex-brush) :where(h1, h2, h3, h4, h5, h6, p, span) {
	font-family: var(--brand-font-handwriting) !important;
	font-weight: 400 !important;
	color: var(--brand-color-handwriting) !important;
}