/**
 * CPR Cart — "Future of CPR Training" Elementor section (light theme).
 * Anchored on .contact_btn and its Elementor parent chain (not page-specific IDs).
 */

/* --- Section shell: outer top-level section containing the CTA --- */
.elementor-section.elementor-top-section:has(.contact_btn) {
	--cpr-future-light-bg: #faf8f5;
	--cpr-future-light-bg-mid: #fff9f6;
	--cpr-future-light-bg-end: #f3ede6;
	--cpr-future-accent-wash: rgba(177, 24, 30, 0.07);
	--cpr-future-accent-blush: rgba(255, 236, 230, 0.75);
	--cpr-future-heading: #1c1c22;
	--cpr-future-body: #4a4a54;
	--cpr-future-accent: #b1181e;
	--cpr-future-accent-deep: #8f1318;
	--cpr-future-font: 'Josefin Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(86px, 8vw, 106px) !important;
	min-height: 0 !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
}

/* Keep Elementor overlay transparent — waves live on ::after only */
.elementor-section.elementor-top-section:has(.contact_btn) > .elementor-background-overlay {
	background-color: transparent !important;
	background-image: none !important;
	opacity: 1 !important;
	animation: none !important;
}

/* Warm gradient + soft accent washes */
.elementor-section.elementor-top-section:has(.contact_btn)::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 72% 58% at 88% 12%, var(--cpr-future-accent-wash), transparent 62%),
		radial-gradient(ellipse 58% 48% at 8% 82%, var(--cpr-future-accent-blush), transparent 58%),
		linear-gradient(168deg, var(--cpr-future-light-bg) 0%, var(--cpr-future-light-bg-mid) 46%, var(--cpr-future-light-bg-end) 100%);
}

/* Single cohesive wave — seamless horizontal tile scroll */
@keyframes cpr-future-wave-scroll {
	from {
		background-position: 0 100%;
	}
	to {
		background-position: calc(-1 * var(--cpr-wave-tile, 960px)) 100%;
	}
}

.elementor-section.elementor-top-section:has(.contact_btn)::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: clamp(140px, 18vmin, 190px);
	z-index: 0;
	pointer-events: none;
	--cpr-wave-tile: clamp(480px, 62.5vw, 960px);
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 80' preserveAspectRatio='none'%3E%3Cpath fill='rgba(255%2C236%2C230%2C0.64)' d='M0%2C44 C80%2C28 160%2C58 240%2C44 S400%2C28 480%2C44 S640%2C58 720%2C44 S880%2C28 960%2C44 L960%2C80 L0%2C80 Z'/%3E%3Cpath fill='rgba(177%2C24%2C30%2C0.08)' d='M0%2C58 C120%2C42 240%2C72 360%2C58 S600%2C42 720%2C58 S840%2C72 960%2C58 L960%2C80 L0%2C80 Z'/%3E%3Cpath fill='rgba(177%2C24%2C30%2C0.11)' d='M0%2C66 C60%2C58 120%2C74 180%2C66 S300%2C58 360%2C66 S420%2C74 480%2C66 S540%2C58 600%2C66 S660%2C74 720%2C66 S780%2C58 840%2C66 S900%2C74 960%2C66 L960%2C80 L0%2C80 Z'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: 0 100%;
	background-size: var(--cpr-wave-tile) 100%;
	opacity: 0.98;
	-webkit-mask-image: linear-gradient(to top, #000 0%, #000 55%, transparent 100%);
	mask-image: linear-gradient(to top, #000 0%, #000 55%, transparent 100%);
	animation: cpr-future-wave-scroll 42s linear infinite;
	will-change: background-position;
}

.elementor-section.elementor-top-section:has(.contact_btn) > .elementor-container,
.elementor-section.elementor-top-section:has(.contact_btn) > .e-con-inner {
	position: relative;
	z-index: 1;
}

/* Inner column section — keep transparent on light shell */
.elementor-section.elementor-top-section:has(.contact_btn) .elementor-inner-section {
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	padding-block: 0 !important;
	margin-block: 0 !important;
}

/* Zero Elementor structural padding between outer shell and content widgets */
.elementor-section.elementor-top-section:has(.contact_btn) > .elementor-container,
.elementor-section.elementor-top-section:has(.contact_btn) .elementor-inner-section > .elementor-container,
.elementor-section.elementor-top-section:has(.contact_btn) .elementor-column,
.elementor-section.elementor-top-section:has(.contact_btn) .elementor-column > .elementor-widget-wrap:not(:has(.contact_btn)) {
	padding-block: 0 !important;
	margin-block: 0 !important;
}

.elementor-section.elementor-top-section:has(.contact_btn) .elementor-inner-section > .elementor-background-overlay {
	background: none !important;
	background-image: none !important;
	opacity: 0 !important;
}

/* --- Content block: widget wrap that contains .contact_btn --- */
.elementor-widget-wrap:has(.contact_btn) {
	row-gap: 0 !important;
	padding-block: 0 !important;
}

.elementor-widget-wrap:has(.contact_btn) > .elementor-widget-heading:first-of-type {
	margin-block: 0 clamp(10px, 1.2vw, 14px) !important;
	padding-block: 0 !important;
}

.elementor-widget-wrap:has(.contact_btn) > .contact_btn {
	margin-block: 0 clamp(12px, 1.6vw, 16px) !important;
}

.elementor-widget-wrap:has(.contact_btn) .elementor-widget-heading .elementor-widget-container,
.elementor-widget-wrap:has(.contact_btn) .contact_btn .elementor-widget-container {
	margin-block: 0 !important;
	padding-block: 0 !important;
}

.elementor-widget-wrap:has(.contact_btn) > .elementor-widget-heading:first-of-type .elementor-widget-container {
	margin-block: 0 !important;
	padding-block: 0 !important;
}

/* Title — "The Future of CPR Training" */
.elementor-widget-wrap:has(.contact_btn) .elementor-widget-heading:first-of-type .elementor-heading-title {
	margin-block: 0 !important;
	font-family: var(--cpr-future-font) !important;
	font-size: clamp(1.85rem, 3.8vw, 2.65rem) !important;
	font-weight: 700 !important;
	line-height: 1.12 !important;
	letter-spacing: -0.02em !important;
	color: var(--cpr-future-heading) !important;
	background: none !important;
	-webkit-background-clip: unset !important;
	background-clip: unset !important;
	-webkit-text-fill-color: var(--cpr-future-heading) !important;
}

/* Body copy (heading widget used for long description text) */
.elementor-widget-wrap:has(.contact_btn) .elementor-widget-heading:nth-of-type(2),
.elementor-widget-wrap:has(.contact_btn) .elementor-widget-heading:nth-of-type(2) .elementor-widget-container {
	font-family: var(--cpr-future-font) !important;
	font-size: clamp(1rem, 1.6vw, 1.125rem) !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;
	color: #1a1b1e !important;
	opacity: 1 !important;
	background: none !important;
	-webkit-background-clip: unset !important;
	background-clip: unset !important;
	-webkit-text-fill-color: #1a1b1e !important;
}

.elementor-widget-wrap:has(.contact_btn) .elementor-widget-heading:nth-of-type(2) .elementor-heading-title,
.elementor-widget-wrap:has(.contact_btn) .elementor-widget-heading:nth-of-type(2) h2.elementor-heading-title,
.elementor-widget-wrap:has(.contact_btn) .elementor-widget-heading:nth-of-type(2) p {
	margin-block: 0 !important;
	font-family: var(--cpr-future-font) !important;
	font-size: clamp(1rem, 1.6vw, 1.125rem) !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;
	color: #1a1b1e !important;
	opacity: 1 !important;
	background: none !important;
	-webkit-background-clip: unset !important;
	background-clip: unset !important;
	-webkit-text-fill-color: #1a1b1e !important;
}

/*
 * Body → Call Us gap (~20–30px). Must follow typography + container resets above.
 * Flex widget-wrap does not collapse margins — use padding on body container only.
 */
.elementor-widget-wrap:has(.contact_btn) .elementor-widget-heading:nth-of-type(2) {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.elementor-widget-wrap:has(.contact_btn) .elementor-widget-heading:nth-of-type(2) .elementor-widget-container {
	padding-bottom: clamp(20px, 4.5vw, 30px) !important;
}

.elementor-widget-wrap:has(.contact_btn) .elementor-widget-heading:nth-of-type(2) + .contact_btn {
	margin-top: 0 !important;
}

/* Red CTA — improved contrast on light background */
.elementor-widget-wrap:has(.contact_btn) .contact_btn a,
.elementor-widget-wrap:has(.contact_btn) .contact_btn .elementor-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center;
	gap: 10px;
	padding-block: 14px !important;
	padding-inline: 24px 28px !important;
	font-family: var(--cpr-future-font) !important;
	font-size: clamp(0.95rem, 1.4vw, 1.05rem) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: #ffffff !important;
	background: linear-gradient(135deg, #cf242a 0%, var(--cpr-future-accent) 55%, var(--cpr-future-accent-deep) 100%) !important;
	border: 1px solid rgba(143, 19, 24, 0.35) !important;
	border-radius: 3px !important;
	box-shadow:
		0 10px 28px rgba(177, 24, 30, 0.28),
		0 2px 6px rgba(28, 28, 34, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
	transition:
		background 0.25s ease,
		box-shadow 0.25s ease,
		transform 0.25s ease,
		border-color 0.25s ease;
}

/* Override custom-style.css absolute phone icon (left: 50px; top: 17px) */
.elementor-widget-wrap:has(.contact_btn) .contact_btn a::before {
	position: static !important;
	left: auto !important;
	top: auto !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin: 0;
	font-family: "FontAwesome" !important;
	font-size: 1.15em !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	color: #ffffff !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.elementor-widget-wrap:has(.contact_btn) .contact_btn a:hover,
.elementor-widget-wrap:has(.contact_btn) .contact_btn .elementor-button:hover {
	color: #ffffff !important;
	background: linear-gradient(135deg, #b1181e 0%, #7a1015 100%) !important;
	border-color: rgba(90, 12, 16, 0.45) !important;
	box-shadow:
		0 14px 36px rgba(177, 24, 30, 0.38),
		0 4px 10px rgba(28, 28, 34, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
	transform: translateY(-2px);
}

.elementor-widget-wrap:has(.contact_btn) .contact_btn a:focus-visible {
	outline: 2px solid var(--cpr-future-accent);
	outline-offset: 3px;
}

/* Beat page/dark Elementor skins everywhere this template appears */
.site-content .elementor-section.elementor-top-section:has(.contact_btn) {
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	padding-block: clamp(86px, 8vw, 106px) !important;
}

/* Homepage future skin sets 48–96px on all sections — override for this block only */
body.cprcart-home-future .site-content .elementor-section.elementor-top-section:has(.contact_btn):not(#banner_content) {
	padding-block: clamp(86px, 8vw, 106px) !important;
}

.site-content .elementor-widget-wrap:has(.contact_btn) .elementor-widget-heading:first-of-type .elementor-heading-title {
	color: var(--cpr-future-heading) !important;
	-webkit-text-fill-color: var(--cpr-future-heading) !important;
	background: none !important;
}

.site-content .elementor-widget-wrap:has(.contact_btn) .elementor-widget-heading:nth-of-type(2),
.site-content .elementor-widget-wrap:has(.contact_btn) .elementor-widget-heading:nth-of-type(2) .elementor-heading-title,
.site-content .elementor-widget-wrap:has(.contact_btn) .elementor-widget-heading:nth-of-type(2) h2.elementor-heading-title,
.site-content .elementor-widget-wrap:has(.contact_btn) .elementor-widget-heading:nth-of-type(2) p {
	color: #1a1b1e !important;
	opacity: 1 !important;
	background: none !important;
	-webkit-background-clip: unset !important;
	background-clip: unset !important;
	-webkit-text-fill-color: #1a1b1e !important;
}

.site-content .elementor-widget-wrap:has(.contact_btn) .contact_btn a {
	background: linear-gradient(135deg, #cf242a 0%, var(--cpr-future-accent) 55%, var(--cpr-future-accent-deep) 100%) !important;
	color: #ffffff !important;
	border-color: rgba(143, 19, 24, 0.35) !important;
}

body.cprcart-home-future .site-content .elementor-widget-wrap:has(.contact_btn) .contact_btn a::before {
	color: #ffffff !important;
}

@media (max-width: 768px) {
	.elementor-section.elementor-top-section:has(.contact_btn),
	body.cprcart-home-future .site-content .elementor-section.elementor-top-section:has(.contact_btn):not(#banner_content) {
		padding-block: 82px 86px !important;
	}

	.elementor-widget-wrap:has(.contact_btn) > .elementor-widget-heading:first-of-type {
		margin-bottom: 10px !important;
	}

	.elementor-widget-wrap:has(.contact_btn) .elementor-widget-heading:nth-of-type(2) {
		margin-bottom: 0 !important;
	}


	.elementor-widget-wrap:has(.contact_btn) .elementor-widget-heading:nth-of-type(2) + .contact_btn {
		margin-top: 0 !important;
		margin-bottom: 14px !important;
	}

	.elementor-section.elementor-top-section:has(.contact_btn)::after {
		height: clamp(120px, 14vmin, 160px);
		--cpr-wave-tile: clamp(360px, 90vw, 720px);
		opacity: 0.94;
	}

	.elementor-widget-wrap:has(.contact_btn) .contact_btn a {
		width: 100%;
		justify-content: center;
	}

	.elementor-widget-wrap:has(.contact_btn) .contact_btn a::before {
		position: static !important;
		left: auto !important;
		top: auto !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor-section.elementor-top-section:has(.contact_btn)::after {
		animation: none;
		will-change: auto;
	}

	.elementor-widget-wrap:has(.contact_btn) .contact_btn a {
		transition: none;
	}
}