/* Contact page, popup and form (29 September 2026, Figma H08).
   The page and the popup print the same layout (.sha-contact): heading and intro on the left
   with the office details at the foot, the form in the two right columns, on the light ground (dark until 17 Oct 2026).
   The popup is the menu's overlay. Loaded on every page that can show either, after the main
   stylesheet, so the old light contact styles lose. */

.sha-contact,
#sha-theme-contact-modal {
	--sha-contact-deep: #fafaf9;
	--sha-contact-hair: rgba(49, 49, 44, .15);
	--sha-contact-line: rgba(49, 49, 44, .24);
	--sha-contact-soft: #72726c;
	--sha-contact-error: #b23a28; /* 5.7:1 on the light ground (was #e8806e on dark) */
	--sha-contact-gutter: clamp(20px, 3.2vw, 56px);
	--sha-contact-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------------- layout */

.sha-contact {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: auto 1fr;
	gap: 0 24px;
	align-items: start;
	max-width: none;
	margin: 0;
	color: #31312c;
	font-family: "Fact", "Inter", system-ui, sans-serif;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.sha-contact *,
.sha-contact *::before,
.sha-contact *::after {
	box-sizing: border-box;
}

.sha-contact__head {
	grid-column: 1 / 3;
	grid-row: 1;
	max-width: 640px;
}

.sha-contact .sha-contact__title {
	margin: 0;
	color: #31312c;
	font-family: inherit;
	font-size: clamp(38px, 3.7vw, 56px);
	font-weight: 300;
	letter-spacing: 0;
	line-height: 1.14;
	text-transform: none;
}

/* Specific enough to beat the dark reading text on the Contact page (its post content). */
.sha-contact .sha-contact__head p.sha-contact__intro {
	max-width: 480px;
	margin: 24px 0 0;
	color: #4f4f49;
	font-family: inherit;
	font-size: 20px;
	font-weight: 300;
	line-height: 32px;
}

/* The details sit at the foot of the left column, level with the end of the form. */
.sha-contact__details {
	grid-column: 1 / 3;
	grid-row: 2;
	align-self: end;
	display: flex;
	flex-wrap: wrap;
	gap: 24px 48px;
	margin: 56px 0 0;
	padding-top: 32px;
	border-top: 1px solid var(--sha-contact-hair);
}

.sha-contact .sha-contact__details p.sha-contact__detail {
	display: flex;
	color: #31312c;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	font-size: 16px;
	line-height: 24px;
}

.sha-contact__label {
	color: #72726c;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

.sha-contact .sha-contact__details .sha-contact__detail .sha-contact__value {
	color: #3a3a35;
	font-weight: 300;
	text-decoration: none;
}

.sha-contact .sha-contact__details .sha-contact__detail a.sha-contact__value {
	color: #3a3a35;
	text-decoration: none;
}

.sha-contact .sha-contact__details .sha-contact__detail a.sha-contact__value:hover {
	color: #31312c;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.sha-contact .sha-contact__details .sha-contact__detail a.sha-contact__value:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

.sha-contact__form {
	grid-column: 3 / 5;
	grid-row: 1 / 3;
	min-width: 0;
}

.sha-contact__status {
	margin: 0 0 32px;
	padding: 14px 16px;
	border: 1px solid var(--sha-contact-hair);
	color: #31312c;
	font-size: 15px;
	line-height: 22px;
}

.sha-contact__status--error {
	border-color: rgba(178, 58, 40, .5);
	color: var(--sha-contact-error);
}

/* ---------------------------------------------------------------- the form */

.sha-contact__form :is(.fluentform, .fluentform_wrapper, .frm-fluent-form) {
	margin: 0;
	padding: 0;
}

/* Two columns: First and Last Name, Email and Phone Number, then Subject and Your Message
   across; the security check and Submit Form share the last row. */
.sha-contact__form .frm-fluent-form fieldset {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px 24px;
}

.sha-contact__form fieldset > * {
	grid-column: 1 / -1;
	min-width: 0;
	margin: 0 !important;
}

.sha-contact__form fieldset > .ff-el-group:has(input[type="email"]) {
	grid-column: 1;
}

.sha-contact__form fieldset > .ff-el-group:has(input[type="tel"], [data-name="input_phone"]) {
	grid-column: 2;
}

.sha-contact__form fieldset > .ff-el-group:has(.cf-turnstile) {
	grid-column: 1;
	align-self: center;
}

.sha-contact__form fieldset > .ff_submit_btn_wrapper {
	grid-column: 2;
	align-self: center;
	justify-self: end;
}

.sha-contact__form .ff-t-container {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px 24px;
	margin: 0;
	padding: 0;
}

.sha-contact__form .ff-t-cell {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.sha-contact__form .ff-el-group {
	margin: 0 !important;
	padding: 0;
}

.sha-contact__form .ff-el-input--label {
	display: block;
	margin: 0 0 12px;
	padding: 0;
	font-size: 14px;
	line-height: 20px;
}

.sha-contact__form .ff-el-input--label label {
	display: inline;
	margin: 0;
	padding: 0;
	color: var(--sha-contact-soft);
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 20px;
	text-transform: none;
	transition: color .3s var(--sha-contact-ease);
}

.sha-contact__form .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
	margin-left: 0;
	color: inherit;
	content: " *";
}

.sha-contact__form .ff-el-group:focus-within > .ff-el-input--label label {
	color: #3a3a35;
}

.sha-contact__form .ff-el-input--content {
	position: relative;
}

.sha-contact__form :is(input.ff-el-form-control, textarea.ff-el-form-control, select.ff-el-form-control) {
	display: block;
	width: 100%;
	max-width: none;
	min-height: 40px;
	margin: 0;
	padding: 0 0 13px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--sha-contact-line) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #31312c !important;
	caret-color: #31312c;
	font-family: inherit !important;
	font-size: 18px !important;
	font-weight: 300;
	letter-spacing: 0;
	line-height: 26px !important;
	transition: border-color .3s var(--sha-contact-ease);
}

.sha-contact__form textarea.ff-el-form-control {
	min-height: 132px;
	resize: vertical;
}

.sha-contact__form .ff-el-form-control::placeholder {
	color: rgba(49, 49, 44, .33);
	opacity: 1;
}

.sha-contact__form .ff-el-form-control:focus {
	border-bottom-color: #31312c !important;
	outline: none;
}

/* Browser autofill keeps the page's ground instead of its own fill. */
.sha-contact__form input.ff-el-form-control:-webkit-autofill {
	-webkit-text-fill-color: #31312c;
	box-shadow: 0 0 0 1000px var(--sha-contact-deep) inset !important;
	caret-color: #31312c;
}

/* Errors: the line and the message turn a muted red. The message hangs in the gap below the
   field, so the form does not jump. */
.sha-contact__form .ff-el-is-error .ff-el-form-control {
	border-bottom-color: var(--sha-contact-error) !important;
}

.sha-contact__form .ff-el-is-error .ff-el-input--content > :is(.error, .text-danger) {
	position: absolute;
	top: 100%;
	left: 0;
	margin: 9px 0 0;
	color: var(--sha-contact-error);
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 18px;
}

.sha-contact__form :is(.ff-errors-in-stack, .ff-message-error) {
	margin: 24px 0 0;
	color: var(--sha-contact-error);
	font-size: 14px;
	line-height: 20px;
}

.sha-contact .sha-contact__form :is(.ff-message-success, .ff-message-success p) {
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--sha-contact-hair);
	background: none;
	box-shadow: none;
	color: #31312c;
	font-size: 15px;
	line-height: 22px;
}

/* Submit Form: an outlined button that fills white on hover. */
.sha-contact__form .ff_submit_btn_wrapper {
	padding: 0 !important;
	text-align: right;
}

.sha-contact__form button.ff-btn-submit {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-height: 54px;
	margin: 0;
	padding: 16px 28px !important;
	border: 1px solid #72726c !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #31312c !important;
	cursor: pointer;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	letter-spacing: 0;
	line-height: 20px;
	opacity: 1 !important;
	text-transform: none;
	transition: background-color .3s var(--sha-contact-ease), border-color .3s var(--sha-contact-ease), color .3s var(--sha-contact-ease);
}

.sha-contact__form button.ff-btn-submit:hover {
	border-color: #31312c !important;
	background: #31312c !important;
	color: var(--sha-contact-deep) !important;
}

.sha-contact__form button.ff-btn-submit:focus-visible {
	border-color: #31312c !important;
	outline: 1.5px solid #31312c;
	outline-offset: 4px;
}

/* Sending: the label dims and Fluent's progress line runs along the foot. */
.sha-contact__form button.ff-btn-submit:is(.ff-working, [disabled]) {
	border-color: #72726c !important;
	background: transparent !important;
	color: #7a7a74 !important;
	cursor: progress;
}

.sha-contact__form button.ff-btn-submit.ff-working::after {
	height: 1px;
	background: #4f4f49;
}

/* ---------------------------------------------------------------- the popup */

body.sha-theme-contact-modal-open {
	overflow: hidden;
}

#sha-theme-contact-modal.sha-theme-contact-modal {
	position: fixed;
	inset: var(--wp-admin--admin-bar--height, 0px) 0 0;
	z-index: 1200;
	display: block;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: rgba(250, 250, 249, .99);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #31312c;
	animation: sha-contact-in .6s var(--sha-contact-ease) both;
}

#sha-theme-contact-modal[hidden] {
	display: none;
}

@keyframes sha-contact-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

#sha-theme-contact-modal .sha-theme-contact-modal__dialog {
	display: block;
	width: 100%;
	height: auto;
	min-height: 100%;
	overflow: visible;
	outline: none;
}

/* The bar matches the deck header: logo on the left, the close button where the menu button is.
   It stays at the top while a long form scrolls under it, and takes no room of its own. */
#sha-theme-contact-modal .sha-theme-contact-modal__bar {
	--sha-contact-bar: calc(2 * clamp(22px, 3vw, 40px) + max(36px, clamp(34px, 2.8vw, 42px)));
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--sha-contact-bar);
	margin-bottom: calc(-1 * var(--sha-contact-bar));
	padding: 0 var(--sha-contact-gutter);
	background: linear-gradient(rgba(250, 250, 249, .96) 65%, rgba(250, 250, 249, 0));
}

#sha-theme-contact-modal .sha-theme-contact-modal__logo {
	order: 1;
	display: block;
	color: #31312c;
	font-family: "Fact", "Inter", system-ui, sans-serif;
	font-size: clamp(16px, 1.35vw, 20px);
	font-weight: 300;
	letter-spacing: .01em;
	line-height: 1.02;
	text-decoration: none;
}

#sha-theme-contact-modal .sha-theme-contact-modal__logo b {
	display: block;
	font-weight: 500;
}

#sha-theme-contact-modal .sha-theme-contact-modal__logo img {
	display: block;
	width: auto;
	height: clamp(34px, 2.8vw, 42px);
	filter: brightness(0) invert(.19);
}

#sha-theme-contact-modal .sha-theme-contact-modal__close {
	order: 2;
	position: relative;
	top: auto;
	right: auto;
	display: block;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: none;
	color: #31312c;
	cursor: pointer;
	transition: opacity .3s var(--sha-contact-ease);
}

#sha-theme-contact-modal .sha-theme-contact-modal__close span {
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
}

#sha-theme-contact-modal .sha-theme-contact-modal__close span::before,
#sha-theme-contact-modal .sha-theme-contact-modal__close span::after {
	position: absolute;
	top: 17px;
	left: 4px;
	right: 4px;
	width: auto;
	height: 1.5px;
	background: currentColor;
	content: "";
	transform: rotate(45deg);
}

#sha-theme-contact-modal .sha-theme-contact-modal__close span::after {
	transform: rotate(-45deg);
}

#sha-theme-contact-modal .sha-theme-contact-modal__close:hover {
	color: #31312c;
	opacity: .7;
}

#sha-theme-contact-modal :is(.sha-theme-contact-modal__close, .sha-theme-contact-modal__logo):focus-visible {
	color: #31312c;
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

/* The same top as the page title on the Contact page. */
#sha-theme-contact-modal .sha-contact {
	padding: clamp(112px, 11.9vw, 180px) var(--sha-contact-gutter) clamp(64px, 8vw, 120px);
}

/* Wherever a form column is narrower than Cloudflare's 300px security check (from the
   two-column layout up to about 1360px, and on small tablets before the fields stack), the check
   takes the whole row and Submit Form follows below it. */
@media (min-width: 64.0625rem) and (max-width: 85rem), (max-width: 42rem) {
	.sha-contact__form fieldset > .ff-el-group:has(.cf-turnstile),
	.sha-contact__form fieldset > .ff_submit_btn_wrapper {
		grid-column: 1 / -1;
	}

	.sha-contact__form fieldset > .ff_submit_btn_wrapper {
		justify-self: start;
		text-align: left;
	}
}

/* ---------------------------------------------------------------- editor preview */

/* The block editor previews the Contact Page Panel on its light canvas: give it the site's light ground. */
.editor-styles-wrapper .sha-contact {
	padding: 48px 40px;
	background: var(--sha-contact-deep);
}

/* ---------------------------------------------------------------- tablet and phone */

@media (max-width: 64rem) {
	.sha-contact {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		gap: 0;
	}

	.sha-contact__head,
	.sha-contact__details,
	.sha-contact__form {
		grid-column: 1;
		grid-row: auto;
	}

	.sha-contact__details {
		align-self: start;
		margin-top: 40px;
	}

	.sha-contact__form {
		margin-top: 64px;
	}
}

@media (max-width: 37.5rem) {
	.sha-contact .sha-contact__head p.sha-contact__intro {
		font-size: 18px;
		line-height: 28px;
	}

	.sha-contact__details {
		gap: 24px 40px;
	}

	.sha-contact__form .frm-fluent-form fieldset,
	.sha-contact__form .ff-t-container {
		grid-template-columns: minmax(0, 1fr);
	}

	.sha-contact__form fieldset > .ff-el-group:is(:has(input[type="email"]), :has(input[type="tel"], [data-name="input_phone"]), :has(.cf-turnstile)),
	.sha-contact__form fieldset > .ff_submit_btn_wrapper {
		grid-column: 1;
	}

	.sha-contact__form fieldset > .ff_submit_btn_wrapper {
		justify-self: start;
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	#sha-theme-contact-modal.sha-theme-contact-modal {
		animation: none;
	}

	.sha-contact__form :is(.ff-el-form-control, button.ff-btn-submit),
	.sha-contact__form .ff-el-input--label label {
		transition: none;
	}
}