/**
 * /contact-us, plus the lead-page pieces /affiliate-partner and the 404 reuse
 * (their templates add this bundle): section head spacing, intro copy, column
 * titles and the form card (live form.cons-contact-form).
 *
 * Values measured on bluearc.com.pk at 1440/1200/1024/768/390 (media.md §7–8).
 *
 * @package BlueArcChild
 */

/* ==========================================================================
   1. Shared lead-page pieces (contact + affiliate)
   ========================================================================== */

/* Live prints an empty <p> (padding-top 10px) under the separator. */
.ba-lead-head {
	padding-bottom: 10px;
}

/* "LET’S GET IN TOUCH!" / "TO BECOME BLUE ARC’S AFFILIATE" (live h5 at 20px/500). */
.ba-lead-intro {
	margin: 10px 0;
	color: var(--ba-text-strong);
	font-size: 20px;
	font-weight: 500;
	line-height: 22px;
	text-transform: uppercase;
}

.ba-lead-intro a,
.ba-lead-intro a:hover,
.ba-lead-intro a:focus,
.ba-lead-text a,
.ba-lead-text a:hover,
.ba-lead-text a:focus {
	color: var(--ba-primary);
}

.ba-lead-text {
	font-size: 18px;
	line-height: 24px;
}

/* "LOCATION" / "FILL IN THIS FORM" (live h4.text-uppercase.m-b0); 404 "HELPFUL LINKS". */
.ba-lead-title {
	margin: 10px 0 0;
	color: var(--ba-text-strong);
	font-size: var(--ba-fs-h4);
	line-height: var(--ba-lh-h4);
	text-transform: uppercase;
}

/* Form card: base look is .ba-form-card (components.css). */

/* Live label.input-group is a full-width table box; ours is also tied to its field. */
.ba-lead-card .ba-label {
	display: block;
	width: 100%;
}

.ba-lead-card .ba-label__hint {
	color: var(--ba-text-hint, #aab4be);
	font-size: 85%;
	font-weight: var(--ba-fw-semibold);
	opacity: 1;
}

/* Live keeps the browser's two-way resize grip, but we restrict it to vertical to avoid breaking the flex column layout (documented deviation). */
.ba-lead-card .ba-textarea {
	max-width: 100%;
	resize: vertical;
}

.ba-lead-card .ba-input:focus,
.ba-lead-card .ba-select:focus,
.ba-lead-card .ba-textarea:focus {
	border-color: var(--ba-primary);
}

/* jQuery Validate look: the field keeps its border; a 14px/600 red line follows it. */
.ba-lead-card [aria-invalid="true"] {
	border-color: var(--ba-border-input);
}

.ba-lead-card .ba-field__error {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: var(--ba-fw-semibold);
	line-height: 20px;
}

/* Live leaves "Profession" outside a .form-group: no gap before the next label. */
.ba-lead-card .ba-field--flush {
	margin-bottom: 0;
}

.ba-lead-card__actions {
	display: flex;
	justify-content: flex-end;
}

.ba-lead-card__actions .ba-btn {
	margin-left: -1px;
}

.ba-lead-card__submit {
	margin-right: 15px;
}

.ba-lead-card [type="submit"][disabled] {
	cursor: not-allowed;
	opacity: 0.8;
	pointer-events: auto;
}

.ba-lead-card__submit .fa-spinner {
	margin: 0 8px 0 0;
}

/* ==========================================================================
   2. /contact-us
   ========================================================================== */

.ba-contact__intro {
	margin-bottom: 50px;
}

.ba-contact__row {
	margin-bottom: 50px;
}

.ba-contact__map {
	margin-bottom: 30px;
	padding: 10px;
	border: 1px solid var(--ba-border-legacy);
}

/* Inline like live, so the frame keeps the 5px line-box gap under the map. */
.ba-contact__map iframe {
	width: 100%;
	height: 465px;
	border: 0;
}

.ba-contact__form-wrap {
	padding: 0 30px 30px;
}