/**
 * JMS Smart CTA — front-end styles.
 *
 * Every selector is scoped under .jms-smart-cta so the plugin never restyles the theme.
 * Colours come from custom properties, which a theme can override without touching CSS.
 */

.jms-smart-cta {
	/* Standalone defaults, used when the theme exposes no palette. */
	--jms-cta-bg: #f6f7f7;
	--jms-cta-fg: #1e1e1e;
	--jms-cta-muted: #50575e;
	--jms-cta-accent: #2271b1;
	--jms-cta-accent-fg: #fff;
	--jms-cta-radius: 8px;
	--jms-cta-gap: 1rem;
	--jms-cta-pad: 1.25rem;

	box-sizing: border-box;
	margin: 1.5rem 0;
	padding: var(--jms-cta-pad);
	border-radius: var(--jms-cta-radius);
	background: var(--jms-cta-bg);
	color: var(--jms-cta-fg);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
}

/*
 * Theme aware mode.
 *
 * Two palettes are read, in order. Block themes publish theirs as
 * --wp--preset--color--*; Elementor publishes its global kit as --e-global-color-*, which
 * is what classic themes like Hello Elementor rely on. Slug names differ between themes,
 * so each value walks a chain and only falls back to the plugin default when nothing
 * else exists.
 */
.jms-smart-cta--theme {
	--jms-cta-surface: var(--wp--preset--color--base, var(--wp--preset--color--background, var(--wp--preset--color--light, #fff)));
	--jms-cta-accent: var(
		--wp--preset--color--accent,
		var(--wp--preset--color--primary, var(--e-global-color-accent, var(--e-global-color-primary, #2271b1)))
	);
	--jms-cta-accent-fg: var(--wp--preset--color--base, #fff);

	/* The theme decides the text colour; inheriting is more faithful than guessing. */
	color: inherit;

	/*
	 * A CTA that repeats the page background disappears into it. Mixing a little of the
	 * inherited text colour into the background keeps it visible on light and dark
	 * themes alike, without hardcoding anything.
	 */
	background: var(--jms-cta-surface);
	background: color-mix(in srgb, currentColor 7%, var(--jms-cta-surface));
}

.jms-smart-cta--theme .jms-smart-cta__title,
.jms-smart-cta--theme .jms-smart-cta__text {
	color: inherit;
}

.jms-smart-cta--theme .jms-smart-cta__text {
	opacity: 0.85;
}

.jms-smart-cta *,
.jms-smart-cta *::before,
.jms-smart-cta *::after {
	box-sizing: inherit;
}

.jms-smart-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jms-cta-gap);
}

.jms-smart-cta__body {
	flex: 1 1 16rem;
	min-width: 0;
}

.jms-smart-cta__title {
	margin: 0 0 0.35em;
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.3;
}

.jms-smart-cta__text {
	margin: 0;
	color: var(--jms-cta-muted);
}

.jms-smart-cta__text > p {
	margin: 0 0 0.5em;
}

.jms-smart-cta__text > p:last-child {
	margin-bottom: 0;
}

.jms-smart-cta__media {
	flex: 0 0 auto;
	max-width: 100%;
}

.jms-smart-cta__image {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: calc(var(--jms-cta-radius) - 2px);
}

.jms-smart-cta__actions {
	flex: 0 0 auto;
}

.jms-smart-cta__button {
	display: inline-block;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

/*
 * Colours and shape are only imposed in standalone mode. In theme mode the button also
 * carries the `wp-element-button` class, so the theme's own button styles apply and the
 * CTA looks like every other button on the site.
 */
.jms-smart-cta:not(.jms-smart-cta--theme) .jms-smart-cta__button {
	padding: 0.7em 1.4em;
	border: 1px solid transparent;
	border-radius: calc(var(--jms-cta-radius) - 2px);
	background: var(--jms-cta-accent);
	color: var(--jms-cta-accent-fg);
	font-weight: 600;
	line-height: 1.2;
}

.jms-smart-cta:not(.jms-smart-cta--theme) .jms-smart-cta__button:hover,
.jms-smart-cta:not(.jms-smart-cta--theme) .jms-smart-cta__button:focus {
	background: color-mix(in srgb, var(--jms-cta-accent) 85%, #000);
	color: var(--jms-cta-accent-fg);
	text-decoration: none;
}

/*
 * Classic themes (Hello Elementor and friends) do not style `wp-element-button`, so the
 * button would be a bare link. It gets the plugin's shape painted with the palette read
 * above — the site's own accent colour, not a colour invented here.
 */
.jms-smart-cta--theme .jms-smart-cta__button:not(.wp-element-button) {
	padding: 0.7em 1.4em;
	border: 1px solid transparent;
	border-radius: calc(var(--jms-cta-radius) - 2px);
	background: var(--jms-cta-accent);
	color: var(--jms-cta-accent-fg);
	font-weight: 600;
	line-height: 1.2;
}

.jms-smart-cta--theme .jms-smart-cta__button:not(.wp-element-button):hover,
.jms-smart-cta--theme .jms-smart-cta__button:not(.wp-element-button):focus {
	background: color-mix(in srgb, var(--jms-cta-accent) 85%, #000);
	color: var(--jms-cta-accent-fg);
	text-decoration: none;
}

/* Focus must stay visible for keyboard users (WCAG 2.4.7). */
.jms-smart-cta__button:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/*
 * Per-CTA colours.
 *
 * The values arrive as custom properties in the element's style attribute; these rules
 * only decide which slots they take over. Two classes give them precedence over the
 * theme mode above, which is enough — nothing here is marked important, so a theme can
 * still win with a more specific rule.
 */
.jms-smart-cta.jms-smart-cta--custom-bg {
	background: var(--jms-cta-bg);
}

.jms-smart-cta.jms-smart-cta--custom-fg,
.jms-smart-cta.jms-smart-cta--custom-fg .jms-smart-cta__title,
.jms-smart-cta.jms-smart-cta--custom-fg .jms-smart-cta__text {
	color: var(--jms-cta-fg);
}

.jms-smart-cta.jms-smart-cta--custom-accent .jms-smart-cta__button {
	border-color: transparent;
	background: var(--jms-cta-accent);
}

.jms-smart-cta.jms-smart-cta--custom-accent .jms-smart-cta__button:hover,
.jms-smart-cta.jms-smart-cta--custom-accent .jms-smart-cta__button:focus {
	background: color-mix(in srgb, var(--jms-cta-accent) 85%, #000);
}

.jms-smart-cta.jms-smart-cta--custom-accent-fg .jms-smart-cta__button,
.jms-smart-cta.jms-smart-cta--custom-accent-fg .jms-smart-cta__button:hover,
.jms-smart-cta.jms-smart-cta--custom-accent-fg .jms-smart-cta__button:focus {
	color: var(--jms-cta-accent-fg);
}

/* A custom button colour also needs shape, in case the theme provided none. */
.jms-smart-cta.jms-smart-cta--custom-accent .jms-smart-cta__button:not(.wp-element-button) {
	padding: 0.7em 1.4em;
	border-radius: calc(var(--jms-cta-radius) - 2px);
	font-weight: 600;
	line-height: 1.2;
}

/* Card: image on top, content stacked. */
.jms-smart-cta--card .jms-smart-cta__inner {
	flex-direction: column;
	align-items: flex-start;
}

.jms-smart-cta--card .jms-smart-cta__media {
	width: 100%;
	margin-bottom: var(--jms-cta-gap);
}

.jms-smart-cta--card .jms-smart-cta__image {
	width: 100%;
}

/* Compact: single row, smaller paddings. */
.jms-smart-cta--compact {
	--jms-cta-pad: 0.85rem 1rem;

	font-size: 0.95rem;
}

.jms-smart-cta--compact .jms-smart-cta__title {
	font-size: 1em;
	margin-bottom: 0.15em;
}

/* Horizontal: media beside a content column. */
.jms-smart-cta--horizontal .jms-smart-cta__inner {
	flex-wrap: nowrap;
	align-items: stretch;
}

.jms-smart-cta--horizontal .jms-smart-cta__media {
	flex: 0 0 clamp(6rem, 25%, 12rem);
}

.jms-smart-cta--horizontal .jms-smart-cta__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jms-smart-cta--horizontal .jms-smart-cta__content {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jms-cta-gap);
	min-width: 0;
}

/* Full width: centered, spanning the content column. */
.jms-smart-cta--full-width {
	--jms-cta-pad: 2rem 1.5rem;
}

.jms-smart-cta--full-width .jms-smart-cta__inner {
	flex-direction: column;
	text-align: center;
}

.jms-smart-cta--full-width .jms-smart-cta__body {
	flex-basis: 100%;
}

.jms-smart-cta--full-width .jms-smart-cta__title {
	font-size: 1.5em;
}

@media (max-width: 600px) {
	.jms-smart-cta__inner,
	.jms-smart-cta--horizontal .jms-smart-cta__inner {
		flex-direction: column;
		flex-wrap: wrap;
		align-items: stretch;
		text-align: left;
	}

	.jms-smart-cta--horizontal .jms-smart-cta__media {
		flex-basis: auto;
	}

	.jms-smart-cta__button {
		display: block;
		width: 100%;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.jms-smart-cta__button {
		transition: background-color 0.15s ease-in-out;
	}
}

/*
 * Dark mode applies to standalone CTAs only. In theme mode the colours already come from
 * the theme, which is the authority on whether the site is dark.
 */
@media (prefers-color-scheme: dark) {
	.jms-smart-cta:not(.jms-smart-cta--theme) {
		--jms-cta-bg: #1f2225;
		--jms-cta-fg: #f0f0f1;
		--jms-cta-muted: #c3c4c7;
		--jms-cta-accent: #4f94d4;
		--jms-cta-accent-fg: #10141a;
	}
}