/* ==========================================================================
   Million Dots — Shared components
   Pieces that repeat across page-section blocks: the eyebrow lane, inline
   icons, and the anchor-based button system our blocks render.
   The header's button rules are separate on purpose: there the classes land
   on core/button WRAPPERS (divs), so everything here is scoped to `a.mdc-btn`
   and cannot reach them.
   Every value comes from theme.json tokens (--wp--preset--* / --wp--custom--*).
   ========================================================================== */

/* --- Inline icons --------------------------------------------------------- */
.mdc-icon {
	width: 1.25em;
	height: 1.25em;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mdc-icon--solid {
	fill: currentColor;
	stroke: none;
}

/* --- Tabular figures for phone numbers and stats -------------------------- */
.mdc-num {
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1;
}

/* --- Eyebrow: the dashed road-lane rule ----------------------------------- */
.mdc-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin: 0 0 var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: var(--wp--custom--weight--semibold);
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--custom--color--ink-subtle);
}

.mdc-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: calc(
		var(--wp--custom--lane--solid-length) + var(--wp--custom--lane--dash) * 2 +
			var(--wp--custom--lane--gap) * 2
	);
	height: var(--wp--custom--lane--thickness);
	background-image:
		linear-gradient(
			90deg,
			var(--wp--custom--lane--color) 0 var(--wp--custom--lane--solid-length),
			transparent var(--wp--custom--lane--solid-length)
		),
		repeating-linear-gradient(
			90deg,
			var(--wp--custom--lane--color) 0 var(--wp--custom--lane--dash),
			transparent var(--wp--custom--lane--dash)
				calc(var(--wp--custom--lane--dash) + var(--wp--custom--lane--gap))
		);
	background-position: 0 0, calc(var(--wp--custom--lane--solid-length) + var(--wp--custom--lane--gap)) 0;
	background-repeat: no-repeat, repeat-x;
	background-size: 100% 100%, auto 100%;
}

/* On a dark wash the eyebrow text lifts to the inverted muted ink. */
.mdc-eyebrow--invert {
	color: var(--wp--preset--color--base);
}

/* ==========================================================================
   Buttons — rendered by our blocks as plain anchors
   ========================================================================== */

a.mdc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	min-height: 50px;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--sm);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--weight--semibold);
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-decoration: none;
	transition:
		background-color var(--wp--custom--duration--fast) var(--wp--custom--ease--out),
		border-color var(--wp--custom--duration--fast) var(--wp--custom--ease--out),
		color var(--wp--custom--duration--fast) var(--wp--custom--ease--out),
		box-shadow var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

a.mdc-btn .mdc-icon {
	width: 18px;
	height: 18px;
}

a.mdc-btn.mdc-btn--primary {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow--accent);
}

a.mdc-btn.mdc-btn--primary:hover {
	background-color: var(--wp--custom--color--accent-hover);
	color: var(--wp--preset--color--base);
}

a.mdc-btn.mdc-btn--primary:active {
	background-color: var(--wp--custom--color--accent-press);
}

a.mdc-btn.mdc-btn--outline {
	background-color: transparent;
	border-color: var(--wp--custom--color--border-strong);
	color: var(--wp--preset--color--contrast);
}

a.mdc-btn.mdc-btn--outline:hover {
	border-color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
}

/* Sits on a dark image: frosted, until hover flips it to a solid light chip. */
a.mdc-btn.mdc-btn--ghost-light {
	background-color: var(--wp--custom--color--tint-invert);
	border-color: var(--wp--custom--color--border-invert-strong);
	color: var(--wp--preset--color--base);
	backdrop-filter: blur(4px);
}

a.mdc-btn.mdc-btn--ghost-light:hover {
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

a.mdc-btn.mdc-btn--sm {
	min-height: 42px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--x-small);
}

a.mdc-btn.mdc-btn--block {
	width: 100%;
}