/**
 * CNA Event Nail Countdown Planner — tool-specific styles.
 *
 * Layers on top of cna-core.css (or cna-core-fallback.css). Uses core's
 * CSS custom properties for visual consistency instead of hardcoded
 * colors: --cna-primary, --cna-secondary, --cna-accent, --cna-bg,
 * --cna-text, --cna-muted, --cna-line, --cna-radius, --cna-shadow.
 *
 * @package CNA_ECP
 */

.cna-ecp__banner {
	border-left: 4px solid var(--cna-accent, #ffd166);
	background: color-mix(in srgb, var(--cna-accent, #ffd166) 12%, var(--cna-bg, #fff7fb));
	padding: 0.9em 1em;
	border-radius: var(--cna-radius, 14px);
	margin: 0.75em 0 1em;
}

.cna-ecp__banner strong {
	display: block;
	margin-bottom: 0.25em;
	color: var(--cna-text, #2b2130);
}

.cna-ecp__banner p {
	margin: 0.25em 0;
}

.cna-ecp__recommend {
	font-weight: 600;
}

.cna-ecp__timeline {
	list-style: none;
	margin: 0.5em 0 1em;
	padding: 0;
	border-left: 2px solid var(--cna-line, rgba(43, 33, 48, 0.12));
}

.cna-ecp__step {
	position: relative;
	padding: 0.6em 0 0.6em 1.25em;
	margin-left: -1px;
	border-left: 2px solid var(--cna-primary, #e8639b);
	display: flex;
	flex-direction: column;
	gap: 0.15em;
}

.cna-ecp__step::before {
	content: '';
	position: absolute;
	left: -7px;
	top: 1.1em;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--cna-primary, #e8639b);
	box-shadow: 0 0 0 3px var(--cna-bg, #fff7fb);
}

.cna-ecp__step--compressed::before {
	background: var(--cna-accent, #ffd166);
}

.cna-ecp__step-date {
	font-size: 0.85em;
	color: var(--cna-muted, #6d6377);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.cna-ecp__step-title {
	font-size: 1.05em;
	color: var(--cna-text, #2b2130);
}

.cna-ecp__step-why {
	font-size: 0.92em;
	color: var(--cna-muted, #6d6377);
}

.cna-ecp__done {
	margin-top: 0.35em;
	font-size: 0.9em;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	width: fit-content;
}

.cna-ecp__skipped {
	background: var(--cna-bg, #fff7fb);
	border: 1px dashed var(--cna-line, rgba(43, 33, 48, 0.12));
	border-radius: var(--cna-radius, 14px);
	padding: 0.75em 1em;
	margin: 0.75em 0;
}

.cna-ecp__skipped h4 {
	margin: 0 0 0.4em;
	color: var(--cna-muted, #6d6377);
	font-size: 0.95em;
}

.cna-ecp__skipped ul {
	margin: 0;
	padding-left: 1.2em;
}

.cna-ecp__suggestions {
	margin: 1em 0;
}

/* ---- Visible FAQ block (backs the FAQPage JSON-LD) ---- */

.cna-ecp-faq {
	margin-top: 1.5em;
}

.cna-ecp-faq__item {
	border-bottom: 1px solid var(--cna-line, rgba(43, 33, 48, 0.12));
	padding: 0.6em 0;
}

.cna-ecp-faq__item summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--cna-text, #2b2130);
}

.cna-ecp-faq__item p {
	margin: 0.5em 0 0;
	color: var(--cna-muted, #6d6377);
}

/* ---- Print: keep each timeline step from splitting across a page break ---- */

@media print {
	.cna-ecp__step {
		break-inside: avoid;
	}

	.cna-ecp__banner {
		border-left-color: #000;
		background: none;
	}

	.cna-ecp__step::before {
		display: none;
	}
}

/* ---- Reduced motion: no animated transitions on the timeline connector ---- */

@media (prefers-reduced-motion: reduce) {
	.cna-ecp__step {
		transition: none;
	}
}