/* ActiveDEMAND form — geometry measured off live (press-room newsletter,
   1440px): the form box is 612 wide with a 20px inset, fields 266x30 with
   14px text, 6px 8px padding, 1px #ccc border and a 2px radius; rows pitch
   50 (30 + 20), columns 40 apart; the submit is 75x38 on #9FA5B2 with a 5px
   radius, centred 40px under the last row. */
.ad-form {
	box-sizing: border-box;
	width: 100%;
	max-width: 612px;
	padding: 20px;
}
.ad-form .sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.ad-form__row { display: flex; gap: 40px; margin-bottom: 20px; }
/* line-height 0 on the label, or its own line box adds 12px to every row and
   the whole form drifts down the band. */
.ad-form__field { flex: 1; display: block; line-height: 0; }
.ad-form__row--single .ad-form__field { flex: 0 0 calc(50% - 20px); }
/* The legacy X/Cornerstone stylesheets load after the theme and set
   `input { margin: 0 10px 10px 0; padding: 4px }`, which pushed every row
   10px apart. Match on two classes so this wins until those plugins go. */
.ad-form .ad-form__field input {
	box-sizing: border-box;
	display: block;
	margin: 0;
	width: 100%;
	height: 30px;
	background: #fff;
	color: #555;
	/* line-height stays `normal` as live leaves it: pinning it to 16px moved
	   the placeholder off the vertical centre of the 30px box. */
	font: 14px/normal Arial, sans-serif;
	padding: 6px 8px;
	border: 1px solid #ccc;
	border-radius: 2px;
}
.ad-form .ad-form__field input::placeholder { color: #999; }
.ad-form__submit { text-align: center; margin-top: 40px; }
.ad-form__submit button {
	background: #9fa5b2;
	color: #fff;
	font: 14px/16px Arial, sans-serif;
	padding: 11px;
	min-width: 75px;
	border: 0;
	border-radius: 5px;
	cursor: pointer;
}
.ad-form__submit button:hover { background: #8a919f; }

/* ---- Enquiry variant (contact form 140246) -------------------------------
   Live: a 1180px form, two 550px columns 40 apart, labels 14px #808080 above
   30px inputs, a 550x142 message box, service checkboxes, and a 565x44 Send. */
.ad-form--enquiry { max-width: 1180px; padding: 0; }
.ad-form--enquiry .ad-form__grid {
	display: grid;
	grid-template-columns: 550px 550px;
	column-gap: 40px;
	row-gap: 30px;
	justify-content: center;
}
.ad-form--enquiry .ad-form__field { display: block; line-height: 0; }
.ad-form--enquiry .ad-form__field > span {
	display: block;
	margin-bottom: 10px;
	color: #808080;
	font-size: 14px;
	line-height: 25px;
}
.ad-form--enquiry .ad-form__field textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 142px;
	margin: 0;
	background: #fff;
	color: #555;
	font: 14px/19.6px Arial, sans-serif;
	padding: 6px 8px;
	border: 1px solid #ccc;
	border-radius: 2px;
	resize: vertical;
}
.ad-form--enquiry .ad-form__services { margin: 0; padding: 0; border: 0; }
.ad-form--enquiry .ad-form__services legend {
	padding: 0;
	margin-bottom: 10px;
	color: #808080;
	font-size: 14px;
	line-height: 25px;
}
.ad-form--enquiry .ad-form__check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px 18px;
	color: #808080;
	font-size: 14px;
	line-height: 25px;
}
.ad-form--enquiry .ad-form__check input { width: 13px; height: 13px; margin: 0; }
.ad-form__submit--wide { margin-top: 40px; }
.ad-form__submit--wide button {
	width: 565px;
	max-width: 100%;
	padding: 10px;
	background: #2a3b5a;
	font-size: 17px;
	border-radius: 3px;
}
.ad-form__submit--wide button:hover { background: #2a2c37; }

@media (max-width: 1240px) {
	.ad-form--enquiry .ad-form__grid { grid-template-columns: 1fr; }
}

/* ---- Captured variant: fields read off live, laid out in a grid ---------- */
.ad-form--captured { max-width: 1180px; padding: 0 var(--vk-form-inset, 0); }
/* Every form on the site is a different size, so the measurements come off
   live per form and arrive as custom properties. The values below are the
   fallbacks for a form that was not measured. */
.ad-form--captured .ad-form__grid {
	display: grid;
	grid-template-columns: repeat(var(--vk-form-cols, 2), minmax(0, 1fr));
	column-gap: var(--vk-form-colgap, 40px);
	row-gap: var(--vk-form-rowgap, 30px);
}
.ad-form--captured .ad-form__field { display: block; line-height: 0; }
.ad-form--captured .ad-form__field--wide { grid-column: 1 / -1; }
/* Live's labels shrink to their words; ours filled the field's full width, so
   a label read 520px wide against live's 50. */
.ad-form--captured .ad-form__field > span {
	display: block;
	/* Live's labels shrink to their words. A measured width was tried here and
	   reverted: the caption and the control share this wrapper, so setting it
	   took the FIELDS down with it — three 520px inputs came out 83 wide on
	   the outsourced-management page. Only the type is measured. */
	width: fit-content;
	max-width: 100%;
	margin-bottom: 10px;
	color: var(--vk-form-label-colour, #808080);
	font-size: var(--vk-form-label-size, 14px);
	font-weight: var(--vk-form-label-weight, 400);
	line-height: var(--vk-form-label-lead, 25px);
}
.ad-form--captured .ad-form__field textarea,
.ad-form--captured .ad-form__field select {
	box-sizing: border-box;
	display: block;
	width: 100%;
	margin: 0;
	background: #fff;
	color: #555;
	font: 14px/19.6px Arial, sans-serif;
	padding: 6px 8px;
	border: 1px solid #ccc;
	border-radius: 2px;
}
.ad-form--captured .ad-form__field textarea {
	height: var(--vk-form-area-h, 142px);
	resize: vertical;
}
.ad-form--captured .ad-form__field select,
.ad-form--captured .ad-form__field input:not([type=checkbox]):not([type=radio]) {
	height: var(--vk-form-field-h, 30px);
}
.ad-form--captured .ad-form__field input[type=checkbox] {
	width: var(--vk-form-check-w, 13px);
	height: var(--vk-form-check-h, 13px);
	margin: 0; display: inline-block;
}
.ad-form--captured .ad-form__submit button {
	width: var(--vk-form-submit-w, 565px);
	height: var(--vk-form-submit-h, auto);
}


/* ---- Captured forms: everything measured -----------------------------------
   The values above are fallbacks. A captured form carries its own measurements
   as custom properties, because the contact form on a service page is 520px
   fields inset 60px with white labels while the newsletter is 266px fields in
   a 612px box — one stylesheet cannot be right for both. */
.ad-form--captured {
	max-width: none;
	padding: var(--vk-form-pad-top, 0) 0 var(--vk-form-pad-bottom, 0);
}
.ad-form--captured .ad-form__grid {
	/* Centred at its measured width, so it sits where the design puts it at
	   any viewport rather than being pinned by an inset. */
	width: var(--vk-form-grid-w, 100%);
	max-width: 100%;
	margin: 0 auto;
	grid-template-columns: repeat(var(--vk-form-cols, 2), minmax(0, 1fr));
	justify-content: center;
	column-gap: var(--vk-form-colgap, 40px);
	row-gap: var(--vk-form-rowgap, 30px);
}
.ad-form--captured .ad-form__field > span {
	margin-bottom: var(--vk-form-label-gap, 10px);
	color: var(--vk-form-label-colour, #808080);
	font-size: var(--vk-form-label-size, 14px);
}
.ad-form--captured .ad-form__submit {
	margin-top: var(--vk-form-submit-gap, 40px);
	/* Not every captured form centres its submit -- the supporter form's is
	   flush left with the field column on live (x=388). */
	text-align: var(--vk-form-submit-align, center);
	/* Aligned to the GRID, not the form. The grid is --vk-form-grid-w wide and
	   centred inside a wider form, so on the supporter page it starts 35px in
	   at 388 while the form starts at 353. Left-aligning within the form put
	   the button on 353, a third of the way out from the fields it belongs to. */
	width: var(--vk-form-grid-w, 100%);
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.ad-form--captured .ad-form__submit button {
	width: var(--vk-form-submit-w, auto);
	height: var(--vk-form-submit-h, auto);
	background: var(--vk-form-submit-bg, #9fa5b2);
	font-size: var(--vk-form-submit-size, 17px);
	/* The base button carries min-width:75px, which quietly outvoted every
	   measured submitW below 75: the supporter form's is 66 on live and came
	   out 75 here. A captured form has a real number, so let it through. */
	min-width: 0;
}

/* The consent row: the box on the line, before its words, at the label's own
   size. Live sets it 20x13 with 8px between it and the text. */
.ad-form--captured .ad-form__field--check {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: normal;
}
.ad-form--captured .ad-form__field--check > span {
	margin: 0;
	line-height: 25px;
}
.ad-form--captured .ad-form__field--check input[type=checkbox] {
	flex: 0 0 auto;
	margin: 0;
}

/* A radio choice: the control on the line, then its word. Same shape as the
   consent row but half width, because the pair sits beside a text field. */
.ad-form--captured .ad-form__field--radio {
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: normal;
}
.ad-form--captured .ad-form__field--radio > span {
	margin: 0;
	line-height: 25px;
}
.ad-form--captured .ad-form__field--radio input[type=radio] {
	flex: 0 0 auto;
	margin: 0;
}

/* A radio and a checkbox are controls, not fields: they keep their own size. */
.ad-form--captured .ad-form__field input[type=radio] {
	width: 13px;
	height: 13px;
	flex: 0 0 13px;
	margin: 0;
}

/* One question, its choices stacked in a single cell. */
.ad-form--captured .ad-form__field--radios {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/* The pitch of the options, measured, less the 25px line each one is. */
	gap: calc(var(--vk-opt-pitch, 31px) - 25px);
	line-height: normal;
}
.ad-form--captured .ad-form__radio {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--vk-form-label-colour, #808080);
	font-size: var(--vk-form-label-size, 14px);
	line-height: 25px;
}
.ad-form--captured .ad-form__radio input[type=radio] {
	width: 13px;
	height: 13px;
	flex: 0 0 13px;
	margin: 0;
}

/* Live paints the required marker red, not the label's colour. */
.ad-form--captured .ad-form__req { color: #f00; }

/* The submit's corners and line height, measured: live rounds this one 10px. */
.ad-form--captured .ad-form__submit button {
	border-radius: var(--vk-form-submit-radius, 0);
	line-height: var(--vk-form-submit-lead, normal);
}

/* A question with its options stacked under it — checkboxes as well as radios.
   Live asks "Which services are you interested in?" once above four boxes. */
.ad-form--captured .ad-form__field--radios > span {
	display: block;
	width: fit-content;
	/* The measured air under the question, less the flex gap that also
	   sits between it and the first option. */
	margin-bottom: calc(var(--vk-opt-gap, 10px) - (var(--vk-opt-pitch, 31px) - 25px));
	color: var(--vk-form-label-colour, #808080);
	font-size: var(--vk-form-label-size, 14px);
	line-height: 25px;
}
.ad-form--captured .ad-form__field--radios .ad-form__radio { padding-left: 18px; }
.ad-form--captured .ad-form__radio input[type=checkbox] {
	width: 13px;
	height: 13px;
	flex: 0 0 13px;
	margin: 0;
}

/* The caption's measured line and weight. NOT its width: `label.ad-form__field`
   is the field's own wrapper on this block, so setting a width here set it on
   the control — three 520px inputs came out 83 wide, the width of the words
   above them, on every page carrying an enquiry form. */
.ad-form--captured .ad-form__field > label {
	line-height: var(--vk-form-label-lead, 25px);
	font-weight: var(--vk-form-label-weight, 400);
}

/* The editor canvas carries WordPress's own form styling, which gives every
   text control a 40px minimum height. The measured field is 30 on this site,
   and the canvas drew every one of them a third too tall while the page was
   right. Specific enough to outrank the canvas rule, and harmless on the page
   where no such minimum exists. */
.editor-styles-wrapper .ad-form input[type="text"],
.editor-styles-wrapper .ad-form input[type="email"],
.editor-styles-wrapper .ad-form input[type="tel"],
.editor-styles-wrapper .ad-form input[type="url"],
.editor-styles-wrapper .ad-form input[type="number"],
.editor-styles-wrapper .ad-form select,
.editor-styles-wrapper .ad-form textarea {
	min-height: 0;
}


/* ---- File upload ---- measured on live 2026-09-11, /shs-become-a-supporter/
   The widget is a row: a disabled filename readout on #eee, a 10px gap, then
   a button carrying the words. Both sit on one line at fixed widths and the
   row spans the whole field column, exactly as live's .ad-file does (its
   container is the full 1130 while the two controls are 188 and 203). */
.ad-form--captured .ad-form__field--file {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--vk-form-file-gap, 10px);
}
/* This and the rule below have to out-rank

     .ad-form--captured .ad-form__field input:not([type=checkbox]):not([type=radio])

   which sizes every captured input to the full column at the measured field
   height -- (0,4,1), because each :not() counts its own argument. Matching
   that weight and being declared later is enough; the doubled
   .ad-form__field.ad-form__field--file is what buys the fourth class. Without
   it the 188px readout came out 1130 wide and shoved the button off the end
   of the row to x=1528. */
.ad-form--captured .ad-form__field.ad-form__field--file input.ad-form__file-name {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: var(--vk-form-file-name-w, 188px);
	height: var(--vk-form-file-name-h, 37px);
	padding: 6px 8px;
	background: #eee;
	border: 1px solid #ccc;
	border-radius: 2px;
	color: #555;
	font-size: 14px;
}
.ad-form--captured .ad-form__file-button {
	position: relative;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--vk-form-file-btn-w, 203px);
	height: var(--vk-form-file-btn-h, 38px);
	padding: 11px;
	background: var(--vk-form-submit-bg, #9fa5b2);
	border-radius: 5px;
	color: #fff;
	font-size: 14px;
	line-height: normal;
	cursor: pointer;
	/* One line. The words need 181 of the button's 181px content box on live --
	   no slack at all -- so the moment our font renders a hair wider the
	   asterisk dropped onto a second line and the button grew a row taller. */
	white-space: nowrap;
}
/* The real input lies over the button at full size, invisible but still
   focusable, so a click anywhere on the button opens the picker and the
   keyboard can still reach it. */
.ad-form--captured .ad-form__field.ad-form__field--file .ad-form__file-button input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
.ad-form--captured .ad-form__file-button:focus-within {
	outline: 2px solid #2a3b5a;
	outline-offset: 2px;
}
/* Live's asterisk in this button is pure red, not the label grey. */
.ad-form--captured .ad-form__file-button .ad-form__req {
	padding-left: 5px;
	color: #f00;
}

/* ---- Phones: one column ---------------------------------------------------
   Live stacks every form to a single column below 768: on /medical-solutions/
   at 390 the fields run full width of a 332px form on a 125px pitch, and the
   submit shrinks to its label (141px) and centres. The measured desktop grid
   (two columns, a fixed grid width, a fixed submit width) is undone here. */
@media (max-width: 767px) {
	.ad-form--captured .ad-form__grid {
		grid-template-columns: 1fr;
		/* The phone's own measured width when the form was read at 390
		   (292px on /medical-solutions/, 331 on /case-management/). */
		width: var(--vk-form-m-grid-w, 100%);
		max-width: 100%;
		column-gap: 0;
		row-gap: var(--vk-form-m-row-gap, var(--vk-form-rowgap, 30px));
	}
	.ad-form--captured { padding-top: var(--vk-form-m-pad-top, var(--vk-form-pad-top, 0)); }
	.ad-form--captured .ad-form__submit { margin-top: var(--vk-form-m-submit-gap, var(--vk-form-submit-gap, 40px)); }
	.ad-form--captured .ad-form__submit button {
		width: var(--vk-form-m-submit-w, auto);
		height: var(--vk-form-m-submit-h, var(--vk-form-submit-h, auto));
	}
	.ad-form--captured .ad-form__field,
	.ad-form--captured .ad-form__field--wide,
	.ad-form--captured .ad-form__field--radios,
	.ad-form--captured .ad-form__field--check {
		grid-column: 1 / -1 !important;
		grid-row: auto !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
	.ad-form--captured .ad-form__field input,
	.ad-form--captured .ad-form__field select,
	.ad-form--captured .ad-form__field textarea { width: 100%; }
	.ad-form--newsletter .ad-form__grid,
	.ad-form--enquiry .ad-form__grid { grid-template-columns: 1fr; }
}