/* ==========================================================================
   "Compare every Seeking Alpha deal" callout (roc_sa_hub_callout() in
   inc/seeking-alpha-discounts/seeking-alpha-discounts.php), linking to /seeking-alpha-discounts/ from
   the partner discounts page and the Seeking Alpha offer pages. Loaded only where it prints, which is
   only where the site chrome renders (css/tokens.css). Two-class selectors beat the partner pages'
   own `.roc-pd-page svg/a` rules and the base layer's `.roc-kit a`; style.css strips link underlines
   with !important, so the link's colour and decoration use it too.
   ========================================================================== */

.roc-sa-callout.roc-sa-callout {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin: 0 0 24px;
	padding: 14px 16px 14px 14px;
	border: 1px solid var(--roc-blue-200);
	border-radius: var(--roc-radius-lg);
	background: linear-gradient(100deg, var(--roc-blue-50), var(--roc-white) 72%);
	box-shadow: var(--roc-shadow-sm);
	color: var(--roc-slate-700);
	font-family: var(--roc-font-body);
}

.roc-sa-callout .roc-sa-callout__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--roc-radius-md);
	background: var(--roc-gradient);
	color: var(--roc-white);
}

.roc-sa-callout .roc-icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
}

.roc-sa-callout .roc-sa-callout__text {
	flex: 1 1 260px;
	margin: 0;
	color: var(--roc-slate-700);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.roc-sa-callout .roc-sa-callout__text strong {
	color: var(--roc-slate-900);
	font-weight: 700;
}

.roc-sa-callout .roc-sa-callout__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 16px;
	border-radius: 10px;
	background: var(--roc-blue-600);
	color: var(--roc-white) !important;
	font: 600 0.9375rem / 1.2 var(--roc-font-body);
	text-decoration: none !important;
	white-space: nowrap;
	transition: background-color var(--roc-fast) var(--roc-ease);
}

.roc-sa-callout .roc-sa-callout__link:hover {
	background: var(--roc-blue-800);
	color: var(--roc-white) !important;
}

.roc-sa-callout .roc-sa-callout__link .roc-icon {
	width: 16px;
	height: 16px;
}

@media (prefers-reduced-motion: no-preference) {
	.roc-sa-callout .roc-sa-callout__link .roc-icon {
		transition: translate var(--roc-base) var(--roc-ease-out);
	}

	.roc-sa-callout .roc-sa-callout__link:hover .roc-icon {
		translate: 3px 0;
	}
}

@media (forced-colors: active) {
	.roc-sa-callout .roc-sa-callout__link {
		border: 1px solid LinkText;
	}
}