:root {
    --iia-primary: #392aed;
    --iia-secondary: #cc4e00;
	--iia-grey: #595959;
}

:root,
.iia-cta {
	--cta-accent: var(--iia-primary);
	--cta-button-fallback-text-color: #fff;

	--cta-background-color: hsl(from var(--cta-accent) h s 98%);
	--cta-border-color: hsl(from var(--cta-accent) h s 80%);
	--cta-text-color: #111;

	--cta-button-background-color: hsl(from var(--cta-accent) h s 60%);
	--cta-button-border-color: hsl(from var(--cta-accent) h s 97%);
	--cta-button-text-color: var(--cta-button-fallback-text-color);
}

.iia-cta--secondary {
	--cta-accent: var(--iia-secondary);
	--cta-button-fallback-text-color: #111;
}

.iia-cta--grey {
	--cta-accent: var(--iia-grey);
	--cta-button-fallback-text-color: #111;

	--cta-button-background-color: hsl(from var(--iia-secondary) h s 60%);
	--cta-button-border-color: hsl(from var(--iia-secondary) h s 97%);
	--cta-button-text-color: var(--cta-button-fallback-text-color);
}

@supports (color: contrast-color(white)) {
	:root,
	.iia-cta {
		--cta-button-text-color: contrast-color(var(--cta-button-background-color));
	}
}
.iia-cta {
	box-sizing: border-box;
	padding: clamp(1.25rem, 4vw, 2.5rem);
	margin-block: 2rem;
	background: var(--cta-background-color);
	border: 1px solid var(--cta-border-color);
	color: var(--cta-text-color);
	border-radius: 0.5rem;

	h2 {
		margin-block: 0 0.75rem;
		color: inherit;
	}

	p {
		margin-block: 0 1.25rem;
	}
}

.iia-cta--intro { padding: 0; border: 0; background: transparent; }
.iia-cta-footer { max-width: 1200px; margin-inline: auto; padding-inline: clamp(1rem, 5vw, 3rem); }

.iia-cta .wp-block-button__link,
.site-header .iia-header-cta > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	max-width: 100%;
	padding: 0.75rem 1rem;
	background: var(--cta-button-background-color);
	border: 2px solid var(--cta-button-border-color);
	color: var(--cta-button-text-color);
	border-radius: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	overflow-wrap: anywhere;

	&:hover {
		--btn-hover-color: hsl(from var(--cta-button-background-color) h s 85%);
		background: var(--btn-hover-color);
		border-color: hsl(from var(--cta-button-border-color) h s 50%);
		color: #111;
	}
	&:focus-visible {
		outline: 2px solid var(--cta-accent);
		outline-offset: 3px;
	}
}

.site-header .iia-header-cta { margin-block: 0.5rem; }

@media (max-width: 600px) {
	.iia-cta .wp-block-buttons,
	.iia-cta .wp-block-button,
	.iia-cta .wp-block-button__link { width: 100%; }
}