/**
 * Blog -> community search call-to-action.
 *
 * Colours, fonts, spacing and the button treatment are all read from the
 * theme's own custom properties, so these blocks inherit any future change to
 * the palette or button style rather than drifting from it. Hex fallbacks are
 * only there for the block editor's iframe, where the presets are not always
 * resolved during a preview.
 */

.mls-cta {
	--mls-cta-primary: var( --wp--preset--color--primary, #2178a8 );
	--mls-cta-primary-dark: var( --wp--preset--color--primary-dark, #263b5f );
	--mls-cta-primary-light: var( --wp--preset--color--primary-light, #c0e0f9 );
	--mls-cta-accent: var( --wp--preset--color--secondary, #628931 );
	--mls-cta-base: var( --wp--preset--color--base, #ffffff );
	--mls-cta-radius: var( --wp--custom--button-border-radius, 6px );
	--mls-cta-display: var(
		--wp--preset--font-family--display,
		"Reddit Sans",
		system-ui,
		sans-serif
	);
	--mls-cta-brand: var( --wp--preset--font-family--brand, "Battambang", Georgia, serif );

	box-sizing: border-box;
	margin-block: clamp( 28px, 5vw, 44px );
}

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

/* -------------------------------------------------------------------------
 * Shared button
 * ---------------------------------------------------------------------- */

.mls-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 14px 26px;
	border: 0;
	border-radius: var( --mls-cta-radius );
	background-color: var( --mls-cta-accent );
	color: var( --mls-cta-base );
	font-family: var( --mls-cta-display );
	font-size: var( --wp--preset--font-size--small, 18px );
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.mls-cta__button:hover,
.mls-cta__button:focus-visible {
	background-color: var( --wp--preset--color--secondary-dark, #3a511f );
	color: var( --mls-cta-base );
	text-decoration: none;
}

.mls-cta__button:focus-visible {
	outline: 3px solid var( --mls-cta-primary-light );
	outline-offset: 2px;
}

.mls-cta__button--large {
	padding: 16px 34px;
	font-size: var( --wp--preset--font-size--medium, 20px );
}

.mls-cta__arrow {
	transition: transform 0.2s ease;
}

.mls-cta__button:hover .mls-cta__arrow {
	transform: translateX( 3px );
}

/* -------------------------------------------------------------------------
 * Variant: inline bar (mid-article)
 *
 * Deliberately quiet. It sits inside the reading flow, so it reads as an
 * aside rather than an advertisement: no reversed colours, no large type,
 * and an accent rule that ties it to the brand without shouting.
 * ---------------------------------------------------------------------- */

.mls-cta--inline-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp( 16px, 3vw, 28px );
	padding: clamp( 18px, 3vw, 24px ) clamp( 20px, 3vw, 28px );
	border-left: 5px solid var( --mls-cta-accent );
	border-radius: var( --mls-cta-radius );

	/*
	 * The article sits on #f8f8f8, so the theme's neutral-light is invisible
	 * here — the bar read as unstyled text with a stray green rule. A light
	 * tint of the brand blue separates it from the page and still stays quiet
	 * enough not to compete with the article.
	 */
	background-color: #eaf4fc;
	background-color: color-mix( in srgb, var( --mls-cta-primary-light ) 40%, #ffffff );
	box-shadow: inset 0 0 0 1px rgba( 33, 120, 168, 0.14 );
}

.mls-cta--inline-bar .mls-cta__body {
	min-width: 0;
}

.mls-cta__heading {
	margin: 0 0 4px;
	color: var( --mls-cta-primary-dark );
	font-family: var( --mls-cta-display );
	font-size: var( --wp--preset--font-size--medium, 20px );
	font-weight: 600;
	line-height: 1.3;
}

.mls-cta__text {
	margin: 0;
	color: var( --wp--preset--color--neutral-dark, #484946 );
	font-size: var( --wp--preset--font-size--x-small, 16px );
	line-height: 1.5;
}

@media ( max-width: 640px ) {
	.mls-cta--inline-bar {
		flex-direction: column;
		align-items: flex-start;
	}

	.mls-cta--inline-bar .mls-cta__button {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
 * Variant: panel (end of article)
 * ---------------------------------------------------------------------- */

.mls-cta--panel {
	padding: clamp( 28px, 5vw, 44px ) clamp( 24px, 5vw, 48px );
	border-radius: var( --mls-cta-radius );
	background-image: linear-gradient(
		135deg,
		var( --mls-cta-primary-dark ) 0%,
		var( --mls-cta-primary ) 100%
	);
	color: var( --mls-cta-base );
}

.mls-cta__panel-body {
	max-width: 620px;
	margin-inline: auto;
	text-align: center;
}

.mls-cta__panel-heading {
	margin: 0 0 10px;
	color: var( --mls-cta-base );
	font-family: var( --mls-cta-brand );
	font-size: clamp( 26px, 4vw, var( --wp--preset--font-size--max-36, 36px ) );
	font-weight: 700;
	line-height: 1.2;
}

.mls-cta__panel-text {
	margin: 0 0 22px;
	color: var( --mls-cta-primary-light );
	font-size: var( --wp--preset--font-size--small, 18px );
	line-height: 1.55;
}

/* Search form ------------------------------------------------------------ */

.mls-cta__form {
	display: flex;
	gap: 10px;
	margin: 0 auto;
	max-width: 480px;
}

.mls-cta__field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 14px 18px;
	border: 2px solid transparent;
	border-radius: var( --mls-cta-radius );
	background-color: var( --mls-cta-base );
	color: var( --wp--preset--color--contrast, #000000 );
	font-family: var( --mls-cta-display );
	font-size: var( --wp--preset--font-size--x-small, 16px );
	line-height: 1.2;
}

.mls-cta__field::placeholder {
	color: var( --wp--preset--color--neutral-dark, #484946 );
	opacity: 1;
}

.mls-cta__field:focus {
	border-color: var( --mls-cta-primary-light );
	outline: none;
}

/* Proof points ----------------------------------------------------------- */

.mls-cta__proof {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 22px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	color: var( --mls-cta-primary-light );
	font-family: var( --mls-cta-display );
	font-size: var( --wp--preset--font-size--max-14, 14px );
	line-height: 1.4;
}

.mls-cta__proof li {
	margin: 0;
	padding-left: 20px;
	position: relative;
}

.mls-cta__proof li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 10px;
	height: 6px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( -45deg );
}

@media ( max-width: 560px ) {
	.mls-cta__form {
		flex-direction: column;
	}

	.mls-cta__form .mls-cta__button {
		width: 100%;
	}

	.mls-cta__proof {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		gap: 8px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.mls-cta__button,
	.mls-cta__arrow {
		transition: none;
	}
}

/*
 * The site's own ?print= view is excluded server-side, but a plain browser
 * Ctrl+P would still print the CTAs — the end panel as a heavy ink-block
 * gradient. A promotion has no business on paper.
 */
@media print {
	.mls-cta {
		display: none;
	}
}