/**
 * TAMSI Contact page.
 *
 * Carries only what Elementor and the Xpro Ninja Forms widget have no control
 * for. Everything the widgets can set — the hero scrim, the typography, the
 * colours, the submit button — is set through their own controls in the page
 * data, not here.
 *
 * Ninja Forms renders its fields client-side from Backbone templates, so the
 * form is styled here by its runtime classes. Two things about that markup
 * decide the selectors below, and neither is guessable from the rendered HTML:
 *
 * 1. A field wrap carries both the current and the legacy class — a checkbox
 *    list is `field-wrap listcheckbox-wrap list-checkbox-wrap` — and the legacy
 *    rules in `display-structure.css` lay the options out with floats and
 *    `width: auto !important`. Overriding those needs `!important` back.
 * 2. The label of a `listcheckbox` or `date` field is a `span.nf-label-span`,
 *    not a `<label>`, and a checkbox `<input>` is a *sibling* of its label
 *    rather than its parent.
 *
 * Xpro's own field selectors only reach `.textbox-wrap`, `.email-wrap` and
 * `.textarea-wrap`; this form also uses date, number and checkbox fields, so
 * the field look is defined once here for every type rather than half through
 * the widget and half through CSS.
 */

.tamsi-contact {
	--tamsi-error: #8a3f35;
	--tamsi-hairline: rgba( 41, 39, 35, 0.2 );
	--tamsi-hairline-soft: rgba( 41, 39, 35, 0.12 );
	--tamsi-field-bg: rgba( 245, 241, 230, 0.46 );
	--tamsi-ease: cubic-bezier( 0.16, 1, 0.3, 1 );
}

/* ---------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------- */

/* The design caps the short hero so it never grows into a landing image. */
.tamsi-contact .tamsi-contact-hero {
	max-height: 560px;
}

/*
 * Below 560px the design abandons the left-to-right scrim for a bottom-up one:
 * the title stops sharing the frame with the photograph and sits under it
 * instead. Elementor has one gradient overlay and no responsive angle, so the
 * flip is made here.
 */
@media ( max-width: 560px ) {
	.tamsi-contact .tamsi-contact-hero {
		max-height: none;
	}

	.tamsi-contact .tamsi-contact-hero::before {
		background-image: linear-gradient(
			to top,
			rgba( 17, 39, 26, 0.86 ) 0%,
			rgba( 17, 39, 26, 0.3 ) 58%,
			rgba( 17, 39, 26, 0 ) 78%
		) !important;
	}
}

/* Clear the fixed header when the nav CTA jumps to the form. */
.tamsi-contact #enquiry {
	scroll-margin-top: 96px;
}

/* ---------------------------------------------------------------------------
 * The enquiry form — Ninja Form #1, through the Xpro widget
 * ------------------------------------------------------------------------- */

/* One rhythm down the column; the design's --s2. */
.tamsi-contact .tamsi-enquiry-form .nf-field-container {
	margin-bottom: 24px;
}

/*
 * The gap between a label and its field. Set on the label block rather than on
 * the label itself, so it beats `.label-above .nf-field-label`.
 */
.tamsi-contact .tamsi-enquiry-form .nf-field-label {
	margin-bottom: 8px;
}

/*
 * The design's uppercase key, shared by every field type. `.nf-label-span` is
 * the checkbox-list and date variant of the same thing.
 */
.tamsi-contact .tamsi-enquiry-form .nf-field-label label,
.tamsi-contact .tamsi-enquiry-form .nf-field-label .nf-label-span {
	display: block;
	margin: 0;
	color: #5f5a50;
	font-family: "Hanken Grotesk", sans-serif;
	font-size: 0.72rem;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.tamsi-contact .tamsi-enquiry-form .ninja-forms-req-symbol {
	color: var( --tamsi-error );
}

/*
 * Fields — every type, not only the three Xpro reaches. Checkboxes are excluded
 * here and drawn as their own mark further down.
 */
.tamsi-contact .tamsi-enquiry-form .nf-field-element input:not( [type="button"] ):not( [type="checkbox"] ):not( [type="radio"] ),
.tamsi-contact .tamsi-enquiry-form .nf-field-element textarea {
	width: 100%;
	height: auto;
	min-height: 52px;
	padding: 12px 14px;
	border: 1px solid var( --tamsi-hairline );
	border-radius: 0;
	background: var( --tamsi-field-bg );
	box-shadow: none;
	color: #292723;
	font-family: "Hanken Grotesk", sans-serif;
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 0.3s var( --tamsi-ease ), background 0.3s var( --tamsi-ease );
}

/* Ninja Forms hard-sets a 200px textarea; the design asks for 136px and grow. */
.tamsi-contact .tamsi-enquiry-form .nf-field-element textarea {
	height: auto;
	min-height: 136px;
	resize: vertical;
}

.tamsi-contact .tamsi-enquiry-form .nf-field-element input::placeholder,
.tamsi-contact .tamsi-enquiry-form .nf-field-element textarea::placeholder {
	color: #6f6a60;
	opacity: 1;
}

.tamsi-contact .tamsi-enquiry-form .nf-field-element input:not( [type="button"] ):hover,
.tamsi-contact .tamsi-enquiry-form .nf-field-element textarea:hover {
	border-color: rgba( 41, 39, 35, 0.44 );
}

.tamsi-contact .tamsi-enquiry-form .nf-field-element input:not( [type="button"] ):focus,
.tamsi-contact .tamsi-enquiry-form .nf-field-element textarea:focus {
	outline: 2px solid #292723;
	outline-offset: 3px;
	background: #f5f1e6;
}

/* Errors. */
.tamsi-contact .tamsi-enquiry-form .nf-error .nf-field-element input,
.tamsi-contact .tamsi-enquiry-form .nf-error .nf-field-element textarea {
	border-color: var( --tamsi-error );
	background: rgba( 138, 63, 53, 0.05 );
}

.tamsi-contact .tamsi-enquiry-form .nf-error-msg {
	margin-top: 6px;
	color: var( --tamsi-error );
	font-family: "Hanken Grotesk", sans-serif;
	font-size: 0.82rem;
	line-height: 1.4;
}

/* ---------------------------------------------------------------------------
 * The two checkbox registers
 * ------------------------------------------------------------------------- */

/*
 * The design rules these off as fieldsets. The form closes each register with a
 * divider field, so the rule above is drawn here and the rule below is the
 * divider itself.
 */
.tamsi-contact .tamsi-enquiry-form .listcheckbox-container {
	margin-top: 16px;
	padding-top: 24px;
	border-top: 1px solid var( --tamsi-hairline );
}

.tamsi-contact .tamsi-enquiry-form .hr-container {
	margin: 0 0 24px;
}

.tamsi-contact .tamsi-enquiry-form .hr-container hr {
	margin: 0;
	border: 0;
	border-top: 1px solid var( --tamsi-hairline-soft );
}

/*
 * Ninja Forms floats the option input and pushes the label over by 1.5em. The
 * design wants a row: mark, gap, words.
 */
.tamsi-contact .tamsi-enquiry-form .listcheckbox-wrap .nf-field-element li {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 40px;
	padding-left: 0;
}

.tamsi-contact .tamsi-enquiry-form .listcheckbox-wrap .nf-field-element li label {
	width: auto;
	margin: 0;
	color: #292723;
	font-family: "Hanken Grotesk", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

/*
 * The design's square mark: a hairline box that fills green when checked.
 * `!important` on the box size is not optional — `display-structure.css` sets
 * `width: auto !important` on these inputs, and Xpro's full-width-input control
 * would otherwise stretch them to the column.
 */
.tamsi-contact .tamsi-enquiry-form .listcheckbox-wrap .nf-field-element li input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 18px !important;
	height: 18px;
	margin: 0;
	border: 1px solid rgba( 41, 39, 35, 0.48 );
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	transition: border-color 0.25s var( --tamsi-ease ), background 0.25s var( --tamsi-ease );
}

.tamsi-contact .tamsi-enquiry-form .listcheckbox-wrap .nf-field-element li input[type="checkbox"]:checked {
	border-color: #11271a;
	background: #11271a;
	box-shadow: inset 0 0 0 3px #eae6df;
}

.tamsi-contact .tamsi-enquiry-form .listcheckbox-wrap .nf-field-element li input[type="checkbox"]:focus-visible {
	outline: 2px solid #292723;
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Submit and the form's own notices
 * ------------------------------------------------------------------------- */

.tamsi-contact .tamsi-enquiry-form .submit-container {
	margin-bottom: 0;
}

.tamsi-contact .tamsi-enquiry-form .submit-wrap input[type="button"] {
	min-height: 52px;
	border-radius: 0;
	cursor: pointer;
	transition: background 0.4s var( --tamsi-ease ), color 0.4s var( --tamsi-ease ),
		border-color 0.4s var( --tamsi-ease );
}

.tamsi-contact .tamsi-enquiry-form .nf-response-msg {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var( --tamsi-hairline );
	color: #292723;
	font-family: "Hanken Grotesk", sans-serif;
	font-size: 0.82rem;
	line-height: 1.5;
}

/*
 * Hello Elementor's reset paints every bare <button> pink on hover. Ninja Forms
 * submits with an <input>, but its error and date controls are buttons.
 */
.tamsi-contact .tamsi-enquiry-form button:hover {
	background-color: transparent;
	color: inherit;
}

@media ( max-width: 767px ) {
	.tamsi-contact .tamsi-enquiry-form .nf-field-container {
		margin-bottom: 20px;
	}

	.tamsi-contact .tamsi-enquiry-form .listcheckbox-wrap .nf-field-element li {
		min-height: 44px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.tamsi-contact .tamsi-enquiry-form * {
		transition-duration: 0.01ms !important;
	}
}