/* -----------------------------------------------------------------------------
   Contact form.

   The markup comes from the [l4u_contact_form] shortcode in the l4u-core mu-plugin,
   which replaced the Elementor Pro form widget.
   -------------------------------------------------------------------------- */

.l4u-contact {
	max-width: var(--l4u-measure);
	margin-inline: auto;
	margin-block-start: 2rem;
}

.l4u-contact__notice {
	margin: 0 0 1.5rem;
	padding: .9rem 1.1rem;
	border-radius: var(--l4u-radius);
	border-inline-start: 4px solid;
	font-weight: 500;
}

.l4u-contact__notice--success {
	background: #eaf7ef;
	border-color: #1e8449;
	color: #14562f;
}

.l4u-contact__notice--error {
	background: #fdeeee;
	border-color: #c0392b;
	color: #7f231a;
}

.l4u-contact__form {
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--l4u-surface);
	border: 1px solid var(--l4u-border);
	border-radius: 12px;
}

.l4u-contact__row {
	margin: 0 0 1.1rem;
}

.l4u-contact__row label {
	display: block;
	margin-block-end: .35rem;
	font-weight: 500;
	font-size: .95rem;
}

.l4u-contact__row input,
.l4u-contact__row textarea {
	display: block;
	width: 100%;
	padding: .7rem .9rem;
	font: inherit;
	color: inherit;
	background: var(--l4u-white);
	border: 1px solid var(--l4u-border);
	border-radius: var(--l4u-radius);
}

.l4u-contact__row textarea {
	resize: vertical;
	min-height: 9rem;
}

.l4u-contact__row input:focus-visible,
.l4u-contact__row textarea:focus-visible {
	outline: 2px solid var(--l4u-blue);
	outline-offset: -1px;
	border-color: var(--l4u-blue);
}

/* The honeypot must be invisible to people but still reachable for the bots that fill in
   every field they find. display:none would let smarter bots skip it. */
.l4u-contact__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* .l4u-btn was written for links; as a <button> it needs the browser defaults reset. */
.l4u-contact .l4u-btn {
	width: 100%;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

@media (min-width: 560px) {
	.l4u-contact .l4u-btn {
		width: auto;
		min-width: 14rem;
	}
}