/* RSM Forms: the forms, and the thank-you popup.
 *
 * Written to sit inside the theme's own containers, so the panel, heading and
 * copy take their look from whatever wraps them and only the controls are
 * styled here.
 */

.rsm-fm-title { margin: 0 0 8px; }
.rsm-fm-intro { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--fmc-ink-2-5b656e, #5b656e); }

.rsm-fm-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.rsm-fm-field.is-full { grid-column: 1 / -1; }

.rsm-fm-field label {
	display: block;
	font-size: 13px;
	font-weight: 800;
	margin-bottom: 6px;
	color: var(--fmc-ink-222a31, #222a31);
}

.rsm-fm-field label em {
	font-style: normal;
	color: var(--fmc-text-orange-c2410c, #c2410c);
	margin-left: 2px;
}

.rsm-fm-field input,
.rsm-fm-field select,
.rsm-fm-field textarea {
	width: 100%;
	border: 1px solid var(--fmc-line-d9dfe5, #d9dfe5);
	border-radius: 10px;
	padding: 0 14px;
	height: 50px;
	font: inherit;
	font-size: 15px;
	background: var(--fmc-surface-ffffff, #fff);
	color: var(--fmc-ink-171a1f, #171a1f);
	transition: border-color .2s, box-shadow .2s;
}

.rsm-fm-field textarea {
	height: auto;
	min-height: 150px;
	padding: 13px 14px;
	line-height: 1.6;
	resize: vertical;
}

.rsm-fm-field input:focus,
.rsm-fm-field select:focus,
.rsm-fm-field textarea:focus {
	outline: 0;
	border-color: var(--fmc-line-blue-0055a5, #0055a5);
	box-shadow: 0 0 0 1px var(--fmc-shadow-0055a5, #0055a5), 0 0 0 4px var(--fmc-shadow-0055a52e, rgba(0, 85, 165, .18));
}

.rsm-fm-field.is-check label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.5;
}

.rsm-fm-field.is-check input {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	margin-top: 2px;
	padding: 0;
}

.rsm-fm-actions { margin: 20px 0 0; }

.rsm-fm-submit {
	border: 0;
	border-radius: 10px;
	min-height: 52px;
	padding: 0 26px;
	font-size: 15px;
	font-weight: 800;
	background: var(--fmc-fill-orange-ff5500, #ff5500);
	color: var(--fmc-on-dark-ffffff, #fff);
	cursor: pointer;
	transition: background .2s;
}

.rsm-fm-submit:hover { background: var(--fmc-fill-orange-e84e00, #e84e00); }
.rsm-fm-submit:focus-visible { outline: 3px solid var(--fmc-line-blue-0055a5, #0055a5); outline-offset: 2px; }
.rsm-fm-submit.is-sending { background: var(--fmc-surface-2-e3e8ed, #e3e8ed); color: var(--fmc-ink-4a545e, #4a545e); cursor: progress; }

/* #6b747d measured 4.46:1 against the panel this sits on, which is under
   the 4.5:1 the small print has to meet at this size. Two steps darker takes
   it to 5.02:1. Caught by the contrast harness, not by looking at it. */
.rsm-fm-small { margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: var(--fmc-ink-2-636c75, #636c75); }
.rsm-fm-small a { color: var(--fmc-text-blue-0055a5, #0055a5); text-decoration: underline; }

.rsm-fm-sent {
	margin: 0 0 16px;
	padding: 13px 15px;
	border-radius: 10px;
	border: 1px solid var(--fmc-line-green-b6dcc3, #b6dcc3);
	background: var(--fmc-surface-eef8f1, #eef8f1);
	color: var(--fmc-text-green-18603a, #18603a);
	font-size: 14px;
	line-height: 1.55;
	font-weight: 700;
}

.rsm-fm-errors {
	margin: 0 0 16px;
	padding: 13px 15px;
	border-radius: 10px;
	border: 1px solid var(--fmc-line-orange-f0c2b4, #f0c2b4);
	background: var(--fmc-surface-fdf2ee, #fdf2ee);
}

.rsm-fm-errors p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--fmc-text-orange-8d3418, #8d3418);
	font-weight: 700;
}

.rsm-fm-errors p + p { margin-top: 6px; }

/* The honeypot has to be reachable by a bot and invisible to everybody else,
   which means off-screen rather than display:none: a field that is not
   rendered is a field a bot can see is not rendered. */
.rsm-fm-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 680px) {
	.rsm-fm-grid { grid-template-columns: 1fr; }
	.rsm-fm-submit { width: 100%; }
	/* iOS zooms the page in when a focused field is under 16px. */
	.rsm-fm-field input,
	.rsm-fm-field select,
	.rsm-fm-field textarea { font-size: 16px; }
}

/* ------------------------------------------------------------------ popup */

.rsm-fm-modal {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.rsm-fm-modal.is-open { display: flex; }

.rsm-fm-modal-backdrop {
	position: absolute;
	inset: 0;
	background: var(--fmc-veil-dark-0c12189e, rgba(12, 18, 24, .62));
}

.rsm-fm-modal-panel {
	position: relative;
	width: min(480px, 100%);
	background: var(--fmc-surface-ffffff, #fff);
	border-radius: 18px;
	padding: 34px 30px 28px;
	text-align: center;
	box-shadow: 0 28px 70px var(--fmc-shadow-00000057, rgba(0, 0, 0, .34));
}

.rsm-fm-modal-tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--fmc-surface-e8f6ed, #e8f6ed);
	color: var(--fmc-text-green-18864b, #18864b);
	margin-bottom: 16px;
}

.rsm-fm-modal-panel h2 {
	margin: 0 0 10px;
	font-size: 22px;
	line-height: 1.25;
	color: var(--fmc-ink-171a1f, #171a1f);
}

.rsm-fm-modal-panel p {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--fmc-ink-2-5b656e, #5b656e);
}

.rsm-fm-modal-close {
	border: 0;
	border-radius: 10px;
	min-height: 48px;
	padding: 0 28px;
	font-size: 15px;
	font-weight: 800;
	background: var(--fmc-fill-blue-0055a5, #0055a5);
	color: var(--fmc-on-dark-ffffff, #fff);
	cursor: pointer;
}

.rsm-fm-modal-close:hover { background: var(--fmc-fill-blue-004789, #004789); }
.rsm-fm-modal-close:focus-visible { outline: 3px solid var(--fmc-line-orange-ff5500, #ff5500); outline-offset: 2px; }

body.rsm-fm-modal-open { overflow: hidden; }

/* A popup that slides in is pleasant; a popup that slides in for somebody who
   has asked their machine to stop moving things is not. */
@media (prefers-reduced-motion: no-preference) {
	.rsm-fm-modal.is-open .rsm-fm-modal-panel {
		animation: rsm-fm-pop .22s ease-out;
	}
}

@keyframes rsm-fm-pop {
	from { transform: translateY(14px) scale(.97); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

/* ---------------------------------------------------------------------------
 * Colour tokens, light and dark.
 *
 * The light value of each token is the literal that used to be written where
 * its var() now sits, so with no appearance chosen this file paints exactly
 * what it painted before. The dark value is derived from the light one by a
 * rule that depends on what the colour is for, so the structure of the palette
 * survives the crossing instead of flattening into three greys.
 *
 * Generated. Change a colour here, not in the rules below, or the pair comes
 * apart.
 * ------------------------------------------------------------------------ */

:root {


	/* Paper. The whiter it was, the deeper it goes, so a panel that sat a shade off white ends up a shade off the page instead of merging into it. */
	--fmc-surface-e8f6ed: #e8f6ed;
	--fmc-surface-eef8f1: #eef8f1;
	--fmc-surface-fdf2ee: #fdf2ee;
	--fmc-surface-ffffff: #fff;

	/* Paper one step down, wells and inset rows. */
	--fmc-surface-2-e3e8ed: #e3e8ed;

	/* Text. Inverts and keeps its order, so a heading still outranks the line under it. */
	--fmc-ink-171a1f: #171a1f;
	--fmc-ink-222a31: #222a31;
	--fmc-ink-4a545e: #4a545e;

	/* Secondary text. */
	--fmc-ink-2-5b656e: #5b656e;
	--fmc-ink-2-636c75: #636c75;

	/* Text that was already light on a dark band. Nothing to do. */
	--fmc-on-dark-ffffff: #fff;

	/* Rules and borders. */
	--fmc-line-d9dfe5: #d9dfe5;

	/* Brand blue as text. #0055A5 on near black is 2.2:1, which is not text. Lifted it is 7.5:1 and still the brand. */
	--fmc-text-blue-0055a5: #0055a5;

	/* Brand blue as a fill, kept dark enough for white to sit on it. */
	--fmc-fill-blue-004789: #004789;
	--fmc-fill-blue-0055a5: #0055a5;

	/* Brand blue as a rule. */
	--fmc-line-blue-0055a5: #0055a5;

	/* Brand orange as text. */
	--fmc-text-orange-8d3418: #8d3418;
	--fmc-text-orange-c2410c: #c2410c;

	/* Brand orange as a fill. Orange is the action colour and already carries on either ground. */
	--fmc-fill-orange-e84e00: #e84e00;
	--fmc-fill-orange-ff5500: #ff5500;

	/* Brand orange as a rule. */
	--fmc-line-orange-f0c2b4: #f0c2b4;
	--fmc-line-orange-ff5500: #ff5500;

	/* Success text. */
	--fmc-text-green-18603a: #18603a;
	--fmc-text-green-18864b: #18864b;

	/* Success rules. */
	--fmc-line-green-b6dcc3: #b6dcc3;

	/* Shadows, which have to be deeper on a dark page to be seen at all. */
	--fmc-shadow-00000057: rgba(0, 0, 0, .34);
	--fmc-shadow-0055a5: #0055a5;
	--fmc-shadow-0055a52e: rgba(0, 85, 165, .18);

	/* Dark veils over something else. */
	--fmc-veil-dark-0c12189e: rgba(12, 18, 24, .62);
}

:root[data-theme="dark"] {


	/* Paper. The whiter it was, the deeper it goes, so a panel that sat a shade off white ends up a shade off the page instead of merging into it. */
	--fmc-surface-e8f6ed: #202d25;
	--fmc-surface-eef8f1: #202521;
	--fmc-surface-fdf2ee: #251d1b;
	--fmc-surface-ffffff: #141617;

	/* Paper one step down, wells and inset rows. */
	--fmc-surface-2-e3e8ed: #2a3037;

	/* Text. Inverts and keeps its order, so a heading still outranks the line under it. */
	--fmc-ink-171a1f: #d8dbe0;
	--fmc-ink-222a31: #cfd4d9;
	--fmc-ink-4a545e: #b5bcc4;

	/* Secondary text. */
	--fmc-ink-2-5b656e: #afb6bc;
	--fmc-ink-2-636c75: #adb3ba;

	/* Text that was already light on a dark band. Nothing to do. */
	--fmc-on-dark-ffffff: #fff;

	/* Rules and borders. */
	--fmc-line-d9dfe5: #3c454e;

	/* Brand blue as text. #0055A5 on near black is 2.2:1, which is not text. Lifted it is 7.5:1 and still the brand. */
	--fmc-text-blue-0055a5: #52abff;

	/* Brand blue as a fill, kept dark enough for white to sit on it. */
	--fmc-fill-blue-004789: #0061bc;
	--fmc-fill-blue-0055a5: #006fd8;

	/* Brand blue as a rule. */
	--fmc-line-blue-0055a5: #0074e1;

	/* Brand orange as text. */
	--fmc-text-orange-8d3418: #ea673e;
	--fmc-text-orange-c2410c: #f36c35;

	/* Brand orange as a fill. Orange is the action colour and already carries on either ground. */
	--fmc-fill-orange-e84e00: #e84e00;
	--fmc-fill-orange-ff5500: #ff5500;

	/* Brand orange as a rule. */
	--fmc-line-orange-f0c2b4: #dd7555;
	--fmc-line-orange-ff5500: #ff5500;

	/* Success text. */
	--fmc-text-green-18603a: #5ccc91;
	--fmc-text-green-18864b: #5ccc90;

	/* Success rules. */
	--fmc-line-green-b6dcc3: #4a9b66;

	/* Shadows, which have to be deeper on a dark page to be seen at all. */
	--fmc-shadow-00000057: rgba(0, 0, 0, 0.612);
	--fmc-shadow-0055a5: #111d28;
	--fmc-shadow-0055a52e: rgba(18, 26, 33, 0.324);

	/* Dark veils over something else. */
	--fmc-veil-dark-0c12189e: rgba(12, 18, 24, .62);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {


		/* Paper. The whiter it was, the deeper it goes, so a panel that sat a shade off white ends up a shade off the page instead of merging into it. */
		--fmc-surface-e8f6ed: #202d25;
		--fmc-surface-eef8f1: #202521;
		--fmc-surface-fdf2ee: #251d1b;
		--fmc-surface-ffffff: #141617;

		/* Paper one step down, wells and inset rows. */
		--fmc-surface-2-e3e8ed: #2a3037;

		/* Text. Inverts and keeps its order, so a heading still outranks the line under it. */
		--fmc-ink-171a1f: #d8dbe0;
		--fmc-ink-222a31: #cfd4d9;
		--fmc-ink-4a545e: #b5bcc4;

		/* Secondary text. */
		--fmc-ink-2-5b656e: #afb6bc;
		--fmc-ink-2-636c75: #adb3ba;

		/* Text that was already light on a dark band. Nothing to do. */
		--fmc-on-dark-ffffff: #fff;

		/* Rules and borders. */
		--fmc-line-d9dfe5: #3c454e;

		/* Brand blue as text. #0055A5 on near black is 2.2:1, which is not text. Lifted it is 7.5:1 and still the brand. */
		--fmc-text-blue-0055a5: #52abff;

		/* Brand blue as a fill, kept dark enough for white to sit on it. */
		--fmc-fill-blue-004789: #0061bc;
		--fmc-fill-blue-0055a5: #006fd8;

		/* Brand blue as a rule. */
		--fmc-line-blue-0055a5: #0074e1;

		/* Brand orange as text. */
		--fmc-text-orange-8d3418: #ea673e;
		--fmc-text-orange-c2410c: #f36c35;

		/* Brand orange as a fill. Orange is the action colour and already carries on either ground. */
		--fmc-fill-orange-e84e00: #e84e00;
		--fmc-fill-orange-ff5500: #ff5500;

		/* Brand orange as a rule. */
		--fmc-line-orange-f0c2b4: #dd7555;
		--fmc-line-orange-ff5500: #ff5500;

		/* Success text. */
		--fmc-text-green-18603a: #5ccc91;
		--fmc-text-green-18864b: #5ccc90;

		/* Success rules. */
		--fmc-line-green-b6dcc3: #4a9b66;

		/* Shadows, which have to be deeper on a dark page to be seen at all. */
		--fmc-shadow-00000057: rgba(0, 0, 0, 0.612);
		--fmc-shadow-0055a5: #111d28;
		--fmc-shadow-0055a52e: rgba(18, 26, 33, 0.324);

		/* Dark veils over something else. */
		--fmc-veil-dark-0c12189e: rgba(12, 18, 24, .62);
	}
}