/**
 * Contact Us page — page chrome + Gravity Forms #2 styling.
 *
 * Two parts:
 *  1. .smr-contact-page  — the "CONTACT US" title + reading column, matching the
 *     compound profiles / single posts / legal pages (Source Serif 4 title,
 *     centred 820px column). Body class added in inc/contact-form.php.
 *  2. #gform_wrapper_2 / .smr-contact-form — the contact form itself.
 *
 * GF 2.5+ renders this form with its "Orbital" theme, which sets button/input
 * styling through per-form inline CSS variables at a higher specificity than an
 * external stylesheet can win on. So — exactly like the newsletter form #1 in
 * style.css — we override the real properties with #gform_wrapper_2 + !important
 * instead of trying to redefine Orbital's variables. Brand blue #1a6bca, the
 * site's Source Serif 4 + Plus Jakarta Sans fonts.
 */

:root,
.smr-contact-page,
.smr-contact-form {
	--smr-font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--smr-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
	--smr-ink: #11203a;
	--smr-muted: #6a7585;
	--smr-blue: #1a6bca;
	--smr-blue-dark: #1559a8;
	--smr-line: #d9dce3;
}

/* ============================================================
 * 1. Page chrome — title + reading column (mirrors legal.css)
 * ========================================================== */

.smr-contact-page .page-header,
.smr-contact-page .page-content {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.smr-contact-page .page-header {
	padding-top: 2.5rem;
	margin-bottom: 0.5rem;
	text-align: center;
}

.smr-contact-page .page-header .entry-title {
	font-family: var( --smr-font-serif );
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 1.15;
	color: var( --smr-ink );
	margin: 0;
}

.smr-contact-page .page-content {
	padding-bottom: 4rem;
	font-family: var( --smr-font-sans );
}

/* ============================================================
 * 2. The form wrapper + intro
 * ========================================================== */

.smr-contact-form {
	max-width: 640px;
	margin: 0 auto;
	padding: 1rem 0 0;
	font-family: var( --smr-font-sans );
}

.smr-contact-form .smr-contact-intro {
	font-family: var( --smr-font-sans );
	font-size: 1.05rem;
	line-height: 1.6;
	color: var( --smr-muted );
	text-align: center;
	margin: 0 auto 2.25rem;
	max-width: 540px;
}

/* The card the form sits in */
.smr-contact-form .gform_wrapper {
	background: #fff;
	border: 1px solid #eceef2;
	border-radius: 16px;
	padding: 2.25rem 2.25rem 2.5rem;
	box-shadow: 0 18px 40px -26px rgba( 20, 60, 120, 0.4 );
}

/* ============================================================
 * 3. Form internals — #gform_wrapper_2 + !important to beat Orbital
 * ========================================================== */

/* Everything in the form uses the site's body font */
#gform_wrapper_2,
#gform_wrapper_2 input,
#gform_wrapper_2 textarea,
#gform_wrapper_2 label,
#gform_wrapper_2 .gform_required_legend {
	font-family: var( --smr-font-sans ) !important;
}

/* Hide GF's own title/description (belt + braces with title=false) */
#gform_wrapper_2 .gform_heading {
	display: none !important;
}

/* Field stack — collapse Orbital's grid into a simple column */
#gform_wrapper_2 .gform_fields {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 1.25rem !important;
}

#gform_wrapper_2 .gfield {
	margin: 0 !important;
	padding: 0 !important;
}

/* Labels */
#gform_wrapper_2 .gfield_label {
	display: block !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	color: var( --smr-ink ) !important;
	margin: 0 0 0.5rem !important;
}

#gform_wrapper_2 .gfield_required {
	color: var( --smr-blue ) !important;
	margin-left: 0.3em !important; /* space between the label and "(Required)" */
}

/* Inputs + textarea */
#gform_wrapper_2 input[type="text"],
#gform_wrapper_2 input[type="email"],
#gform_wrapper_2 textarea {
	width: 100% !important;
	box-sizing: border-box !important;
	font-size: 1rem !important;
	line-height: 1.5 !important;
	color: var( --smr-ink ) !important;
	background: #fff !important;
	border: 1px solid var( --smr-line ) !important;
	border-radius: 10px !important;
	padding: 0.85rem 1rem !important;
	box-shadow: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#gform_wrapper_2 textarea {
	min-height: 150px !important;
	resize: vertical;
}

#gform_wrapper_2 input::placeholder,
#gform_wrapper_2 textarea::placeholder {
	color: #9aa1ad !important;
}

#gform_wrapper_2 input[type="text"]:focus,
#gform_wrapper_2 input[type="email"]:focus,
#gform_wrapper_2 textarea:focus {
	outline: none !important;
	border-color: var( --smr-blue ) !important;
	box-shadow: 0 0 0 3px rgba( 26, 107, 202, 0.15 ) !important;
}

/* Submit button — brand blue pill */
#gform_wrapper_2 .gform_footer {
	margin: 1.75rem 0 0 !important;
	padding: 0 !important;
}

#gform_wrapper_2 .gform_footer input[type="submit"],
#gform_wrapper_2 .gform_footer button,
#gform_wrapper_2 #gform_submit_button_2 {
	display: inline-block !important;
	width: auto !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	color: #fff !important;
	background: var( --smr-blue ) !important;
	background-color: var( --smr-blue ) !important;
	border: none !important;
	border-radius: 9999px !important;
	padding: 0.95rem 2.4rem !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

#gform_wrapper_2 .gform_footer input[type="submit"]:hover,
#gform_wrapper_2 .gform_footer input[type="submit"]:focus,
#gform_wrapper_2 .gform_footer button:hover {
	background: var( --smr-blue-dark ) !important;
	background-color: var( --smr-blue-dark ) !important;
	color: #fff !important;
}

/* Validation states */
#gform_wrapper_2 .gfield_error input[type="text"],
#gform_wrapper_2 .gfield_error input[type="email"],
#gform_wrapper_2 .gfield_error textarea {
	border-color: #d23b3b !important;
}

#gform_wrapper_2 .gfield_validation_message,
#gform_wrapper_2 .validation_message {
	font-size: 0.82rem !important;
	color: #d23b3b !important;
	margin-top: 0.4rem !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
}

#gform_wrapper_2 .gform_validation_errors {
	border: 1px solid #f3c6c6 !important;
	background: #fdf2f2 !important;
	border-radius: 10px !important;
	padding: 0.9rem 1.1rem !important;
	margin-bottom: 1.5rem !important;
	color: #b02a2a !important;
	box-shadow: none !important;
}

#gform_wrapper_2 .gform_required_legend {
	font-size: 0.8rem !important;
	color: var( --smr-muted ) !important;
	margin-bottom: 1.25rem !important;
}

/* Confirmation message after submit (AJAX swaps this into #gform_confirmation_wrapper_2) */
.smr-contact-form .gform_confirmation_message,
#gform_confirmation_wrapper_2 .gform_confirmation_message,
#gforms_confirmation_message_2 {
	font-family: var( --smr-font-sans );
	font-size: 1.05rem;
	line-height: 1.6;
	color: var( --smr-ink );
	text-align: center;
	background: #f3f7fc;
	border: 1px solid #dcebfb;
	border-radius: 14px;
	padding: 2rem 1.75rem;
}

@media ( max-width: 560px ) {
	.smr-contact-form .gform_wrapper {
		padding: 1.6rem 1.4rem 1.8rem;
	}
	.smr-contact-page .page-header .entry-title {
		font-size: 1.8rem;
	}
}

/* ============================================================
 * 4. Contact "Thank You" page — the Gravity Forms #2 redirect
 *    target (/contact-thank-you/). Body class smr-thank-you-page
 *    added in inc/contact-form.php. A centred confirmation card
 *    using the same tokens / card treatment as the form above.
 * ========================================================== */

/* The page's own "Thank You" <h1> is replaced by the card heading. */
.smr-thank-you-page .page-header {
	display: none;
}

.smr-thank-you-page .page-content {
	max-width: 820px;
	margin: 0 auto;
	padding: 3.5rem 1.25rem 5rem;
	font-family: var( --smr-font-sans );
}

.smr-thank-you {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
	background: #fff;
	border: 1px solid #eceef2;
	border-radius: 16px;
	padding: 3rem 2.25rem 3.25rem;
	box-shadow: 0 18px 40px -26px rgba( 20, 60, 120, 0.4 );
}

.smr-ty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-bottom: 1.5rem;
	color: #fff;
	background: var( --smr-blue );
	border-radius: 9999px;
}

.smr-ty-heading {
	font-family: var( --smr-font-serif );
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.15;
	color: var( --smr-ink );
	margin: 0 0 0.85rem;
}

.smr-ty-message {
	font-size: 1.05rem;
	line-height: 1.65;
	color: var( --smr-muted );
	margin: 0 auto 2rem;
	max-width: 440px;
}

.smr-ty-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	justify-content: center;
}

/* Scoped under .page-content to beat the theme's generic `.page-content a`
 * underline (which is more specific than a bare .smr-ty-btn). */
.smr-thank-you-page .page-content .smr-ty-btn {
	display: inline-block;
	font-family: var( --smr-font-sans );
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 9999px;
	padding: 0.85rem 1.9rem;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.smr-thank-you-page .page-content .smr-ty-btn:hover {
	text-decoration: none;
}

.smr-ty-btn-primary {
	color: #fff;
	background: var( --smr-blue );
	border: 1px solid var( --smr-blue );
}

.smr-ty-btn-primary:hover {
	background: var( --smr-blue-dark );
	border-color: var( --smr-blue-dark );
	color: #fff;
}

.smr-ty-btn-ghost {
	color: var( --smr-blue );
	background: #fff;
	border: 1px solid var( --smr-line );
}

.smr-ty-btn-ghost:hover {
	border-color: var( --smr-blue );
	color: var( --smr-blue-dark );
}

@media ( max-width: 560px ) {
	.smr-thank-you {
		padding: 2.25rem 1.4rem 2.5rem;
	}
	.smr-ty-heading {
		font-size: 1.6rem;
	}
	.smr-ty-actions {
		flex-direction: column;
	}
	.smr-ty-btn {
		width: 100%;
		box-sizing: border-box;
	}
}