/*
 * MEPCO theme — Request a quote route (page-request-a-quote.php). Prototype lines 901–956; every
 * value below is copied from that element's inline style. The shared classes (.section, .kicker,
 * .page-title, .lede, .two-col, .card, .panel-dark, .field, .input, .select, .textarea, .btn,
 * .h-18, .text-link and the tokens) come from base.css and are only extended where the prototype's
 * inline styles differ.
 *
 *   .quote                       the page (.section padding 56px gutter 72px)
 *   .quote__title / __lede       header (H1 margin 6px 0 10px, lede margin 0 0 32px, max-width 620px)
 *   .quote__cols                 .two-col with the prototype's 460 / 300 flex bases
 *   .quote__panel                the form panel (.card + clamp(20px,3vw,32px))
 *   .quote-form__grid            auto-fit minmax(min(100%,240px),1fr), gap 18px 20px
 *   .quote-form__field--wide     grid-column 1/-1 (notes)
 *   .quote-form__drop            the dashed attachment box + .quote-form__choose button
 *   .quote-form__send            send button row (gap 16px, margin-top 24px)
 *   .quote-form__alert / __error validation messages (no prototype equivalent — see below)
 *   .quote-sent                  the role=status confirmation
 *   .quote-route                 the dark "ROUTED TO" card
 *   .quote-talk                  the "Prefer to talk?" box
 *
 * base.css has no colour token for a validation message (the prototype has no error state), so the
 * route defines --quote-error locally; it is the only value here that is not from the prototype.
 */

.quote {
	--quote-error: #9e2b1a;
}

/* Header (prototype 904–906) */
.quote__title { margin: 6px 0 10px; }
.quote__lede { margin: 0 0 32px; max-width: 620px; }

/* Two-column band (prototype 907): flex-wrap, gap 32px 40px, 460 / 300 bases */
.quote__cols > .main { flex: 999 1 460px; }
.quote__cols > .aside { flex: 1 1 300px; }

/* The form panel (prototype 908) */
.quote__panel { padding: clamp(20px, 3vw, 32px); }

/* ---------------------------------------------------------------------------
 * The form (prototype 910–922)
 * ------------------------------------------------------------------------ */
/*
 * The prototype's inputs inherit only the font FAMILY (`input,select,button,textarea{font-family:inherit}`
 * at prototype line 50), so their weight and line-height stay at the browser default — a 15px control is
 * 45px tall, not 49px. base.css uses `font: inherit` on .input/.select/.textarea, which also inherits the
 * label's 500 weight and the 1.5 line-height; both are restored to the prototype's values here.
 */
.quote-form .input,
.quote-form .select,
.quote-form .textarea {
	font-weight: 400;
	line-height: normal;
}

.quote-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 18px 20px;
}
.quote-form__field--wide { grid-column: 1 / -1; }

/* Attachments (prototype 921) */
.quote-form__drop {
	grid-column: 1 / -1;
	border: 1px dashed #a9a59c;
	padding: 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--text-2);
}
.quote-form__choose {
	padding: 8px 14px;
	border: 1.5px solid var(--navy);
	font-weight: 600;
	cursor: pointer;
	border-radius: 2px;
	color: var(--navy);
	white-space: nowrap;
}
.quote-form__choose:hover { background: var(--navy); color: #fff; }
/* The real <input type=file> sits behind the label (.sr-only): keep its focus ring visible. */
.quote-form__file:focus-visible + .quote-form__choose { outline: 2px solid var(--orange); outline-offset: 2px; }
.quote-form__chosen {
	flex: 1 0 100%;
	font: 12px var(--font-mono);
	color: var(--muted);
	overflow-wrap: anywhere;
}

/* Send row (prototype 923–926) */
.quote-form__send {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
	flex-wrap: wrap;
}
.quote-form__submit { padding: 14px 24px; }
.quote-form__note { font-size: 13px; color: var(--muted); }

/* Validation messages (server + native constraint messages mirrored into the same place) */
.quote-form__alert {
	margin: 0 0 18px;
	padding: 12px 14px;
	border: 1px solid var(--quote-error);
	background: #fff;
	color: var(--quote-error);
	font-size: 13px;
	font-weight: 500;
	border-radius: 2px;
}
.quote-form__error {
	font-size: 12px;
	font-weight: 500;
	color: var(--quote-error);
	text-wrap: pretty;
}
.quote-form__error--files { flex: 1 0 100%; }
.quote-form .input[aria-invalid=true],
.quote-form .select[aria-invalid=true],
.quote-form .textarea[aria-invalid=true] { border-color: var(--quote-error); }

/* ---------------------------------------------------------------------------
 * Confirmation (prototype 928–937)
 * ------------------------------------------------------------------------ */
.quote-sent {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 12px 0;
}
.quote-sent__title {
	margin: 0;
	font: 700 clamp(30px, 4vw, 40px)/1.05 var(--font-display);
	text-transform: uppercase;
	text-wrap: pretty;
}
.quote-sent__body {
	margin: 0;
	color: var(--text-2);
	max-width: 560px;
	text-wrap: pretty;
}
.quote-sent__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 8px;
}
.quote-sent__back { padding: 12px 20px; }
.quote-sent__again { padding: 12px 20px; font-size: 15px; }

/* ---------------------------------------------------------------------------
 * "ROUTED TO" card (prototype 940–946) — .panel-dark gives bg/colour/24px padding
 * ------------------------------------------------------------------------ */
.quote-route {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.quote-route__kicker {
	font: 11px var(--font-mono);
	color: var(--orange-dark);
	letter-spacing: .14em;
}
.quote-route__head {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: flex-start;
}
.quote-route__name {
	font: 600 22px/1.1 var(--font-display);
	text-transform: uppercase;
}
.quote-route__tag {
	font: 600 11px var(--font-mono);
	background: var(--orange);
	color: var(--ink);
	padding: 3px 7px;
	border-radius: 2px;
	white-space: nowrap;
}
.quote-route__addr { font-size: 13px; color: var(--dark-text); }
.quote-route__contact {
	display: flex;
	gap: 6px 16px;
	font-size: 13px;
	flex-wrap: wrap;
}
/* The prototype's inert spans are real tel:/mailto: links here (BUILD-SPEC §0.1): same colour and
 * weight, plus the underline-on-hover a followable link needs. */
.quote-route__phone { font-weight: 600; color: #fff; }
.quote-route__email { color: #e0a15e; overflow-wrap: anywhere; }
.quote-route__phone:hover { color: #fff; text-decoration: underline; }
.quote-route__email:hover { color: #e0a15e; text-decoration: underline; }
.quote-route__note {
	font-size: 12px;
	color: var(--dark-text);
	border-top: 1px solid var(--line-dark-2);
	padding-top: 10px;
	margin-top: 4px;
	text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
 * "Prefer to talk?" box (prototype 947–952)
 * ------------------------------------------------------------------------ */
.quote-talk {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.quote-talk__text { font-size: 13px; color: var(--text-2); }
.quote-talk__phone { font-weight: 600; }
.quote-talk__link { align-self: flex-start; }

/* Mobile (≤ 899px): 44px file button; the phone / email / rep links keep their text size but get a
   44px tap box (padding pulled back with negative margins so the layout does not move). */
@media (max-width: 899.98px) {
	.quote-form__choose { min-height: 44px; display: inline-flex; align-items: center; }
	.quote-route__phone, .quote-route__email, .quote-talk__link { display: inline-block; padding: 13px 0; margin: -13px 0; }
}