/**
 * Buyer's Guide signup CTA (FR-020)
 *
 * Renders inside the navy welcome hero on /products-services/ (logged-out
 * only). Sits below the hero subhead, separated by a thin divider line, so
 * it reads as the natural call-to-action on the welcome message rather
 * than a competing banner above the hero.
 *
 * Color palette matches Avada's global button theme (fusion_options):
 *   --awb-color4 / button_gradient_top_color:        #a0ce4e  (base)
 *   button_gradient_top_color_hover:                 #96c346  (hover)
 *   button_bevel_color:                              #54770F  (focus outline)
 *
 * Note on Avada specificity: the button is an <a> tag, and Avada's
 * default link rules use ID selectors (#wrapper #main a) that beat
 * class-only selectors. The doubled selectors below intentionally
 * raise specificity to win against Avada without resorting to !important
 * on every property.
 */

/* ========================================================================
   Layout — sits inside .welcome-banner-overlay, below the existing <p>
   ======================================================================== */

.rrhub-cta-banner.rrhub-cta-banner--in-hero {
	margin: 18px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	background: none;
	border-radius: 0;
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.rrhub-cta-banner--in-hero .rrhub-cta-banner__copy {
	color: rgba(255, 255, 255, 0.92);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
	flex: 1;
	min-width: 0;
}

/* ========================================================================
   Button — green palette pulled from Avada theme options
   ======================================================================== */

.rrhub-cta-banner__button,
#wrapper #main .rrhub-cta-banner__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #a0ce4e;
	color: #fff;
	padding: 10px 20px;
	border: 0;
	border-radius: 3px;
	text-decoration: none;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	flex-shrink: 0;
	line-height: 1.2;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
}

.rrhub-cta-banner__button:hover,
#wrapper #main .rrhub-cta-banner__button:hover {
	background: #96c346;
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}

.rrhub-cta-banner__button:focus-visible,
#wrapper #main .rrhub-cta-banner__button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ========================================================================
   Mobile — stack tagline above button on viewports <= 640px
   ======================================================================== */

@media (max-width: 640px) {
	.rrhub-cta-banner.rrhub-cta-banner--in-hero {
		flex-direction: column;
		align-items: stretch;
		padding-top: 14px;
		gap: 12px;
	}

	.rrhub-cta-banner--in-hero .rrhub-cta-banner__copy {
		font-size: 13.5px;
		text-align: center;
	}

	.rrhub-cta-banner__button,
	#wrapper #main .rrhub-cta-banner__button {
		padding: 11px 16px;
		font-size: 12.5px;
		width: 100%;
	}
}