/* FC-020 — Contact page (page-templates/contact.php) */

/*
 * Scope note: this file is enqueued only when the contact page template is
 * active (see fcsu_contact_assets() in inc/contact.php). Every selector still
 * stays under .fcsu-contact so nothing can leak into WooCommerce, blog or
 * corporate surfaces if the enqueue condition is ever widened. The contact
 * form rules deliberately target generic form markup, because the form comes
 * from whichever plugin the site uses — they stay inside .fcsu-contact so
 * forms.css and the plugin's own styling are untouched everywhere else.
 *
 * Design system:
 * - Cream page ground, white surfaces, one neutral hairline border, large
 *   radius and a single soft shadow token. No accent borders on white.
 * - Brand green carries hierarchy: the H1, section headings, the closing band
 *   and the primary buttons.
 * - Copper is the interaction colour: eyebrow, labels, icons, hover, focus.
 * - Sections are sized by content density, not padded out to one width:
 *   the action row and location block use the container, the reading
 *   sections (form, FAQ) keep a narrower centred measure.
 *
 * Colours come from tokens.css only. Per ADR-010 the copper accent never
 * touches the page H1.
 */

.fcsu-contact {
	/* Reading measure for the form and FAQ surfaces. */
	--fcsu-contact-form-width: 1040px;
	--fcsu-contact-surface-padding: var(--fc-space-4);
	--fcsu-contact-shadow: 0 1px 2px var(--fc-border);

	padding-block: var(--fc-space-4) var(--fc-space-6);
}

.fcsu-contact__article {
	display: flex;
	flex-direction: column;
	gap: var(--fc-space-5);
	margin: 0;
}

/* ---------------------------------------------------------------------
 * Inner page head: breadcrumb -> eyebrow -> H1 -> intro (ADR-010).
 * ------------------------------------------------------------------- */

.fcsu-contact__head {
	max-width: var(--fc-container-content, 800px);
	text-align: left;
}

.fcsu-contact .fcsu-page-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fc-space-1);
	align-items: center;
	margin: 0 0 var(--fc-space-2);
	color: var(--fc-text-muted);
	font-size: 0.86rem;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.fcsu-contact .fcsu-page-breadcrumb a {
	color: var(--fc-text);
	font-weight: 700;
	text-decoration: none;
}

.fcsu-contact .fcsu-page-breadcrumb a:hover {
	text-decoration: underline;
}

.fcsu-contact__breadcrumb-separator {
	color: var(--fc-brand-accent);
}

/*
 * The eyebrow duplicated the page-title hierarchy, so the contact head keeps
 * the breadcrumb and the H1 as its only labels — the same shape as the Blog
 * archive reference. The markup stays in the template for compatibility; the
 * label is presentation, and presentation is what hides it.
 */
.fcsu-contact__eyebrow {
	display: none;
}

/* Global inner page H1 standard (ADR-010). */
.fcsu-contact__title {
	margin: 0;
	color: var(--fc-brand-primary);
	font-size: 3rem;
	line-height: 1.05;
	text-align: left;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.fcsu-contact__intro {
	margin: var(--fc-space-3) 0 0;
	color: var(--fc-text-muted);
	font-size: 1.08rem;
	line-height: 1.7;
}

.fcsu-contact__intro > :first-child {
	margin-top: 0;
}

.fcsu-contact__intro > :last-child {
	margin-bottom: 0;
}

.fcsu-contact__setup-note {
	margin: 0;
	padding: var(--fc-space-3);
	border: 1px dashed var(--fc-border);
	border-radius: var(--fc-radius-md);
	background: var(--fc-surface);
	color: var(--fc-text-muted);
	font-size: 0.92rem;
	line-height: 1.6;
}

/* ---------------------------------------------------------------------
 * Shared surface and heading system.
 * ------------------------------------------------------------------- */

.fcsu-contact__location-grid,
.fcsu-contact__form-surface,
.fcsu-contact__faq-list {
	min-width: 0;
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-lg);
	background: var(--fc-surface);
	box-shadow: var(--fcsu-contact-shadow);
}

.fcsu-contact__section-title {
	margin: 0 0 var(--fc-space-3);
	color: var(--fc-brand-primary);
	font-size: 1.3rem;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

/*
 * Reading sections keep a narrower measure than the location block; their
 * headings share that measure so heading and card start on the same edge.
 */
.fcsu-contact__form .fcsu-contact__section-title,
.fcsu-contact__faq .fcsu-contact__section-title {
	max-width: var(--fcsu-contact-form-width);
	margin-inline: auto;
}

/* ---------------------------------------------------------------------
 * Action row: call, WhatsApp and e-mail as one tap targets.
 *
 * The whole card is the link, so the touch target is the full tile rather
 * than a short line of text. The row auto-fits, so one, two or three
 * configured channels always fill the width evenly.
 * ------------------------------------------------------------------- */

.fcsu-contact__layout {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--fc-space-3);
}

.fcsu-contact__action {
	min-width: 0;
}

.fcsu-contact__action-link {
	display: flex;
	gap: var(--fc-space-3);
	align-items: center;
	height: 100%;
	padding: var(--fc-space-3);
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-lg);
	background: var(--fc-surface);
	box-shadow: var(--fcsu-contact-shadow);
	color: var(--fc-text);
	text-decoration: none;
	transition: border-color 150ms ease, transform 150ms ease;
}

.fcsu-contact__action-link:hover {
	border-color: var(--fc-brand-accent);
	transform: translateY(-2px);
}

.fcsu-contact__action-icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--fc-radius-pill);
	background: var(--fc-background);
	color: var(--fc-brand-accent);
	transition: background-color 150ms ease, color 150ms ease;
}

.fcsu-contact__action-link:hover .fcsu-contact__action-icon {
	background: var(--fc-brand-accent);
	color: var(--fc-surface);
}

.fcsu-contact__action-icon svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fcsu-contact__action-body {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.fcsu-contact__action-label {
	color: var(--fc-brand-accent);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	line-height: 1.6;
	text-transform: uppercase;
}

.fcsu-contact__action-value {
	color: var(--fc-text);
	font-size: 1.08rem;
	font-weight: 700;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.fcsu-contact__action-hint {
	color: var(--fc-text-muted);
	font-size: 0.88rem;
	line-height: 1.5;
}

.fcsu-contact__action-arrow {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	margin-left: auto;
	color: var(--fc-text-muted);
	transition: color 150ms ease, transform 150ms ease;
}

.fcsu-contact__action-arrow svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fcsu-contact__action-link:hover .fcsu-contact__action-arrow {
	color: var(--fc-brand-accent);
	transform: translateX(3px);
}

/* ---------------------------------------------------------------------
 * Location: the map beside the address, opening hours and route CTA.
 * The surface owns the height, so the map reads as a wide band rather
 * than a tall block, and the iframe fills it.
 * ------------------------------------------------------------------- */

.fcsu-contact__location {
	min-width: 0;
}

.fcsu-contact__location-grid {
	display: grid;
	grid-template-columns: 58% minmax(0, 1fr);
	align-items: stretch;
	overflow: hidden;
}

.fcsu-contact__location-grid--no-map,
.fcsu-contact__location-grid--no-panel {
	grid-template-columns: minmax(0, 1fr);
}

.fcsu-contact__location-media {
	display: grid;
	min-width: 0;
}

.fcsu-contact__map-frame {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--fc-background);
}

.fcsu-contact__map {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 100%;
	border: 0;
}

.fcsu-contact__location-panel {
	display: flex;
	flex-direction: column;
	gap: var(--fc-space-3);
	align-items: flex-start;
	justify-content: center;
	min-width: 0;
	padding: var(--fc-space-4);
}

.fcsu-contact__fact {
	display: flex;
	gap: var(--fc-space-2);
	align-items: flex-start;
	min-width: 0;
}

.fcsu-contact__fact-icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--fc-radius-pill);
	background: var(--fc-background);
	color: var(--fc-brand-accent);
}

.fcsu-contact__fact-icon svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fcsu-contact__fact-body {
	min-width: 0;
}

.fcsu-contact__fact-label {
	margin: 0 0 0.15rem;
	color: var(--fc-brand-accent);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	line-height: 1.6;
	text-transform: uppercase;
}

.fcsu-contact__address {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	color: var(--fc-text);
	font-size: 1.02rem;
	font-style: normal;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.fcsu-contact__hours-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fcsu-contact__hours-item {
	color: var(--fc-text);
	font-size: 1.02rem;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.fcsu-contact__location-note {
	margin: 0;
	min-width: 0;
	color: var(--fc-text-muted);
	font-size: 0.94rem;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

/*
 * The directions link is the one action on the location surface, so it is a
 * real button rather than an inline text link that disappears under the map.
 */
.fcsu-contact__location-link {
	display: inline-flex;
	flex: 0 0 auto;
	gap: var(--fc-space-1);
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding-inline: var(--fc-space-4);
	border: 2px solid var(--fc-brand-accent);
	border-radius: var(--fc-radius-pill);
	background: var(--fc-brand-accent);
	color: var(--fc-surface);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease;
}

.fcsu-contact__location-link:hover {
	background: var(--fc-surface);
	color: var(--fc-brand-accent);
}

.fcsu-contact__location-icon {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------------------------------------------------------------------
 * Contact form.
 *
 * The markup is produced by whichever form plugin the editor configured
 * through the shortcode field, so the rules below target generic form
 * elements plus the two wrapper classes Contact Form 7 and WPForms emit.
 * They are all scoped to .fcsu-contact, so forms.css (ADR-011) and the
 * plugin's own presentation stay untouched on every other screen.
 * ------------------------------------------------------------------- */

.fcsu-contact__form {
	min-width: 0;
}

.fcsu-contact__form-surface {
	max-width: var(--fcsu-contact-form-width);
	margin-inline: auto;
	padding: var(--fc-space-5);
}

.fcsu-contact__form-inner {
	min-width: 0;
}

.fcsu-contact__form-inner > :first-child,
.fcsu-contact__form-inner form > :first-child {
	margin-top: 0;
}

.fcsu-contact__form-inner > :last-child,
.fcsu-contact__form-inner form > :last-child {
	margin-bottom: 0;
}

.fcsu-contact__form-inner p {
	margin: 0 0 var(--fc-space-3);
}

.fcsu-contact__form-inner label {
	display: block;
	margin-bottom: var(--fc-space-1);
	color: var(--fc-text);
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.5;
}

/* Contact Form 7 and WPForms wrap each control; make the wrapper a block. */
.fcsu-contact__form-inner .wpcf7-form-control-wrap,
.fcsu-contact__form-inner .wpforms-field {
	display: block;
	min-width: 0;
}

.fcsu-contact__form-inner input[type="text"],
.fcsu-contact__form-inner input[type="email"],
.fcsu-contact__form-inner input[type="tel"],
.fcsu-contact__form-inner input[type="url"],
.fcsu-contact__form-inner input[type="number"],
.fcsu-contact__form-inner input[type="search"],
.fcsu-contact__form-inner input[type="date"],
.fcsu-contact__form-inner select,
.fcsu-contact__form-inner textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 3rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-md);
	background: var(--fc-surface);
	color: var(--fc-text);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color 150ms ease;
}

/*
 * Plugins ship a rows attribute (Contact Form 7 defaults to 10), which would
 * otherwise open the field to well over 250px. An explicit height overrides
 * it; the visitor can still drag the field taller.
 */
.fcsu-contact__form-inner textarea {
	height: 11rem;
	min-height: 11rem;
	resize: vertical;
}

.fcsu-contact__form-inner input:hover,
.fcsu-contact__form-inner select:hover,
.fcsu-contact__form-inner textarea:hover {
	border-color: var(--fc-text-muted);
}

.fcsu-contact__form-inner input:focus,
.fcsu-contact__form-inner select:focus,
.fcsu-contact__form-inner textarea:focus,
.fcsu-contact__form-inner input:focus-visible,
.fcsu-contact__form-inner select:focus-visible,
.fcsu-contact__form-inner textarea:focus-visible {
	border-color: var(--fc-brand-accent);
	outline: 3px solid var(--fc-brand-accent);
	outline-offset: 2px;
}

/* Submit control, in the same button language as the rest of the page. */
.fcsu-contact__form-inner input[type="submit"],
.fcsu-contact__form-inner button,
.fcsu-contact__form-inner button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	max-width: 100%;
	min-height: 3rem;
	padding-inline: var(--fc-space-5);
	border: 2px solid var(--fc-brand-primary);
	border-radius: var(--fc-radius-pill);
	background: var(--fc-brand-primary);
	color: var(--fc-surface);
	cursor: pointer;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 150ms ease, border-color 150ms ease;
}

.fcsu-contact__form-inner input[type="submit"]:hover,
.fcsu-contact__form-inner button:hover {
	border-color: var(--fc-brand-accent);
	background: var(--fc-brand-accent);
}

.fcsu-contact__form-inner input[type="submit"]:focus-visible,
.fcsu-contact__form-inner button:focus-visible {
	outline: 3px solid var(--fc-brand-accent);
	outline-offset: 3px;
}

/* Plugin response and validation messages. */
.fcsu-contact__form-inner .wpcf7-not-valid-tip {
	display: block;
	margin-top: var(--fc-space-1);
	color: var(--fc-brand-accent);
	font-size: 0.88rem;
	line-height: 1.5;
}

.fcsu-contact__form-inner .wpcf7-response-output {
	margin: var(--fc-space-3) 0 0;
	padding: var(--fc-space-3);
	border: 1px solid var(--fc-border);
	border-radius: var(--fc-radius-md);
	font-size: 0.94rem;
	line-height: 1.6;
}

/* ---------------------------------------------------------------------
 * FAQ. Native <details>/<summary>, so the accordion works with keyboard
 * and without any JavaScript on the front end.
 * ------------------------------------------------------------------- */

.fcsu-contact__faq {
	min-width: 0;
}

.fcsu-contact__faq-list {
	max-width: var(--fcsu-contact-form-width);
	margin-inline: auto;
	padding-inline: var(--fc-space-5);
}

.fcsu-contact__faq-item {
	border-bottom: 1px solid var(--fc-border);
}

.fcsu-contact__faq-item:last-child {
	border-bottom: 0;
}

.fcsu-contact__faq-question {
	display: flex;
	gap: var(--fc-space-3);
	align-items: center;
	justify-content: space-between;
	padding-block: var(--fc-space-3);
	color: var(--fc-text);
	cursor: pointer;
	font-size: 1.08rem;
	font-weight: 700;
	line-height: 1.5;
	list-style: none;
}

/* Hide the default disclosure triangle in favour of the drawn marker. */
.fcsu-contact__faq-question::-webkit-details-marker {
	display: none;
}

.fcsu-contact__faq-question:hover {
	color: var(--fc-brand-accent);
}

.fcsu-contact__faq-question-text {
	min-width: 0;
	overflow-wrap: anywhere;
}

.fcsu-contact__faq-marker {
	position: relative;
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
}

/* Drawn with borders so the bars never rely on a fixed pixel box size. */
.fcsu-contact__faq-marker::before,
.fcsu-contact__faq-marker::after {
	position: absolute;
	top: 50%;
	left: 50%;
	content: "";
	transform: translate(-50%, -50%);
	transition: opacity 150ms ease;
}

.fcsu-contact__faq-marker::before {
	width: 100%;
	height: 0;
	border-top: 2px solid var(--fc-brand-accent);
}

.fcsu-contact__faq-marker::after {
	width: 0;
	height: 100%;
	border-left: 2px solid var(--fc-brand-accent);
}

.fcsu-contact__faq-item[open] .fcsu-contact__faq-marker::after {
	opacity: 0;
}

.fcsu-contact__faq-answer {
	max-width: 65ch;
	padding-bottom: var(--fc-space-3);
	color: var(--fc-text-muted);
	font-size: 1rem;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.fcsu-contact__faq-answer > :first-child {
	margin-top: 0;
}

.fcsu-contact__faq-answer > :last-child {
	margin-bottom: 0;
}

.fcsu-contact__faq-question:focus-visible {
	outline: 3px solid var(--fc-brand-accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Closing CTA band.
 * ------------------------------------------------------------------- */

.fcsu-contact__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fc-space-3) var(--fc-space-4);
	align-items: center;
	justify-content: space-between;
	padding: var(--fc-space-4) var(--fc-space-5);
	border-radius: var(--fc-radius-lg);
	background: var(--fc-brand-primary);
}

.fcsu-contact__cta-body {
	min-width: 0;
}

.fcsu-contact__cta-title {
	margin: 0;
	color: var(--fc-surface);
	font-size: 1.45rem;
	line-height: 1.25;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.fcsu-contact__cta-text {
	margin: var(--fc-space-1) 0 0;
	max-width: 46ch;
	color: var(--fc-background);
	font-size: 0.98rem;
	line-height: 1.6;
}

.fcsu-contact__cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fc-space-2);
	align-items: center;
}

.fcsu-contact__cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding-inline: var(--fc-space-4);
	border: 2px solid var(--fc-surface);
	border-radius: var(--fc-radius-pill);
	background: var(--fc-surface);
	color: var(--fc-brand-primary);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.fcsu-contact__cta-button:hover {
	border-color: var(--fc-brand-accent);
	background: var(--fc-brand-accent);
	color: var(--fc-surface);
}

.fcsu-contact__cta-button--ghost {
	background: transparent;
	color: var(--fc-surface);
}

.fcsu-contact__cta-button--ghost:hover {
	border-color: var(--fc-brand-accent);
	background: var(--fc-brand-accent);
	color: var(--fc-surface);
}

/* Focus stays visible on every interactive surface of the page. */
.fcsu-contact a:focus-visible {
	outline: 3px solid var(--fc-brand-accent);
	outline-offset: 3px;
}

.fcsu-contact__cta a:focus-visible {
	outline-color: var(--fc-surface);
}

/* ---------------------------------------------------------------------
 * Responsive.
 * ------------------------------------------------------------------- */

/*
 * Desktop page head, aligned with the Blog archive baseline.
 *
 * Blog inherits the generic .site-main 3rem top padding; this page reduced it
 * locally, so its breadcrumb and H1 jumped upward when moving between the two.
 * Only the desktop top step is restored here; mobile spacing stays unchanged.
 */
@media (min-width: 769px) {
	.fcsu-contact.site-main {
		padding-block-start: var(--fc-space-5, 3rem);
	}
}

@media (min-width: 901px) {
	/*
	 * The surface, not the iframe, decides the map height: a wide, capped
	 * band instead of a tall block, with the panel free to grow it.
	 */
	.fcsu-contact__location-grid {
		min-height: clamp(360px, 30vw, 440px);
	}

	.fcsu-contact__map-frame {
		aspect-ratio: auto;
	}
}

@media (max-width: 1024px) {
	.fcsu-contact__location-grid {
		grid-template-columns: 52% minmax(0, 1fr);
	}

	.fcsu-contact__form-surface,
	.fcsu-contact__faq-list {
		padding-inline: var(--fc-space-4);
	}

	.fcsu-contact__form-surface {
		padding-block: var(--fc-space-4);
	}
}

@media (max-width: 900px) {
	.fcsu-contact__location-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 860px) {
	.fcsu-contact__title {
		font-size: 2.25rem;
	}
}

@media (max-width: 767px) {
	.fcsu-contact {
		--fcsu-contact-surface-padding: var(--fc-space-3);

		padding-block: var(--fc-space-3) var(--fc-space-5);
	}

	.fcsu-contact__article {
		gap: var(--fc-space-4);
	}

	.fcsu-contact__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--fc-space-2);
	}

	.fcsu-contact__location-panel,
	.fcsu-contact__form-surface,
	.fcsu-contact__faq-list {
		padding: var(--fc-space-3);
	}

	.fcsu-contact__location-link {
		flex: 1 1 100%;
		width: 100%;
	}

	.fcsu-contact__cta {
		padding: var(--fc-space-4);
	}

	.fcsu-contact__cta-actions {
		width: 100%;
	}

	.fcsu-contact__cta-button {
		flex: 1 1 14rem;
	}

	.fcsu-contact__form-inner input[type="submit"],
	.fcsu-contact__form-inner button {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.fcsu-contact__intro {
		font-size: 1rem;
	}

	.fcsu-contact__action-link {
		gap: var(--fc-space-2);
	}

	.fcsu-contact__action-value {
		font-size: 1.02rem;
	}

	.fcsu-contact__cta-title {
		font-size: 1.25rem;
	}

	.fcsu-contact__cta-button {
		flex: 1 1 100%;
	}

	.fcsu-contact__location-link {
		padding-inline: var(--fc-space-3);
		font-size: 0.95rem;
	}

	.fcsu-contact__form-inner textarea {
		height: 10rem;
		min-height: 10rem;
	}
}

@media (max-width: 359px) {
	.fcsu-contact__title {
		font-size: 1.85rem;
	}

	.fcsu-contact__action-link,
	.fcsu-contact__location-panel,
	.fcsu-contact__form-surface,
	.fcsu-contact__faq-list {
		padding: var(--fc-space-2);
	}

	.fcsu-contact__action-arrow {
		display: none;
	}

	.fcsu-contact__faq-question {
		font-size: 1rem;
	}

	.fcsu-contact__cta {
		padding: var(--fc-space-3);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fcsu-contact__action-link,
	.fcsu-contact__action-icon,
	.fcsu-contact__action-arrow,
	.fcsu-contact__location-link,
	.fcsu-contact__cta-button,
	.fcsu-contact__faq-marker::before,
	.fcsu-contact__faq-marker::after {
		transition: none;
	}

	.fcsu-contact__action-link:hover {
		transform: none;
	}

	.fcsu-contact__action-link:hover .fcsu-contact__action-arrow {
		transform: none;
	}
}