/**
 * Cherry Tree — CTA module styles
 *
 * Baseline boxed-button styling for the call-to-action blocks injected into
 * articles by Frontend\CTA_Injector. Deliberately minimal for v1.0: a bordered
 * card with a headline, an optional line, and a solid action button. Every
 * colour is a CSS custom property with a neutral fallback, so a theme can
 * re-skin the CTA by redefining the `--ct-cta-*` variables.
 *
 * @package Seresa\CherryTree
 * @since   4.2.0
 * @since   4.2.1 Add a visible keyboard focus ring (`:focus-visible` outline) to the action button.
 *
 * Last Audited: Sep 08 2026 19:54
 */

.cherry-tree-cta {
	margin: 2em 0;
	padding: 1.5em 1.75em;
	border: 1px solid var( --ct-cta-border, #e2e2e6 );
	border-radius: 10px;
	background: var( --ct-cta-bg, #f7f7f9 );
}

.cherry-tree-cta__headline {
	margin: 0 0 0.4em;
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.3;
	color: var( --ct-cta-headline, inherit );
}

.cherry-tree-cta__body {
	margin: 0 0 1em;
	line-height: 1.55;
	opacity: 0.85;
}

.cherry-tree-cta__action {
	margin: 0;
}

.cherry-tree-cta__button {
	display: inline-block;
	padding: 0.7em 1.4em;
	border-radius: 8px;
	background: var( --ct-cta-button-bg, #6366f1 );
	color: var( --ct-cta-button-color, #ffffff );
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.cherry-tree-cta__button:hover,
.cherry-tree-cta__button:focus {
	background: var( --ct-cta-button-bg-hover, #4f46e5 );
	color: var( --ct-cta-button-color, #ffffff );
}

.cherry-tree-cta__button:focus-visible {
	outline: 2px solid var( --ct-cta-focus, #4f46e5 );
	outline-offset: 2px;
}

@media ( prefers-color-scheme: dark ) {

	.cherry-tree-cta {
		border-color: var( --ct-cta-border, #33343a );
		background: var( --ct-cta-bg, #1c1d22 );
	}
}