/* ==========================================================================
   Content Pagination Widget — Frontend Styles
   cpw-style.css
   ========================================================================== */

/* ── Keyframe: section entrance ────────────────────────────────────────── */
@keyframes cpwFadeSlideIn {
	from {
		opacity: 0;
		transform: translateY( 16px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

/* ── Container ──────────────────────────────────────────────────────────── */
.cpw-container {
	box-sizing: border-box;
	width: 100%;
}

.cpw-container *,
.cpw-container *::before,
.cpw-container *::after {
	box-sizing: inherit;
}

/* ── Sections wrapper ───────────────────────────────────────────────────── */
.cpw-sections {
	display: block;
}

/* ── Individual section item ────────────────────────────────────────────── */
.cpw-item {
	display: none; /* Hidden by default; JS / PHP adds .active to show. */
}

.cpw-item.active {
	display: block;
}

/* Entrance animation when a section is revealed by JS. */
.cpw-item--entering {
	animation: cpwFadeSlideIn 0.35s ease both;
}

/* ── Section Heading ────────────────────────────────────────────────────── */
.cpw-item__heading {
	font-size: 1.375rem;    /* ~22px at default 16px root */
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 0.625em;    /* 10px bottom by default; overridden by Elementor */
	color: #1a1a2e;         /* Default; overridden by Elementor colour control */
	padding: 0;
}

/* ── Section Body ───────────────────────────────────────────────────────── */
.cpw-item__body {
	font-size: 1rem;
	line-height: 1.75;
	margin: 0;
	color: #444455;         /* Default; overridden by Elementor colour control */
}

/* ── Spacing between consecutive sections ───────────────────────────────── */
.cpw-item + .cpw-item {
	margin-top: 2rem;       /* 32px default; overridden by Elementor slider */
}

/* ── Footer (button wrapper) ────────────────────────────────────────────── */
.cpw-footer {
	display: flex;
	justify-content: center;
	margin-top: 2.25rem;    /* ~36px default; overridden by Elementor slider */
	transition: opacity 0.3s ease;
}

.cpw-footer--hidden {
	display: none;
}

/* ── Button ─────────────────────────────────────────────────────────────── */
.cpw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.875em 2.25em;    /* ~14px 36px; overridden by Elementor */
	font-size: 0.9375rem;       /* ~15px */
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
	cursor: pointer;
	border: none;
	outline: none;
	border-radius: 6px;
	background-color: #1a1a2e;  /* Overridden by Elementor */
	color: #ffffff;             /* Overridden by Elementor */
	text-decoration: none;
	transition:
		background-color 0.2s ease,
		color            0.2s ease,
		transform        0.15s ease,
		box-shadow       0.2s ease;
	-webkit-font-smoothing: antialiased;
}

.cpw-btn:hover {
	background-color: #16213e;  /* Overridden by Elementor */
	color: #ffffff;
	transform: translateY( -2px );
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.18 );
}

.cpw-btn:active {
	transform: translateY( 0 );
	box-shadow: none;
}

.cpw-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}