/* ==========================================================================
   Midwest Donation Thermometer
   All selectors are namespaced .mwdt* so nothing leaks into Beaver Builder.

   Sizing note: the custom properties at the top of .mwdt drive the whole
   component. Nudge --mwdt-tube-h / --mwdt-tube-w / --mwdt-bulb together to
   scale the gauge, and --mwdt-type-scale to scale all the text at once.
   ========================================================================== */

.mwdt {
	--mwdt-accent: #e45737;
	--mwdt-track: #ececec;
	--mwdt-frame: #9a9a9a;
	--mwdt-text: #2b2b2b;
	--mwdt-muted: #6b6b6b;

	--mwdt-tube-h: 440px;
	--mwdt-tube-w: 66px;
	--mwdt-bulb: 114px;
	--mwdt-border: 9px;

	/* Multiplier applied to every font size in the component. */
	--mwdt-type-scale: 1.1;

	/* --mwdt-pct is set inline by the shortcode. */
	--mwdt-pct: 0%;

	box-sizing: border-box;
	color: var(--mwdt-text);
	padding: 4rem 1.5rem;
}

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

.mwdt__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(2rem, 6vw, 5.5rem);
	max-width: 1240px;
	margin: 0 auto;
}

.mwdt--stacked .mwdt__inner {
	flex-direction: column;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Charity block
   -------------------------------------------------------------------------- */

.mwdt__intro {
	max-width: 34rem;
}

.mwdt__logo {
	margin-bottom: 1.5rem;
}

.mwdt__logo-img {
	display: block;
	max-width: 300px;
	height: auto;
}

.mwdt--stacked .mwdt__logo-img {
	margin: 0 auto;
}

.mwdt__eyebrow {
	margin: 0 0 0.5rem;
	font-size: calc(1.125rem * var(--mwdt-type-scale));
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mwdt-muted);
}

.mwdt__title {
	margin: 0 0 1.25rem;
	font-size: calc(clamp(2rem, 4vw, 3rem) * var(--mwdt-type-scale));
	line-height: 1.12;
}

.mwdt__totals {
	margin: 0;
	line-height: 1.4;
}

.mwdt__totals-raised {
	display: block;
	font-size: calc(clamp(3rem, 7vw, 4.5rem) * var(--mwdt-type-scale));
	font-weight: 700;
	color: var(--mwdt-accent);
	line-height: 1;
}

.mwdt__totals-goal {
	display: block;
	margin-top: 0.5rem;
	font-size: calc(1.375rem * var(--mwdt-type-scale));
	color: var(--mwdt-muted);
}

/* --------------------------------------------------------------------------
   Learn more button
   -------------------------------------------------------------------------- */

.mwdt__actions {
	margin: 2rem 0 0;
}

.mwdt__button,
.mwdt__button:visited {
	display: inline-block;
	padding: 1rem 2.25rem;
	background: var(--mwdt-accent);
	color: #fff;
	font-size: calc(1.1875rem * var(--mwdt-type-scale));
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	border: 2px solid var(--mwdt-accent);
	border-radius: 4px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.mwdt__button:hover,
.mwdt__button:focus {
	background: transparent;
	color: var(--mwdt-accent);
	text-decoration: none;
}

.mwdt__button:focus-visible {
	outline: 3px solid var(--mwdt-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.mwdt__button {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Gauge
   -------------------------------------------------------------------------- */

.mwdt__gauge {
	flex: 0 0 auto;
	text-align: center;
}

.mwdt__goal-label {
	margin: 0 0 1rem;
	font-size: calc(1.375rem * var(--mwdt-type-scale));
	font-weight: 600;
	color: var(--mwdt-muted);
}

.mwdt__body {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0.75rem;
}

/* Scale and marker columns are exactly as tall as the tube, so anything
   positioned by percentage lines up with the fill. */
.mwdt__scale,
.mwdt__markers {
	position: relative;
	height: var(--mwdt-tube-h);
	flex: 0 0 auto;
}

.mwdt__scale {
	width: 4.75rem;
}

.mwdt__markers {
	width: 7rem;
}

.mwdt__tick {
	position: absolute;
	right: 0;
	transform: translateY(50%);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.mwdt__tick-label {
	font-size: calc(1.0625rem * var(--mwdt-type-scale));
	font-weight: 700;
	color: var(--mwdt-text);
	line-height: 1;
}

.mwdt__tick-line {
	display: block;
	width: 1rem;
	height: 3px;
	background: var(--mwdt-frame);
}

.mwdt__thermo {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 auto;
}

.mwdt__tube {
	position: relative;
	width: var(--mwdt-tube-w);
	height: var(--mwdt-tube-h);
	background: var(--mwdt-track);
	border: var(--mwdt-border) solid var(--mwdt-frame);
	border-radius: 999px;
	overflow: hidden;
}

.mwdt__fill {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--mwdt-pct);
	background: var(--mwdt-accent);
	border-radius: 999px 999px 0 0;
}

.mwdt__bulb {
	width: var(--mwdt-bulb);
	height: var(--mwdt-bulb);
	margin-top: calc(var(--mwdt-bulb) / -3);
	background: var(--mwdt-accent);
	border: var(--mwdt-border) solid var(--mwdt-frame);
	border-radius: 50%;
	position: relative;
	z-index: 1;
}

.mwdt__marker {
	position: absolute;
	left: 0;
	bottom: var(--mwdt-pct);
	transform: translateY(50%);
	font-size: calc(1.625rem * var(--mwdt-type-scale));
	font-weight: 700;
	color: var(--mwdt-accent);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Motion: JS adds .mwdt--animate when the gauge scrolls into view.
   Without JS the fill renders at its final height immediately.
   -------------------------------------------------------------------------- */

@keyframes mwdt-rise {
	from { height: 0; }
	to   { height: var(--mwdt-pct); }
}

@keyframes mwdt-marker-rise {
	from { bottom: 0; opacity: 0; }
	to   { bottom: var(--mwdt-pct); opacity: 1; }
}

.mwdt--animate .mwdt__fill {
	animation: mwdt-rise 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.mwdt--animate .mwdt__marker {
	animation: mwdt-marker-rise 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
	.mwdt--animate .mwdt__fill,
	.mwdt--animate .mwdt__marker {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.mwdt {
		--mwdt-tube-h: 375px;
		--mwdt-tube-w: 60px;
		--mwdt-bulb: 102px;
	}

	.mwdt__inner {
		flex-direction: column;
		text-align: center;
	}

	.mwdt__logo-img {
		margin: 0 auto;
	}
}

@media (max-width: 600px) {
	.mwdt {
		--mwdt-tube-h: 320px;
		--mwdt-tube-w: 50px;
		--mwdt-bulb: 85px;
		--mwdt-border: 7px;
		--mwdt-type-scale: 0.92;
		padding: 3rem 1rem;
	}

	.mwdt__scale {
		width: 4rem;
	}

	.mwdt__markers {
		width: 5.5rem;
	}
}