/**
 * BuyTides — assessment form skin.
 *
 * Scoped to .bta-form_wrapper, which Gravity Forms prints on the wrapper for any
 * form whose form-level CSS class is `bta-form` (GF appends `_wrapper`). Nothing
 * here reaches another Gravity Form on the site.
 *
 * The layout is a two-pane card: a tinted pane carrying the step number, the
 * question and the brand, and a white pane carrying the answers and the two
 * buttons, with the progress bar as a full-width strip across the very top.
 *
 * Gravity Forms cannot emit that shape — a page is a flat list of fields and one
 * footer — so assets/js/assessment-form.js moves the rendered pieces into two
 * real panes after each page renders. If that script fails the form still works
 * and still looks like BuyTides; it just falls back to one column. Every rule
 * below that depends on the panes is written so the single-column fallback is
 * the sane default.
 *
 * GF 2.9 renders in the orbital theme, which resolves --gf-ctrl-* variables into
 * per-element values on selectors no child theme can out-specify. Controls are
 * therefore restyled by setting those variables, not the properties.
 *
 * @package BuyTides_Child
 */

/* ------------------------------------------------------------- tokens -- */
.bta-form_wrapper {
	--bta-navy: #0B2C4D;
	--bta-navy-hover: #12406C;
	--bta-navy-active: #082238;
	--bta-ink: #22384D;
	--bta-muted: #4B6479;
	--bta-faint: #7C93A3;
	--bta-hint: #8FB8CC;
	--bta-line: #CFE4EE;
	--bta-line-hover: #A9CFE2;
	--bta-cyan: #61DDEB;
	--bta-tint: #F2F9FC;
	--bta-pane: #E7F4FA;
	--bta-soft: #7FB6CB;
	--bta-error: #C2703C;
	/* The card frame. Cyan rather than a neutral hairline, to match the rule
	   under the masthead in the assessment notification email. */
	--bta-card-line: #61DDEB;
	--bta-radius-card: 28px;
	--bta-radius-ctrl: 12px;
	--bta-pad: clamp(26px, 3.4vw, 52px);

	box-sizing: border-box;
	width: 100%;
	max-width: 1120px;
	margin-inline: auto;
	padding: 0;
	overflow: hidden;
	border: 2px solid var(--bta-card-line);
	border-radius: var(--bta-radius-card);
	background: #ffffff;
	box-shadow: 0 18px 44px rgba( 43, 55, 84, .09 );
	font-family: Inter, system-ui, -apple-system, sans-serif;
	color: var(--bta-ink);
	-webkit-font-smoothing: antialiased;
}

/* Orbital's own knobs, retuned to the BuyTides control.
 *
 * Marked important because Gravity Forms prints these same properties in an
 * inline <style> inside the wrapper, scoped to `#gform_wrapper_N[data-form-index
 * ="0"].gform-theme`. No class-only selector outranks an ID, and the id is
 * generated per form. This block earns !important; almost nothing else does. */
.bta-form_wrapper {
	--gf-color-primary: #0B2C4D !important;
	--gf-color-primary-rgb: 11, 44, 77 !important;
	--gf-color-primary-contrast: #ffffff !important;
	--gf-color-primary-darker: #082238 !important;
	--gf-color-primary-lighter: #12406C !important;
	--gf-color-in-ctrl-primary: #0B2C4D !important;
	--gf-color-in-ctrl-primary-rgb: 11, 44, 77 !important;
	--gf-color-in-ctrl-contrast: #0B2C4D !important;
	--gf-color-out-ctrl-dark: #4B6479 !important;

	--gf-ctrl-size: 54px !important;
	--gf-ctrl-radius: 12px !important;
	--gf-ctrl-padding-x: 16px !important;
	--gf-ctrl-bg-color: #ffffff !important;
	--gf-ctrl-color: #0B2C4D !important;
	--gf-ctrl-border-width: 1.5px !important;
	--gf-ctrl-border-color: #CFE4EE !important;
	--gf-ctrl-border-color-hover: #A9CFE2 !important;
	--gf-ctrl-border-color-focus: #61DDEB !important;
	--gf-ctrl-border-color-error: #E9A97A !important;
	--gf-ctrl-font-family: Inter, system-ui, sans-serif !important;
	--gf-ctrl-font-size: 15.5px !important;
	--gf-ctrl-shadow: none !important;
	--gf-ctrl-placeholder-color: #A8BCC7 !important;
	--gf-ctrl-choice-size: 22px !important;
	--gf-ctrl-choice-check-color: #0B2C4D !important;

	--gf-ctrl-btn-size: 50px !important;
	--gf-ctrl-btn-radius: 999px !important;
	--gf-ctrl-btn-padding-x: 30px !important;
	--gf-ctrl-btn-font-family: Outfit, sans-serif !important;
	--gf-ctrl-btn-font-size: 15.5px !important;
	--gf-ctrl-btn-font-weight: 600 !important;
	--gf-ctrl-btn-text-transform: none !important;
	--gf-ctrl-btn-shadow: none !important;
	--gf-ctrl-btn-shadow-hover: none !important;
	--gf-ctrl-btn-shadow-focus: 0 0 0 3px rgba( 97, 221, 235, .38 ) !important;
	--gf-ctrl-btn-bg-color-primary: #0B2C4D !important;
	--gf-ctrl-btn-bg-color-hover-primary: #12406C !important;
	--gf-ctrl-btn-bg-color-focus-primary: #12406C !important;
	--gf-ctrl-btn-color-primary: #ffffff !important;
	--gf-ctrl-btn-border-width-primary: 0 !important;
	--gf-ctrl-btn-border-color-primary: transparent !important;

	--gf-ctrl-btn-bg-color-secondary: #ffffff !important;
	--gf-ctrl-btn-bg-color-hover-secondary: #F2F9FC !important;
	--gf-ctrl-btn-color-secondary: #0B2C4D !important;
	--gf-ctrl-btn-color-hover-secondary: #0B2C4D !important;
	--gf-ctrl-btn-border-width-secondary: 1.5px !important;
	--gf-ctrl-btn-border-color-secondary: #0B2C4D !important;
	--gf-ctrl-btn-border-color-hover-secondary: #0B2C4D !important;
}

.bta-form_wrapper *,
.bta-form_wrapper *::before,
.bta-form_wrapper *::after { box-sizing: border-box; }
.bta-form_wrapper ::selection { background: #6FE4F2; color: var(--bta-navy); }

/* --------------------------------------------------------- page shell -- */
/* The theme prints no body classes on this shell, so the page-level rules key
 * off the form itself with :has(). They apply only where an assessment is, and
 * the stylesheet only loads there anyway. */
body:has( .bta-form_wrapper ) { background: #F1F3F5; }

main:has( .bta-form_wrapper ) { margin-top: 0 !important; }
main:has( .bta-form_wrapper ) > .wp-block-group {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
/* The step is the heading. A page title above it reads as a page, and this is
 * not meant to look like one. */
main:has( .bta-form_wrapper ) .wp-block-post-title { display: none; }

/* ------------------------------------------------------ progress strip -- */
.bta-form_wrapper .gf_progressbar_wrapper {
	margin: 0;
	padding: 0;
	background: #D8ECF5;
}
/* The bar carries the position visually; the readout stays in the
 * accessibility tree, and the left pane restates it as "step N/M". */
.bta-form_wrapper .gf_progressbar_title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.bta-form_wrapper .gf_progressbar {
	height: 6px;
	margin: 0;
	border-radius: 0;
	background: #D8ECF5;
	overflow: hidden;
}
.bta-form_wrapper .gf_progressbar_percentage {
	height: 6px;
	border-radius: 0 999px 999px 0;
	background: var(--bta-navy) !important;
	transition: width .35s ease;
}
.bta-form_wrapper .gf_progressbar_percentage span { display: none; }

/* --------------------------------------------------------------- panes -- */
/* Built by assessment-form.js. Until it runs, .gform_page is an ordinary block
 * and the form reads as one column — plain, but never broken. */
.bta-form_wrapper .gform_page.bta-paned,
.bta-form_wrapper form.bta-paned > .gform-body > .gform_page.bta-paned {
	display: grid;
	grid-template-columns: 44fr 56fr;
	align-items: stretch;
	min-height: min( 580px, 74vh );
}
.bta-form_wrapper .gform_page:not(.bta-paned) { padding: var(--bta-pad); }

.bta-pane {
	display: flex;
	flex-direction: column;
	padding: var(--bta-pad);
	min-width: 0;
}
.bta-pane--left {
	justify-content: space-between;
	gap: 24px;
	background: var(--bta-pane);
}
.bta-pane--right {
	justify-content: flex-start;
	gap: clamp( 18px, 2.4vw, 28px );
	background: #ffffff;
}

/* ---------------------------------------------------------- left pane -- */
.bta-pane__home {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	align-self: flex-start;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	color: var(--bta-navy);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.bta-pane__home:hover { color: var(--bta-navy-hover); }
.bta-pane__home svg { flex: 0 0 auto; }

/* The question group sits optically centred between the link and the brand. */
.bta-pane__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-block: auto;
	padding-block: 12px;
}
.bta-pane__step {
	margin: 0;
	font-family: Outfit, sans-serif;
	font-size: clamp( 16px, 1.6vw, 19px );
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.2;
	color: var(--bta-hint);
}
.bta-pane__hint {
	margin: 0;
	font-size: clamp( 14px, 1.3vw, 15.5px );
	font-weight: 500;
	line-height: 1.45;
	color: var(--bta-hint);
}
.bta-pane__brand {
	display: block;
	align-self: flex-start;
	margin: 0;
}
.bta-pane__brand img {
	display: block;
	width: auto;
	height: clamp( 22px, 2.2vw, 28px );
}

/* The question itself. Gravity Forms prints it as the field's label; the script
 * moves it here, and the pane is what makes it read as a headline. */
.bta-form_wrapper .bta-pane--left .gfield_label,
.bta-form_wrapper .bta-pane--left legend.gfield_label,
.bta-form_wrapper .bta-pane--left .bta-slide__title,
.bta-form_wrapper .bta-pane--left .bta-statement {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: Outfit, sans-serif;
	font-size: clamp( 26px, 3.1vw, 40px );
	font-weight: 700;
	letter-spacing: -.028em;
	line-height: 1.08;
	color: var(--bta-navy);
	text-wrap: pretty;
}
/* Statement steps are a sentence, not a question — lighter and a touch smaller. */
.bta-form_wrapper .bta-pane--left .bta-statement {
	font-size: clamp( 22px, 2.5vw, 31px );
	font-weight: 500;
	letter-spacing: -.022em;
	line-height: 1.24;
}
.bta-form_wrapper .bta-statement__soft { color: var(--bta-soft); }

.bta-form_wrapper .bta-pane--left .gfield_description,
.bta-form_wrapper .bta-pane--left .bta-slide__sub,
.bta-form_wrapper .bta-pane--left .bta-fineprint {
	margin: 0;
	padding: 0;
	font-size: clamp( 14px, 1.35vw, 16px );
	font-weight: 400;
	line-height: 1.5;
	color: var(--bta-hint);
}
.bta-form_wrapper .bta-pane--left .bta-fineprint { font-size: 12.5px; }

/* Every question is required, so the badge is noise on every screen. */
.bta-form_wrapper .gfield_required { display: none; }

/* ------------------------------------------------- fallback typography -- */
/* Same type, for the single-column state before the script runs. */
.bta-form_wrapper .gform_page:not(.bta-paned) .gfield_label {
	display: block;
	margin: 0 0 16px;
	font-family: Outfit, sans-serif;
	font-size: clamp( 24px, 3.2vw, 30px );
	font-weight: 700;
	letter-spacing: -.026em;
	line-height: 1.14;
	color: var(--bta-navy);
}
.bta-form_wrapper .gform_page:not(.bta-paned) .gfield_description {
	margin: -6px 0 16px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--bta-hint);
}

/* --------------------------------------------------------- right pane -- */
.bta-form_wrapper .bta-pane--right .gform_page_fields,
.bta-form_wrapper .bta-pane--right .gform_fields,
.bta-form_wrapper .bta-pane--right .gfield,
.bta-form_wrapper .bta-pane--right .ginput_container {
	margin: 0;
	padding: 0;
	border: 0;
}

/* -------------------------------------------------------- choice cards -- */
.bta-form_wrapper .bta-cards .gfield_radio,
.bta-form_wrapper .bta-cards .gfield_checkbox {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.bta-form_wrapper .bta-cards .gchoice {
	position: relative;
	margin: 0;
	border: 1.5px solid var(--bta-line);
	border-radius: var(--bta-radius-ctrl);
	background: #ffffff;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.bta-form_wrapper .bta-cards .gchoice:hover { border-color: var(--bta-line-hover); }
/* The control is stretched invisibly over the whole card: the card is the hit
 * area, but the real input is still what the browser focuses, checks and hands
 * to assistive tech. The visible circle or box is drawn on the label. */
.bta-form_wrapper .bta-cards .gchoice input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
.bta-form_wrapper .bta-cards .gchoice label {
	display: block;
	margin: 0;
	padding: 17px 20px 17px 56px;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--bta-navy);
	cursor: pointer;
}
.bta-form_wrapper .bta-cards .gchoice label::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translateY( -50% );
	width: 21px;
	height: 21px;
	border: 2px solid var(--bta-line-hover);
	background: #ffffff;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.bta-form_wrapper .bta-cards.gfield--type-radio .gchoice label::before { border-radius: 50%; }
.bta-form_wrapper .bta-cards.gfield--type-checkbox .gchoice label::before { border-radius: 6px; }

.bta-form_wrapper .bta-cards .gchoice:has( input:checked ) {
	border-color: var(--bta-navy);
	background: var(--bta-tint);
}
/* Radio: a navy ring with a navy centre, drawn with an inset shadow so no extra
 * element is needed. Checkbox: a filled navy box with a white tick. */
.bta-form_wrapper .bta-cards.gfield--type-radio .gchoice:has( input:checked ) label::before {
	border-color: var(--bta-navy);
	box-shadow: inset 0 0 0 4px #ffffff, inset 0 0 0 21px var(--bta-navy);
}
.bta-form_wrapper .bta-cards.gfield--type-checkbox .gchoice:has( input:checked ) label::before {
	border-color: var(--bta-navy);
	background-color: var(--bta-navy);
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
}
.bta-form_wrapper .bta-cards .gchoice:has( input:focus-visible ) {
	border-color: var(--bta-cyan);
	box-shadow: 0 0 0 3px rgba( 97, 221, 235, .28 );
}

/* --------------------------------------------------------- text inputs -- */
.bta-form_wrapper input[type="text"],
.bta-form_wrapper input[type="email"],
.bta-form_wrapper input[type="tel"],
.bta-form_wrapper select,
.bta-form_wrapper textarea {
	display: block;
	width: 100%;
	height: 54px;
	margin: 0;
	padding: 0 16px;
	border: 1.5px solid var(--bta-line);
	border-radius: var(--bta-radius-ctrl);
	background-color: #ffffff;
	background-repeat: no-repeat;
	background-position: 16px center;
	background-size: 19px 19px;
	font-family: Inter, system-ui, sans-serif;
	font-size: 15.5px;
	line-height: 1.4;
	color: var(--bta-navy) !important;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.bta-form_wrapper textarea { height: auto; padding: 14px 16px; }
.bta-form_wrapper input:focus,
.bta-form_wrapper select:focus,
.bta-form_wrapper textarea:focus {
	border-color: var(--bta-cyan);
	box-shadow: 0 0 0 3px rgba( 97, 221, 235, .22 );
	outline: none;
}
.bta-form_wrapper ::placeholder { color: #A8BCC7; opacity: 1; }

/* The two decorated fields need a wider left gutter than --gf-ctrl-padding-x
 * can express, and that padding comes from a framework selector no child-theme
 * rule can outrank. */
.bta-form_wrapper .bta-input--email input[type="email"] {
	padding-left: 46px !important;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C93A3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2.5'/%3E%3Cpath d='M3 6.5l9 6.5 9-6.5'/%3E%3C/svg%3E" );
}
.bta-form_wrapper .bta-dob input[type="text"] {
	padding-left: 46px !important;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C93A3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 9.5h17M8 3.5v3M16 3.5v3'/%3E%3C/svg%3E" );
}
.bta-form_wrapper .gform-field-label--type-sub { display: none; }
.bta-form_wrapper select {
	padding-right: 46px;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B6479' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E" );
	background-position: right 16px center;
	background-size: 20px 20px;
	cursor: pointer;
}
.bta-form_wrapper .ginput_container_date input { width: 100% !important; }

/* ------------------------------------------------------------ consent -- */
.bta-form_wrapper .bta-consent .gchoice {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	border: 0;
	background: none;
}
.bta-form_wrapper .bta-consent input[type="checkbox"] {
	position: static;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: 1px 0 0;
	opacity: 1;
	border: 1.5px solid var(--bta-line);
	border-radius: 7px;
	background: #ffffff no-repeat center / 14px 14px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.bta-form_wrapper .bta-consent input[type="checkbox"]:checked {
	border-color: var(--bta-navy);
	background-color: var(--bta-navy);
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E" );
}
.bta-form_wrapper .bta-consent label {
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.55;
	color: var(--bta-ink);
	cursor: pointer;
}
.bta-form_wrapper .bta-consent label::before { content: none; }
.bta-form_wrapper .bta-consent label a {
	color: var(--bta-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.bta-form_wrapper .bta-consent label a:hover { color: #1B7FA8; }

/* -------------------------------------------------- image placeholders -- */
/* Deliberately obvious: these are the slots the artwork drops into and should
 * never be mistaken for finished design. Swap each <figure> for an <img> once
 * the asset exists. */
.bta-form_wrapper .bta-figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	margin: 0;
	padding: 24px;
	min-height: 210px;
	flex: 1 1 auto;
	border: 2px dashed #C6DAE6;
	border-radius: 18px;
	background: linear-gradient( 160deg, #EFF7FA 0%, #E6F1F6 60%, #EDF1F4 100% );
	text-align: center;
}
.bta-form_wrapper .bta-figure__badge {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba( 11, 44, 77, .07 );
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .09em;
	line-height: 1;
	text-transform: uppercase;
	color: #5B7C92;
}
.bta-form_wrapper .bta-figure__label {
	font-family: Outfit, sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--bta-navy);
}
.bta-form_wrapper .bta-figure__hint {
	max-width: 34ch;
	font-size: 13px;
	line-height: 1.5;
	color: var(--bta-muted);
}

/* ------------------------------------------------------------ buttons -- */
.bta-form_wrapper .gform_page_footer,
.bta-form_wrapper .gform_footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin: auto 0 0;
	padding: 18px 0 0;
	border: 0;
}
.bta-form_wrapper .gform_page_footer input,
.bta-form_wrapper .gform_footer input { margin: 0; }

/* Orbital resolves button geometry from the --gf-ctrl-btn-* variables set at the
 * top, so only the text colour is restated here: the BuyTides theme sets `color`
 * on every button globally and that arrives from outside Gravity Forms, where no
 * variable can reach it. */
.bta-form_wrapper .gform_page_footer .gform_next_button,
.bta-form_wrapper .gform_page_footer .gform_button,
.bta-form_wrapper .gform_footer .gform_button { color: #ffffff !important; }
.bta-form_wrapper .gform_page_footer .gform_previous_button { color: var(--bta-navy) !important; }

/* --------------------------------------------------------- validation -- */
.bta-form_wrapper .gfield_validation_message,
.bta-form_wrapper .validation_message {
	margin: 10px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--bta-error);
}
.bta-form_wrapper .gfield_error input,
.bta-form_wrapper .gfield_error select { border-color: #E9A97A; }
.bta-form_wrapper .gfield_error.bta-cards .gchoice { border-color: #E9A97A; }
.bta-form_wrapper .gform_validation_errors {
	margin: 0 0 18px;
	padding: 13px 16px;
	border: 1.5px solid #F0BFC4;
	border-left-width: 4px;
	border-radius: 12px;
	background: #FDF2F3;
	box-shadow: none;
}
.bta-form_wrapper .gform_validation_errors > h2 {
	margin: 0;
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: #8A2F38;
}
.bta-form_wrapper .gform_validation_errors > h2 .gform-icon { display: none; }

/* ------------------------------------------------------- confirmation -- */
.bta-form_wrapper .gform_confirmation_message {
	padding: clamp( 40px, 6vw, 88px ) var(--bta-pad);
	font-family: Outfit, sans-serif;
	font-size: clamp( 22px, 3vw, 30px );
	font-weight: 600;
	line-height: 1.2;
	color: var(--bta-navy);
	text-align: center;
}

/* ------------------------------------------------- hidden-label fields -- */
/* The consent checkbox is set to "hidden label" in the editor. Its label stays
 * in the accessibility tree but out of the layout. */
.bta-form_wrapper .hidden_label > .gfield_label,
.bta-form_wrapper .hidden_label > legend.gfield_label,
.bta-form_wrapper .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------- responsive -- */
@media ( max-width: 880px ) {
	.bta-form_wrapper {
		border-radius: 22px;
		box-shadow: 0 10px 26px rgba( 43, 55, 84, .09 );
	}
	.bta-form_wrapper .gform_page.bta-paned {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.bta-pane--left {
		gap: 16px;
		padding-bottom: clamp( 22px, 4vw, 32px );
	}
	.bta-pane__body { margin-block: 0; padding-block: 0; }
	/* The wordmark is decoration on a small screen and the site header already
	   carries the logo, so it goes rather than eating a third of the fold. */
	.bta-pane__brand { display: none; }
	.bta-form_wrapper .bta-figure { min-height: 170px; aspect-ratio: 5 / 4; }
}
@media ( prefers-reduced-motion: reduce ) {
	.bta-form_wrapper * { transition: none !important; }
}

/* ------------------------------------------------------- breaking out -- */
/* The card is wider than the theme's content width. Block themes constrain
 * every child of an is-layout-constrained container to that width with a rule
 * of the same specificity as the wrapper's own, so it wins on source order and
 * the card comes out at the article measure. Restated here to break out. */
main:has( .bta-form_wrapper ) .entry-content > .bta-form_wrapper,
.entry-content > .bta-form_wrapper,
.wp-block-post-content > .bta-form_wrapper {
	width: 100%;
	max-width: 1120px !important;
	margin-inline: auto !important;
}

/* The wordmark is inline SVG, so it is sized on the <svg>, not on an <img>.
 * The chain mark beside it keeps the header's proportions - 30px of mark to
 * 26px of wordmark, 14px apart. The flex display is desktop-only so the
 * small-screen rule that hides the brand still wins below 881px. */
@media ( min-width: 881px ) {
	.bta-pane__brand {
		display: inline-flex;
		align-items: center;
		align-self: flex-start;
		gap: clamp( 12px, 1.1vw, 15px );
	}
}
.bta-pane__brand svg {
	display: block;
	width: auto;
	height: clamp( 22px, 2.2vw, 28px );
}
.bta-pane__brand .bta-pane__mark {
	display: block;
	width: auto;
	max-width: none;
	height: clamp( 25px, 2.54vw, 32px );
}

/* Orbital sizes the progress fill itself, on a selector that beats a single
 * class, so it comes out taller than its track and rounded at both ends — which
 * reads as a floating pill sitting above the card rather than a strip set into
 * it. Restated at the depth the theme uses. */
.bta-form_wrapper .gf_progressbar_wrapper .gf_progressbar {
	height: 6px !important;
	border-radius: 0 !important;
	overflow: hidden;
}
.bta-form_wrapper .gf_progressbar_wrapper .gf_progressbar .gf_progressbar_percentage {
	height: 6px !important;
	min-height: 0 !important;
	border-radius: 0 !important;
	background: var(--bta-navy) !important;
}

/* ---------------------------------------------------------- title bar -- */
/* Blocks on the page itself, not markup printed by this theme file: an alignfull
 * group holding an eyebrow, the Rank Math breadcrumb, the H1 and a one-line
 * lede. The block theme handles the full-bleed; everything here is paint.
 *
 * Matched to the Weight Management hero (assets/css/weight-management.css):
 * the same centred 820px body, the same uppercase cyan eyebrow and breadcrumb,
 * the same headline scale, and the same navy wash with a cyan bloom rising from
 * each bottom corner. WM paints that wash only when it cannot play its hero
 * video; the assessment has no video, so it is the standing background here.
 *
 * The tokens are WM's own values rather than a var() reference, because
 * weight-management.css is scoped to .wm-page and never loads on this page. */
.bta-titlebar {
	--bta-navy-deep: #08213A;
	--bta-cyan-ink: #9EEDF6;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp( 56px, 6.5vw, 96px );
	background: linear-gradient( 158deg, #123A60 0%, #2B3754 55%, var(--bta-navy-deep) 100% );
	color: #ffffff;
	text-align: center;
}
.bta-titlebar::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image:
		radial-gradient( 64% 82% at 2% 100%, rgba( 31, 200, 227, .36 ) 0%, rgba( 31, 200, 227, .16 ) 42%, rgba( 31, 200, 227, 0 ) 68% ),
		radial-gradient( 64% 82% at 98% 100%, rgba( 111, 228, 242, .30 ) 0%, rgba( 31, 200, 227, .12 ) 44%, rgba( 31, 200, 227, 0 ) 70% );
}
/* Every child rides above the bloom and shares the hero's measure. */
.bta-titlebar > * {
	position: relative;
	z-index: 2;
	max-width: 820px;
	margin: 0 auto;
}

.bta-titlebar__kicker {
	margin: 0 auto 14px;
	font-family: Outfit, "Inter", system-ui, sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .16em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--bta-cyan-ink);
}

/* Rank Math prints <nav class="rank-math-breadcrumb"><p>…</p></nav>. On the WM
 * hero the trail sits where an eyebrow would and takes an eyebrow's type, so it
 * does the same here. */
.bta-titlebar .rank-math-breadcrumb { margin: 0 auto 16px; }
.bta-titlebar .rank-math-breadcrumb p {
	margin: 0;
	font-family: Outfit, "Inter", system-ui, sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--bta-cyan-ink);
}
.bta-titlebar .rank-math-breadcrumb a {
	color: rgba( 255, 255, 255, .72 );
	text-decoration: none;
	transition: color .15s ease;
}
.bta-titlebar .rank-math-breadcrumb a:hover { color: #ffffff; }
/* Rank Math marks every UNLINKED crumb `.last`, not just the final one, so the
 * Assessments crumb arrives with the same class as the page title. Only the
 * true final crumb should read as the current page. */
.bta-titlebar .rank-math-breadcrumb .separator {
	margin: 0 2px;
	color: rgba( 255, 255, 255, .42 );
}
.bta-titlebar .rank-math-breadcrumb .last { color: rgba( 255, 255, 255, .72 ); }
.bta-titlebar .rank-math-breadcrumb .last:last-child { color: var(--bta-cyan-ink); }

.bta-titlebar__h1 {
	margin: 0 auto 20px;
	font-family: Outfit, sans-serif;
	font-size: clamp( 34px, 4.2vw, 52px );
	font-weight: 700;
	letter-spacing: -.028em;
	line-height: 1.05;
	color: #ffffff;
	text-shadow: 0 2px 18px rgba( 6, 26, 45, .45 );
	text-wrap: pretty;
}
.bta-titlebar__lede {
	max-width: 60ch;
	margin: 0 auto;
	font-family: Inter, system-ui, sans-serif;
	font-size: clamp( 17px, 1.5vw, 20px );
	line-height: 1.55;
	color: rgba( 255, 255, 255, .86 );
	text-shadow: 0 1px 12px rgba( 6, 26, 45, .5 );
	text-wrap: pretty;
}
@media ( max-width: 560px ) {
	.bta-titlebar__h1 { font-size: clamp( 30px, 8vw, 38px ); }
}
/* The card now carries its own breathing room, since the group above it no
 * longer has any. */
.entry-content > .bta-form_wrapper,
.wp-block-post-content > .bta-form_wrapper {
	margin-block: clamp( 28px, 4vw, 56px ) clamp( 40px, 6vw, 84px ) !important;
}
/* theme.json's block gap puts a top margin on .entry-content, which shows as a
 * white sliver between the navy marquee and the navy title bar. The bar is meant
 * to sit flush against the chrome above it. */
main:has( .bta-form_wrapper ) > .wp-block-group > .entry-content {
	margin-block-start: 0 !important;
}

/* --------------------------------------------------------- solo steps -- */
/* A step with nothing to answer. It keeps the tint and the pane furniture but
 * spans the whole card: a two-pane grid with one empty column reads as a
 * rendering fault rather than a design. Marked by assessment-form.js. */
.bta-form_wrapper .gform_page.bta-paned--solo { grid-template-columns: 1fr; }
.bta-form_wrapper .bta-paned--solo .bta-pane--left {
	padding-inline: clamp( 28px, 5vw, 88px );
}
.bta-form_wrapper .bta-paned--solo .bta-pane__body { max-width: 820px; }
/* The footer is a child of the left pane here, so it needs the bottom-right
 * placement the right pane used to give it. */
.bta-form_wrapper .bta-paned--solo .gform_page_footer,
.bta-form_wrapper .bta-paned--solo .gform_footer {
	width: 100%;
	margin-top: 0;
}

/* A captioned field keeps its label beside its input, so the small-caption rule
 * has to reach the label in place rather than through a .bta-input ancestor the
 * pane script would otherwise have moved it out of. */
.bta-form_wrapper .bta-pane--right .bta-input .gfield_label,
.bta-form_wrapper .gform_page:not(.bta-paned) .bta-input .gfield_label {
	margin: 0 0 7px;
	font-family: Inter, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
	color: var(--bta-ink);
	text-shadow: none;
}

/* --------------------------------------------------- confirmation card -- */
/* Gravity Forms puts the form's own CSS class on the confirmation wrapper but
 * not the `bta-form_wrapper` one every rule above is scoped to, so none of this
 * stylesheet reached the finished state and the message landed on the page as a
 * bare centred paragraph outside the card.
 *
 * inc/assessment-form.php rebuilds it as one more paned step, carrying
 * .bta-form_wrapper and .gform_page.bta-paned so it inherits the card shell and
 * the two-column grid unchanged. Only the message itself needs retuning: the
 * stock rule above centres it and gives it its own outer padding, both of which
 * are wrong once it is sitting inside a pane that already has padding. */
.bta-form_wrapper .bta-confirmation .bta-pane--right {
	justify-content: center;
}

.bta-form_wrapper .bta-confirmation .gform_confirmation_message {
	padding: 0;
	font-family: Inter, system-ui, -apple-system, sans-serif;
	font-size: clamp( 16px, 1.5vw, 18px );
	font-weight: 400;
	line-height: 1.6;
	text-align: left;
	color: var(--bta-muted);
}

.bta-form_wrapper .bta-confirmation .gform_confirmation_message p {
	margin: 0 0 14px;
}

.bta-form_wrapper .bta-confirmation .gform_confirmation_message p:last-child {
	margin-bottom: 0;
}

/* The title bar names the assessment and frames the quiz while it runs. Once
 * the quiz is done the left pane states the name instead, so the bar is the
 * same words twice above a finished form. */
main:has( .bta-confirmation ) .bta-titlebar {
	display: none;
}

@media ( max-width: 880px ) {
	/* The pane stack puts the left pane first, so the statement already reads
	   above the message; the right pane's centring has nothing left to do. */
	.bta-form_wrapper .bta-confirmation .bta-pane--right {
		justify-content: flex-start;
	}
}

/* ----------------------------------------------------- progress strip -- */
/* The bar used to run flush to the card edges, where the 28px corner radius and
 * the cyan border clipped both ends of it. It now sits inset with a rounded
 * track of its own, so the frame contains it instead of cutting it. */
/* The strip spans the full card, but the card below it does not have one
 * background — it is a tinted pane beside a white one. A flat tint here bled
 * baby blue across the top of the white answer pane, so the strip carries the
 * same 44/56 split as the grid underneath and each half continues its own
 * column. The stop is a hard edge, not a blend, so it lines up exactly. */
.bta-form_wrapper .gf_progressbar_wrapper {
	margin: 0;
	padding: 16px 18px 14px;
	background: linear-gradient( 90deg, var(--bta-pane) 0 44%, #ffffff 44% 100% );
}
@media ( max-width: 880px ) {
	/* Stacked: the tinted pane is the full width, so the strip is too. */
	.bta-form_wrapper .gf_progressbar_wrapper { background: var(--bta-pane); }
}
.bta-form_wrapper .gf_progressbar_wrapper .gf_progressbar {
	position: relative;
	height: 7px !important;
	margin: 0;
	border-radius: 999px !important;
	background: #DCE9F0;
	overflow: hidden;
}
.bta-form_wrapper .gf_progressbar_wrapper .gf_progressbar .gf_progressbar_percentage {
	position: relative;
	overflow: hidden;
	height: 7px !important;
	min-height: 0 !important;
	border-radius: 999px !important;
	background: linear-gradient( 90deg, var(--bta-navy) 0%, #1B6FA8 62%, var(--bta-cyan) 100% ) !important;
	/* The width is set inline by Gravity Forms; the script re-applies the
	   previous value first so this transition has something to travel from. */
	transition: width .55s cubic-bezier( .4, 0, .2, 1 );
}
/* A highlight travelling along the filled part, so the bar reads as live rather
 * than as a static measurement. */
.bta-form_wrapper .gf_progressbar_wrapper .gf_progressbar .gf_progressbar_percentage::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient( 100deg, rgba( 255, 255, 255, 0 ) 20%, rgba( 255, 255, 255, .55 ) 50%, rgba( 255, 255, 255, 0 ) 80% );
	background-size: 220% 100%;
	animation: bta-progress-sheen 2.4s linear infinite;
	pointer-events: none;
}
@keyframes bta-progress-sheen {
	from { background-position: 120% 0; }
	to   { background-position: -120% 0; }
}
@media ( prefers-reduced-motion: reduce ) {
	.bta-form_wrapper .gf_progressbar_wrapper .gf_progressbar .gf_progressbar_percentage::after {
		animation: none;
		display: none;
	}
	.bta-form_wrapper .gf_progressbar_wrapper .gf_progressbar .gf_progressbar_percentage {
		transition: none;
	}
}

/* ------------------------------------------------ consent at the foot -- */
/* A consent line that shares its step with a question can sit at the foot of
 * the right pane, directly above the buttons, instead of under the question:
 * give the field `bta-consent--foot` beside `bta-consent`.
 *
 * The field list keeps orbital's 12-column grid, so half-width fields (first
 * and last name) still pair up. Its rows become twelve content-sized tracks and
 * one flexible one; the consent is placed in the flexible track and aligned to
 * its bottom, which parks it on the footer. The row gap moves to a bottom
 * margin so the unused tracks collapse to nothing. Stacked panes have no spare
 * height, so there the flexible track is empty and the consent simply follows
 * the last field. */
.bta-form_wrapper .bta-pane--right:has( .bta-consent--foot ) > .gform_page_fields {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.bta-form_wrapper .bta-pane--right:has( .bta-consent--foot ) .gform_fields {
	flex: 1 1 auto;
	grid-template-rows: repeat( 12, min-content ) 1fr;
	row-gap: 0;
}

.bta-form_wrapper .bta-pane--right:has( .bta-consent--foot ) .gform_fields > .gfield:not( .bta-consent--foot ) {
	margin-bottom: 20px;
}

.bta-form_wrapper .bta-pane--right .gfield.bta-consent--foot {
	grid-row: 13;
	align-self: end;
}

/* The slide's heading and line move to the left pane; the empty field they
   leave behind would otherwise hold a row of its own. */
.bta-form_wrapper .bta-pane--right:has( .bta-consent--foot ) .bta-slidefield:not( :has( .bta-slide__title, .bta-slide__sub ) ) {
	display: none;
}
/* ------------------------------------------------------ select, centred -- */
/* With appearance: none, Chromium stops centring a select's text and sets it
 * at the top of the 54px box, while the text inputs beside it sit mid-height.
 * A line-height equal to the inner height (54px less the two 1.5px borders)
 * puts it back in the middle in every engine. */
.bta-form_wrapper select {
	line-height: 51px;
}

/* An unanswered select shows its prompt ("Select your state") in the colour
 * the text inputs use for placeholders, not as if it were an answer. The
 * options keep the ink colour in the open list. */
.bta-form_wrapper select:has( option[value=""]:checked ) {
	color: #A8BCC7 !important;
}

.bta-form_wrapper select option {
	color: var(--bta-navy);
}

/* Phone, decorated to match the email field. */
.bta-form_wrapper .bta-input--phone input[type="tel"] {
	padding-left: 46px !important;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C93A3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5h3l1.5 4-2 1.3a11 11 0 0 0 6.7 6.7l1.3-2 4 1.5v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6.5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E" );
}
/* ------------------------------------------------------------ textarea -- */
/* The shared control rule gives every input a fixed 54px height; a textarea
 * needs room for a list, and a line-height that reads as prose rather than a
 * single-line control. */
.bta-form_wrapper textarea {
	height: auto;
	min-height: 160px;
	padding: 14px 16px;
	line-height: 1.5;
	resize: vertical;
}
/* -------------------------------------------------- number range hint -- */
/* Gravity Forms prints "Please enter a number from 3 to 8." under every number
 * field that carries a range. The label and placeholder already say what to
 * type, and a grey line of instruction under an untouched field reads as an
 * error. It goes from sight but stays in the accessibility tree: the input
 * points at it with aria-describedby, so a screen reader still gets the range.
 * Validation messages are separate elements and are untouched. */
.bta-form_wrapper .gfield_description.instruction {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	border: 0;
	white-space: nowrap;
}