/**
 * Floor Ready Pro - Contact Us template
 *
 * Styles for the section unique to template-contact.php: Contact (details
 * + form). Page Header and Service Areas are styled in about.css, which
 * this template loads alongside this file.
 */

/* ----------------------------------------------------------------------
 * Contact
 * -------------------------------------------------------------------- */
.frp-contact {
	padding-top: var(--frp-space-20);
	padding-bottom: var(--frp-space-20);
}

.frp-contact__grid {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	align-items: start;
	gap: var(--frp-space-16);
}

.frp-contact__text {
	margin-top: var(--frp-space-4);
	margin-bottom: var(--frp-space-8);
	color: var(--frp-grey-500);
}

.frp-contact__list {
	display: flex;
	flex-direction: column;
	gap: var(--frp-space-5);
}

.frp-contact__item {
	display: flex;
	align-items: flex-start;
	gap: var(--frp-space-4);
}

.frp-contact__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: var(--frp-radius-circle);
	background: var(--frp-gold-10);
	color: var(--frp-gold);
}

.frp-contact__label {
	display: block;
	margin-bottom: var(--frp-space-1);
	font-size: var(--frp-fs-xs);
	font-weight: var(--frp-fw-semibold);
	color: var(--frp-grey-500);
	text-transform: uppercase;
	letter-spacing: var(--frp-ls-eyebrow);
}

.frp-contact__value {
	display: block;
	font-size: var(--frp-fs-sm);
	font-weight: var(--frp-fw-medium);
	color: var(--frp-ink);
}

a.frp-contact__value:hover {
	color: var(--frp-gold);
}

.frp-contact__form-wrap {
	padding: var(--frp-space-8);
	background: var(--frp-white);
	border-radius: var(--frp-radius-lg);
	box-shadow: var(--frp-shadow-md);
}

.frp-contact__notice {
	margin: 0 0 var(--frp-space-5);
	padding: var(--frp-space-3) var(--frp-space-4);
	border-radius: var(--frp-radius-sm);
	font-size: var(--frp-fs-sm);
}

.frp-contact__notice--success {
	background: #eaf7ee;
	color: #1f7a3d;
	border: 1px solid #bfe6c9;
}

.frp-contact__notice--error {
	background: #fdeeee;
	color: #b3261e;
	border: 1px solid #f3c6c4;
}

.frp-contact__form {
	display: flex;
	flex-direction: column;
	gap: var(--frp-space-5);
}

.frp-contact__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--frp-space-5);
}

.frp-contact__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	left: -9999px;
}

.frp-field {
	display: flex;
	flex-direction: column;
	gap: var(--frp-space-2);
}

.frp-field label {
	font-size: var(--frp-fs-sm);
	font-weight: var(--frp-fw-medium);
	color: var(--frp-ink);
}

.frp-field input,
.frp-field textarea {
	padding: var(--frp-space-3) var(--frp-space-4);
	background: var(--frp-white);
	border: 1px solid var(--frp-grey-100);
	border-radius: var(--frp-radius-sm);
	font-family: inherit;
	font-size: var(--frp-fs-sm);
	color: var(--frp-ink);
	transition: border-color var(--frp-transition);
}

.frp-field input:focus,
.frp-field textarea:focus {
	outline: none;
	border-color: var(--frp-gold);
}

.frp-field textarea {
	min-height: 120px;
	resize: vertical;
}

.frp-contact__submit {
	align-self: flex-start;
}

/* ----------------------------------------------------------------------
 * Responsive
 * -------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.frp-contact__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.frp-contact {
		padding-top: var(--frp-space-12);
		padding-bottom: var(--frp-space-12);
	}

	.frp-contact__form-wrap {
		padding: var(--frp-space-5);
	}

	.frp-contact__row {
		grid-template-columns: 1fr;
	}
}