/*
 * PostMyDoc Business: the enquiry note ([pmd_business_enquiry], 0.39.31).
 *
 * The form on /business-enquiries/, drawn as a note addressed to PostMyDoc
 * Business in the Business pages' paper idiom: one sheet with a To line in
 * the docket-head register, the sender's fields beside the question, then
 * the action. It shares the application form's plumbing and none of its
 * look (operator, 2026-10-05), so application.css is not loaded here.
 *
 * plugin-base.css supplies the tokens and the field and button components.
 * Every rule is scoped under .pmd-enq, and every selector that styles a
 * control reaches (0,3,0) or more, past GeneratePress's input rules and
 * plugin-base's own (0,2,0) and (0,3,0) field rules (DESIGN.md, the
 * selector specificity floor). Type runs a step above the portal's 14.5px
 * because the form sits in a 16px marketing page.
 */

.pmd-enq {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, .6rem + 2.6vw, 2.25rem) clamp(3rem, 1.8rem + 5vw, 5.5rem);
	font-family: var(--pmd-font-body);
	font-size: 16px;
	line-height: 1.55;
	color: var(--pmd-text);
	text-align: left;
	caret-color: var(--pmd-navy);
}
/* Inside a Business page wrap the page owns width, gutter and rhythm. */
.pmd-biz .pmd-enq { max-width: none; padding: 0; }

.pmd-enq *,
.pmd-enq *::before,
.pmd-enq *::after { box-sizing: border-box; }
.pmd-enq ::selection { background: var(--pmd-navy); color: var(--pmd-white); }
.pmd-enq input,
.pmd-enq textarea,
.pmd-enq button { font-family: var(--pmd-font-body); }

/* ---- The sheet ---------------------------------------------------------- */
.pmd-enq .pmd-enq-sheet {
	max-width: 60rem;
	margin: 0;
	background: var(--pmd-white);
	border: 1px solid var(--pmd-border);
	border-radius: var(--pmd-radius-lg);
	box-shadow: 0 1px 2px rgba(23,20,38,.04), 0 8px 24px -10px rgba(23,20,38,.12);
	overflow: hidden;
}

/* The To line: who receives the note, in the docket-head register. */
.pmd-enq .pmd-enq-to {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	padding: 14px clamp(18px, 3vw, 28px);
	background: var(--pmd-surface);
	border-bottom: 1px solid var(--pmd-border);
}
.pmd-enq .pmd-enq-to-k {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--pmd-text-soft);
}
.pmd-enq .pmd-enq-to-v {
	font-family: var(--pmd-font-display);
	font-weight: 600;
	font-size: 15px;
	color: var(--pmd-navy);
}
.pmd-enq a.pmd-enq-to-addr {
	margin-left: auto;
	/* Named first: inside a Business page wrap, business.css redefines
	 * --pmd-font-mono without IBM Plex Mono. */
	font-family: 'IBM Plex Mono', var(--pmd-font-mono);
	font-size: 13.5px;
	color: var(--pmd-navy);
	text-decoration: underline;
	text-decoration-color: var(--pmd-cyan-dark);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}
.pmd-enq a.pmd-enq-to-addr:hover,
.pmd-enq a.pmd-enq-to-addr:focus,
.pmd-enq a.pmd-enq-to-addr:active { color: var(--pmd-navy); text-decoration-color: var(--pmd-navy); }

/* ---- The error summary --------------------------------------------------
 * A band under the To line, edge to edge like the To line itself, so the
 * sheet never holds a tinted box inside it (the nested-container ban). */
.pmd-enq .pmd-enq-alert {
	margin: 0;
	padding: 14px clamp(18px, 3vw, 28px);
	background: var(--pmd-danger-bg);
	color: var(--pmd-danger);
	border-bottom: 1px solid var(--pmd-danger-border);
	font-size: 14.5px;
	line-height: 1.5;
}
.pmd-enq .pmd-enq-alert:focus { outline: 0; }
.pmd-enq .pmd-enq-alert p { margin: 0; }
.pmd-enq .pmd-enq-alert ul { margin: 8px 0 0; padding-left: 20px; }
.pmd-enq .pmd-enq-alert li { margin: 2px 0; }
.pmd-enq .pmd-enq-alert a,
.pmd-enq .pmd-enq-alert a:hover,
.pmd-enq .pmd-enq-alert a:focus { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---- The body: sender beside question ----------------------------------- */
.pmd-enq .pmd-enq-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
	gap: 18px clamp(20px, 3.2vw, 36px);
	padding: 18px clamp(18px, 3vw, 28px) 4px;
}
.pmd-enq .pmd-enq-from { display: grid; gap: 18px; align-content: start; }
.pmd-enq .pmd-enq-field { min-width: 0; margin: 0; }
/* The subject line: what the enquiry is about, before who is asking. Capped
 * so the select reads as a field, not a band, and still holds the longest
 * topic label at 16px. */
.pmd-enq .pmd-enq-about {
	padding: clamp(20px, 3vw, 30px) clamp(18px, 3vw, 28px) 0;
}
.pmd-enq .pmd-enq-about .pmd-enq-field { max-width: 32rem; }
.pmd-enq .pmd-enq-q { display: flex; flex-direction: column; }

.pmd-enq .pmd-enq-label {
	display: block;
	margin: 0 0 6px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--pmd-navy);
}
.pmd-enq .pmd-enq-opt { font-size: 13.5px; font-weight: 400; color: var(--pmd-text-muted); }

/* Fields: the plugin-base component, a step larger, with the 3:1 input
 * boundary (--pmd-border-input) and the customer-facing 7px corner. The
 * focus and invalid states are restated at (0,4,0) because the rest rule
 * here outranks plugin-base's own (0,3,0) focus rule. */
.pmd-enq .pmd-input.pmd-input,
.pmd-enq .pmd-select.pmd-select,
.pmd-enq .pmd-textarea.pmd-textarea {
	padding: 11px 14px;
	font-size: 16px;
	line-height: 1.45;
	border-color: var(--pmd-border-input);
	border-radius: 7px;
}
.pmd-enq .pmd-textarea.pmd-textarea {
	flex: 1 1 auto;
	min-height: 12rem;
	resize: vertical;
}
.pmd-enq .pmd-input.pmd-input:focus,
.pmd-enq .pmd-select.pmd-select:focus,
.pmd-enq .pmd-textarea.pmd-textarea:focus { border-color: var(--pmd-cyan-dark); }
.pmd-enq .pmd-input.pmd-input[aria-invalid="true"],
.pmd-enq .pmd-select.pmd-select[aria-invalid="true"],
.pmd-enq .pmd-textarea.pmd-textarea[aria-invalid="true"] { border-color: var(--pmd-danger); }
.pmd-enq .pmd-select.pmd-select { cursor: pointer; }

.pmd-enq .pmd-enq-hint { margin: 6px 0 0; font-size: 13.5px; color: var(--pmd-text-muted); }
/* The question's label row carries its length hint on the right, so the
 * question box ends level with the last field of the sender column. */
.pmd-enq .pmd-enq-label-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0 12px;
	margin: 0 0 6px;
}
.pmd-enq .pmd-enq-label-row .pmd-enq-label { margin: 0; }
.pmd-enq .pmd-enq-label-row .pmd-enq-hint { margin: 0; }
.pmd-enq .pmd-field-error { margin: 6px 0 0; font-size: 13.5px; }

/* ---- The action ---------------------------------------------------------- */
.pmd-enq .pmd-enq-foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 22px clamp(18px, 3vw, 28px) clamp(22px, 3vw, 28px);
}
.pmd-enq .pmd-turnstile { margin: 0; }
.pmd-enq .pmd-enq-send {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
}
.pmd-enq .pmd-btn.pmd-btn-primary { padding: 14px 26px; font-size: 15px; }
.pmd-enq .pmd-enq-fine { margin: 0; font-size: 13.5px; color: var(--pmd-text-muted); }
.pmd-enq .pmd-enq-fine a {
	color: var(--pmd-navy);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--pmd-cyan-dark);
	text-underline-offset: 2px;
}
.pmd-enq .pmd-enq-fine a:hover,
.pmd-enq .pmd-enq-fine a:focus,
.pmd-enq .pmd-enq-fine a:active { color: var(--pmd-navy); text-decoration-color: var(--pmd-navy); }

/* ---- Sent ---------------------------------------------------------------- */
.pmd-enq .pmd-enq-done { padding: clamp(24px, 3.4vw, 34px) clamp(18px, 3vw, 28px); }
.pmd-enq .pmd-enq-done:focus { outline: 0; }
.pmd-enq .pmd-enq-done-h {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-family: var(--pmd-font-display);
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--pmd-navy);
}
.pmd-enq .pmd-enq-node {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--pmd-success);
	box-shadow: 0 0 0 3px var(--pmd-success-bg);
}
.pmd-enq .pmd-enq-done-p { margin: 8px 0 0 24px; color: var(--pmd-text); }

/* ---- Honeypot (off-screen, never shown to people) ----------------------- */
.pmd-enq .pmd-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- Narrow screens ------------------------------------------------------ */
@media (max-width: 760px) {
	.pmd-enq .pmd-enq-body { grid-template-columns: minmax(0, 1fr); }
	.pmd-enq .pmd-textarea.pmd-textarea { min-height: 10rem; }
}
@media (max-width: 560px) {
	.pmd-enq a.pmd-enq-to-addr { flex-basis: 100%; margin-left: 0; }
	.pmd-enq .pmd-btn.pmd-btn-primary { width: 100%; }
}

/* ---- Touch: the two inline links get a 44px hit area -------------------- */
@media (pointer: coarse) {
	.pmd-enq a.pmd-enq-to-addr { padding-block: 12px; margin-block: -12px; }
	.pmd-enq .pmd-enq-fine a { padding-block: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.pmd-enq .pmd-input.pmd-input,
	.pmd-enq .pmd-select.pmd-select,
	.pmd-enq .pmd-textarea.pmd-textarea { transition: none; }
}