/*
 * Kalon Bottom Form — wrapper styles
 *
 * Added 2026-04-11 by Worker 3 of the kalon-theme refactor (Part 2 of the
 * form pipeline cleanup). Mu-plugin: kalon-bottom-form.php.
 *
 * Mirrors the visual treatment of /contact/'s .kcf-section block (heading
 * + subtitle + form + contact strip) with parallel .kalon-bottom-form*
 * class names so it can be styled independently of the contact-form
 * stylesheet. The form chrome itself comes from kalon-form.css (already
 * enqueued by kalon-check-availability) — this file ONLY adds the section
 * wrapper, the heading, the subtitle, and the bottom contact strip.
 *
 * Constraints (per the worker brief):
 *   - .kalon-bottom-form* selectors only — no leakage outside the section.
 *   - NO background-image rules. FlyingPress's lazy-bg auto-detector
 *     misclassifies any element with a CSS background-image rule, and we
 *     learned that lesson the hard way in the Worker-1 form-fix session.
 *     Pure color/gradient/layout only.
 *   - Re-uses the design system tokens (--kalon-* CSS variables) defined
 *     in _kalon-design-system.php so colors stay in lockstep with the
 *     rest of the site.
 */

.kalon-bottom-form {
	padding: 72px 0;
	background: var(--kalon-bg-warm, #f7f4ef);
	border-top: 1px solid var(--kalon-border-faint, #eeebe6);
}

.kalon-bottom-form__inner {
	max-width: 640px;
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
}

.kalon-bottom-form__title {
	font-family: var(--kalon-font, 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	font-size: 32px;
	font-weight: 300;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--kalon-text-primary, #1a1a1a);
	margin: 0;
	text-wrap: balance;
}

.kalon-bottom-form__title::after {
	content: '';
	display: block;
	width: 80px;
	height: 3px;
	margin: 12px auto 0;
	background: linear-gradient(90deg, #00B3DB, #58D652);
	border-radius: 2px;
}

.kalon-bottom-form__subtitle {
	font-size: 15px;
	line-height: 1.6;
	color: var(--kalon-text-light, #6c6c6c);
	margin: 16px 0 32px;
	text-wrap: balance;
}

.kalon-bottom-form__form {
	text-align: left;
	margin: 0 auto;
}

.kalon-bottom-form__contact {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--kalon-border-faint, #eeebe6);
	flex-wrap: wrap;
}

.kalon-bottom-form__contact a {
	font-family: var(--kalon-font, 'Montserrat', sans-serif);
	font-size: 13px;
	font-weight: 400;
	color: var(--kalon-text-light, #6c6c6c);
	text-decoration: none;
	letter-spacing: .03em;
	transition: color .2s ease;
}

.kalon-bottom-form__contact a:hover {
	color: var(--kalon-cyan, #00B3DB);
}

@media (max-width: 600px) {
	.kalon-bottom-form {
		padding: 48px 0;
	}
	.kalon-bottom-form__title {
		font-size: 24px;
	}
	.kalon-bottom-form__subtitle {
		font-size: 14px;
		margin: 12px 0 24px;
	}
	.kalon-bottom-form__contact {
		gap: 14px;
		flex-direction: column;
		align-items: center;
	}
}