/* mk-contact.css: /contact/ in "the control room at night". Loaded on the contact page only (slug contact), after home.css.
   The page is the [pd_contact] shortcode plus four "before you write" links; the plugin's markup, ids, classes and the
   modal behaviour are untouched (the modal variant .pdc--modal is not styled here: every rule is under the page id #pd-contact).
   Visitor task: send a message, so the form is the first thing under the header. */

body.dsd #page-container .dsdm-contact-main {
	padding-top: 56px !important;
	padding-bottom: var(--dsdh-pad) !important;
}
body.dsd #page-container .dsdm-contact-main #pd-contact.pdc {
	--pdc-bg: var(--dsc-bg);
	--pdc-card: var(--dsc-surface);
	--pdc-line: var(--dsc-line);
	--pdc-text: var(--dsc-text);
	--pdc-muted: var(--dsc-muted-long);
	--pdc-green: var(--dsc-accent);
	--pdc-red: var(--dsc-bad);
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	column-gap: 64px;
	row-gap: 16px;
	align-items: start;
	max-width: none;
	margin: 0;
	padding: 0;
	font-family: var(--dsc-font);
	font-size: 16px;
	color: var(--dsc-muted-long);
}
body.dsd #page-container .dsdm-contact-main #pd-contact .pdc-head { grid-column: 1; grid-row: 1 / span 3; }
body.dsd #page-container .dsdm-contact-main #pd-contact p.pdc-notice { grid-column: 2; grid-row: 1; margin: 0; }
body.dsd #page-container .dsdm-contact-main #pd-contact .pdc-form { grid-column: 2; }

body.dsd #page-container .dsdm-contact-main #pd-contact h1.pdc-title {
	margin: 0 0 20px !important;
	font-size: clamp(38px, 4.4vw, 56px) !important;
	line-height: 1.02 !important;
	letter-spacing: -0.03em !important;
	text-wrap: balance;
}
body.dsd #page-container .dsdm-contact-main #pd-contact p.pdc-lead {
	max-width: 40ch;
	margin: 0;
	font-size: 18px;
	line-height: 1.55;
	color: var(--dsc-muted-long);
}

/* the form: one framed surface, mono labels, hairline inputs */
body.dsd #page-container .dsdm-contact-main #pd-contact .pdc-form {
	gap: 22px;
	margin: 0;
	padding: 32px;
	background: var(--dsc-surface);
	border: 1px solid var(--dsc-line);
	border-radius: var(--dsc-r-card);
	box-shadow: none;
}
body.dsd #page-container .dsdm-contact-main #pd-contact .pdc-field {
	gap: 8px;
	font-weight: 400;
}
body.dsd #page-container .dsdm-contact-main #pd-contact .pdc-field > span {
	font-family: var(--dsc-mono);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0.04em;
	color: var(--dsc-muted-long);
}
body.dsd #page-container .dsdm-contact-main #pd-contact .pdc-field > span em {
	margin-left: 8px;
	font-style: normal;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dsc-muted);
}
/* the contact form does not mark its required fields; they are required in the markup, so say so */
body.dsd #page-container .dsdm-contact-main #pd-contact .pdc-field:has(> input[required], > textarea[required]) > span::after {
	content: "required";
	margin-left: 8px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dsc-accent);
}
body.dsd #page-container .dsdm-contact-main #pd-contact :is(input[type="text"], select, textarea) {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	background: var(--dsc-bg);
	color: var(--dsc-text);
	border: 1px solid var(--dsc-line-strong);
	border-radius: 8px;
	font: 400 16px/1.4 var(--dsc-font);
	box-shadow: none;
}
body.dsd #page-container .dsdm-contact-main #pd-contact textarea { min-height: 140px; }
body.dsd #page-container .dsdm-contact-main #pd-contact ::placeholder { color: var(--dsc-muted); opacity: 1; }
body.dsd #page-container .dsdm-contact-main #pd-contact :is(input, select, textarea):focus {
	border-color: var(--dsc-accent);
	outline: 2px solid var(--dsc-accent);
	outline-offset: 1px;
}
body.dsd #page-container .dsdm-contact-main #pd-contact .pdc-invalid {
	border-color: var(--dsc-bad);
	background: rgba(239, 83, 80, 0.08);
}
body.dsd #page-container .dsdm-contact-main #pd-contact .pdc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-height: 48px;
	padding: 0 28px;
	background: var(--dsc-accent);
	color: var(--dsc-on-accent);
	border: 1px solid var(--dsc-accent);
	border-radius: var(--dsc-r-btn);
	font: 600 16px/1.1 var(--dsc-font);
	filter: none;
	cursor: pointer;
}
body.dsd #page-container .dsdm-contact-main #pd-contact .pdc-btn:hover {
	background: var(--dsc-accent-hover);
	border-color: var(--dsc-accent-hover);
	filter: none;
}
body.dsd #page-container .dsdm-contact-main #pd-contact p.pdc-notice {
	padding: 14px 16px;
	border-radius: 10px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--dsc-text);
}
body.dsd #page-container .dsdm-contact-main #pd-contact p.pdc-ok { background: rgba(102, 187, 106, 0.1); border: 1px solid var(--dsc-ok); }
body.dsd #page-container .dsdm-contact-main #pd-contact p.pdc-err { background: rgba(239, 83, 80, 0.1); border: 1px solid var(--dsc-bad); }

/* under it: four ways to an answer without writing */
body.dsd #page-container .dsdm-contact-alts.dsdh-row { align-items: stretch; }
body.dsd #page-container .dsdm-contact-alts > .dsdm-contact-alt { gap: 12px; }
body.dsd #page-container .dsdm-contact-alt .dsdh-body .et_pb_text_inner p { font-size: 15px; line-height: 1.55; }
body.dsd #page-container .dsdm-contact-alt > .dsdh-link:last-child { margin-top: auto !important; }

@media (max-width: 1100px) {
	body.dsd #page-container .dsdm-contact-main #pd-contact.pdc { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
	body.dsd #page-container .dsdm-contact-main #pd-contact .pdc-head,
	body.dsd #page-container .dsdm-contact-main #pd-contact p.pdc-notice,
	body.dsd #page-container .dsdm-contact-main #pd-contact .pdc-form { grid-column: 1; grid-row: auto; }
}
@media (max-width: 767px) {
	body.dsd #page-container .dsdm-contact-main { padding-top: 32px !important; }
	body.dsd #page-container .dsdm-contact-main #pd-contact .pdc-form { padding: 20px; }
	body.dsd #page-container .dsdm-contact-main #pd-contact .pdc-btn { align-self: stretch; }
}