/**
 * EDIT CTA DESIGN HERE
 * Mobile-first premium editorial CTA.
 * SEO-safe reader preference CTA for recipe websites, food blogs, lifestyle magazines and article pages.
 * You can safely customize colors, spacing, borders and typography below.
 *
 * Typography note: this component intentionally sets NO font-family of its own.
 * The title, description and button inherit the active theme's fonts (the button
 * uses font-family: inherit so links/buttons don't fall back to a browser default).
 */

.sgps-cta {
	/* ---------------------------------------------------------------------
	 * Design tokens — safe to customize.
	 * ------------------------------------------------------------------- */
	--sgps-bg: #ffffff;
	--sgps-text: #1f1f1f;
	--sgps-muted: #5f5a55;
	--sgps-border: #e8ddd1;
	--sgps-border-strong: #d8c2ae;
	--sgps-accent: #28a45f;
	--sgps-radius: 12px;
	--sgps-shadow: 0 1px 2px rgba(28, 27, 26, 0.05), 0 10px 26px -14px rgba(28, 27, 26, 0.22);
	--sgps-button-bg: #20201d;
	--sgps-button-bg-hover: #11110f;
	--sgps-button-text: #ffffff;
	--sgps-icon-bg: #ffffff;
	--sgps-icon-border: #e7e0d6;
	--sgps-focus: rgba(31, 31, 31, 0.40);

	display: flex;
	flex-direction: column;
	gap: 10px;
	box-sizing: border-box;
	margin: 20px 0;
	padding: 14px;
	background: var(--sgps-bg);
	border: 1px solid var(--sgps-border-strong);
	border-radius: var(--sgps-radius);
	box-shadow: var(--sgps-shadow);
	color: var(--sgps-text);
	line-height: 1.5;
}

.sgps-cta *,
.sgps-cta *::before,
.sgps-cta *::after {
	box-sizing: border-box;
}

/* Content block: header (icon + title) and description -------------- */
.sgps-cta__main {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.sgps-cta__header {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

/* Icon badge (decorative, inline SVG only — never an <img>) ---------- */
.sgps-cta__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--sgps-icon-bg);
	border: 1px solid var(--sgps-icon-border);
	/* Decorative only — never intercept taps meant for the article or button. */
	pointer-events: none;
}

/* Subtle brand-green accent glow around the Google badge (derived from
   --sgps-accent #28a45f). This is the card's single accent detail — soft and
   editorial, never an "ad" treatment. */
.sgps-cta__icon--google {
	border-color: #d3e9dd;
	box-shadow: 0 0 0 3px rgba(40, 164, 95, 0.10);
}

.sgps-cta__icon--neutral {
	background: radial-gradient(circle at 32% 30%, #f6ede1, #fbf6ef);
	color: #b0593a;
}

.sgps-cta__icon svg,
.sgps-cta__icon-svg {
	display: block;
	width: 19px;
	height: 19px;
	pointer-events: none;
}

/* Title --------------------------------------------------------------- */
.sgps-cta__title {
	margin: 0;
	font-family: inherit; /* use the active theme font */
	font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.3125rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.2;
	color: var(--sgps-text);
}

/* Description --------------------------------------------------------- */
.sgps-cta__description {
	margin: 0;
	font-family: inherit; /* use the active theme font */
	font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
	line-height: 1.5;
	color: var(--sgps-muted);
}

/* Button -------------------------------------------------------------- */
.sgps-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	padding: 10px 20px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--sgps-button-bg);
	color: var(--sgps-button-text);
	font-family: inherit; /* links/buttons can fall back to a browser default; force the theme font */
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	/* No resting shadow — keep it flat and editorial, not ad-like. */
	box-shadow: none;
	transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 150ms ease, box-shadow 150ms ease;
}

/* Protect the button label from theme link styles. Some themes color content
   links (e.g. green), so without this the white button text can be overridden.
   Scoped strictly to .sgps-cta — global links are never affected. !important is
   limited to color + text-decoration, the two properties themes set on links
   with high specificity. */
.sgps-cta a.sgps-cta__button,
.sgps-cta a.sgps-cta__button:link,
.sgps-cta a.sgps-cta__button:visited,
.sgps-cta a.sgps-cta__button:hover,
.sgps-cta a.sgps-cta__button:focus,
.sgps-cta a.sgps-cta__button:active {
	color: var(--sgps-button-text) !important;
	text-decoration: none !important;
}

.sgps-cta__button:hover {
	background: var(--sgps-button-bg-hover);
	transform: translateY(-1px);
	box-shadow: 0 4px 10px -6px rgba(20, 20, 20, 0.30);
}

.sgps-cta__button:active {
	transform: translateY(0);
	box-shadow: none;
}

.sgps-cta__button:focus-visible {
	outline: 3px solid var(--sgps-focus);
	outline-offset: 2px;
}

/* Desktop: compact horizontal layout (content left, button right). */
@media (min-width: 620px) {
	.sgps-cta {
		flex-direction: row;
		align-items: center;
		gap: 18px;
		padding: 16px 20px;
	}

	.sgps-cta__main {
		flex: 1 1 auto;
	}

	.sgps-cta__button {
		width: auto;
		flex: none;
	}
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.sgps-cta__button {
		transition: none;
	}

	.sgps-cta__button:hover,
	.sgps-cta__button:active {
		transform: none;
	}
}