/* =========================================================
   WEATHERDUCK — CONTACT PAGE
   Layout and form skin for the code-only /contact/ template
   (page-contact.php). Builds on specialist-landing.css.

   The message form is Elementor Pro's, rendered from the
   "Contact" WordPress page. The Elementor selectors below are
   written to outrank Elementor's generated post CSS, so the
   form keeps its saved fields and actions while taking the
   site's flat card styling.
   ========================================================= */

.wd-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
	gap: var(--wd-space-2xl);
	align-items: start;
}

.wd-contact-form,
.wd-contact-aside {
	padding: var(--wd-space-2xl);
	border: 1px solid var(--wd-mkt-card-border);
	border-radius: var(--wd-mkt-card-radius);
	background: var(--wd-bg-card);
	box-shadow: var(--wd-mkt-card-shadow);
}

.wd-contact-form__intro {
	margin: 0 0 var(--wd-space-2xl);
	font-size: var(--wd-mkt-lede);
	line-height: var(--wd-mkt-lede-lh);
	color: var(--wd-text-secondary);
}

/* Scoped under the page class so the top margin outranks the specialist
   stylesheet's `.wd-specialist p { margin-top: 0 }`. */
.wd-specialist--contact .wd-contact-form__note {
	margin: var(--wd-space-2xl) 0 0;
	font-size: var(--wd-font-size-sm);
	line-height: 1.55;
	color: var(--wd-text-muted);
}

.wd-contact-form__note strong {
	font-weight: 700;
	color: var(--wd-text-secondary);
}

.wd-contact-form__fallback {
	margin: 0;
	font-size: var(--wd-mkt-copy);
	line-height: var(--wd-mkt-copy-lh);
}

.wd-contact-form__fallback a {
	color: var(--wd-green);
	font-weight: 700;
}

/* === Aside: other channels as band rows === */

.wd-contact-aside {
	display: grid;
	gap: var(--wd-space-2xl);
}

.wd-contact-aside h2 {
	margin: 0 0 var(--wd-space-md);
	font-size: var(--wd-mkt-h3);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.3;
}

.wd-contact-aside p {
	margin: 0;
	font-size: var(--wd-mkt-copy);
	line-height: var(--wd-mkt-copy-lh);
	color: var(--wd-text-secondary);
}

.wd-contact-ways {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wd-contact-ways li {
	display: flex;
	justify-content: space-between;
	gap: var(--wd-space-md);
	padding: var(--wd-space-md) 0;
	border-top: 1px solid var(--wd-mkt-card-border);
	font-size: var(--wd-mkt-copy);
}

.wd-contact-ways li:last-child {
	border-bottom: 1px solid var(--wd-mkt-card-border);
}

.wd-contact-ways span {
	align-self: center;
	font-size: var(--wd-font-size-xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wd-text-muted);
}

.wd-specialist--contact .wd-contact-ways a {
	color: var(--wd-green);
	font-weight: 700;
	text-align: right;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

/* === Elementor form inside the card === */

/* The page container arrives boxed at a third of the width with its own
   padding; collapse all of that so the form fills the card. */
.wd-specialist--contact .wd-contact-form .elementor {
	font-family: var(--wd-font);
}

.wd-specialist--contact .wd-contact-form .e-con.e-parent {
	--content-width: 100%;
	--width: 100%;
	--min-height: 0;
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--margin-top: 0;
	--margin-right: 0;
	--margin-bottom: 0;
	--margin-left: 0;
}

.wd-specialist--contact .wd-contact-form .e-con .e-con-inner {
	max-width: 100%;
}

.wd-specialist--contact .wd-contact-form .elementor-widget-form.elementor-element {
	margin: 0;
	padding: 0;
}

.wd-specialist--contact .wd-contact-form .elementor-widget-form .elementor-form-fields-wrapper.elementor-labels-above {
	margin: 0;
}

.wd-specialist--contact .wd-contact-form .elementor-widget-form .elementor-field-group.elementor-column {
	padding: 0;
	margin-bottom: var(--wd-space-xl);
}

.wd-specialist--contact .wd-contact-form .elementor-widget-form .elementor-field-group.elementor-field-type-submit {
	margin-top: var(--wd-space-sm);
	margin-bottom: 0;
}

/* Labels */
.wd-specialist--contact .wd-contact-form .elementor-widget-form .elementor-field-group > label {
	margin-bottom: var(--wd-space-sm);
	font-family: var(--wd-font);
	font-size: var(--wd-font-size-sm);
	font-weight: 700;
	color: var(--wd-text-primary);
}

/* Fields: same height and radius as the site's buttons */
.wd-specialist--contact .wd-contact-form .elementor-widget-form .elementor-field-group .elementor-field-textual {
	min-height: var(--wd-mkt-btn-h);
	padding: 0 var(--wd-space-lg);
	border: 1px solid var(--wd-border-strong);
	border-radius: var(--wd-mkt-btn-radius);
	background-color: var(--wd-bg-card);
	box-shadow: none;
	color: var(--wd-text-primary);
	font-family: var(--wd-font);
	font-size: .95rem;
	font-weight: 500;
	line-height: 1.4;
}

.wd-specialist--contact .wd-contact-form .elementor-widget-form .elementor-field-group textarea.elementor-field-textual {
	min-height: 170px;
	padding: var(--wd-space-md) var(--wd-space-lg);
	line-height: 1.55;
	resize: vertical;
}

.wd-specialist--contact .wd-contact-form .elementor-widget-form .elementor-field-group .elementor-field-textual::placeholder {
	color: var(--wd-text-muted);
	font-weight: 400;
}

.wd-specialist--contact .wd-contact-form .elementor-widget-form .elementor-field-group .elementor-field-textual:hover {
	border-color: var(--wd-green);
}

.wd-specialist--contact .wd-contact-form .elementor-widget-form .elementor-field-group .elementor-field-textual:focus {
	border-color: var(--wd-green);
	box-shadow: var(--wd-focus-ring);
	outline: none;
}

/* Submit: the homepage primary button */
.wd-specialist--contact .wd-contact-form .elementor-widget-form .elementor-field-type-submit .elementor-button {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 240px;
	min-height: var(--wd-mkt-btn-h);
	padding: 0 26px;
	border: 0;
	border-radius: var(--wd-mkt-btn-radius);
	background-color: var(--wd-green);
	color: var(--wd-text-on-green);
	font-family: var(--wd-font);
	font-size: var(--wd-mkt-btn-size);
	font-weight: 700;
	letter-spacing: .03em;
	line-height: 1.2;
	text-transform: uppercase;
	box-shadow: none;
	transition: background-color .15s;
}

.wd-specialist--contact .wd-contact-form .elementor-widget-form .elementor-field-type-submit .elementor-button:hover,
.wd-specialist--contact .wd-contact-form .elementor-widget-form .elementor-field-type-submit .elementor-button:focus-visible {
	background-color: var(--wd-green-hover);
	color: var(--wd-text-on-green);
}

.wd-specialist--contact .wd-contact-form .elementor-widget-form .elementor-field-type-submit .elementor-button:focus-visible {
	outline: 3px solid var(--wd-green);
	outline-offset: 3px;
}

/* Result messages */
.wd-specialist--contact .wd-contact-form .elementor-widget-form .elementor-message {
	margin-top: var(--wd-space-lg);
	font-family: var(--wd-font);
	font-size: var(--wd-font-size-md);
	font-weight: 700;
}

.wd-specialist--contact .wd-contact-form .elementor-widget-form .elementor-message-success {
	color: var(--wd-success);
}

.wd-specialist--contact .wd-contact-form .elementor-widget-form .elementor-message-danger {
	color: var(--wd-error);
}

/* === Responsive === */

@media (max-width: 1024px) {
	.wd-contact__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
	}
}

@media (max-width: 768px) {
	.wd-contact__grid {
		grid-template-columns: 1fr;
		gap: var(--wd-space-xl);
	}

	.wd-contact-form,
	.wd-contact-aside {
		padding: var(--wd-space-xl) var(--wd-card-padding-mobile);
	}
}

@media (max-width: 480px) {
	.wd-specialist--contact .wd-contact-form .elementor-widget-form .elementor-field-type-submit .elementor-button {
		width: 100%;
	}

	/* Clears the Complianz "Manage consent" tab that floats over the
	   bottom-left of the viewport on phones. */
	.wd-contact-form {
		padding-bottom: var(--wd-space-3xl);
	}
}