/* ==========================================================================
   Redesigned form pages (2026-08) — UserDefinedForm + ContactPage

   IMPORTANT SCOPING RULE
   The userforms module owns very generic class names: .field, .error,
   .checkbox, .checkboxset, .btn-toolbar, .form-step, .error-list,
   .error-container, .step-button-*, .userform-progress, .progress-bar.
   Its JavaScript depends on them and the theme does NOT override its field
   templates. So every rule here is scoped under .rd-form — never a bare
   element or bare .field/.error selector — and the module's own
   userforms.css stays loaded underneath.
   ========================================================================== */

:root {
	--rd-form-shell: 1120px;
	--rd-form-measure: 60em;
}

.rd-form { background: var(--gm-bg, #fbfbfa); }

/* ---------- Header ---------- */

.rd-form-head { background: var(--gm-surface, #fff); border-bottom: 1px solid var(--gm-border, #e6eaec); padding: 26px 40px 32px; }
.rd-form-headmax { max-width: var(--rd-form-shell); margin-inline: auto; }
.rd-form-head .rd-breadcrumb { width: 100%; margin: 0 0 24px; }
.rd-form-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gm-navy, #003e69); margin-bottom: 12px; }
.rd-form-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(30px, 3.1vw, 42px); font-weight: 700; letter-spacing: -0.026em; line-height: 1.08; color: var(--gm-ink, #17242b); margin: 0; text-wrap: balance; }

/* ---------- Layout ---------- */

.rd-form-body { display: grid; grid-template-columns: 1fr; gap: 34px; max-width: var(--rd-form-shell); margin-inline: auto; padding: 38px 40px 0; box-sizing: border-box; }
.rd-form-main { min-width: 0; }

/* ---------- Intro prose (also renders the post-submit message) ---------- */

.rd-form-prose { max-width: var(--rd-form-measure); }
.rd-form-prose:empty { display: none; }
.rd-form-prose p { font-size: 17px; line-height: 1.7; color: var(--gm-body, #47535b); margin: 0 0 15px; }
.rd-form-prose p:last-child { margin-bottom: 0; }
.rd-form-prose p:empty { display: none; }
.rd-form-prose a { color: var(--gm-navy, #003e69); font-weight: 500; }
.rd-form-prose a:hover { color: var(--gm-navy-hover, #00567f); text-decoration: underline; }
.rd-form-prose h2, .rd-form-prose h3 { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 600; color: var(--gm-ink, #17242b); margin: 26px 0 10px; }
.rd-form-prose h4, .rd-form-prose h5 { font-family: 'Space Grotesk', sans-serif; font-size: 16.5px; font-weight: 600; color: var(--gm-ink, #17242b); margin: 20px 0 8px; }
.rd-form-prose :is(h2, h3, h4, h5):first-child { margin-top: 0; }
.rd-form-prose ul, .rd-form-prose ol { font-size: 17px; line-height: 1.7; color: var(--gm-body, #47535b); margin: 0 0 15px; padding-left: 1.4em; }
.rd-form-prose li { margin: 0 0 6px; }
.rd-form-prose strong { color: var(--gm-ink, #17242b); }
/* ...but NOT inside a link. Editors bold links in the CMS, which nests <strong> in <a>;
   the rule above then repaints them ink and they stop looking like links. Same defect
   found and fixed on .rd-cp-prose (see GamryContentPage.css). */
.rd-form-prose a strong, .rd-form-prose a b { color: inherit; }
.rd-form-prose img { max-width: 100%; height: auto; border-radius: 10px; }
.rd-form-prose table { max-width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15.5px; display: block; overflow-x: auto; }
.rd-form-prose th, .rd-form-prose td { padding: 9px 12px; border-bottom: 1px solid var(--gm-border-row, #f4f6f7); text-align: left; vertical-align: top; }
.rd-form-prose [width] { max-width: 100%; }

/* When the token puts the form inside the prose block, give it room above. */
.rd-form-prose .userform { margin-top: 26px; }

/* ==========================================================================
   The form itself — scoped restyle over the module's markup
   ========================================================================== */

.rd-form-formwrap { margin-top: 28px; max-width: var(--rd-form-measure); }
/* TemplateForm wraps $Form in .form_full, which form.css sets to a fixed
   `width:700px; max-width:100%`. Override the fixed width so the form fills the measure
   column — but KEEP max-width:100%, or the 700px escapes a narrow viewport (that mistake
   produced 328px of horizontal overflow at 390px on the four pages that use TemplateForm). */
.rd-form-formwrap .form_full { width: 100%; max-width: 100%; margin: 0; }

/* Panel around the form, whether it came from $Form or from inside $Content. */
.rd-form .userform,
.rd-form-formwrap .userform {
	background: var(--gm-surface, #fff);
	border: 1px solid var(--gm-border, #e6eaec);
	border-radius: 18px;
	padding: 30px 32px 26px;
	box-sizing: border-box;
	max-width: 100%;
}

/* Every descendant is width-constrained: the module's markup ships its own widths and
   inline attributes, which is what produced 28px of overflow on the Applications pages. */
.rd-form .userform, .rd-form .userform * { max-width: 100%; box-sizing: border-box; }

.rd-form .userform-fields { display: flex; flex-direction: column; gap: 18px; }

/* Field rows. .field is the module's class — only ever touched scoped, never bare. */
.rd-form .userform .field { margin: 0; padding: 0; border: 0; }
.rd-form .userform .field > label,
.rd-form .userform .field .left,
.rd-form .userform legend {
	display: block; font-size: 13.5px; font-weight: 500;
	color: var(--gm-muted, #5f6b72); margin: 0 0 6px; padding: 0;
	font-family: 'IBM Plex Sans', sans-serif;
}
.rd-form .userform .field .right,
.rd-form .userform .description {
	display: block; font-size: 12.5px; line-height: 1.5;
	color: var(--gm-faint, #6c7981); margin-top: 5px;
}

.rd-form .userform input[type=text],
.rd-form .userform input[type=email],
.rd-form .userform input[type=tel],
.rd-form .userform input[type=url],
.rd-form .userform input[type=number],
.rd-form .userform input[type=password],
.rd-form .userform input[type=date],
.rd-form .userform select,
.rd-form .userform textarea {
	width: 100%; max-width: 100%; box-sizing: border-box;
	border: 1px solid var(--gm-border-ctl, #d5dcdf); border-radius: 10px;
	padding: 12px 14px; font-size: 16px; font-family: inherit;
	color: var(--gm-ink, #17242b); background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.rd-form .userform textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.rd-form .userform input:focus,
.rd-form .userform select:focus,
.rd-form .userform textarea:focus {
	outline: none; border-color: var(--gm-sky, #7bb8dd);
	box-shadow: 0 0 0 3px rgba(123,184,221,.35);
}
.rd-form .userform input::placeholder,
.rd-form .userform textarea::placeholder { color: #9aa6ac; }

/* File upload — 3 forms use one (61, 1615, 1954). Left as a native control so the
   module's validation and the browser's file picker behave normally. */
.rd-form .userform input[type=file] {
	width: 100%; font-size: 14.5px; padding: 11px 12px;
	border: 1px dashed var(--gm-border-ctl, #d5dcdf); border-radius: 10px;
	background: var(--gm-tint, #f4f7fa); color: var(--gm-body, #47535b);
}

/* Checkbox / radio groups. The module renders .checkboxset / .optionset lists. */
.rd-form .userform .checkboxset > label,
.rd-form .userform .optionset > label { margin-bottom: 8px; }
.rd-form .userform ul.optionset,
.rd-form .userform ul.checkboxset { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rd-form .userform ul.optionset li,
.rd-form .userform ul.checkboxset li { margin: 0; display: flex; align-items: flex-start; gap: 9px; }
.rd-form .userform ul.optionset li label,
.rd-form .userform ul.checkboxset li label { font-size: 15.5px; color: var(--gm-body, #47535b); font-weight: 400; margin: 0; }
.rd-form .userform input[type=checkbox],
.rd-form .userform input[type=radio] { width: auto; margin: 3px 0 0; flex: 0 0 auto; accent-color: var(--gm-navy, #003e69); }

/* Required marker */
.rd-form .userform .requiredField > label::after,
.rd-form .userform .required > label::after { content: " *"; color: #b4322c; }

/* Validation messages — module classes, scoped. */
.rd-form .userform .message,
.rd-form .userform .error-container,
.rd-form .userform .error-list {
	font-size: 13.5px; line-height: 1.5; color: #8f2b26;
	background: #fdf3f2; border: 1px solid #f0d3d0; border-radius: 9px;
	padding: 10px 12px; margin: 0 0 12px; list-style: none;
}
.rd-form .userform .error-list { display: block; }
.rd-form .userform .error-list li { margin: 0; }
.rd-form .userform .field .message { margin: 6px 0 0; }
.rd-form .userform input.error,
.rd-form .userform select.error,
.rd-form .userform textarea.error { border-color: #d98a84; }
.rd-form .userform .message[aria-hidden="true"] { display: none; }

/* Actions */
.rd-form .userform .btn-toolbar,
.rd-form .userform .Actions { margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.rd-form .userform input[type=submit],
.rd-form .userform button[type=submit] {
	width: auto; background: var(--gm-navy, #003e69); color: #fff;
	font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 16px;
	border: 0; border-radius: 10px; padding: 14px 30px; cursor: pointer;
	transition: background .15s ease;
}
.rd-form .userform input[type=submit]:hover,
.rd-form .userform button[type=submit]:hover { background: var(--gm-navy-hover, #00567f); }
.rd-form .userform input[type=submit]:focus-visible { outline: 3px solid rgba(123,184,221,.55); outline-offset: 2px; }
.rd-form .userform input.action-hide,
.rd-form .userform input[type=reset] {
	width: auto; background: transparent; color: var(--gm-navy, #003e69);
	border: 1px solid var(--gm-border-ctl, #d5dcdf); border-radius: 10px;
	padding: 13px 22px; font-weight: 500; font-size: 15px; cursor: pointer;
}

/* Multi-step scaffolding. Effectively unused today (only page 1833 has two steps and it
   renders one), but styled so it degrades sanely if an editor ever adds a step. */
.rd-form .userform .form-step { display: block; }
.rd-form .userform .userform-progress { margin: 0 0 22px; }
.rd-form .userform .userform-progress .progress { background: var(--gm-tint, #f4f7fa); border-radius: 999px; height: 6px; overflow: hidden; }
.rd-form .userform .userform-progress .progress-bar { background: var(--gm-navy, #003e69); height: 100%; }
.rd-form .userform .progress-title { font-size: 13px; color: var(--gm-muted, #5f6b72); margin-bottom: 8px; }
.rd-form .userform .step-navigation { margin-top: 20px; }
.rd-form .userform .step-button-wrapper { display: inline-block; }

/* Google reCAPTCHA (8 forms) — keep it from forcing horizontal overflow on mobile. */
.rd-form .userform .g-recaptcha { max-width: 100%; overflow-x: auto; }

/* ---------- Third-party embed ---------- */

.rd-form-embed { margin-top: 28px; max-width: var(--rd-form-measure); }
.rd-form-embed, .rd-form-embed * { max-width: 100%; box-sizing: border-box; }
.rd-form-embed .columnContainer, .rd-form-embed .emptyContainer { width: auto !important; max-width: 100% !important; float: none !important; }

/* ---------- Widget rail ---------- */

.rd-form-rail { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.rd-form-widget { background: var(--gm-surface, #fff); border: 1px solid var(--gm-border, #e6eaec); border-radius: 16px; padding: 22px; overflow: hidden; }
.rd-form-widget h3, .rd-form-widget h4 { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 600; color: var(--gm-ink, #17242b); margin: 0 0 12px; }
.rd-form-widget p { font-size: 14.5px; line-height: 1.6; color: var(--gm-body, #47535b); margin: 0 0 10px; }
.rd-form-widget p:last-child { margin-bottom: 0; }
.rd-form-widget a { color: var(--gm-navy, #003e69); font-weight: 500; }
.rd-form-widget img { max-width: 100%; height: auto; border-radius: 10px; }
.rd-form-widget, .rd-form-widget * { max-width: 100%; box-sizing: border-box; }
.rd-form-widget input, .rd-form-widget select, .rd-form-widget textarea { width: 100%; max-width: 100%; box-sizing: border-box; border: 1px solid var(--gm-border-ctl, #d5dcdf); border-radius: 9px; padding: 10px 12px; font-size: 15px; font-family: inherit; }
.rd-form-widget input[type=submit], .rd-form-widget button { width: 100%; background: var(--gm-navy, #003e69); color: #fff; font-weight: 600; border: 0; border-radius: 10px; padding: 12px 16px; cursor: pointer; }
.rd-form-widget input[type=submit]:hover, .rd-form-widget button:hover { background: var(--gm-navy-hover, #00567f); }
.rd-form-widget label { display: block; font-size: 13px; font-weight: 500; color: var(--gm-muted, #5f6b72); margin-bottom: 4px; }
.rd-form-widget .columnContainer, .rd-form-widget .emptyContainer { width: auto !important; max-width: 100% !important; float: none !important; }

/* ---------- Back link ---------- */

.rd-form-back { display: flex; justify-content: center; padding: 50px 40px 58px; }
.rd-form-back a { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--gm-border-ctl, #d5dcdf); background: var(--gm-surface, #fff); color: var(--gm-navy, #003e69); font-weight: 600; font-size: 15px; padding: 13px 24px; border-radius: 999px; }
.rd-form-back a:hover { border-color: var(--gm-navy, #003e69); background: var(--gm-tint, #f4f7fa); text-decoration: none; }
.rd-form-body:last-child { padding-bottom: 58px; }

/* ==========================================================================
   ContactPage additions — address aside, above-map content, distributor map
   ========================================================================== */

.rd-form-aside { margin-top: 30px; max-width: var(--rd-form-measure); background: var(--gm-surface, #fff); border: 1px solid var(--gm-border, #e6eaec); border-radius: 16px; padding: 24px 26px; }
.rd-form-aside-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gm-faint, #6c7981); margin-bottom: 14px; }
.rd-form-aside p { font-size: 15.5px; line-height: 1.65; color: var(--gm-body, #47535b); margin: 0 0 12px; }
.rd-form-aside p:last-child { margin-bottom: 0; }
.rd-form-aside h3 { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 600; color: var(--gm-ink, #17242b); margin: 18px 0 6px; }
.rd-form-aside h3:first-child { margin-top: 0; }
.rd-form-aside h3 em { font-style: normal; }
.rd-form-aside a { color: var(--gm-navy, #003e69); font-weight: 500; }
.rd-form-aside img { max-width: 100%; height: auto; border-radius: 10px; }
.rd-form-aside .captionImage { width: auto !important; max-width: 100%; }
.rd-form-aside .caption { font-size: 13px; color: var(--gm-faint, #6c7981); margin-top: 6px; }

.rd-form-map { margin-top: 34px; }
.rd-form-map-label { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 600; color: var(--gm-ink, #17242b); margin: 0 0 14px; }
/* The map div carries inline width/height from the legacy template; the border and radius
   are ours. Height is left to the inline style so the Maps API sizes correctly. */
.rd-form-map #dist_map { border: 1px solid var(--gm-border, #e6eaec) !important; border-radius: 14px; max-width: 100%; }
.rd-form-map #region_dropdown { margin-top: 16px; }
.rd-form-map #region_dropdown p { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.rd-form-map #region_dropdown label { font-size: 13.5px; font-weight: 500; color: var(--gm-muted, #5f6b72); }
.rd-form-map #region_select { border: 1px solid var(--gm-border-ctl, #d5dcdf); border-radius: 10px; padding: 10px 12px; font-size: 15px; font-family: inherit; background: #fff; max-width: 100%; }
.rd-form-dist { margin-top: 22px; font-size: 15.5px; line-height: 1.65; color: var(--gm-body, #47535b); }
.rd-form-dist a { color: var(--gm-navy, #003e69); font-weight: 500; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 1000px) {
	.rd-form-body { grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
	.rd-form-main { grid-column: 1; }
	.rd-form-rail { grid-column: 2; position: sticky; top: 24px; }
}

@media (max-width: 999px) {
	.rd-form-head { padding: 22px 24px 26px; }
	.rd-form-body { padding: 30px 24px 0; gap: 28px; }
	.rd-form-back { padding: 40px 24px 50px; }
}

@media (max-width: 700px) {
	.rd-form-head { padding: 18px 18px 22px; }
	.rd-form-head .rd-breadcrumb { margin-bottom: 18px; }
	.rd-form-title { font-size: 27px; }
	.rd-form-body { padding: 24px 18px 0; }
	.rd-form-prose p, .rd-form-prose ul, .rd-form-prose ol { font-size: 16.5px; }
	.rd-form .userform,
	.rd-form-formwrap .userform { padding: 22px 18px 20px; border-radius: 14px; }
	.rd-form .userform input[type=submit],
	.rd-form .userform button[type=submit] { width: 100%; }
	.rd-form-aside { padding: 20px 18px; }
	.rd-form-back { padding: 34px 18px 44px; }
	/* reCAPTCHA is a fixed 304px iframe — let it scroll rather than push the page. */
	.rd-form .userform .g-recaptcha { transform-origin: 0 0; }
}

/* Primary widgets: when the page's own widgets carry the real form (108 careers,
   13/1743 Dynamics), they render full-width in the main column instead of the rail. */
.rd-form-primarywidgets { margin-top: 28px; max-width: var(--rd-form-measure); display: flex; flex-direction: column; gap: 22px; }
.rd-form-widget--primary { padding: 30px 32px 26px; border-radius: 18px; }
.rd-form-widget--primary h3, .rd-form-widget--primary h4 { font-size: 20px; margin-bottom: 16px; }
.rd-form-widget--primary input, .rd-form-widget--primary select, .rd-form-widget--primary textarea { font-size: 16px; padding: 12px 14px; border-radius: 10px; }
.rd-form-widget--primary input[type=submit], .rd-form-widget--primary button { width: auto; padding: 14px 30px; font-size: 16px; }
.rd-form-abovemap { margin-top: 28px; }
@media (max-width: 700px) {
	.rd-form-widget--primary { padding: 22px 18px 20px; border-radius: 14px; }
	.rd-form-widget--primary input[type=submit], .rd-form-widget--primary button { width: 100%; }
}

/* No widget rail -> drop the reserved 320px column. On the Contact Us pages the Dynamics form
   renders in the MAIN column (it is the page's primary form), so the rail was already empty and
   the grid held a 408px dead gap open to the right. */
@media (min-width: 1000px) {
	.rd-form-body--norail { grid-template-columns: minmax(0, 1fr); }
}