/**
 * Fundraising Meter — front-end styles.
 *
 * Design rule: inherit first, override second. Every var() fallback is `inherit`,
 * `currentColor`, or `transparent`, so an unconfigured meter adopts the site's
 * typography and colour rather than imposing its own.
 *
 * Every selector begins with a .mts-fm class. There are no element-only selectors and no
 * descendant selectors that could reach into theme markup.
 *
 * No JavaScript. The progress fill animates in pure CSS.
 */

/* ---------------------------------------------------------------------------
 * 1. Root + effective size resolution
 *
 * Placement-level responsive typography arrives as up to three plain custom
 * properties per size. The media queries below resolve them into one "effective"
 * variable, so per-instance CSS is never generated — the cascade does the work.
 * ------------------------------------------------------------------------ */

.mts-fm {
	--mts-fm-heading-size-eff: var(--mts-fm-heading-size, clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem));
	--mts-fm-subheading-size-eff: var(--mts-fm-subheading-size, clamp(1rem, 0.95rem + 0.3vw, 1.15rem));
	--mts-fm-body-size-eff: var(--mts-fm-body-size, 1rem);
	--mts-fm-amount-size-eff: var(--mts-fm-amount-size, clamp(1.75rem, 1.3rem + 2vw, 3rem));
	--mts-fm-button-size-eff: var(--mts-fm-button-size, 1rem);

	box-sizing: border-box;
	color: var(--mts-fm-text, inherit);
	font-family: inherit;
	max-width: 100%;
}

.mts-fm *,
.mts-fm *::before,
.mts-fm *::after {
	box-sizing: inherit;
}

@media (max-width: 1024px) {
	.mts-fm {
		--mts-fm-heading-size-eff: var(--mts-fm-heading-size-tablet, var(--mts-fm-heading-size, clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem)));
		--mts-fm-subheading-size-eff: var(--mts-fm-subheading-size-tablet, var(--mts-fm-subheading-size, clamp(1rem, 0.95rem + 0.3vw, 1.15rem)));
		--mts-fm-body-size-eff: var(--mts-fm-body-size-tablet, var(--mts-fm-body-size, 1rem));
		--mts-fm-amount-size-eff: var(--mts-fm-amount-size-tablet, var(--mts-fm-amount-size, clamp(1.75rem, 1.3rem + 2vw, 3rem)));
		--mts-fm-button-size-eff: var(--mts-fm-button-size-tablet, var(--mts-fm-button-size, 1rem));
	}
}

@media (max-width: 767px) {
	.mts-fm {
		--mts-fm-heading-size-eff: var(--mts-fm-heading-size-mobile, var(--mts-fm-heading-size-tablet, var(--mts-fm-heading-size, clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem))));
		--mts-fm-subheading-size-eff: var(--mts-fm-subheading-size-mobile, var(--mts-fm-subheading-size-tablet, var(--mts-fm-subheading-size, clamp(1rem, 0.95rem + 0.3vw, 1.15rem))));
		--mts-fm-body-size-eff: var(--mts-fm-body-size-mobile, var(--mts-fm-body-size-tablet, var(--mts-fm-body-size, 1rem)));
		--mts-fm-amount-size-eff: var(--mts-fm-amount-size-mobile, var(--mts-fm-amount-size-tablet, var(--mts-fm-amount-size, clamp(1.75rem, 1.3rem + 2vw, 3rem))));
		--mts-fm-button-size-eff: var(--mts-fm-button-size-mobile, var(--mts-fm-button-size-tablet, var(--mts-fm-button-size, 1rem)));
	}
}

/* ---------------------------------------------------------------------------
 * 2. Content
 * ------------------------------------------------------------------------ */

.mts-fm__header {
	margin: 0 0 var(--mts-fm-spacing, 1rem);
}

.mts-fm__heading {
	color: inherit;
	font-family: inherit;
	font-size: var(--mts-fm-heading-size-eff);
	font-weight: var(--mts-fm-heading-weight, inherit);
	line-height: 1.2;
	margin: 0;
}

.mts-fm__subheading {
	color: inherit;
	font-size: var(--mts-fm-subheading-size-eff);
	font-weight: var(--mts-fm-subheading-weight, inherit);
	line-height: 1.4;
	margin: 0.35em 0 0;
	opacity: 0.85;
}

.mts-fm__text {
	color: inherit;
	font-size: var(--mts-fm-body-size-eff);
	line-height: 1.6;
	margin: 0.75em 0 0;
}

.mts-fm__text > *:first-child {
	margin-top: 0;
}

.mts-fm__text > *:last-child {
	margin-bottom: 0;
}

.mts-fm__completed {
	border-inline-start: 3px solid var(--mts-fm-accent, currentColor);
	font-size: var(--mts-fm-body-size-eff);
	line-height: 1.5;
	margin: 0 0 var(--mts-fm-spacing, 1rem);
	opacity: 0.9;
	padding-inline-start: 0.75em;
}

.mts-fm__completed > *:first-child {
	margin-top: 0;
}

.mts-fm__completed > *:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * 3. Amounts
 * ------------------------------------------------------------------------ */

.mts-fm__amounts {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5em 1em;
	margin: 0 0 calc(var(--mts-fm-spacing, 1rem) * 0.5);
}

.mts-fm__amount {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35em;
	margin: 0;
}

.mts-fm__amount-value {
	color: var(--mts-fm-accent, inherit);
	font-size: var(--mts-fm-amount-size-eff);
	font-weight: var(--mts-fm-amount-weight, 700);
	line-height: 1.1;
}

.mts-fm__amount-label {
	font-size: var(--mts-fm-body-size-eff);
	letter-spacing: var(--mts-fm-label-spacing, normal);
	opacity: 0.75;
	text-transform: var(--mts-fm-label-transform, none);
}

.mts-fm__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35em 1em;
	font-size: var(--mts-fm-body-size-eff);
	margin: 0;
	opacity: 0.8;
}

.mts-fm__goal-label {
	letter-spacing: var(--mts-fm-label-spacing, normal);
	opacity: 0.8;
	text-transform: var(--mts-fm-label-transform, none);
}

.mts-fm__goal-label::after {
	content: " ";
}

.mts-fm__goal-value,
.mts-fm__percentage {
	font-weight: 600;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * 4. Progress
 * ------------------------------------------------------------------------ */

.mts-fm__progress {
	background: var(--mts-fm-track, rgba(0, 0, 0, 0.1));

	/*
	 * Bar radius resolves independently of the general radius so a preset can make the
	 * bar a pill without also making the card surface pill-shaped (D7).
	 */
	border-radius: var(--mts-fm-progress-radius, var(--mts-fm-radius, 8px));

	height: var(--mts-fm-progress-height, 12px);
	margin: 0 0 var(--mts-fm-spacing, 1rem);
	overflow: hidden;
	position: relative;
	width: 100%;
}

.mts-fm__progress-fill {
	background: var(--mts-fm-accent, currentColor);
	border-radius: inherit;
	height: 100%;
	width: var(--mts-fm-fill, 0%);
}

/*
 * The 1% floor guarantees any nonzero amount reports at least 1%, so no minimum-width
 * fudge is needed here — the sliver is a real value carried through to aria-valuenow.
 */

@media (prefers-reduced-motion: no-preference) {
	.mts-fm__progress-fill {
		animation: mts-fm-fill 900ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
	}

	@keyframes mts-fm-fill {
		from {
			width: 0;
		}

		to {
			width: var(--mts-fm-fill, 0%);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.mts-fm__progress-fill {
		animation: none;
		width: var(--mts-fm-fill, 0%);
	}
}

/* Vertical bar (D11).
 *
 * A modern bar, deliberately NOT a thermometer: uniform thickness, no bulb, no
 * gradations, no taper. progress-height stays the THICKNESS in every layout; the long
 * axis is progress-length, which is why it needed its own property. */
.mts-fm__progress--vertical {
	display: flex;
	align-items: flex-end;
	height: var(--mts-fm-progress-length, 240px);
	margin: 0;
	width: var(--mts-fm-progress-height, 12px);
	flex: 0 0 auto;
}

.mts-fm__progress--vertical .mts-fm__progress-fill {
	align-self: flex-end;
	height: var(--mts-fm-fill, 0%);
	width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.mts-fm__progress--vertical .mts-fm__progress-fill {
		animation: mts-fm-fill-vertical 900ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
	}

	@keyframes mts-fm-fill-vertical {
		from {
			height: 0;
		}

		to {
			height: var(--mts-fm-fill, 0%);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.mts-fm__progress--vertical .mts-fm__progress-fill {
		animation: none;
		height: var(--mts-fm-fill, 0%);
	}
}

/* ---------------------------------------------------------------------------
 * 5. Button
 *
 * Left almost entirely to the theme. The plugin sets colour only when a value has
 * been explicitly configured; otherwise wp-element-button carries the site's own
 * button treatment (spec §29, §30).
 * ------------------------------------------------------------------------ */

.mts-fm__button-wrap {
	margin: 0;
}

.mts-fm__button {
	display: inline-block;
	font-size: var(--mts-fm-button-size-eff);
	text-decoration: none;
}

/*
 * Only take over the button when a background was explicitly configured. Absent that,
 * wp-element-button alone carries the theme's own treatment, which is the whole point
 * of §29 — the button should look right with zero configuration.
 */
.mts-fm[style*="--mts-fm-button-bg"] .mts-fm__button {
	background-color: var(--mts-fm-button-bg);
	border-radius: var(--mts-fm-button-radius, var(--mts-fm-radius, 6px));
	color: var(--mts-fm-button-text, #fff);
	padding: 0.65em 1.4em;
}

.mts-fm[style*="--mts-fm-button-radius"] .mts-fm__button {
	border-radius: var(--mts-fm-button-radius);
}

/* ---------------------------------------------------------------------------
 * 6. Layouts
 * ------------------------------------------------------------------------ */

/*
 * Campaign Card (D6).
 *
 * The surface is LAYOUT, not decoration. Previously its background and padding were
 * preset-owned properties, which meant Card rendered as an invisible div under the
 * default preset — byte-for-byte identical to Horizontal apart from one wrapper. That is
 * exactly the "minor variation masquerading as a separate layout" §31 warns against.
 *
 * So Card draws its own bounded surface regardless of preset. Presets then modify it
 * (border width, tint, padding) rather than being what creates it.
 *
 * The border derives from currentColor rather than a fixed grey, so it adapts to light
 * and dark themes automatically and still honours "inherit first" (§38).
 */
.mts-fm--card .mts-fm__surface {
	background: var(--mts-fm-surface-bg, transparent);
	border-radius: var(--mts-fm-radius, 12px);
	border-style: solid;
	border-width: var(--mts-fm-surface-border-width, 1px);

	/* Fallback for browsers without color-mix(); overridden just below. */
	border-color: var(--mts-fm-surface-border, rgba(128, 128, 128, 0.28));

	padding: var(--mts-fm-surface-padding, 1.5rem);
}

@supports (border-color: color-mix(in srgb, currentColor 18%, transparent)) {
	.mts-fm--card .mts-fm__surface {
		border-color: var(--mts-fm-surface-border, color-mix(in srgb, currentColor 18%, transparent));
	}
}

/* A card is a self-contained unit, so its CTA spans the surface. */
.mts-fm--card .mts-fm__button {
	display: block;
	text-align: center;
	width: 100%;
}

/* Nothing should hang below the last element inside the surface. */
.mts-fm--card .mts-fm__surface > *:last-child {
	margin-bottom: 0;
}

.mts-fm--card .mts-fm__progress:last-child {
	margin-bottom: 0;
}

/* Vertical — bar beside the figures, both bottom-aligned. */
.mts-fm__column {
	display: flex;
	align-items: flex-end;
	gap: var(--mts-fm-spacing, 1rem);
}

.mts-fm__column-figures {
	flex: 1 1 auto;
	min-width: 0;
}

.mts-fm--vertical .mts-fm__amounts {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25em;
}

.mts-fm__column-figures > *:last-child {
	margin-bottom: 0;
}

/* Number focus */
.mts-fm--number-focus .mts-fm__focus {
	margin: 0 0 calc(var(--mts-fm-spacing, 1rem) * 0.5);
}

.mts-fm--number-focus .mts-fm__amount {
	flex-direction: column;
	gap: 0.1em;
}

.mts-fm--number-focus .mts-fm__amount-value {
	font-size: calc(var(--mts-fm-amount-size-eff) * 1.25);
}

.mts-fm--number-focus .mts-fm__header {
	margin-bottom: calc(var(--mts-fm-spacing, 1rem) * 0.75);
}

/* Split — container queries where supported, a media query as the fallback. */
.mts-fm--split {
	container-type: inline-size;
}

.mts-fm__split {
	display: grid;
	gap: var(--mts-fm-spacing, 1rem);
	grid-template-columns: 1fr;
}

@container (min-width: 640px) {
	.mts-fm__split {
		grid-template-columns: 1.1fr 1fr;
		align-items: center;
		gap: calc(var(--mts-fm-spacing, 1rem) * 2);
	}
}

@supports not (container-type: inline-size) {
	@media (min-width: 768px) {
		.mts-fm--split .mts-fm__split {
			grid-template-columns: 1.1fr 1fr;
			align-items: center;
			gap: calc(var(--mts-fm-spacing, 1rem) * 2);
		}
	}
}

.mts-fm__split-content > *:last-child,
.mts-fm__split-figures > *:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * 7. Style presets
 *
 * Minimal presets set custom properties from PHP (see presets/*.php). Designed
 * presets declare theirs in their own stylesheet (presets/css/*.css).
 * ------------------------------------------------------------------------ */

/*
 * Designed-preset chassis (D10).
 *
 * A design file declares only variables; this paints from them. Without a shared
 * chassis, a design's background and padding would apply to the Card layout alone,
 * since Card owns the only surface element — a dark design on Horizontal would set
 * light text with no dark background behind it.
 *
 * Card paints its inner surface instead of the wrapper, so padding is never doubled.
 */
.mts-fm--designed:not(.mts-fm--card) {
	background: var(--mts-fm-surface-bg, transparent);
	border-radius: var(--mts-fm-radius, 12px);
	border: var(--mts-fm-surface-border-width, 0) solid var(--mts-fm-surface-border, transparent);
	box-shadow: var(--mts-fm-surface-shadow, none);
	color: var(--mts-fm-text, inherit);
	padding: var(--mts-fm-surface-padding, 0);
}

.mts-fm--designed.mts-fm--card .mts-fm__surface {
	box-shadow: var(--mts-fm-surface-shadow, none);
	color: var(--mts-fm-text, inherit);
}

.mts-fm--designed:not(.mts-fm--card) > *:last-child,
.mts-fm--designed:not(.mts-fm--card) .mts-fm__progress:last-child {
	margin-bottom: 0;
}

/* Designs supply their own button colours, so the wrapper-attribute gate in section 5
 * (which only fires for explicitly configured colours) does not apply to them. */
.mts-fm--designed .mts-fm__button {
	background-color: var(--mts-fm-button-bg, transparent);
	border-radius: var(--mts-fm-button-radius, var(--mts-fm-radius, 6px));
	color: var(--mts-fm-button-text, inherit);
	padding: 0.7em 1.5em;
}

/*
 * Bold pairs its uppercase labels with letter-spacing. Tying this to the preset class
 * rather than adding another schema property keeps the settings surface small — the
 * spacing is meaningless without the uppercase transform that comes with it.
 */
.mts-fm--style-bold {
	--mts-fm-label-spacing: 0.08em;
}

.mts-fm--style-bold .mts-fm__amount-value {
	letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------------
 * 8. State
 * ------------------------------------------------------------------------ */

.mts-fm--over-goal .mts-fm__percentage {
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * 9. Narrow containers — sidebars and builder columns
 * ------------------------------------------------------------------------ */

@media (max-width: 480px) {
	.mts-fm__amounts {
		flex-direction: column;
		align-items: flex-start;
	}
}