/**
 * CTA Banner widget.
 *
 * Specificity note: base rules use two class levels (e.g. `.tmt-cta .x`) so they
 * beat theme/kit rules like `.container a` or `.elementor-kit-N h2`, while
 * staying below the three-class selectors Elementor generates from the panel
 * controls - those must keep winning.
 */

.tmt-cta {
	--tmt-cta-transition: 200ms;
}

/*
 * The widget is transparent: the background image belongs on the parent
 * Section/Container so it can run edge to edge.
 */
.tmt-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 120px 20px;
	background: none;
}

.tmt-cta .tmt-cta__inner {
	width: 100%;
	text-align: center;
}

/* Heading / description -------------------------------------------------- */

.tmt-cta .tmt-cta__heading {
	margin: 0 auto 36px;
	max-width: 620px;
	font-family: inherit;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: normal;
	color: #fff;
}

.tmt-cta .tmt-cta__text {
	margin: 0 auto 32px;
	max-width: 620px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: normal;
	color: #dce6ee;
}

/* Keeps the max-width box aligned with the chosen text alignment. */
.tmt-cta-align-left .tmt-cta__heading,
.tmt-cta-align-left .tmt-cta__text {
	margin-inline: 0 auto;
}

.tmt-cta-align-right .tmt-cta__heading,
.tmt-cta-align-right .tmt-cta__text {
	margin-inline: auto 0;
}

/* Button ----------------------------------------------------------------- */

/* Reset first: themes and kits like to restyle every link and button. */
.tmt-cta a.tmt-cta__button,
.tmt-cta a.tmt-cta__button:hover,
.tmt-cta a.tmt-cta__button:focus,
.tmt-cta a.tmt-cta__button:active {
	min-width: 0;
	min-height: 0;
	max-width: none;
	box-shadow: none;
	text-decoration: none;
	text-transform: none;
	-webkit-appearance: none;
	appearance: none;
}

.tmt-cta a.tmt-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 8px 16px;
	border: 0;
	border-radius: 20px;
	background-color: #1b8ed6;
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: normal;
	cursor: pointer;
	transition:
		background-color var(--tmt-cta-transition) ease,
		color var(--tmt-cta-transition) ease,
		border-color var(--tmt-cta-transition) ease,
		box-shadow var(--tmt-cta-transition) ease;
}

/* Default hover, overridden by the panel's Hover tab. */
.tmt-cta a.tmt-cta__button:hover,
.tmt-cta a.tmt-cta__button:focus-visible {
	background-color: #116fae;
	color: #fff;
}

.tmt-cta .tmt-cta__button:focus {
	outline: none;
}

.tmt-cta .tmt-cta__button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.tmt-cta a.tmt-cta__button {
		transition-duration: 1ms;
	}
}

/* Container helper ------------------------------------------------------- */

/*
 * The background image lives on the parent Section/Container. Elementor's
 * default Background Size can leave the band taller than the image, and Repeat
 * then tiles it. These rules force a single cover-sized image on whichever
 * element directly wraps this widget, in both the container and the legacy
 * section markup.
 *
 * The selectors are deliberately one level deep so an outer section keeps its
 * own background settings. !important is required because Elementor's generated
 * background rules outrank anything a stylesheet selector can reach.
 * background-position is left alone, so the focal point stays adjustable.
 */
.e-con:has(> .elementor-widget-tmt_cta),
.e-con:has(> .e-con-inner > .elementor-widget-tmt_cta),
.elementor-widget-wrap:has(> .elementor-widget-tmt_cta),
.elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-tmt_cta) {
	background-repeat: no-repeat !important;
	background-size: cover !important;
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1024px) {
	.tmt-cta {
		padding: 80px 20px;
	}

	.tmt-cta .tmt-cta__heading {
		margin-bottom: 30px;
		font-size: 26px;
	}
}

@media (max-width: 767px) {
	.tmt-cta {
		padding: 56px 16px;
	}

	.tmt-cta .tmt-cta__heading {
		margin-bottom: 26px;
		font-size: 22px;
		line-height: 1.3;
	}

	.tmt-cta .tmt-cta__text {
		margin-bottom: 26px;
		font-size: 15px;
	}
}