/**
 * THC meter gauge styles.
 *
 * Ported from the Perfmatters code snippet css/1-thc-meter.css (ClickUp 86eyfma06)
 * so the gauge keeps its layout now that the plugin is gone. Layout rules are the
 * snippet's, unchanged. The level badge is the exception: see custom/thc-meter.php,
 * where the inline badge colour is a darker shade of the arc colour because white on
 * the arc colours measured 2.44:1 to 4.25:1, under the 4.5:1 WCAG 2.1 AA minimum.
 *
 * Contrast ratios below were measured on the reference build
 * (mettah-opti.blz.au/product/full-spectrum-cbd-tincture/) from computed styles
 * against the real rendered backgrounds, 2026-08-12.
 *
 * editor-friendly-ok: the gauge is PHP-rendered inside a WooCommerce product tab,
 * not block content, and its greys are component colours with no palette slug.
 */

/* Container — 680×384 base */
.thc-meter {
	--inner-bg: #f5f5f3;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--inner-bg);
	border-radius: 16px;
	width: 100%;
	max-width: 680px;
	aspect-ratio: 680 / 384;
	box-sizing: border-box;
	padding: 24px 32px;
	margin: 0 auto;
}

/* Title */
.thc-meter__title {
	font-size: 22px;
	font-weight: 700;
	color: #333; /* 11.57:1 on the #f5f5f3 gauge card */
	margin: 0 0 4px;
	text-align: center;
}

/* Gauge wrapper — positions SVG + labels + center content */
.thc-meter__gauge-wrap {
	position: relative;
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
}

/* SVG element */
.thc-meter__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* Fill animation */
.thc-meter__fill {
	animation: thc-svg-fill 1s ease-out forwards;
	stroke-dasharray: 0, 753.98;
}

@keyframes thc-svg-fill {
	to {
		stroke-dasharray: var(--thc-target-dash), 753.98;
	}
}

/* Labels around the arc */
.thc-meter__label {
	position: absolute;
	font-size: 16px;
	font-weight: 600;
	color: #555; /* 6.83:1 on the #f5f5f3 gauge card */
	white-space: nowrap;
}

.thc-meter__label--zero {
	bottom: 2px;
	left: 0;
	transform: translateX(-110%);
}

.thc-meter__label--low {
	top: 0;
	left: 22%;
}

.thc-meter__label--med {
	top: 0;
	right: 22%;
}

.thc-meter__label--high {
	bottom: 2px;
	right: 0;
	transform: translateX(110%);
}

/* Center content — value + badge overlaid on gauge */
.thc-meter__center {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.thc-meter__value {
	font-size: 36px;
	font-weight: 700;
	color: #333; /* 11.57:1 on the #f5f5f3 gauge card */
	line-height: 1;
}

.thc-meter__badge {
	display: inline-block;
	padding: 8px 28px;
	border-radius: 24px;
	font-size: 18px;
	font-weight: 600;
	color: #fff;
	line-height: 1.2;
}

/* Zero level fallback badge (the PHP sets this inline; kept in step with it). */
.thc-meter[data-level="zero"] .thc-meter__badge {
	background: #767676; /* 4.54:1 with the white badge label */
}

/* ── Responsive ── */

/* Tablet */
@media (max-width: 768px) {
	.thc-meter {
		padding: 20px 24px;
	}

	.thc-meter__title {
		font-size: 18px;
	}

	.thc-meter__gauge-wrap {
		max-width: 300px;
	}

	.thc-meter__label {
		font-size: 14px;
	}

	.thc-meter__value {
		font-size: 28px;
	}

	.thc-meter__badge {
		font-size: 15px;
		padding: 6px 22px;
	}
}

/* Mobile */
@media (max-width: 480px) {
	.thc-meter {
		padding: 16px 20px;
		border-radius: 12px;
	}

	.thc-meter__title {
		font-size: 16px;
		margin-bottom: 2px;
	}

	.thc-meter__gauge-wrap {
		max-width: 240px;
	}

	.thc-meter__label {
		font-size: 12px;
	}

	.thc-meter__value {
		font-size: 22px;
	}

	.thc-meter__badge {
		font-size: 13px;
		padding: 5px 18px;
		border-radius: 20px;
	}
}