/****** FILE: themes/gamry/css/pages/ContactHubPage.css *****/
/* Contact Us — design option 9b: three lanes, one page.
   Spec: design_handoff_landing_pages.

   The two commercial lanes are white and the support lane is dark, so "I want to buy something"
   and "my instrument is broken" read as different kinds of errand rather than three identical
   boxes. Do not even out the panels. */

.contact-hub { max-width: 1040px; margin: 0 auto; padding: 8px 20px 48px; box-sizing: border-box; }

/* Pin the shared shell's breadcrumb to this page's own content column; its default max-width is
   wider, which leaves it floating left of the heading. */
.rd-cp--hub .rd-cp-headmax { max-width: 1040px; margin-inline: auto; padding: 0 20px; box-sizing: border-box; }

/* ---- Head ---- */

.contact-hub .contact-head { margin-bottom: 22px; }

.contact-hub .contact-eyebrow {
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #003e69;
	margin: 0 0 10px;
}

.contact-hub .contact-h1 {
	font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
	font-size: 31px;
	line-height: 1.13;
	letter-spacing: -0.015em;
	color: #17242b;
	margin: 0 0 8px;
}

.contact-hub .contact-intro { font-size: 15.5px; line-height: 1.6; color: #37444c; max-width: 660px; }
.contact-hub .contact-intro p { margin: 0 0 10px; color: #37444c; }
.contact-hub .contact-intro p:last-child { margin-bottom: 0; }

/* ---- Lanes ----
   TWO columns for the link lanes, with the form lane spanning the full width beneath them.

   This started as three equal columns, which the design mock could show because it assumed three
   similar-length forms. In this database only the support lane has a real form (thirteen fields);
   the two sales lanes are buttons, because their forms are Dynamics embeds that cannot both live
   on one page — see the Dynamics `subject` lead-routing note in the handoff. So the row was one
   ~1600px column beside two ~150px ones, and `align-items: start` left two thirds of the row as
   empty page.

   Splitting it by SHAPE instead of by count fixes that: the two link lanes are the same shape as
   each other and sit side by side, and the form gets the full width, which is also what lets its
   fields pair up two-up rather than running down a 320px column. If the sales lanes ever become
   embeds, they keep working here — three lanes of similar height would simply want the old
   three-column rule back.

   minmax(0,1fr) rather than a bare 1fr throughout: a form field with a long placeholder has a
   min-content width that would otherwise push the track wider than its share and overflow. */

.contact-hub .contact-lanes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* Still start-aligned: the two link lanes carry different amounts of copy, and stretching the
	   shorter one adds white space inside a card rather than removing it from the row. */
	align-items: start;
	gap: 14px;
	margin-bottom: 16px;
}

/* A lane that CARRIES A FORM takes the whole row; lanes that are just a button share the
   two-column row. Keyed on the shape rather than on which lane it is, so the layout follows the
   content instead of a fixed plan — which matters here because how many lanes carry a form is a
   CMS setting (ContactLane.FormMode) that changes without anyone touching this file.

   Why it has to be shape-driven: the forms are 850-1650px tall and a link lane is ~130px. Put one
   of each side by side and the short column leaves most of a screen height of empty page beside
   the tall one. Stacking the form lanes and letting the link lanes pair up avoids that at every
   combination — three forms, one form and two links, or any mix.

   :has() rather than a class on the template, so a lane that gains or loses its form in the CMS
   re-lays-out on its own. */
.contact-hub .contact-lane:has(form) { grid-column: 1 / -1; }
.contact-hub .contact-lane--dark { grid-column: 1 / -1; }

.contact-hub .contact-lane {
	display: flex;
	flex-direction: column;
	gap: 13px;
	background: #fff;
	border: 1px solid #e6eaec;
	border-radius: 12px;
	padding: 20px;
}

.contact-hub .contact-lane--dark { background: #17242b; border-color: #17242b; }

.contact-hub .contact-lane-kicker {
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 9.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #00567f;
	margin: 0 0 4px;
}
.contact-hub .contact-lane--dark .contact-lane-kicker { color: #7bb8dd; }

.contact-hub .contact-lane-title {
	font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
	font-weight: 600;
	font-size: 19px;
	line-height: 1.2;
	color: #17242b;
	margin: 0;
}
.contact-hub .contact-lane--dark .contact-lane-title { color: #fff; }

.contact-hub .contact-lane-blurb { font-size: 13.5px; line-height: 1.55; color: #4b565d; margin: 5px 0 0; }
.contact-hub .contact-lane--dark .contact-lane-blurb { color: #aeb9be; }

/* ---- Label / value rows ---- */

.contact-hub .contact-lane-rows {
	margin: 0;
	padding-top: 11px;
	border-top: 1px solid #f0f3f4;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.contact-hub .contact-lane--dark .contact-lane-rows { border-top-color: #2a3a43; }

.contact-hub .contact-lane-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
}

.contact-hub .contact-lane-row dt {
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 9px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #5f6b72;
}
.contact-hub .contact-lane--dark .contact-lane-row dt { color: #8fa2ad; }

.contact-hub .contact-lane-row dd {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: #17242b;
	text-align: right;
}
.contact-hub .contact-lane--dark .contact-lane-row dd { color: #fff; }

/* ---- Forms ----
   The inputs come from the userforms module and from the Dynamics embed; both own their own
   class names (.field, .userform, .marketingForm). Style them only from inside .contact-lane,
   never bare — those are generic names the modules use across the whole site. */

.contact-hub .contact-lane-form { min-width: 0; }

/* A form lane now spans the full row, but its CONTENTS should not stretch with it. A single column
   of inputs at 1000px loses the label-to-field pairing, a one-line blurb at 1000px is far past a
   readable measure, and the label/value rows use space-between — so "Phone" and the number end up
   at opposite ends of the screen with nothing between them, reading as two unrelated things.
   Cap head, rows and form to one measure so they stay a column. Dynamics lays its own fields out
   inside that, which is why this caps the block rather than re-gridding someone else's markup.
   NOT applied to the dark support lane: its userforms fields are deliberately two-up across the
   full width, which is what fixed its 1659px height. */
.contact-hub .contact-lane:has(.rd-form-widget) .contact-lane-form,
.contact-hub .contact-lane:has(.rd-form-widget) .contact-lane-head,
.contact-hub .contact-lane:has(.rd-form-widget) .contact-lane-rows { max-width: 680px; }

/* The userforms markup comes from the module and carries fixed widths of its own — .form_full
   is `width:700px`, and a 700px box inside a 375px column does not wrap, it overflows the page.
   Cap the whole subtree, the same guard GamryForm.css applies under .rd-form.
   Use width:100% + max-width:100%, NOT max-width:none — overriding the cap instead of the width
   is what lets the fixed 700px escape a narrow viewport. */
.contact-hub .contact-lane-form .userform,
.contact-hub .contact-lane-form .userform * { max-width: 100%; box-sizing: border-box; }
.contact-hub .contact-lane-form .form_full,
.contact-hub .contact-lane-form form.userform { width: 100%; max-width: 100%; margin: 0; }

/* form.css lays userforms out as a legacy TWO-COLUMN form: `div.field > label` is 30% wide,
   floated left and right-aligned, and `div.field > div` (plus .Actions) is 65% floated right.
   That shape needs ~700px. In a 320px lane it collapses into a right-aligned caption beside a
   sliver of input. Unwind it to a plain stacked form — label above field, both full width. */
.contact-hub .contact-lane-form div.field > div,
.contact-hub .contact-lane-form fieldset.field > div,
.contact-hub .contact-lane-form .Actions {
	width: 100%;
	float: none;
	min-height: 0;
}
.contact-hub .contact-lane-form div.field:after,
.contact-hub .contact-lane-form form.userform:after { content: none; }
/* reCAPTCHA renders a fixed 304px iframe that cannot be reflowed, so it scrolls inside its own
   box rather than widening the column. */
.contact-hub .contact-lane-form .g-recaptcha { max-width: 100%; overflow-x: auto; }
.contact-hub .contact-lane-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.contact-hub .contact-lane-form .field { margin: 0 0 9px; }

/* legend as well as label: userforms wraps radio and checkbox groups in a fieldset, and
   form.css styles `.userform legend.left` for the legacy two-column form (30% wide, floated,
   right-aligned, #353231). Left alone that legend both breaks the column layout and fails
   contrast on the dark panel — it was the one axe violation this page introduced. */
.contact-hub .contact-lane-form label,
.contact-hub .contact-lane-form legend {
	display: block;
	float: none;
	width: 100%;
	text-align: left !important;
	font-size: 12px;
	font-weight: 600;
	color: #37444c;
	margin-bottom: 4px;
	padding: 0;
}
.contact-hub .contact-lane--dark .contact-lane-form label,
.contact-hub .contact-lane--dark .contact-lane-form legend { color: #cfe0ea; }

/* Radio and checkbox OPTIONS are the exception to "label above field": the label names the
   option, so it belongs beside its control, not stacked over it. The module wraps each option
   in a plain div inside .middleColumn, hence the child selector rather than a class. */
.contact-hub .contact-lane-form .userformsoptionset .middleColumn > div,
.contact-hub .contact-lane-form .checkboxset .middleColumn > div {
	display: flex;
	align-items: center;
	gap: 8px;
	/* WCAG 2.2 target size (2.5.8). A radio renders ~13px, under the 24px minimum, so it relies
	   on the spacing exception: a 24px circle centred on each control must not touch the next
	   one's. 30px rows put the centres 30px apart. Tightening this back up reintroduces the
	   violation — it is the one axe found here. */
	min-height: 30px;
}
.contact-hub .contact-lane-form .userformsoptionset .middleColumn > div > label,
.contact-hub .contact-lane-form .checkboxset .middleColumn > div > label {
	width: auto;
	margin: 0;
	font-weight: 400;
	font-size: 13.5px;
}
.contact-hub .contact-lane-form input[type="radio"],
.contact-hub .contact-lane-form input[type="checkbox"] {
	width: auto;
	flex: 0 0 auto;
	margin: 0;
	accent-color: #003e69;
}
.contact-hub .contact-lane--dark .contact-lane-form input[type="radio"],
.contact-hub .contact-lane--dark .contact-lane-form input[type="checkbox"] { accent-color: #7bb8dd; }

.contact-hub .contact-lane-form input[type="text"],
.contact-hub .contact-lane-form input[type="email"],
.contact-hub .contact-lane-form input[type="tel"],
.contact-hub .contact-lane-form input[type="number"],
.contact-hub .contact-lane-form input[type="file"],
.contact-hub .contact-lane-form select,
.contact-hub .contact-lane-form textarea {
	width: 100%;
	max-width: 100%;
	background: #fbfbfa;
	border: 1px solid #cfd7db;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 13.5px;
	font-family: inherit;
	color: #17242b;
}

.contact-hub .contact-lane--dark .contact-lane-form input[type="text"],
.contact-hub .contact-lane--dark .contact-lane-form input[type="email"],
.contact-hub .contact-lane--dark .contact-lane-form input[type="tel"],
.contact-hub .contact-lane--dark .contact-lane-form input[type="number"],
.contact-hub .contact-lane--dark .contact-lane-form input[type="file"],
.contact-hub .contact-lane--dark .contact-lane-form select,
.contact-hub .contact-lane--dark .contact-lane-form textarea {
	background: #1e2c34;
	border-color: #3a4a53;
	color: #fff;
}

.contact-hub .contact-lane-form textarea { min-height: 76px; }

.contact-hub .contact-lane-form input:focus-visible,
.contact-hub .contact-lane-form select:focus-visible,
.contact-hub .contact-lane-form textarea:focus-visible {
	outline: 3px solid #00567f;
	outline-offset: 1px;
}
.contact-hub .contact-lane--dark .contact-lane-form input:focus-visible,
.contact-hub .contact-lane--dark .contact-lane-form select:focus-visible,
.contact-hub .contact-lane--dark .contact-lane-form textarea:focus-visible {
	outline-color: #7bb8dd;
}

/* Submit button + the fallback link button share one look. */
.contact-hub .contact-lane-form input[type="submit"],
.contact-hub .contact-lane-form button[type="submit"],
.contact-hub .contact-lane-btn {
	display: block;
	width: 100%;
	background: #003e69;
	color: #fff !important;
	border: 0;
	font-family: inherit;
	font-weight: 600;
	font-size: 13.5px;
	padding: 11px 15px;
	border-radius: 8px;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
}
.contact-hub .contact-lane-form input[type="submit"]:hover,
.contact-hub .contact-lane-form button[type="submit"]:hover,
.contact-hub .contact-lane-btn:hover { background: #00567f; }

/* The dark lane inverts its button: navy on near-black has no contrast. */
.contact-hub .contact-lane--dark .contact-lane-form input[type="submit"],
.contact-hub .contact-lane--dark .contact-lane-form button[type="submit"],
.contact-hub .contact-lane--dark .contact-lane-btn {
	background: #fff;
	color: #17242b !important;
}
.contact-hub .contact-lane--dark .contact-lane-form input[type="submit"]:hover,
.contact-hub .contact-lane--dark .contact-lane-form button[type="submit"]:hover,
.contact-hub .contact-lane--dark .contact-lane-btn:hover { background: #eef4f8; color: #003e69 !important; }

.contact-hub .contact-lane-fallback { margin: 0; }

/* ---- Lane footer ---- */

.contact-hub .contact-lane-foot {
	list-style: none;
	margin: 0;
	padding: 10px 0 0;
	border-top: 1px solid #f0f3f4;
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
.contact-hub .contact-lane--dark .contact-lane-foot { border-top-color: #2a3a43; }

.contact-hub .contact-lane-foot a { font-size: 12.5px; font-weight: 600; color: #003e69; text-decoration: none; }
.contact-hub .contact-lane-foot a:hover { text-decoration: underline; }
.contact-hub .contact-lane--dark .contact-lane-foot a { color: #cfe0ea; font-weight: 500; }
.contact-hub .contact-lane--dark .contact-lane-foot a:hover { color: #fff; }

.contact-hub .contact-lane-note { font-size: 13px; color: #4b565d; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid #f0f3f4; }
.contact-hub .contact-lane--dark .contact-lane-note { color: #aeb9be; border-top-color: #2a3a43; }

/* ---- Office strip ---- */

.contact-hub .contact-offices {
	background: #f2f5f6;
	border: 1px solid #e0e6e8;
	border-radius: 11px;
	padding: 15px 18px;
	display: flex;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	align-items: center;
}

.contact-hub .contact-offices-list { margin: 0; font-size: 13.5px; color: #4b565d; }
.contact-hub .contact-offices-lead { margin-right: 4px; }
.contact-hub .contact-office strong { color: #17242b; font-weight: 600; }
.contact-hub .contact-office-sep { margin: 0 6px; color: #8a969c; }
.contact-hub .contact-offices-note { margin: 0; font-size: 13px; color: #5f6b72; }

.contact-hub .contact-body { margin-top: 26px; font-size: 15px; line-height: 1.6; color: #37444c; }

/* The lane grid above and this section were added after the rest of this file, to rebalance the
   row: see the reasoning at .contact-lanes. Committed within c630f58 along with the feature, so
   `git log -L` on either block attributes both to that commit rather than to separate work. */

/* ---- The full-width form lane ----
   Now that this panel spans the row, two things that were right in a 320px column are wrong in a
   1000px one. */

/* Prose set to a readable measure instead of running the whole width. */
.contact-hub .contact-lane--dark .contact-lane-head { max-width: 58ch; }

/* The phone/reply pairs were stacked with `justify-content: space-between`, which across a full
   row throws the label and its value to opposite ends of the page. Sit them side by side at their
   natural width instead, so each label stays next to the value it names. */
.contact-hub .contact-lane--dark .contact-lane-rows {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px 34px;
}
.contact-hub .contact-lane--dark .contact-lane-row {
	justify-content: flex-start;
	gap: 10px;
}
.contact-hub .contact-lane--dark .contact-lane-row dd { text-align: left; }

/* Fields two-up. The module makes every field a direct child of the step, so the step is the grid
   and no extra markup is needed. Column gap only: `.field` keeps its own 9px bottom margin for row
   spacing, and grid margins do not collapse. */
.contact-hub .contact-lane--dark .contact-lane-form .userformsstep {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 22px;
	align-items: start;
}

/* Three exceptions span both columns.
     .textarea   the message — the one field that benefits from the full width
     .userformsoptionset  a question with its answers; splitting it from them reads as two fields
   .error-container is in the list because userforms unhides it above the fields on a failed
   submit, and a validation summary confined to one column is easy to miss.

   Attach File and Captcha deliberately do NOT span: left to the flow they pair with each other on
   the last row, which both saves a row and keeps the file input near its natural size instead of
   stretching a Choose-File button across the whole panel. reCAPTCHA's fixed 304px iframe fits a
   half column at this width. */
.contact-hub .contact-lane--dark .contact-lane-form .userformsstep > .error-container,
.contact-hub .contact-lane--dark .contact-lane-form .userformsstep > .field.textarea,
.contact-hub .contact-lane--dark .contact-lane-form .userformsstep > .field.userformsoptionset {
	grid-column: 1 / -1;
}

/* With the question spanning the row, stack its answers side by side rather than leaving the
   right half of the row empty. The 28px column gap is not cosmetic: these radios render ~13px, so
   they clear WCAG 2.2 target size (2.5.8) only via the spacing exception — a 24px circle centred
   on each control must not touch its neighbour's, vertically OR horizontally. 28px apart holds
   that; tightening it reintroduces the violation. */
.contact-hub .contact-lane--dark .contact-lane-form .userformsoptionset .middleColumn {
	display: flex;
	flex-wrap: wrap;
	gap: 0 28px;
}

/* The message box no longer needs to be tall to be usable now that it is wide. */
.contact-hub .contact-lane--dark .contact-lane-form textarea { min-height: 104px; }

/* Submit sits outside the field grid (.Actions is a sibling of .userform-fields), so give it the
   button's own width rather than the full row. */
.contact-hub .contact-lane--dark .contact-lane-form input[type="submit"],
.contact-hub .contact-lane--dark .contact-lane-form button[type="submit"] {
	width: auto;
	min-width: 210px;
}

/* ---- Narrow ----
   Three columns of form fields cannot survive a phone. Stack at 900px, well before the fields
   start clipping, and hold the 320px reflow floor the rest of the site is held to. */

@media (max-width: 900px) {
	/* minmax(0, 1fr), never a bare 1fr: a grid item defaults to min-width:auto, so one wide
	   descendant (a module form field) sizes the whole track and pushes the page wider than the
	   viewport instead of being made to fit. */
	.contact-hub .contact-lanes { grid-template-columns: minmax(0, 1fr); }
	.contact-hub .contact-lane-foot { margin-top: 0; }
	/* One column of fields again — a pair of half-width inputs on a phone is two unusable ones. */
	.contact-hub .contact-lane--dark .contact-lane-form .userformsstep { grid-template-columns: minmax(0, 1fr); }
	.contact-hub .contact-lane--dark .contact-lane-head { max-width: none; }
}

@media (max-width: 560px) {
	.contact-hub .contact-h1 { font-size: 25px; }
	.contact-hub .contact-offices { flex-direction: column; align-items: flex-start; gap: 8px; }
}