/*
Theme Name: WebWerks Bricks Kit
Theme URI: https://webwerks.dev
Description: WebWerks child theme for Bricks. Carries the design system, templates and the bricks-sync CLI so the work lives in git rather than only in a database.
Author: WebWerks Dev LLC
Template: bricks
Version: 1.6.11
*/

/*
 * Font families only. Body color, background and container width/gutter are the Bricks Theme
 * Style (tokens.json themeStyle), editable in the builder. Font family stays here because Bricks
 * quotes that field, which turns var(--font-display) into an invalid font name.
 */
body {
	font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.u-display {
	text-wrap: balance;
	font-family: var(--font-display);
}

.brxe-container {
	margin-inline: auto;
}

/*
 * Step marker: a numbered circle.
 *
 * Bricks can express this in element settings. Elementor cannot reliably: its
 * widget wrapper stretches to the row and the self-align control is not
 * reachable from the data layer, so the shape has to be asserted in CSS.
 *
 * Which is the better answer anyway. One class, driven by the same tokens,
 * renders identically in both builders, and a designer changing --size-marker
 * changes it everywhere.
 */
.ww-step-marker {
	align-self: flex-start;
}

.ww-step-marker .elementor-heading-title,
.ww-step-marker {
	flex: 0 0 auto;
}

.ww-step-marker .elementor-heading-title {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--size-marker);
	height: var(--size-marker);
	border-radius: var(--radius-full);
	background-color: var(--brand-accent);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: var(--text-base);
	line-height: 1;
}