@layer components {
	/* Contact Us page components (Phase 15 -- client-numbered Phase 13).
	 *
	 * Same tonal-elevation rule as every other page: no box-shadow.
	 *
	 * FORM STYLING NOTE. Fluent Forms renders its own markup that we do
	 * not control -- only its CSS. Every selector below is scoped under
	 * .tf-contact-form (an Elementor container wrapping the embedded
	 * Fluent Forms widget) and targets Fluent Forms' own real class
	 * names, confirmed by rendering the actual shortcode output rather
	 * than assumed from documentation: .ff-el-group (field wrapper),
	 * .ff-el-input--label (label wrapper), .ff-el-form-control
	 * (input/select/textarea), .ff-btn-submit (submit button),
	 * .ff-errors-in-stack (the form-level error/success region).
	 *
	 * Logical properties throughout, so labels, the select's chevron
	 * position (browser-native, direction-aware), and spacing all flip
	 * correctly under dir="rtl" with no separate RTL rules needed --
	 * consistent with every other component on this site.
	 */

	/* --- Location card -------------------------------------------------- */
	.tf-contact-info__location {
		display: flex;
		gap: var(--tf-space-s);
		padding: var(--tf-space-m);
		margin-block-end: var(--tf-space-m);
		background-color: var(--tf-surface-alt);
		border: 1px solid var(--tf-border-subtle);
		border-radius: var(--tf-radius-l);
	}

	.tf-contact-info__icon {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		border-radius: var(--tf-radius-m);
		background-color: var(--tf-surface);
		color: var(--tf-accent);
	}

	.tf-contact-info__eyebrow {
		display: block;
		margin-block-end: var(--tf-space-3xs);
		font-size: var(--tf-font-size-s);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--tf-text-muted);
	}

	[dir="rtl"] .tf-contact-info__eyebrow {
		text-transform: none;
		letter-spacing: normal;
	}

	.tf-contact-info__title {
		margin: 0 0 var(--tf-space-3xs);
		font-size: var(--tf-font-size-l);
		font-weight: 600;
		color: var(--tf-text);
	}

	.tf-contact-info__address {
		margin: 0;
		color: var(--tf-text-muted);
		line-height: var(--tf-line-height-base);
	}

	/* Email/phone rows below the card, matching the mockup's simple
	 * icon + text list beneath the location cards. */
	.tf-contact-info__row {
		display: flex;
		align-items: center;
		gap: var(--tf-space-xs);
		padding-block: var(--tf-space-xs);
		border-block-start: 1px solid var(--tf-border-subtle);
		color: var(--tf-text);
	}

	.tf-contact-info__row svg {
		flex: 0 0 auto;
		inline-size: 1.25rem;
		block-size: 1.25rem;
		color: var(--tf-accent);
	}

	/* --- Fluent Forms styling, scoped -------------------------------- */
	.tf-contact-form {
		padding: var(--tf-space-l);
		background-color: var(--tf-surface-alt);
		border: 1px solid var(--tf-border-subtle);
		border-radius: var(--tf-radius-l);
	}

	.tf-contact-form .ff-el-group {
		margin-block-end: var(--tf-space-m);
	}

	.tf-contact-form .ff-el-input--label label {
		display: inline-block;
		margin-block-end: var(--tf-space-3xs);
		font-size: var(--tf-font-size-s);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--tf-text-muted);
	}

	[dir="rtl"] .tf-contact-form .ff-el-input--label label {
		text-transform: none;
		letter-spacing: normal;
	}

	/* Fluent Forms sets its input border via its OWN unlayered CSS
	 * variable, --fluentform-border-color -- not a value our layered
	 * `border` declaration below can win against regardless of
	 * specificity (the same "unlayered always wins" trap this project
	 * has hit repeatedly with Elementor, confirmed live here too via
	 * getComputedStyle(): the layered border color never took effect on
	 * its own). Custom-property VALUES aren't subject to layer
	 * ordering the way property declarations are, so overriding Fluent
	 * Forms' own variable here -- scoped to this form only -- reaches
	 * the unlayered rule that reads it (Accessibility Audit Phase 17,
	 * fix M1). */
	.tf-contact-form {
		--fluentform-border-color: var(--tf-border-interactive);
	}

	.tf-contact-form .ff-el-form-control {
		display: block;
		inline-size: 100%;
		padding: var(--tf-space-xs) var(--tf-space-s);
		background-color: var(--tf-surface);
		color: var(--tf-text);
		border: 1px solid var(--tf-border-interactive);
		border-radius: var(--tf-radius-m);
		font-family: inherit;
		font-size: var(--tf-font-size-m);
		transition: border-color 200ms ease;
	}

	.tf-contact-form .ff-el-form-control:focus {
		outline: none;
		border-color: var(--tf-text);
	}

	.tf-contact-form textarea.ff-el-form-control {
		min-block-size: 8rem;
		resize: vertical;
	}

	.tf-contact-form .ff-btn-submit {
		display: block;
		inline-size: 100%;
		padding: var(--tf-space-s) var(--tf-space-m);
		border-radius: var(--tf-radius-m);
		font-size: var(--tf-font-size-s);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		cursor: pointer;
		transition: background-color 200ms ease;
	}

	/* background-color and color are NOT set here: Elementor's own
	 * Fluent Forms widget integration gives those two specific style
	 * controls real (non-empty) defaults, which it emits as unlayered
	 * !important CSS even when left unconfigured -- confirmed live,
	 * not assumed. Any layered rule here would lose unconditionally.
	 * Both are set via the Elementor widget settings instead
	 * (build_contact.php), the same "set anything Elementor emits, in
	 * Elementor" rule applied to a plugin-provided widget. */

	[dir="rtl"] .tf-contact-form .ff-btn-submit {
		text-transform: none;
		letter-spacing: normal;
	}

	.tf-contact-form .ff-btn-submit:hover {
		background-color: var(--tf-accent-hover);
	}

	/* Validation errors and the success/failure banner -- tonal, not a
	 * jarring browser-default red/green box. */
	.tf-contact-form .error,
	.tf-contact-form [class*="error_message"] {
		display: block;
		margin-block-start: var(--tf-space-3xs);
		font-size: var(--tf-font-size-s);
		color: var(--tf-text);
	}

	.tf-contact-form .ff-errors-in-stack {
		margin-block-start: var(--tf-space-m);
	}

	.tf-contact-form .ff-message-success,
	.tf-contact-form .ff_message_success {
		padding: var(--tf-space-s);
		background-color: var(--tf-surface);
		border: 1px solid var(--tf-border-subtle);
		border-radius: var(--tf-radius-m);
		color: var(--tf-text);
	}
}