/**
 * Home — Travel progress (static). Scoped to .ebc-travel-progress only.
 *
 * @package EveryCountry
 */

/* Light band: very subtle blue-tinted surface (ties to accent, not flat gray) */
.ebc-travel-progress {
	background: linear-gradient(180deg, var(--ebc-surface-tint-a, #f2f6fc) 0%, var(--ebc-surface-tint-b, #e8eef6) 100%) !important;
	color: var(--wp--preset--color--contrast, #1a1a1a) !important;
	border-top: 1px solid color-mix(in srgb, var(--ebc-accent, #3b82f6) 10%, rgba(0, 0, 0, 0.06)) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.7),
		0 1px 2px rgba(59, 130, 246, 0.04),
		0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

@supports not (background: color-mix(in srgb, white, black)) {
	.ebc-travel-progress {
		border-top: 1px solid rgba(59, 130, 246, 0.12) !important;
	}
}

.ebc-travel-progress p.has-text-color,
.ebc-travel-progress p.has-base-color {
	color: inherit !important;
}

/* Primary: main count */
.ebc-travel-progress__value {
	margin: 0 !important;
	font-size: clamp(2.25rem, 5.2vw, 3.1rem) !important;
	font-weight: 800 !important;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em !important;
	line-height: 1.04 !important;
}

/* Smaller than label; under the number */
.ebc-travel-progress__pct {
	margin: 0.12rem 0 0 !important;
	font-size: 0.75rem !important;
	letter-spacing: 0.02em !important;
}

/* Tight stack with label + bar */
.ebc-travel-progress__label {
	margin: 0.18rem auto 0 !important;
	line-height: 1.3 !important;
}

.ebc-travel-progress__bar-wrap {
	margin-top: 0.55rem;
	width: 100%;
}

/* Thicker track + brighter fill: reads clearly at low % */
.ebc-travel-progress__bar {
	width: 100%;
	height: 14px;
	border-radius: 9px;
	overflow: hidden;
	color: inherit;
	background: #e1e5ec;
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.05),
		inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.ebc-travel-progress__fill {
	width: 0%;
	min-width: 5px; /* Visible sliver at 0% */
	height: 100%;
	border-radius: 6px;
	background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 45%, #2563eb 100%);
	box-shadow:
		0 0 12px rgba(59, 130, 246, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

@media (max-width: 600px) {
	.ebc-travel-progress.alignfull {
		padding-top: var(--wp--preset--spacing--50, 1.5rem) !important;
		padding-bottom: var(--wp--preset--spacing--50, 1.5rem) !important;
		padding-left: var(--wp--preset--spacing--40, 1.25rem) !important;
		padding-right: var(--wp--preset--spacing--40, 1.25rem) !important;
	}
}