/* Contact page (.sx-pg-contact) and the contact form (.sx-form, the [edol_contact_form] shortcode).
   Measured on Stux at 1280 from the title divider D (the bottom of .sx-page-title-rule): photo and lead start at D+84,
   FULL NAME label centre D+225, underlines D+278 / D+362, MESSAGE line D+531, SEND MESSAGE D+558 to D+610,
   photo bottom about D+619, closing divider about 83px under the photo. Columns about 584 / 88 / 552. */

/* ---------------------------------------------------------- contact block: lead + form | photo, closing divider */
.sx-pg-contact .sx-contact-sec, .sx-pg-contact.sx-contact-sec { position: relative; padding: clamp(44px, 6.56vw, 100px) var(--sx-pad) clamp(48px, 6.5vw, 100px); }
.sx-pg-contact .sx-contact-sec::after, .sx-pg-contact.sx-contact-sec::after { content: ""; position: absolute; left: var(--sx-pad); right: var(--sx-pad); bottom: 0; height: 1px; background: #dcdcdc; }
.sx-pg-contact .sx-contact { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); column-gap: clamp(32px, 6.9vw, 104px); align-items: stretch; }
.sx-pg-contact .sx-contact > * { margin: 0 !important; }
/* the photo runs from the top of the lead to 9px below SEND MESSAGE (at 1280 that is about 551x535, as in Stux) */
.sx-pg-contact .sx-contact-form { padding-bottom: clamp(4px, .7vw, 12px); }

/* lead: two lines, breaking after "helpful" (the em cap keeps the break at every width) */
.sx-pg-contact .sx-contact .sx-contact-lead {
	font-size: clamp(17px, 1.62vw, 23px); font-weight: 400; font-stretch: 100%; letter-spacing: -.01em; line-height: 1.22;
	color: var(--sx-ink); max-width: 22.8em; margin: 0 0 clamp(40px, 6.56vw, 100px);
}

/* photo: square corners; it fills the height of the text column, so its top lines up with the lead */
.sx-pg-contact .sx-contact-img { position: relative; min-height: 320px; margin: 0; }
.sx-pg-contact .sx-contact-img img { position: absolute; inset: 0; display: block; width: 100%; height: 100% !important; object-fit: cover; border-radius: 0; }

@media (max-width: 760px) {
	.sx-pg-contact .sx-contact { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
	.sx-pg-contact .sx-contact-form { padding-bottom: 0; }
	.sx-pg-contact .sx-contact-img { position: static; min-height: 0; }
	.sx-pg-contact .sx-contact-img img { position: static; height: auto !important; aspect-ratio: 4 / 3.4; }
}

/* ---------------------------------------------------------- form: one column, FULL NAME / EMAIL* / MESSAGE / SEND MESSAGE */
.sx-form { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(18px, 1.8vw, 26px); margin: 0; }
.sx-form > p { margin: 0 !important; max-width: none; }
.sx-field { display: grid; gap: 8px; }
.sx-field label {
	font-family: var(--edol-font-text); font-size: 11px; font-weight: 800; font-stretch: 110%;
	letter-spacing: -.01em; line-height: 1.2; text-transform: uppercase; color: var(--sx-ink);
}
.sx-req { position: relative; top: -.25em; margin-left: 1px; font-size: .85em; }
.sx-field input, .sx-field textarea {
	box-sizing: border-box; display: block; width: 100%; margin: 0; padding: 6px 0 8px;
	font: 400 15px/24px var(--edol-font-text); font-stretch: 100%; letter-spacing: -.01em; color: var(--sx-ink);
	background: transparent; border: 0; border-bottom: 1px solid #dcdcdc; border-radius: 0; box-shadow: none;
	-webkit-appearance: none; appearance: none; transition: border-color .25s ease, box-shadow .25s ease;
}
.sx-field textarea { height: clamp(110px, 9.8vw, 140px); min-height: 72px; resize: vertical; }
.sx-field ::placeholder { color: #8c8c8c; opacity: 1; }
@media (max-width: 760px) { .sx-field input, .sx-field textarea { font-size: 16px; } } /* 16px: iOS does not zoom the page on focus */
/* focus: the underline turns ink and doubles (the field's visible focus indicator) */
.sx-field input:focus, .sx-field textarea:focus { outline: none; border-bottom-color: var(--sx-ink); box-shadow: 0 1px 0 var(--sx-ink); }
.sx-field input:user-invalid, .sx-field textarea:user-invalid { border-bottom-color: #a8322a; box-shadow: 0 1px 0 #a8322a; }
.sx-form > .sx-form-foot { margin-top: clamp(0px, .25vw, 4px) !important; }
.sx-form-foot .wp-block-button__link { width: auto; }

/* result after sending (?edol_sent=ok|error|fail|again): a bordered box with a small square marker */
.sx-form-msg {
	position: relative; margin: 0 !important; padding: 14px 16px 14px 42px; border: 1px solid #dcdcdc;
	font-size: 15px; line-height: 1.45; letter-spacing: -.01em; color: var(--sx-ink);
}
.sx-form-msg::before { content: ""; position: absolute; left: 16px; top: 19px; width: 12px; height: 12px; background: var(--sx-yellow); }
.sx-form-msg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sx-form-msg .sx-nowrap { white-space: nowrap; }
.sx-form-msg.is-error { border-color: #c9a29d; color: #7d2a20; }
.sx-form-msg.is-error::before { background: #a8322a; }
.sx-form-msg:focus { outline: none; }
.sx-form-msg:focus-visible { outline: 2px solid var(--sx-ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .sx-field input, .sx-field textarea { transition: none; } }