/*
 * Defaults match the Raw Pet Food Ontario palette. The admin screen overrides these
 * variables, so edit colors, fonts, sizes and alignment there instead of here.
 */
.cdc {
	--cdc-bg: #90171e;
	--cdc-text: #ffffff;
	--cdc-numbers: #ffffff;
	--cdc-accent: #66cc00;
	--cdc-border: #90171e;
	--cdc-btn-text: #1a1a1a;
	--cdc-radius: 12px;
	--cdc-gap: 16px;
	--cdc-max: none;
	--cdc-text-align: center;
	--cdc-v-align: flex-start;
	--cdc-headline: #ffffff;
	--cdc-headline-transform: uppercase;
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: var(--cdc-max);
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: var(--cdc-space-below, -20px);
	padding: var(--cdc-pad, 0);
	line-height: 1.3;
	font-family: var(--cdc-font, inherit);
}

.cdc--align-left {
	margin-left: 0;
}

.cdc--align-right {
	margin-right: 0;
}

.cdc *,
.cdc *::before,
.cdc *::after {
	box-sizing: border-box;
}

.cdc [hidden] {
	display: none !important;
}

/*
 * Page builder guard. Some builders shrink a widget to the width of its content when it
 * sits in a flex container, which pulls the banner to one side. Force the widget full width.
 */
.elementor-widget:has(> .elementor-widget-container > .cdc),
.elementor-widget-shortcode:has(.cdc),
.et_pb_code:has(.cdc),
.et_pb_module:has(> .et_pb_code_inner > .cdc) {
	width: 100% !important;
	max-width: 100% !important;
	flex-grow: 1;
	align-self: stretch;
}

/* Hidden for a moment while the WordPress server time loads, so a stale cached page never flashes. */
.cdc--syncing .cdc__headline,
.cdc--syncing .cdc__grid,
.cdc--syncing .cdc__message,
.cdc--syncing .cdc__actions,
.cdc-field.cdc--syncing {
	visibility: hidden;
}

.cdc .cdc__headline {
	margin: 0 0 16px;
	text-align: center;
	font-family: var(--cdc-headline-font, inherit);
	font-weight: var(--cdc-headline-weight, 700);
	font-size: var(--cdc-fs-headline, clamp(1rem, 2.2vw, 1.35rem));
	letter-spacing: var(--cdc-headline-ls, 0.02em);
	text-transform: var(--cdc-headline-transform);
	color: var(--cdc-headline);
}

/* Flex grid: three columns that fill the row and wrap. */
.cdc__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--cdc-gap);
	align-items: stretch;
	width: 100%;
}

.cdc .cdc__col {
	flex: 1 1 220px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: var(--cdc-v-align);
	align-items: center;
	gap: 6px;
	padding: var(--cdc-col-pad, 20px 20px 0 20px);
	text-align: var(--cdc-text-align);
	color: var(--cdc-text);
	background: var(--cdc-bg);
	border: 1px solid var(--cdc-border);
	border-radius: var(--cdc-radius);
}

.cdc .cdc__col--timer {
	flex: 1.6 1 320px;
}

/*
 * Equal columns. The grid is as wide as its content wants, and the 1fr tracks share that
 * width evenly, so all three columns match the widest one. The titles and dates are
 * allowed to wrap instead of widening a column, which leaves the countdown (its numbers
 * and their font size) as the thing that sets the width.
 */
.cdc--equal .cdc__grid {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	width: max-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.cdc--equal .cdc__col,
.cdc--equal .cdc__col--timer {
	flex: none;
}

.cdc--equal .cdc__label,
.cdc--equal .cdc__value,
.cdc--equal .cdc__note {
	width: 0;
	min-width: 100%;
}

.cdc--equal .cdc__timer {
	width: auto;
}

.cdc .cdc__label,
.cdc .cdc__value,
.cdc .cdc__note {
	margin: 0;
	text-align: var(--cdc-text-align);
}

.cdc:not(.cdc--equal) .cdc__label,
.cdc:not(.cdc--equal) .cdc__value,
.cdc:not(.cdc--equal) .cdc__note {
	width: 100%;
}

.cdc__label {
	font-size: var(--cdc-fs-label, 0.8rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
}

.cdc__value {
	font-size: var(--cdc-fs-value, clamp(1.1rem, 2vw, 1.5rem));
	font-weight: 700;
}

.cdc__note {
	font-size: var(--cdc-fs-note, 0.9rem);
	opacity: 0.85;
}

.cdc__timer {
	display: flex;
	justify-content: center;
	gap: 10px;
	width: 100%;
}

.cdc__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 60px;
}

.cdc__num {
	font-size: var(--cdc-fs-number, clamp(1.6rem, 4vw, 2.4rem));
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--cdc-numbers);
}

.cdc__unit-label {
	margin-top: 4px;
	font-size: var(--cdc-fs-unit, 0.7rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cdc-accent);
}

.cdc--closed .cdc__timer,
.cdc--empty .cdc__timer {
	opacity: 0.5;
}

.cdc .cdc__message {
	margin: 14px 0 0;
	text-align: center;
	font-weight: 600;
	font-size: var(--cdc-fs-message, inherit);
	color: var(--cdc-headline);
}

.cdc__actions {
	margin-top: 16px;
	text-align: center;
}

.cdc a.cdc__button,
.cdc a.cdc__button:visited {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 999px;
	background: var(--cdc-accent);
	color: var(--cdc-btn-text);
	font-size: var(--cdc-fs-button, inherit);
	font-weight: 700;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.cdc a.cdc__button:hover,
.cdc a.cdc__button:focus {
	color: var(--cdc-btn-text);
	opacity: 0.88;
}

.cdc-field {
	display: inline;
}

/* Mobile sizes. A mobile value from the admin wins, then the desktop value, then the built-in size. */
@media (max-width: 600px) {
	.cdc:not(.cdc--equal) .cdc__col,
	.cdc:not(.cdc--equal) .cdc__col--timer {
		flex-basis: 100%;
	}
	.cdc__unit {
		min-width: 52px;
	}
	.cdc .cdc__headline {
		font-size: var(--cdc-fs-headline-m, var(--cdc-fs-headline, clamp(1rem, 2.2vw, 1.35rem)));
	}
	.cdc__label {
		font-size: var(--cdc-fs-label-m, var(--cdc-fs-label, 0.8rem));
	}
	.cdc__value {
		font-size: var(--cdc-fs-value-m, var(--cdc-fs-value, clamp(1.1rem, 2vw, 1.5rem)));
	}
	.cdc__note {
		font-size: var(--cdc-fs-note-m, var(--cdc-fs-note, 0.9rem));
	}
	.cdc__num {
		font-size: var(--cdc-fs-number-m, var(--cdc-fs-number, clamp(1.6rem, 4vw, 2.4rem)));
	}
	.cdc__unit-label {
		font-size: var(--cdc-fs-unit-m, var(--cdc-fs-unit, 0.7rem));
	}
	.cdc .cdc__message {
		font-size: var(--cdc-fs-message-m, var(--cdc-fs-message, inherit));
	}
	.cdc a.cdc__button {
		font-size: var(--cdc-fs-button-m, var(--cdc-fs-button, inherit));
	}
}