/* ==========================================================================
   Nedclan Countdown — [nedclan_countdown]
   All values come from CSS custom properties written inline by PHP
   (unitless numbers, turned into px here with calc(var * 1px)).

   One-row guarantee: each unit's flex-basis is the configured box size, and
   it is allowed to shrink. Everything inside a unit (number, label, padding,
   border, radius) is capped by container-query units relative to the unit's
   real width, so when the screen is too narrow the whole countdown scales
   down proportionally instead of wrapping onto a second line.
   ========================================================================== */
@font-face { font-family: 'Nedclan CD Inter'; src: url('../../assets/fonts/Inter-Variable.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Nedclan CD Playfair'; src: url('../../assets/fonts/PlayfairDisplay-Variable.ttf') format('truetype'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Nedclan CD Orbitron'; src: url('../../assets/fonts/Orbitron-Variable.ttf') format('truetype'); font-weight: 400 900; font-display: swap; }

.nedclan-countdown {
	--box: var(--ncd-box-d, 130);
	--pad: var(--ncd-pad-d, 10);
	--gap: var(--ncd-gap-d, 30);
	--num: var(--ncd-num-d, 64);
	--label: var(--ncd-label-d, 24);
	--lmt: var(--ncd-lmt-d, 10);
	--end: var(--ncd-end-d, 32);
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: calc(var(--ncd-mt, 0) * 1px) 0 calc(var(--ncd-mb, 0) * 1px);
	padding: 0;
}
/* Invisible "sizer": tells a content-sized parent (Elementor flex rows, centred
   columns, inline wrappers…) how wide the countdown would like to be, while still
   being allowed to shrink on small screens (replaced elements with a % max-width
   don't force a minimum width). Without it the countdown measures 0px and vanishes. */
.nedclan-countdown > .ncd-sizer {
	display: block; height: 0; margin: 0; padding: 0; border: 0; visibility: hidden;
	width: calc((var(--box) * var(--ncd-n, 4) + var(--gap) * (var(--ncd-n, 4) - 1)) * 1px);
	max-width: 100%;
}
.nedclan-countdown *, .nedclan-countdown *::before, .nedclan-countdown *::after { box-sizing: border-box; }
.nedclan-countdown [hidden] { display: none !important; }

/* Tablet */
@media (max-width: 1024px) {
	.nedclan-countdown {
		--box: var(--ncd-box-t, 110); --pad: var(--ncd-pad-t, 8); --gap: var(--ncd-gap-t, 22);
		--num: var(--ncd-num-t, 54); --label: var(--ncd-label-t, 20); --lmt: var(--ncd-lmt-t, 8); --end: var(--ncd-end-t, 26);
	}
}
/* Mobile */
@media (max-width: 767px) {
	.nedclan-countdown {
		--box: var(--ncd-box-m, 76); --pad: var(--ncd-pad-m, 4); --gap: var(--ncd-gap-m, 10);
		--num: var(--ncd-num-m, 36); --label: var(--ncd-label-m, 14); --lmt: var(--ncd-lmt-m, 6); --end: var(--ncd-end-m, 20);
	}
}
/* Forced device sizes — used by the admin preview's Desktop / Tablet / Mobile switch. */
.nedclan-countdown.ncd-force-desktop {
	--box: var(--ncd-box-d); --pad: var(--ncd-pad-d); --gap: var(--ncd-gap-d);
	--num: var(--ncd-num-d); --label: var(--ncd-label-d); --lmt: var(--ncd-lmt-d); --end: var(--ncd-end-d);
}
.nedclan-countdown.ncd-force-tablet {
	--box: var(--ncd-box-t); --pad: var(--ncd-pad-t); --gap: var(--ncd-gap-t);
	--num: var(--ncd-num-t); --label: var(--ncd-label-t); --lmt: var(--ncd-lmt-t); --end: var(--ncd-end-t);
}
.nedclan-countdown.ncd-force-mobile {
	--box: var(--ncd-box-m); --pad: var(--ncd-pad-m); --gap: var(--ncd-gap-m);
	--num: var(--ncd-num-m); --label: var(--ncd-label-m); --lmt: var(--ncd-lmt-m); --end: var(--ncd-end-m);
}

/* Shape → which colour set the box uses */
.nedclan-countdown.ncd-shape-square {
	--ncd-bg: var(--ncd-sq-bg, #B54B22); --ncd-bw: var(--ncd-sq-bw, 0); --ncd-bc: var(--ncd-sq-bc, #B54B22);
	--ncd-radius: var(--ncd-sq-radius, 10); --ncd-num-color: var(--ncd-sq-num, #fff);
}
.nedclan-countdown.ncd-shape-circle {
	--ncd-bg: var(--ncd-ci-bg, transparent); --ncd-bw: var(--ncd-ci-bw, 5); --ncd-bc: var(--ncd-ci-bc, #B54B22);
	--ncd-num-color: var(--ncd-ci-num, #B54B22);
}

/* The row */
.nedclan-countdown .ncd-units {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: center;
	gap: calc(var(--gap) * 1px);
	/* Shrinks in step with the boxes: gap's share of the full row width. */
	gap: min(calc(var(--gap) * 1px), calc(var(--gap) / (var(--box) * var(--ncd-n, 4) + var(--gap) * (var(--ncd-n, 4) - 1)) * 100%));
	margin: 0;
	padding: 0;
}
.nedclan-countdown.ncd-align-left .ncd-units { justify-content: flex-start; }
.nedclan-countdown.ncd-align-right .ncd-units { justify-content: flex-end; }

.nedclan-countdown .ncd-unit {
	flex: 0 1 calc(var(--box) * 1px);
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	container-type: inline-size;
}

.nedclan-countdown .ncd-box {
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--ncd-bg);
	border-style: solid;
	border-color: var(--ncd-bc);
	border-width: calc(var(--ncd-bw) * 1px);
	border-width: min(calc(var(--ncd-bw) * 1px), calc(var(--ncd-bw) / var(--box) * 100cqi));
	border-radius: calc(var(--ncd-radius, 0) * 1px);
	border-radius: min(calc(var(--ncd-radius, 0) * 1px), calc(var(--ncd-radius, 0) / var(--box) * 100cqi));
	padding: calc(var(--pad) * 1px);
	padding: min(calc(var(--pad) * 1px), calc(var(--pad) / var(--box) * 100cqi));
}
.nedclan-countdown.ncd-shape-circle .ncd-box { border-radius: 50%; }

.nedclan-countdown .ncd-num {
	display: block;
	font-family: var(--ncd-num-font, inherit);
	font-weight: var(--ncd-num-weight, 600);
	color: var(--ncd-num-color);
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-size: calc(var(--num) * 1px);
	font-size: min(calc(var(--num) * 1px), calc(var(--num) / var(--box) * 100cqi));
}
/* 3+ digit values (e.g. 120 days) are shrunk so they still fit inside the box. */
.nedclan-countdown .ncd-num.ncd-long {
	font-size: calc(var(--num) * 0.72px);
	font-size: min(calc(var(--num) * 0.72px), calc(var(--num) * 0.72 / var(--box) * 100cqi));
}

.nedclan-countdown .ncd-label {
	display: block;
	width: 100%;
	text-align: center;
	white-space: nowrap;
	font-family: var(--ncd-label-font, inherit);
	font-weight: var(--ncd-label-weight, 400);
	color: var(--ncd-label-color, #707070);
	line-height: 1.2;
	margin-top: calc(var(--lmt) * 1px);
	margin-top: min(calc(var(--lmt) * 1px), calc(var(--lmt) / var(--box) * 100cqi));
	font-size: calc(var(--label) * 1px);
	font-size: min(calc(var(--label) * 1px), calc(var(--label) / var(--box) * 100cqi));
}
.nedclan-countdown.ncd-no-labels .ncd-label { display: none; }

/* End message */
.nedclan-countdown .ncd-end-message {
	display: none;
	font-family: var(--ncd-end-font, inherit);
	font-weight: var(--ncd-end-weight, 600);
	color: var(--ncd-end-color, #B54B22);
	font-size: calc(var(--end) * 1px);
	line-height: 1.3;
	text-align: center;
	margin: calc(var(--ncd-end-mt, 0) * 1px) 0 calc(var(--ncd-end-mb, 0) * 1px);
}
.nedclan-countdown.ncd-align-left .ncd-end-message { text-align: left; }
.nedclan-countdown.ncd-align-right .ncd-end-message { text-align: right; }
.nedclan-countdown.is-ended .ncd-units { display: none; }
.nedclan-countdown.is-ended .ncd-end-message { display: block; }

.nedclan-countdown-notice { padding: 10px 14px; border: 1px dashed #C8862C; color: #8A5A16; background: #FFF8EE; font-size: 14px; }
