/**
 * Contact page styles — matches contact_rcc_industrial_pivot/code.html.
 * Loaded only on the Contact page (see functions.php).
 *
 * The actual page content (hero, logistics/service-area info, inquiry form)
 * lives in the Page's own post content (see patterns/contact-content.php)
 * so it stays editable through the normal WordPress editor — this
 * stylesheet only styles the classNames those blocks carry.
 *
 * The inquiry form is the one part of this page that is raw HTML (a single
 * Custom HTML block) rather than semantic blocks: WordPress core has no
 * form-building blocks, so a real <form> with named inputs is the only way
 * to submit anywhere — see rcc_handle_contact_form_submission() in
 * functions.php for the native admin-post.php handler it posts to.
 */

.rcc-contact-container {
	max-width: var(--wp--custom--container--max);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--lg);
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */
.rcc-contact-hero {
	padding-block: var(--wp--preset--spacing--xl);
	border-bottom: 1px solid var(--wp--preset--color--outline-variant);
}
.rcc-contact-hero > * {
	margin: 0;
}
.rcc-contact-hero__eyebrow {
	margin-bottom: var(--wp--preset--spacing--xs);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--label-caps);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.rcc-contact-hero__title {
	max-width: 48rem;
}
.rcc-contact-hero__desc {
	max-width: 42rem;
	margin-top: var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--on-surface-variant);
}

/* ---------------------------------------------------------------------- */
/* Main grid: contact info (narrow) + inquiry form (wide)                  */
/* ---------------------------------------------------------------------- */
.rcc-contact-section {
	padding-block: var(--wp--preset--spacing--xl);
}
.rcc-contact-grid {
	display: grid;
	/* minmax(0, 1fr), not a bare 1fr — see the same note in page-ordering.css. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--xl);
}
.rcc-contact-grid > * {
	margin: 0;
}
@media (min-width: 1024px) {
	.rcc-contact-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		/*
		 * stretch (the default): the left column opts back out via
		 * align-self: start below, so it always renders at its own natural
		 * height, unaffected either way. The form panel is naturally
		 * shorter than the left column's two cards combined, so stretch is
		 * what makes its bottom land exactly on the bottom of the Service
		 * Footprint card, instead of stopping short of it.
		 */
		align-items: stretch;
	}
	.rcc-contact-info {
		/* Pinned to its own natural height regardless of the row's height,
		   so the two cards and their spacing never change. */
		align-self: start;
	}
}

.rcc-contact-info {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--lg);
}
.rcc-contact-info > * {
	margin: 0;
}

.rcc-contact-card {
	background-color: var(--wp--preset--color--surface-container-lowest);
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--radius--default);
	padding: var(--wp--preset--spacing--lg);
}
.rcc-contact-card > * {
	margin: 0;
}
.rcc-contact-card__eyebrow {
	margin-bottom: var(--wp--preset--spacing--md);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--label-caps);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--on-surface-variant);
}
.rcc-contact-card__image {
	margin-bottom: var(--wp--preset--spacing--md);
	border-radius: var(--wp--custom--radius--default);
	overflow: hidden;
}
.rcc-contact-card__image img {
	display: block;
	width: 100%;
	height: 192px;
	object-fit: cover;
}
.rcc-contact-card h3 {
	margin-bottom: var(--wp--preset--spacing--xs);
}
.rcc-contact-card__desc {
	margin-bottom: var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--on-surface-variant);
}
.rcc-contact-card__phone {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
}
.rcc-contact-card__phone .material-symbols-outlined {
	font-size: 18px;
	color: var(--wp--preset--color--primary);
}
.rcc-contact-card__phone a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.rcc-contact-card__phone a:hover {
	text-decoration: underline;
}

.rcc-contact-card__map {
	margin-top: var(--wp--preset--spacing--lg);
	padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg);
	background-color: var(--wp--preset--color--surface-container-high);
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--radius--default);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--wp--preset--spacing--xs);
}
.rcc-contact-card__map .material-symbols-outlined {
	font-size: 40px;
	color: var(--wp--preset--color--primary);
	font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
.rcc-contact-card__map-label {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--label-caps);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--on-surface);
}

/* ---------------------------------------------------------------------- */
/* Inquiry form panel                                                      */
/* ---------------------------------------------------------------------- */
.rcc-contact-form-panel {
	background-color: var(--wp--preset--color--surface-container-lowest);
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--radius--default);
	padding: var(--wp--preset--spacing--lg);
	/*
	 * Subtle dot-grid texture, matching the Stitch reference's
	 * .technical-grid — reproduced here in plain CSS (no image asset)
	 * since it's fully described by two declarations.
	 */
	background-image: radial-gradient(circle, var(--wp--preset--color--outline-variant) 1px, transparent 1px);
	background-size: 32px 32px;
}
@media (min-width: 768px) {
	.rcc-contact-form-panel {
		padding: var(--wp--preset--spacing--xl);
	}
}
.rcc-contact-form-panel > * {
	margin: 0;
}
.rcc-contact-form-panel h2 {
	margin-bottom: var(--wp--preset--spacing--sm);
}
.rcc-contact-form-panel__desc {
	margin-bottom: var(--wp--preset--spacing--xl);
	color: var(--wp--preset--color--on-surface-variant);
}
@media (min-width: 1024px) {
	/*
	 * When align-self: stretch (see .rcc-contact-grid) gives this panel
	 * extra height to reach the bottom of the Service Footprint card, that
	 * extra space is absorbed by the Products of Interest textarea growing
	 * — not by blank space appearing below the button — so the fields,
	 * their spacing and the Submit button are otherwise untouched.
	 */
	.rcc-contact-form-panel,
	.rcc-contact-form-panel .rcc-contact-form {
		display: flex;
		flex-direction: column;
	}
	.rcc-contact-form-panel .rcc-contact-form {
		flex: 1;
	}
	.rcc-contact-form-panel .rcc-contact-form__field:has(textarea) {
		flex: 1;
	}
	.rcc-contact-form-panel .rcc-contact-form__field:has(textarea) textarea {
		flex: 1;
		min-height: 100%;
	}
}

/* Success / error states: hidden by default, toggled by page-contact.js
   after a redirect back from the admin-post.php handler. */
.rcc-contact-form-success,
.rcc-contact-form-error {
	display: none;
	align-items: center;
	gap: var(--wp--preset--spacing--md);
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
	margin-bottom: var(--wp--preset--spacing--lg) !important;
	border-radius: var(--wp--custom--radius--default);
}
.rcc-contact-form-success.is-visible,
.rcc-contact-form-error.is-visible {
	display: flex;
}
.rcc-contact-form-success {
	background-color: var(--wp--preset--color--primary-fixed);
	color: var(--wp--preset--color--on-primary-fixed);
}
.rcc-contact-form-success .material-symbols-outlined {
	color: var(--wp--preset--color--on-primary-fixed-variant);
}
.rcc-contact-form-error {
	background-color: var(--wp--preset--color--error-container);
	color: var(--wp--preset--color--on-error-container);
}
.rcc-contact-form-error .material-symbols-outlined {
	color: var(--wp--preset--color--error);
}
.rcc-contact-form-success p,
.rcc-contact-form-error p {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-sm);
}
.rcc-contact-form-success a,
.rcc-contact-form-error a {
	color: inherit;
	text-decoration: underline;
}
/* Hidden while JS decides whether to show the form or a result state, so
   there's no flash of the form before the redirect state is evaluated. */
.rcc-contact-form.is-hidden {
	display: none;
}

.rcc-contact-form__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}
.rcc-contact-form__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--lg);
	margin-bottom: var(--wp--preset--spacing--lg);
}
@media (min-width: 768px) {
	.rcc-contact-form__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.rcc-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	margin-bottom: var(--wp--preset--spacing--lg);
}
.rcc-contact-form__row .rcc-contact-form__field {
	margin-bottom: 0;
}
.rcc-contact-form__field label {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--label-caps);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--on-surface-variant);
}
.rcc-contact-form__field input,
.rcc-contact-form__field select,
.rcc-contact-form__field textarea {
	width: 100%;
	box-sizing: border-box;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--radius--default);
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-md);
	color: var(--wp--preset--color--on-surface);
}
.rcc-contact-form__field input:focus,
.rcc-contact-form__field select:focus,
.rcc-contact-form__field textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
}
.rcc-contact-form__field textarea {
	resize: vertical;
}
.rcc-contact-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--md);
}
.rcc-contact-form__submit {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	border: none;
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl);
	border-radius: var(--wp--custom--radius--xl);
	/*
	 * JetBrains Mono, not Inter: matches the font-family every other
	 * button site-wide uses (the theme.json button default). Size stays
	 * body-md (16px) — this is the form's primary submit action and was
	 * already intentionally larger than the sitewide button default, not
	 * something this normalization pass should flatten.
	 */
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--body-md);
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.rcc-contact-form__submit:hover {
	background-color: var(--wp--preset--color--primary-container);
}
.rcc-contact-form__submit:disabled {
	opacity: 0.7;
	cursor: default;
}
.rcc-contact-form__secure {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--outline);
}
.rcc-contact-form__secure .material-symbols-outlined {
	font-size: 16px;
}

/* ---------------------------------------------------------------------- */
/* Bottom CTA                                                              */
/* ---------------------------------------------------------------------- */
.rcc-contact-cta {
	background-color: var(--wp--preset--color--on-background);
	color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--default);
	padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg);
	margin-bottom: var(--wp--preset--spacing--xl);
	text-align: center;
}
.rcc-contact-cta > * {
	margin: 0 auto;
	max-width: 40rem;
}
.rcc-contact-cta h3 {
	color: var(--wp--preset--color--surface);
	margin-bottom: var(--wp--preset--spacing--sm) !important;
}
/*
 * Same divider technique as the Ordering page's To Order panel
 * (.rcc-ordering-mail-panel h3::after): a short, thin accent rule
 * centred directly beneath the heading, same size/colour/spacing.
 */
.rcc-contact-cta h3::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin: var(--wp--preset--spacing--xs) auto 0;
	background-color: var(--wp--preset--color--primary-fixed);
}
/*
 * "RCC Repackager" — the accent-coloured second half of the heading (see
 * build report: needs the heading's markup to wrap that phrase in this
 * class, which isn't yet on the already-published page).
 */
.rcc-contact-cta__accent {
	color: var(--wp--preset--color--primary-fixed);
}
.rcc-contact-cta__desc {
	color: var(--wp--preset--color--outline-variant);
}