/**
 * Components: the button, the header, the footer logo, and the form field.
 *
 * These are the pieces that appear in more than one place, so they live here
 * rather than beside a single block. Loads after base.css.
 */

/* ==========================================================================
 * Button
 *
 * One component, three instances in the artboard: the header button (blue fill,
 * white label), the hero button (light grey fill, blue label, larger), and the
 * form submit (blue fill, white label).
 *
 * The XD file defines a real hover state for this component: the fill drops to
 * transparent, a 2px inside border appears, and the label and arrow adopt the
 * border colour, over 300ms ease-out. The per-instance hover colour was not
 * specified, so the rule applied here is "the outline takes the button's own
 * fill colour" - which keeps the hero button legible over the photograph and
 * introduces no colour that is not already in the design.
 *
 * Because the border only exists on hover, it is present at all times as a
 * transparent border, so nothing shifts by 2px when the pointer arrives.
 * ========================================================================== */
.lg-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lg-btn-arrow-gap);
	min-height: var(--lg-btn-height);
	padding-block: 0;
	padding-inline: var(--lg-btn-pad-inline-start) var(--lg-btn-pad-inline-end);
	border: var(--lg-btn-border-width) solid transparent;
	border-radius: var(--lg-radius-btn);
	background-color: var(--lg-button-fill);
	color: var(--lg-button-label);
	font-family: var(--lg-font-ui);
	font-size: var(--lg-step-button);
	font-weight: 400;
	line-height: var(--lg-leading-tight);
	text-decoration: none;
	/* The label and its arrow are one unit; letting it wrap at 375 turned the
	 * header button into a two-line box taller than the bar it sits in. */
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--lg-transition),
		border-color var(--lg-transition),
		color var(--lg-transition);
}

/*
 * Sized in absolute pixels to match the artboard 1:1, so the 1.5 stroke lands as
 * exactly 1.5px. The SVG carries the same numbers on its width/height
 * attributes; these rules exist so the `svg { max-width: 100% }` reset in
 * base.css cannot squash it.
 */
.lg-button__arrow {
	flex: 0 0 auto;
	width: var(--lg-btn-arrow-width);
	height: var(--lg-btn-arrow-height);
	max-width: none;
	color: currentColor;
}

.lg-button:hover,
.lg-button:focus-visible {
	background-color: transparent;
	border-color: var(--lg-button-fill);
	color: var(--lg-button-fill);
}

/* Instance: header and submit. Deep blue fill, white label. */
.lg-button--primary {
	--lg-button-fill: var(--lg-blue-deep);
	--lg-button-label: var(--lg-white);
}

/*
 * Instance: hero. Light grey fill, deep blue label, and the larger 63px box.
 * On hover the outline is the light grey, not the blue, because the button
 * sits on a dark photograph where blue would disappear.
 */
.lg-button--hero {
	--lg-button-fill: var(--lg-grey-light);
	--lg-button-label: var(--lg-blue-deep);

	min-height: var(--lg-btn-lg-height);
	padding-inline: var(--lg-btn-lg-pad-inline-start) var(--lg-btn-lg-pad-inline-end);
	border-radius: var(--lg-radius-btn-lg);
	font-size: var(--lg-step-button-lg);
}

/* The submit label is set in caps in the artboard. */
.lg-button--submit {
	text-transform: uppercase;
}

/* ==========================================================================
 * Header
 *
 * Artboard: a 126px #efefef bar holding the logo at x=142 and a single Contact
 * Us button ending at x=1776. There is no navigation menu in the design, so
 * there is none here and no hamburger on small screens. See PROJECT-BRIEF.md.
 * ========================================================================== */
.lg-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 50;
	height: var(--lg-header-height);
	background-color: var(--lg-grey-light);
}

.lg-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lg-space-sm);
	height: 100%;
}

@media (min-width: 768px) {
	.lg-header__inner {
		gap: var(--lg-space-md);
	}
}

.lg-header__logo {
	display: block;
	flex: 0 0 auto;
	width: var(--lg-logo-width);
	line-height: 0;
}

.lg-header__logo svg,
.lg-footer__logo svg {
	width: 100%;
	height: auto;
}

/* ==========================================================================
 * Footer logo
 *
 * The artboard has no separate footer band - the logo sits bottom right inside
 * the contact section, 415px wide with its right edge on the container edge.
 * ========================================================================== */
.lg-footer__logo {
	display: block;
	width: var(--lg-logo-width-footer);
	margin-inline-start: auto;
	line-height: 0;
}

/* ==========================================================================
 * Form field
 *
 * Artboard: a 20px bold mid-blue label in caps, then a bare 1px #707070 rule
 * 783px wide. No box, no fill, no placeholder. Field pitch is 97px.
 *
 * These rules are written to match both the theme's own markup and the markup
 * Gravity Forms emits, which is why the selectors are grouped rather than
 * scoped to one or the other. See inc/forms.php.
 * ========================================================================== */
/*
 * Gravity Forms wraps every field in .gfield, so the rhythm has to be applied
 * there rather than only to the theme's own .lg-field. Field pitch on the
 * artboard is 97: a 24 label box, 14 to the control, the 31 control with its
 * 1px rule, then this 28 to the next label.
 */
.lg-field,
.lg-form .gfield {
	margin-block-end: var(--lg-field-gap);
}

.lg-form .gform_fields {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Gravity Forms appends "(Required)" to every required label. The artboard's
 * labels are the bare words NAME, EMAIL and MESSAGE, so the suffix is hidden
 * visually and left in the accessibility tree, where it is genuinely useful -
 * the inputs also carry aria-required, so nothing is lost either way.
 */
.lg-form .gfield_required {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.lg-field__label,
.lg-form .gfield_label {
	display: block;
	margin-block-end: var(--lg-field-label-gap);
	color: var(--lg-blue-mid);
	font-family: var(--lg-font-body);
	font-size: var(--lg-step-label);
	font-weight: 700;
	line-height: var(--lg-leading-card);
	letter-spacing: var(--lg-tracking-eyebrow);
	text-transform: uppercase;
}

.lg-field__control,
.lg-form input[type="text"],
.lg-form input[type="email"],
.lg-form input[type="tel"],
.lg-form textarea {
	display: block;
	width: 100%;
	min-height: var(--lg-field-height);
	padding: 0;
	border: 0;
	border-block-end: var(--lg-field-border-width) solid var(--lg-rule);
	border-radius: 0;
	background-color: transparent;
	color: var(--lg-blue-deep);
	font-family: var(--lg-font-body);
	font-size: var(--lg-step-detail);
	line-height: var(--lg-leading-card);
	transition: border-color var(--lg-transition);
}

/*
 * The artboard draws MESSAGE exactly like the other two - one bare rule at the
 * same 97 pitch - so that is what is built. Gravity Forms emits rows="10", which
 * is why the height is pinned rather than left to the row count.
 *
 * A one-line message box is almost certainly not what the designer intended,
 * but inventing a taller one would be inventing. It is resizable vertically so
 * a visitor can drag it open, and the question is raised in BUILD-REPORT.md.
 */
.lg-form textarea {
	height: var(--lg-field-height);
	min-height: var(--lg-field-height);
	overflow-y: auto;
	resize: vertical;
}

/*
 * The last field's own bottom margin would stack with the footer's padding and
 * push the submit button 63 below the final rule instead of the artboard's 35.
 */
.lg-form .gfield:last-child {
	margin-block-end: 0;
}

/* Gravity Forms' own footer margin does not match the artboard's 35. */
.lg-form .gform_footer {
	margin: 0;
	padding: 0;
	padding-block-start: var(--lg-submit-gap);
}

.lg-field__control:focus-visible,
.lg-form input:focus-visible,
.lg-form textarea:focus-visible {
	outline-offset: var(--lg-space-3xs);
	border-block-end-color: var(--lg-blue-mid);
}

/*
 * Error and success states are not in the artboard. They reuse the palette
 * rather than introducing a red/green pair that was never designed: the rule
 * and message take the brand red, which already reads as an alert colour here,
 * and the confirmation takes the mid blue the rest of the section uses.
 */
.lg-form .gfield_error .gfield_label,
.lg-form .gfield_error input,
.lg-form .gfield_error textarea {
	border-block-end-color: var(--lg-red);
}

.lg-form .gfield_validation_message,
.lg-form .validation_message {
	margin-block-start: var(--lg-space-2xs);
	color: var(--lg-red);
	font-size: var(--lg-step-button);
	font-weight: 400;
}

/*
 * Gravity Forms puts the failure summary in a heading, which would otherwise
 * inherit the 80px display face from base.css and read as a section title.
 */
.lg-form .gform_validation_errors > h2,
.lg-form .gform_validation_errors > .gform_submission_error {
	margin-block-end: var(--lg-space-2xs);
	color: var(--lg-red);
	font-family: var(--lg-font-body);
	font-size: var(--lg-step-label);
	font-weight: 700;
	line-height: var(--lg-leading-card);
	text-transform: none;
}

.lg-form .gform_validation_errors {
	margin-block-end: var(--lg-field-gap);
}

.lg-form .gform_validation_errors ol {
	margin: 0;
	padding-inline-start: 1.2em;
	font-size: var(--lg-step-button);
}

/*
 * The confirmation replaces the whole form, so on its own it would be one small
 * line in a large empty space. Set at the contact-detail size in the mid blue
 * the rest of the section uses.
 */
.gform_confirmation_message,
.gform_confirmation_wrapper {
	color: var(--lg-blue-mid);
	font-family: var(--lg-font-body);
	font-size: var(--lg-step-detail);
	line-height: var(--lg-leading-body);
}


.gform-footer button.gform-has-spinner .gform-loader{
    width:15px;
    height:15px;
    border-radius: 50%;
    border:2px solid #fff;
    border-bottom-color: transparent;
    animation: rotate 2s linear infinite;
    
}
.gform-footer button.gform-has-spinner:hover .gform-loader{
    border:1px solid var(--gf-color-primary);
    border-bottom-color: transparent;
}
.gform_validation_errors{display:none !important;}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}