/**
 * Website forms (inc/forms/): errors, success, consent, selects, rating
 * scales and the spam trap. Text inputs keep the style of the section the
 * form sits in (bcms-contact__field, bcms-feedback__field, ...); this file
 * only adds what those sections do not have. Tokens only (tokens.css).
 *
 * Colours: errors use --color-emergency-dark (6.71:1 on white, AA for small
 * text), success uses --color-primary-light with --color-primary-dark text.
 */

/* Spam trap: hidden from people, still in the markup for bots. Clipped
   in place (no -9999px offset: in RTL that offset points to the right
   and can widen the page). */
.inh-form__hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Every field the same way in every section: label, control, help text
   and error stacked with one gap (the sections differ: some fields are
   grids, some blocks with margins). */
.inh-form .inh-form__field:not(.inh-form__group) {
	display: grid;
	gap: var(--space-2);
	align-content: start;
	min-width: 0;
}

.inh-form .inh-form__field > label:not(.inh-form__check) {
	margin: 0;
	color: var(--color-heading);
	font-size: var(--fs-13);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
}

.inh-form .inh-form__field small {
	display: block;
	color: var(--color-text-muted);
	font-size: var(--fs-13);
	line-height: var(--lh-snug);
}

/* Two fields side by side (e.g. name and email), full width of the form;
   they stack when there is no room for two. */
.inh-form .inh-form__row {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: var(--space-5) var(--space-4);
	align-items: start;
}

.inh-form__req {
	color: var(--color-emergency-dark);
}

/* Selects: the same box as the text inputs. */
.inh-form select {
	width: 100%;
	min-height: 48px;
	padding-block: var(--space-3);
	padding-inline: var(--space-4) var(--space-8);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-white);
	background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	color: var(--color-heading);
	font: inherit;
	font-size: var(--fs-14);
	appearance: none;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Mirrored: the two halves of the chevron swap places. */
[dir="rtl"] .inh-form select {
	background-position: 15px 50%, 20px 50%;
}

.inh-form select:focus {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-ring);
	outline: 0;
}

.inh-form input[readonly] {
	background: var(--color-background-alt);
	color: var(--color-heading);
	font-weight: var(--fw-semibold);
	cursor: default;
}

/* Checkboxes (consent, "stay anonymous"): undo the sections' text-input rules. */
.inh-form .inh-form__check {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	color: var(--color-text);
	font-size: var(--fs-14);
	font-weight: var(--fw-regular);
	line-height: var(--lh-snug);
	cursor: pointer;
}

.inh-form .inh-form__check input[type="checkbox"] {
	flex: none;
	width: 20px;
	height: 20px;
	min-height: 0;
	margin: 1px 0 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	accent-color: var(--color-primary-dark);
}

/* The sections colour "label span" red (their required marks); keep option and consent text neutral. */
.inh-form .inh-form__check > span,
.inh-form .inh-form__option > span {
	color: inherit;
}

.inh-form .inh-form__check .inh-form__req {
	color: var(--color-emergency-dark);
}

.inh-form .inh-form__field small {
	line-height: var(--lh-snug);
}

.inh-form .inh-form__check a {
	color: var(--color-link, var(--color-primary-dark));
	text-decoration: underline;
}

/* Radio groups and rating scales.
   Each choice is a tile shaped like the text inputs (--radius-md, not a
   pill, so a label that wraps to two lines still looks right), with the
   radio at the start edge and the text after it.
   Columns follow the width of the question (container query), not the
   screen, so the same form works in a narrow side column and full width:
   - under 440 px: one choice per line (full-width tap targets);
   - 440-639 px: two per line (three when there are exactly three);
   - 640 px and up: all choices on one line. */
.inh-form fieldset.inh-form__group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	container-type: inline-size;
}

.inh-form .inh-form__group legend {
	margin-block-end: var(--space-3);
	padding: 0;
	color: var(--color-heading);
	font-size: var(--fs-14);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
}

.inh-form .inh-form__group > small {
	margin-block: calc(-1 * var(--space-1)) var(--space-3);
}

.inh-form .inh-form__options {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-2);
}

@container (min-width: 440px) {
	.inh-form .inh-form__options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.inh-form .inh-form__options:has(> :nth-child(3):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@container (min-width: 640px) {
	.inh-form .inh-form__options {
		grid-template-columns: none;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
	}
}

.inh-form .inh-form__option {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-width: 0;
	min-height: 48px;
	margin: 0;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-white);
	color: var(--color-heading);
	font-size: var(--fs-14);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
	text-align: start;
	overflow-wrap: anywhere;
	cursor: pointer;
	transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* The sections style every "input" as a text box (width 100%, 48 px
   min-height, padding, border): undo all of it for the radio. */
.inh-form .inh-form__option input[type="radio"] {
	flex: none;
	width: 18px;
	height: 18px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	accent-color: var(--color-primary-dark);
	cursor: pointer;
}

.inh-form .inh-form__option:hover {
	border-color: var(--color-primary);
}

/* Chosen: green tint and a 2 px green edge (inset shadow, so the tile
   does not change size). */
.inh-form .inh-form__option:has(input:checked) {
	border-color: var(--color-primary-dark);
	background: var(--color-primary-light);
	box-shadow: inset 0 0 0 1px var(--color-primary-dark);
}

.inh-form .inh-form__option:has(input:focus-visible) {
	outline: 2px solid var(--color-focus, var(--color-primary));
	outline-offset: 2px;
}

/* Errors. */
.inh-form .inh-form__error {
	margin: 0;
	color: var(--color-emergency-dark);
	font-size: var(--fs-13);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
}

/* A radio group is not a grid field: space the error from the choices. */
.inh-form .inh-form__group .inh-form__error {
	margin-block-start: var(--space-2);
}

.inh-form .has-error input:not([type="checkbox"]):not([type="radio"]),
.inh-form .has-error select,
.inh-form .has-error textarea {
	border-color: var(--color-emergency-dark);
}

.inh-form .has-error .inh-form__option {
	border-color: var(--color-emergency-dark);
}

.inh-form__summary {
	grid-column: 1 / -1;
	padding: var(--space-4) var(--space-5);
	border: 1px solid var(--color-emergency-dark);
	border-inline-start-width: 4px;
	border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--color-emergency) 6%, var(--color-white));
	color: var(--color-emergency-dark);
	font-size: var(--fs-14);
}

.inh-form__summary:focus {
	outline: 2px solid var(--color-focus, var(--color-primary));
	outline-offset: 2px;
}

.inh-form__summary p {
	margin: 0 0 var(--space-2);
}

.inh-form__summary ul {
	margin: 0;
	padding-inline-start: var(--space-5);
}

.inh-form__summary a {
	color: var(--color-emergency-dark);
	text-decoration: underline;
}

.inh-form__status:empty {
	display: none;
}

/* Success, in place of the form. */
.inh-form__success {
	padding: var(--space-5) var(--space-6);
	border: 1px solid var(--color-primary);
	border-inline-start-width: 4px;
	border-radius: var(--radius-md);
	background: var(--color-primary-light);
	color: var(--color-heading);
	font-size: var(--fs-15);
	line-height: var(--lh-body);
}

.inh-form__success:focus {
	outline: 2px solid var(--color-focus, var(--color-primary));
	outline-offset: 2px;
}

.inh-form__success p {
	margin: 0;
}

.inh-form__turnstile {
	grid-column: 1 / -1;
}

.inh-form button[type="submit"]:disabled {
	cursor: progress;
	opacity: .6;
}

/* Feedback page: the survey not shown. */
.inh-form[hidden],
.inh-form__success[hidden] {
	display: none !important;
}

/* Footer newsletter: email and language side by side, then consent. */
.site-footer .newsletter-form.inh-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 150px);
	gap: var(--space-3);
	align-items: end;
}

.site-footer .newsletter-form .inh-form__field {
	display: grid;
	gap: var(--space-1);
}

.site-footer .newsletter-form .inh-form__field > label {
	color: var(--color-heading);
	font-size: var(--fs-13);
	font-weight: var(--fw-semibold);
}

.site-footer .newsletter-form .inh-form__consent,
.site-footer .newsletter-form .newsletter-form__form-footer,
.site-footer .newsletter-form .inh-form__status,
.site-footer .newsletter-form .inh-form__summary {
	grid-column: 1 / -1;
}

/* The language select matches the email box next to it (the header and
   footer ".input": pill, --color-text-muted edge for 3:1, 16 px text). */
.site-footer .newsletter-form select.input {
	padding-block: var(--space-2);
	border-color: var(--color-text-muted);
	border-radius: var(--radius-pill);
	font-size: var(--fs-16);
}

.site-footer .newsletter-form select.input:hover {
	border-color: var(--color-heading);
}

.site-footer .newsletter-form .inh-form__consent .inh-form__check {
	font-size: var(--fs-13);
}

.site-footer .newsletter-form__form-footer button {
	min-height: var(--tap-min, 44px);
}

.site-footer .newsletter-notice {
	margin: 0;
}

@media (max-width: 479px) {
	.site-footer .newsletter-form.inh-form {
		grid-template-columns: 1fr;
	}
}

/* Home Care and Speak Up request sections. */
.bcms-request {
	padding-block: var(--section-space, var(--space-12));
	background: var(--color-background);
}

.bcms-request__container {
	display: grid;
	gap: var(--space-8);
	width: min(100% - 2 * var(--container-padding), var(--container-width));
	margin-inline: auto;
}

@media (min-width: 1024px) {
	.bcms-request__container {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: start;
	}
}

.bcms-request__copy h2 {
	margin: 0 0 var(--space-3);
	color: var(--color-heading);
	font-size: var(--fs-h3);
	line-height: var(--lh-tight);
}

.bcms-request__copy p {
	margin: 0 0 var(--space-3);
	color: var(--color-text);
}

.bcms-request__eyebrow {
	display: inline-block;
	margin-block-end: var(--space-2);
	color: var(--color-secondary-dark);
	font-size: var(--fs-13);
	font-weight: var(--fw-bold);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.bcms-request__copy .bcms-request__emergency {
	padding: var(--space-3) var(--space-4);
	border-inline-start: 4px solid var(--color-emergency);
	background: var(--color-white);
	color: var(--color-emergency-dark);
	font-weight: var(--fw-bold);
}

.bcms-request__copy .bcms-request__emergency a {
	color: var(--color-emergency-dark);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.bcms-request__form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5) var(--space-4);
	padding: var(--space-7);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-white);
	box-shadow: var(--shadow-sm);
}

.bcms-request__field {
	display: grid;
	gap: var(--space-2);
	align-content: start;
}

.bcms-request__field--full,
.bcms-request__form-footer,
.bcms-request__status {
	grid-column: 1 / -1;
}

.bcms-request__field > label {
	color: var(--color-heading);
	font-size: var(--fs-13);
	font-weight: var(--fw-bold);
}

.bcms-request__field input,
.bcms-request__field textarea {
	width: 100%;
	min-height: 48px;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-white);
	color: var(--color-heading);
	font: inherit;
	font-size: var(--fs-14);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.bcms-request__field textarea {
	min-height: 130px;
	resize: vertical;
}

.bcms-request__field input:focus,
.bcms-request__field textarea:focus {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-ring);
	outline: 0;
}

.bcms-request__field small {
	color: var(--color-text-muted);
	font-size: var(--fs-13);
}

.bcms-request__form-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

.bcms-request__form-footer p {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--fs-13);
}

.bcms-request__form-footer button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 49px;
	padding-inline: var(--space-6);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-primary-dark);
	color: var(--color-white);
	font: inherit;
	font-size: var(--fs-14);
	font-weight: var(--fw-bold);
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.bcms-request__form-footer button:hover,
.bcms-request__form-footer button:focus-visible {
	background: var(--color-heading);
}

@media (max-width: 639px) {
	.bcms-request__form {
		grid-template-columns: 1fr;
		padding: var(--space-5);
	}
}