/*
 * Section: CTA.
 *
 * Loaded only on pages carrying the `cta` layout.
 *
 * Design: _design/SharpQuery Final CTA.dc.html. Desktop 1280 with a 1fr/520px
 * split and 56px gap; mobile 390 single column. Band colour, accent and rule
 * colour arrive through the .sq-on-dark role tokens, so this file never names
 * a dark-band colour directly.
 *
 * DOM order is copy → action → trust, the mobile reading order. At desktop the
 * grid lifts the trust row back under the copy column.
 */


.cta__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sq-space-5);
	align-items: start;
}

.cta__copy {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-5);
}

.cta__copy > *,
.cta__action > * {
	margin: 0;
}


.cta__heading {
	font-size: var(--sq-text-h2);
	line-height: 0.94;
}

.cta__body {
	max-width: 37.5rem; /* 600 */
}

/* The comp sets the closing line heavier than the paragraph above it. Only
 * applies when there IS a line above — a single paragraph stays regular. */
.cta__body > p:last-child:not(:only-child) {
	font-weight: var(--sq-weight-semibold);
}

.cta__benefits {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-3);
	margin: 0;
	list-style: none;
}

.cta__benefit {
	display: flex;
	gap: var(--sq-space-3);
	align-items: flex-start;
	margin: 0;
	font-weight: var(--sq-weight-medium);
}

/* Decorative tick — the list carries the meaning. */
.cta__benefit::before {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 3px;
	background-color: var(--sq-color-success-on-dark);
	color: var(--sq-color-ink);
	font-size: var(--sq-text-label-sm);
	font-weight: var(--sq-weight-bold);
	line-height: 1;
	content: '\2713';
}


/* ============================================================= ACTION == */

.cta__action {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-5);
}

/* Click-to-call. A white slab on the black band — the loudest thing in the
 * section after the submit button, which is the point. */
.cta__call {
	display: flex;
	gap: 0.875rem;
	align-items: center;
	min-height: 4.5rem; /* 72 */
	padding: 0.875rem 1.125rem;
	/* 3px, not the 2px system rule: the comp thickens it against the black. */
	border: 3px solid var(--sq-color-paper);
	background-color: var(--sq-color-paper);
	color: var(--sq-color-ink);
	text-decoration: none;
	transition:
		background-color var(--sq-duration) var(--sq-ease),
		border-color var(--sq-duration) var(--sq-ease),
		color var(--sq-duration) var(--sq-ease);
}

.cta__call:hover {
	border-color: var(--sq-accent);
	background-color: var(--sq-accent);
	color: var(--sq-color-paper);
}

.cta__call-icon {
	flex: 0 0 auto;
	font-size: 1.875rem;
	line-height: 1;
}

.cta__call-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cta__call-label {
	font-size: var(--sq-text-label-sm);
	font-weight: var(--sq-weight-bold);
	letter-spacing: var(--sq-tracking-label-sm);
	text-transform: uppercase;
}

.cta__call-number {
	font-family: var(--sq-font-display);
	font-size: 2.125rem; /* 34 */
	font-weight: var(--sq-weight-bold);
	line-height: 1;
}

.cta__actions {
	display: flex;
	flex-direction: column;
}


/* =============================================================== FORM == */

.cta__form-card {
	padding: 1.25rem; /* 20 */
	border: 3px solid var(--sq-color-paper);
	background-color: var(--sq-color-paper);
	color: var(--sq-color-ink);
}

.cta-form,
.cta-form__fields {
	display: flex;
	flex-direction: column;
	gap: 0.875rem; /* 14 */
}

.cta-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.4375rem; /* 7 */
}

/* Inputs inherit height, border and radius from base.css; the comp only
 * changes the size on this card. */
.cta-form__field input {
	min-height: 3.75rem; /* 60 */
}

.cta-form__submit {
	width: 100%;
	min-height: 3.875rem; /* 62 */
}

.cta-form__note {
	color: var(--sq-color-support);
}

.cta-form__error {
	margin: 0;
	color: var(--sq-color-danger);
	font-size: var(--sq-text-small);
	font-weight: var(--sq-weight-semibold);
}

.cta-form__alert,
.cta-form__success {
	margin: 0;
	padding: var(--sq-space-3) var(--sq-space-4);
	border: var(--sq-border-width) solid currentColor;
	font-weight: var(--sq-weight-semibold);
}

.cta-form__alert {
	background-color: var(--sq-color-danger-surface);
	color: var(--sq-color-danger);
}

.cta-form__success {
	background-color: var(--sq-color-paper);
	color: var(--sq-color-success);
}

/* Empty live region must take no space, or every card gains a phantom gap. */
.cta-form__status:empty {
	display: none;
}

/*
 * Honeypot.
 *
 * Off-screen rather than display:none — some bots skip anything explicitly
 * hidden, and this needs to look like an ordinary field to a script reading
 * the DOM. It is aria-hidden and tabindex="-1" in the markup, so nobody using
 * a keyboard or a screen reader can reach it by accident.
 */
.cta-form__decoy {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/* ============================================================== TRUST == */

.cta__trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sq-space-2) var(--sq-space-3);
	align-items: center;
	margin: 0;
	padding-top: 1.125rem;
	border-top: var(--sq-border-width) solid var(--sq-rule);
	list-style: none;
}

.cta__trust-item {
	display: flex;
	gap: var(--sq-space-3);
	align-items: center;
	margin: 0;
	color: var(--sq-color-on-dark-body);
	font-size: 1.0625rem;
	font-weight: var(--sq-weight-semibold);
	white-space: nowrap;
}

.cta__trust-item:not(:last-child)::after {
	color: var(--sq-accent);
	content: '\00b7';
}


/* ============================================================= ORANGE ==
 *
 * The Safety Orange band. `.sq-on-orange` in tokens.css has already pointed
 * the roles at ink, so most of this section inherits correctly. Three things
 * still name a colour directly and have to be re-stated here.
 *
 * The headline is the one licensed exception to ink on this band. White on
 * #D95A15 is 3.87:1 — over the 3:1 large-text floor and under the 4.5:1
 * normal-text one — and --sq-text-h2 clamps 38→56px, which is large text at
 * every width. Do not extend it to the body, the benefits or the trust row:
 * no lighter colour exists that would pass there, white being the ceiling.
 */

.sq-on-orange .cta__heading {
	color: var(--sq-color-paper);
}

/* Mint on orange is off-palette, and the band already supplies the contrast. */
.sq-on-orange .cta__benefit::before {
	background-color: var(--sq-color-ink);
	color: var(--sq-color-paper);
}

/* The dark-band body grey is 3.8:1 here. Inherit ink instead. */
.sq-on-orange .cta__trust-item {
	color: inherit;
}


/* ========================================================== LINK ONLY ==
 *
 * One centred column. With no form there is no second object to balance, and a
 * lone button parked in an empty right column reads as something left over
 * rather than the thing to do next.
 *
 * No rule above the trust row here — the comp closes on air. The two-column
 * arrangement keeps its rule, where the row genuinely divides two columns.
 */

.cta--link-only .cta__inner {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: 2.125rem; /* 34 */
}

.cta--link-only .cta__copy {
	align-items: center;
	gap: 1.375rem; /* 22 */
}

.cta--link-only .cta__heading,
.cta--link-only .cta__body {
	margin-inline: auto;
}

.cta--link-only .cta__body {
	/* The documented body cap, not the comp's 42em. Wider centred copy is
	 * harder to track back to the start of the next line, and this is the last
	 * paragraph anyone reads on the page. */
	max-width: var(--sq-measure);
}

.cta--link-only .cta__action {
	align-items: center;
	width: 100%;
}

.cta--link-only .cta__actions {
	align-items: center;
}

.cta--link-only .cta__trust {
	justify-content: center;
	padding-top: 0;
	border-top: 0;
	/* Mono and tracked, as the comp draws it — but at the theme's 15px floor,
	 * not the comp's 13px. Nothing a customer must read goes below it. */
	font-family: var(--sq-font-mono);
	font-size: var(--sq-text-small);
	letter-spacing: 0.04em;
}

.cta--link-only .cta__trust-item {
	font-weight: var(--sq-weight-regular);
}

/*
 * Centred from 480px, not from 390px. The design system bans centred
 * paragraphs over two lines, and on a phone this body copy is five or six —
 * the same call `problem_cards` makes for its closing line.
 */
@media (min-width: 30em) {

	.cta--link-only .cta__copy,
	.cta--link-only .cta__trust {
		text-align: center;
	}

}


/* ========================================================== TWO COLUMN == */

@media (min-width: 61.25em) {

	.cta__inner {
		grid-template-columns: 1fr minmax(0, 32.5rem); /* 520 */
		gap: 3.5rem; /* 56 */
	}

	.cta__copy {
		grid-column: 1;
		grid-row: 1;
	}

	.cta__action {
		grid-column: 2;
		grid-row: 1 / span 2;
		gap: 1.125rem; /* 18 */
	}

	.cta__trust {
		grid-column: 1;
		grid-row: 2;
		gap: 0.625rem 1.125rem;
		padding-top: var(--sq-space-5);
	}

	.cta--no-action .cta__inner {
		grid-template-columns: 1fr;
	}


	.cta__heading {
		line-height: var(--sq-leading-display);
		letter-spacing: var(--sq-tracking-display);
	}

	.cta__call {
		gap: var(--sq-space-4);
		padding: var(--sq-space-4) 1.375rem;
	}

	.cta__call-icon {
		font-size: 2.125rem;
	}

	.cta__call-label {
		font-size: var(--sq-text-label);
		letter-spacing: var(--sq-tracking-label);
	}

	.cta__call-number {
		font-size: 2.5rem; /* 40 */
	}

	.cta__form-card {
		padding: 1.625rem; /* 26 */
	}

	.cta-form,
	.cta-form__fields {
		gap: var(--sq-space-4);
	}

	.cta-form__field input {
		min-height: 3.875rem; /* 62 */
	}

	.cta-form__submit {
		min-height: var(--sq-control-height-lg); /* 64 */
		font-size: var(--sq-text-lead);
	}

	.cta__trust-item {
		font-size: 1.125rem;
	}


	/* ------------------------------------------------------- LINK ONLY --
	 *
	 * Stays one column. The heading gets a cap of its own so it breaks into
	 * two or three lines rather than running the full 1200px — a centred line
	 * that wide is a long way back to the start of the next one.
	 */
	.cta--link-only .cta__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.125rem; /* 34 */
	}

	.cta--link-only .cta__copy {
		grid-column: 1;
		gap: var(--sq-space-5);
	}

	.cta--link-only .cta__action,
	.cta--link-only .cta__trust {
		grid-column: 1;
		grid-row: auto;
	}

	.cta--link-only .cta__heading {
		max-width: 20em;
	}

	.cta--link-only .cta__trust {
		gap: 0.625rem 1.5rem; /* 10 24 */
		padding-top: 0;
	}

	/* The one button in the section, at closing-CTA size. */
	.cta--link-only .cta__actions .btn {
		min-height: var(--sq-control-height-lg); /* 64 */
		font-size: var(--sq-text-lead);
	}
}