/**
 * acf/countdown-timer
 *
 * Everything visual is driven by custom properties, so a variation or a parent
 * section can retheme the block without overriding selectors:
 *
 *   .wp-block-acf-countdown-timer { --edc-digit-size: 3rem; --edc-gap: 1.5rem; }
 */

.edaptive-countdown {
	--edc-digit-size: clamp(2rem, 7vw, 3.5rem);
	--edc-digit-weight: 800;
	--edc-digit-color: currentColor;
	--edc-label-size: 0.8125em;
	--edc-label-color: currentColor;
	--edc-label-opacity: 0.7;
	--edc-sep-color: currentColor;
	--edc-sep-opacity: 0.5;
	--edc-gap: clamp(0.5rem, 2vw, .75rem);
	--edc-unit-width: 3.25ch;
	margin-bottom: 1.5rem;

	color: var(--wp--preset--color--contrast, inherit);
}

.edaptive-countdown.small {
	--edc-digit-size: 2rem;
}

.edaptive-countdown__units {
	display: flex;
	align-items: flex-start;
	gap: var(--edc-gap);
	flex-wrap: nowrap;
}

.edaptive-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: var(--edc-unit-width);
}

.edaptive-countdown__value {
	display: block;
	font-family: inherit;
	font-size: var(--edc-digit-size);
	font-weight: var(--edc-digit-weight);
	line-height: 1;
	color: var(--edc-digit-color);
	/* Tabular figures stop the digits from jittering as they change. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	letter-spacing: -0.02em;
}

.edaptive-countdown__label {
	display: block;
	margin-top: 0.4em;
	font-size: var(--edc-label-size);
	font-weight: 400;
	line-height: 1.2;
	color: var(--edc-label-color);
	opacity: var(--edc-label-opacity);
}

.edaptive-countdown__sep {
	font-size: calc(var(--edc-digit-size) * 0.6);
	font-weight: var(--edc-digit-weight);
	line-height: 1;
	/* Optically centre the colon against the digits, not the labels. */
	margin-top: calc(var(--edc-digit-size) * 0.2);
	color: var(--edc-sep-color);
	opacity: var(--edc-sep-opacity);
}

.edaptive-countdown__local {
	margin: 0.75em 0 0;
	font-size: var(--edc-label-size);
	opacity: var(--edc-label-opacity);
}

.edaptive-countdown__editor-note {
	margin: 0.75em 0 0;
	font-size: 0.75rem;
	font-style: italic;
	opacity: 0.6;
}

.edaptive-countdown[hidden] {
	display: none;
}

/* Theme-agnostic fallback for the sr-only summary. */
.edaptive-countdown .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 600px) {
	.edaptive-countdown {
		--edc-label-size: 0.6875rem;
	}
}