/*
 * am-cta — the action button. The primary is the paid diagnostic workshop.
 *
 * Apply `am-cta` to a link or the Elementor Button widget's CSS Classes field.
 * The default is the solid CTA fill (orange-red, punch-600 → AA with a white,
 * regular-weight label). Variants below cover secondary and quiet actions.
 * Inside an am-section--inverse the colour tokens remap, so the button adapts
 * to the dark band automatically.
 */

.am-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--am-space-200);
	padding: var(--am-space-300) var(--am-space-500);
	border: 2px solid transparent;
	border-radius: var(--am-radius-md);
	background-color: var(--am-color-cta);
	color: var(--am-color-on-accent);
	font-family: inherit;
	font-size: var(--am-font-size-300);
	font-weight: var(--am-weight-semibold);
	line-height: var(--am-leading-tight);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--am-transition), border-color var(--am-transition), color var(--am-transition);
}

.am-cta:hover,
.am-cta:focus-visible {
	background-color: var(--am-color-cta-hover);
	color: var(--am-color-on-accent);
}

/* Secondary — outlined in the warm accent, fills on hover. Body text stays
   neutral elsewhere; here the label sits on the section background, so use the
   accent colour, which is AA at this weight/size. */
.am-cta--secondary {
	background-color: transparent;
	border-color: var(--am-color-accent);
	color: var(--am-color-accent);
}

.am-cta--secondary:hover,
.am-cta--secondary:focus-visible {
	background-color: var(--am-color-accent);
	color: var(--am-color-on-accent);
}

/* Quiet — a text action with an underline affordance, no box. */
.am-cta--ghost {
	padding-inline: 0;
	background-color: transparent;
	border-color: transparent;
	color: var(--am-color-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.am-cta--ghost:hover,
.am-cta--ghost:focus-visible {
	background-color: transparent;
	color: var(--am-color-accent);
}

/* Larger hit area for the hero's primary action. */
.am-cta--lg {
	padding: var(--am-space-400) var(--am-space-600);
	font-size: var(--am-font-size-400);
}

.am-cta--block {
	display: flex;
	width: 100%;
}

/* A row of actions (primary + secondary), wrapping on small screens. */
.am-cta-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--am-space-400);
	align-items: center;
}

.am-cta-group--center {
	justify-content: center;
}