/**
 * Call to action block styles (block-scoped; enqueued only when the block is present).
 * BEM only, prefixed with the block slug. Do not touch the theme's global style.css.
 *
 * The reference is StartP's closing band (.ready-to-talk) in the dark variant
 * of its repair and IoT pages. The band is set as a panel on the rail rather
 * than edge to edge: the footer below is the light tint, and a contained panel
 * reads as the last word of the page instead of the top of the footer.
 *
 * The panel is the heading navy, and that is a contrast decision as much as a
 * look: white text on it is about 13:1, where on the reference's green
 * gradient it would be 2:1.
 */

/*
 * The theme ships no global box-sizing, so a rail written as max-width plus
 * padding would hang that padding outside the rail. Scope border-box to the
 * block instead, as every other block here does.
 */
.sws-cta,
.sws-cta *,
.sws-cta *::before,
.sws-cta *::after {
	box-sizing: border-box;
}

.sws-cta {
	container: sws-cta / inline-size;
	/*
	 * Full-bleed root on the plain page background. Keep responsive rules off
	 * it: an element cannot be styled by its own container query.
	 */
}

.sws-cta__inner {
	/* Mobile-first base. Same rail formula as the header, so both stay flush. */
	max-width: min(var(--sws-content, 1116px), 100% - 2 * var(--sws-gutter, 0.75rem));
	margin-inline: auto;
	padding-block: 3.125rem;
}

/*
 * The explicit z-index is load-bearing. The symbols sit at z-index -1 so they
 * pass behind the text but stay in front of the panel's own navy, and that only
 * holds while the panel is a stacking context. overflow keeps a drifting symbol
 * inside the rounded corners instead of across the page.
 */
.sws-cta__panel {
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding: 3rem 1.25rem;
	border-radius: var(--sws-radius-lg, 5px);
	background: var(--wp--preset--color--heading, #0e314c);
	text-align: center;
}

/*--------------------------------------------------------------
# Text
--------------------------------------------------------------*/

.sws-cta__heading {
	margin: 0;
	color: #ffffff;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
}

/*
 * The travelling dot on its rule. On navy the soft-green track would glow, so
 * the track is white at low strength and only the dot keeps the accent. Both
 * sizes live here; --sws-bar-travel is what the shared keyframe in
 * css/base.css reads to know how far to go.
 */
.sws-cta__bar {
	--sws-cta-bar: 5.625rem;
	--sws-cta-dot: 0.625rem;

	position: relative;
	width: var(--sws-cta-bar);
	height: 0.3125rem;
	margin: 1.25rem auto;
	border-radius: 30px;
	background: rgb(255 255 255 / 20%);
}

.sws-cta__bar::before {
	--sws-bar-travel: calc(var(--sws-cta-bar) - var(--sws-cta-dot));

	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: var(--sws-cta-dot);
	height: var(--sws-cta-dot);
	margin-top: calc(var(--sws-cta-dot) / -2);
	border-radius: 50%;
	background: var(--wp--preset--color--accent, #44ce6f);
	animation: sws-bar-dot 3s linear infinite alternate;
}

.sws-cta__text {
	max-width: 36rem;
	margin: 0 auto;
	color: rgb(255 255 255 / 85%);
	font-size: 0.9375rem;
	line-height: 1.9;
}

/* WYSIWYG output — markup the theme does not generate. */
.sws-cta__text p {
	margin: 0;
}

.sws-cta__text p + p {
	margin-top: 1rem;
}

/*
 * A link inside the text is underlined: on the panel colour alone would not
 * set it apart from the words around it.
 */
.sws-cta__text a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	transition: color var(--sws-transition, 0.3s ease);
}

.sws-cta__text a:hover,
.sws-cta__text a:focus-visible {
	color: var(--wp--preset--color--accent, #44ce6f);
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/

.sws-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.875rem;
}

/*
 * One more of the family after the header CTA, the hero button and the form's
 * submit: two halves of a fill grow in from both edges and the button lifts.
 * The halves overlap at 51%, the reference's own figure, so no seam shows where
 * they meet. Each variant only says which colours it starts from and fills to.
 */
.sws-cta__button {
	position: relative;
	z-index: 1;
	display: inline-block;
	overflow: hidden;
	padding: 0.8125rem 2.0625rem;
	border-radius: var(--sws-radius, 4px);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		background-color var(--sws-transition, 0.3s ease),
		box-shadow var(--sws-transition, 0.3s ease),
		color var(--sws-transition, 0.3s ease),
		transform var(--sws-transition, 0.3s ease);
}

.sws-cta__button::before,
.sws-cta__button::after {
	content: "";
	position: absolute;
	top: 0;
	z-index: -1;
	width: 0;
	height: 100%;
	background-color: var(--sws-cta-fill);
	transition: width var(--sws-transition, 0.3s ease);
}

.sws-cta__button::after {
	left: 0;
}

.sws-cta__button::before {
	right: 0;
}

.sws-cta__button:hover,
.sws-cta__button:focus-visible {
	transform: translateY(-5px);
}

.sws-cta__button:hover::before,
.sws-cta__button:hover::after,
.sws-cta__button:focus-visible::before,
.sws-cta__button:focus-visible::after {
	width: 51%;
}

/* Green filling with purple, the same pair as the hero button. */
.sws-cta__button--primary {
	--sws-cta-fill: var(--wp--preset--color--secondary, #c679e3);

	background-color: var(--wp--preset--color--accent, #44ce6f);
	box-shadow: var(--sws-shadow-button-hover, 0 13px 27px 0 rgb(68 206 111 / 25%));
	color: #ffffff;
}

.sws-cta__button--primary:hover,
.sws-cta__button--primary:focus-visible {
	box-shadow: var(--sws-shadow-button, 0 13px 27px 0 rgb(198 121 227 / 25%));
	color: #ffffff;
}

/*
 * Outlined in white and filling with white, the way the reference's closing
 * band answers its button. The outline is an inset shadow rather than a
 * border, so both variants keep the same box and sit level in one row.
 */
.sws-cta__button--secondary {
	--sws-cta-fill: #ffffff;

	background-color: transparent;
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 50%);
	color: #ffffff;
}

.sws-cta__button--secondary:hover,
.sws-cta__button--secondary:focus-visible {
	box-shadow: inset 0 0 0 1px #ffffff;
	color: var(--wp--preset--color--heading, #0e314c);
}

/*--------------------------------------------------------------
# Decorative shapes
--------------------------------------------------------------*/

/*
 * The glyph size lives on the wrapper, not on the root: a container query
 * cannot reach the element that declares the container, and this is the nearest
 * ancestor of every shape that it can reach.
 *
 * The wrapper itself stays out of the flow and unpositioned, so each shape
 * resolves against the panel.
 */
.sws-cta__shapes {
	--sws-cta-icon-size: 2rem;
}

.sws-cta__shape {
	display: none;
	position: absolute;
	z-index: -1;
	/* Decoration, not content: it sits behind white text on navy and must stay quiet. */
	opacity: 0.45;
}

/*
 * Every symbol in assets/icons/ draws itself with stroke="currentColor", so the
 * colour is set once here on the wrapper and the whole glyph follows.
 */
.sws-cta__shape--accent {
	color: var(--wp--preset--color--accent, #44ce6f);
}

.sws-cta__shape--secondary {
	color: var(--wp--preset--color--secondary, #c679e3);
}

.sws-cta__shape--tertiary {
	color: var(--wp--preset--color--tertiary, #27eac8);
}

/*
 * Explicit size, not optional: the icons ship with a viewBox and no width or
 * height, and an unsized SVG in HTML falls back to 300x150.
 */
.sws-cta__shape-icon {
	display: block;
	width: var(--sws-cta-icon-size, 2.5rem);
	height: var(--sws-cta-icon-size, 2.5rem);
	stroke-width: 3.5;
}

/*
 * On a phone the panel is all text, so only two symbols stay, tucked into
 * opposite corners where they cannot land on a line. Both spin in place: a
 * drifting one would wander across the copy.
 */
.sws-cta__shape:nth-child(1) {
	top: 0.75rem;
	left: 0.75rem;
	animation: sws-spin 20s linear infinite;
}

.sws-cta__shape:nth-child(2) {
	bottom: 14%;
	left: 9%;
	animation: sws-spin 25s linear infinite;
}

.sws-cta__shape:nth-child(3) {
	top: 16%;
	right: 6%;
	animation: sws-spin 22s linear infinite;
}

.sws-cta__shape:nth-child(4) {
	right: 0.75rem;
	bottom: 0.75rem;
	animation: sws-spin 18s linear infinite;
}

.sws-cta__shape:nth-child(1),
.sws-cta__shape:nth-child(4) {
	display: block;
}

/*--------------------------------------------------------------
# Desktop
--------------------------------------------------------------*/

@container sws-cta (min-width: 782px) {

	.sws-cta__inner {
		padding-block: 5rem;
	}

	.sws-cta__panel {
		padding: 4.5rem 3.75rem;
	}

	.sws-cta__heading {
		font-size: 1.75rem;
	}

	.sws-cta__button {
		padding: 0.9375rem 2.5rem;
		font-size: 0.875rem;
	}

	/*
	 * The panel is wide and the text column narrow, so the flanks are empty:
	 * all four symbols come out, and the first one is free to drift. sws-drift
	 * carries it right and down, never up or left, so it starts in the top-left
	 * corner and has the whole flank to travel in.
	 */
	.sws-cta__shapes {
		--sws-cta-icon-size: 2.5rem;
	}

	.sws-cta__shape:nth-child(n) {
		display: block;
	}

	.sws-cta__shape:nth-child(1) {
		top: 12%;
		left: 4%;
		animation: sws-drift 20s linear infinite;
	}

	.sws-cta__shape:nth-child(4) {
		right: 12%;
		bottom: 16%;
	}
}

/*--------------------------------------------------------------
# Reduced motion
--------------------------------------------------------------*/

/*
 * A preference query, not a width one — the block's breakpoints stay container
 * queries. base.css collapses --sws-duration, which reaches transitions only; a
 * keyframe animation has no such handle, so the component that starts one also
 * stops it.
 *
 * :nth-child(n) matches every shape and costs the same specificity as the
 * per-slot rules above, so this reset wins on source order alone — no
 * !important needed.
 */
@media (prefers-reduced-motion: reduce) {

	.sws-cta__bar::before {
		animation: none;
	}

	.sws-cta__shape:nth-child(n) {
		animation: none;
	}

	.sws-cta__button:hover,
	.sws-cta__button:focus-visible {
		transform: none;
	}
}