/*
 * Manifest — the guided join flow's appearance.
 * PHASE-6C-BRIEF.md §2.11.
 *
 * SECOND PASS, 25 August 2026. The first attempt inherited Divi's own
 * controls on the principle "layout is ours, identity is the theme's".
 * The secretary's verdict was that it still did not look good, measured
 * against Typeform and OpnForm, and they were right: Divi's submit button
 * is a small pill of 20px text with asymmetric padding, and its inputs
 * are flat mid-grey with no border at all. Inheriting those is precisely
 * what made a new form look like an old one.
 *
 * So the balance has shifted deliberately. Still the site's: the typeface
 * (inherited, never restated) and the brand accent #3C92C3, sampled from
 * sofn.uk's own link colour. Now ours: the panel, the fields, the choices
 * and the buttons.
 *
 * What actually makes a form of this kind feel modern, in rough order of
 * how much it matters:
 *
 *   1. ONE question, set large. A 2rem question with air around it reads
 *      as a conversation; a 1rem label reads as paperwork.
 *   2. A single calm panel, not a page of boxes — one soft edge and one
 *      shadow, instead of a border around every group.
 *   3. Choices that are obviously choices, with an unmistakable
 *      chosen state.
 *   4. A confident primary action, with a direction to it.
 *   5. Restraint everywhere else: one accent colour, a lot of white.
 *
 * Constraints that shaped it, from CLAUDE.md and the brief: no build
 * step, no framework, no preprocessor; it must sit inside a Divi row
 * without fighting the column; and the flow must work with CSS off and
 * with JavaScript off. Nothing here is load-bearing — every rule is
 * presentational and the form is wholly usable without any of it.
 *
 * Accessibility, because a "modern" look is usually where this gets
 * broken: the native radio and checkbox inputs are RESTYLED with
 * appearance:none, never hidden and replaced with a div. They keep their
 * semantics, their keyboard behaviour and their focus ring; a browser
 * that does not support appearance:none simply draws its own control,
 * which is a perfectly good outcome. Focus is always visible. Motion is
 * opt-out via prefers-reduced-motion.
 */

.manifest-join-flow {
	/* Identity: sampled from sofn.uk. */
	--mf-accent: #3c92c3;
	--mf-accent-dark: #2f7aa5;
	--mf-accent-tint: #f2f8fc;
	--mf-warm: #e4b46e;
	--mf-ink: #2f3437;
	--mf-muted: #6d757a;
	--mf-line: #e4e7e9;
	--mf-panel: #ffffff;
	--mf-field: #fbfcfc;
	--mf-error: #a3282d;
	--mf-error-tint: #fdf5f5;

	--mf-radius: 12px;
	--mf-radius-sm: 9px;

	max-width: 40rem;
	margin-inline: auto;
	color: var( --mf-ink );
	line-height: 1.65;
	/* font-family deliberately absent — inherit the theme's. */

	background: var( --mf-panel );
	border: 1px solid var( --mf-line );
	border-radius: var( --mf-radius );
	/* Two shadows: a tight one to define the edge, a wide soft one for
	   lift. One hard shadow is what makes a panel look like 2010. */
	box-shadow: 0 1px 2px rgba( 20, 30, 40, 0.04 ), 0 12px 32px -12px rgba( 20, 30, 40, 0.12 );
	overflow: hidden; /* keeps the progress bar inside the rounded corner */
}

.manifest-join-flow .manifest-join-flow-inner {
	padding: 2.5rem;
}

/* ---------------------------------------------------------------
 * Progress — flush to the panel's top edge, its full width.
 * --------------------------------------------------------------- */

.manifest-join-flow .manifest-join-progress-track {
	height: 4px;
	margin: 0;
	background: var( --mf-line );
	border-radius: 0;
	overflow: hidden;
}

.manifest-join-flow .manifest-join-progress-fill {
	display: block;
	height: 100%;
	border-radius: 0;
	background: linear-gradient( 90deg, var( --mf-accent ) 0%, var( --mf-accent-dark ) 100% );
	transition: width 350ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.manifest-join-flow .manifest-join-progress {
	margin: 0 0 1.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var( --mf-muted );
}

/* ---------------------------------------------------------------
 * The question — the single biggest lever on how this feels.
 * --------------------------------------------------------------- */

.manifest-join-flow fieldset {
	border: 0;
	margin: 0 0 2.25rem;
	padding: 0;
	min-width: 0; /* fieldset's default min-width breaks flex children */
}

.manifest-join-flow fieldset:last-of-type {
	margin-bottom: 0;
}

.manifest-join-flow legend {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0 0 0.5rem;
	font-size: clamp( 1.5rem, 1.15rem + 1.5vw, 2rem );
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.015em; /* large type needs tightening or it sprawls */
	color: var( --mf-ink );
}

.manifest-join-flow .description {
	margin: 0 0 1.5rem;
	font-size: 1rem;
	color: var( --mf-muted );
}

/* A second question on the same step is a subheading, not a headline. */
.manifest-join-flow fieldset + fieldset legend {
	font-size: 1.15rem;
	letter-spacing: 0;
}

/* ---------------------------------------------------------------
 * Choices
 *
 * Two markup shapes are in use and both must give one card per option:
 * a <div> holding an <input> and a sibling <label>, or a <label>
 * wrapping its own <input>. Every rule below keys on the CLASS rather
 * than the element, so either shape works — cheaper than requiring
 * twelve templates to agree.
 * --------------------------------------------------------------- */

.manifest-join-flow .manifest-join-optiongroup {
	margin-bottom: 1.5rem;
}

.manifest-join-flow .manifest-join-checkbox,
.manifest-join-flow .manifest-join-radio {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 1.05rem 1.15rem;
	margin-bottom: 0.65rem;
	font-weight: 400;
	font-size: 1.02rem;
	line-height: 1.45;
	background: var( --mf-panel );
	border: 1.5px solid var( --mf-line );
	border-radius: var( --mf-radius-sm );
	cursor: pointer;
	transition: border-color 140ms ease, background-color 140ms ease;
}

.manifest-join-flow .manifest-join-checkbox:hover,
.manifest-join-flow .manifest-join-radio:hover {
	border-color: #c3d6e3;
	background: var( --mf-accent-tint );
}

/* The chosen option. :has() where available; where not, the restyled
   control still shows the state unmistakably, so this is emphasis and
   never the only signal. */
.manifest-join-flow .manifest-join-checkbox:has( input:checked ),
.manifest-join-flow .manifest-join-radio:has( input:checked ) {
	border-color: var( --mf-accent );
	background: var( --mf-accent-tint );
}

.manifest-join-flow .manifest-join-checkbox:focus-within,
.manifest-join-flow .manifest-join-radio:focus-within {
	border-color: var( --mf-accent );
	box-shadow: 0 0 0 4px rgba( 60, 146, 195, 0.18 );
}

/* The control itself: restyled, not replaced. */
.manifest-join-flow .manifest-join-checkbox input[type="checkbox"],
.manifest-join-flow .manifest-join-checkbox input[type="radio"],
.manifest-join-flow .manifest-join-radio input[type="checkbox"],
.manifest-join-flow .manifest-join-radio input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 1.4rem;
	height: 1.4rem;
	margin: 0;
	background-color: #fff;
	border: 1.5px solid #c6cdd2;
	cursor: pointer;
	transition: border-color 140ms ease, background-color 140ms ease, border-width 120ms ease;
}

.manifest-join-flow .manifest-join-checkbox input[type="radio"],
.manifest-join-flow .manifest-join-radio input[type="radio"] {
	border-radius: 50%;
}

.manifest-join-flow .manifest-join-checkbox input[type="checkbox"],
.manifest-join-flow .manifest-join-radio input[type="checkbox"] {
	border-radius: 6px;
}

/* A thick ring reads as "chosen" instantly, with no extra markup. */
.manifest-join-flow input[type="radio"]:checked {
	border-color: var( --mf-accent );
	border-width: 0.45rem;
}

.manifest-join-flow input[type="checkbox"]:checked {
	background-color: var( --mf-accent );
	border-color: var( --mf-accent );
	/* Inline tick: no request, nothing to 404, no icon font. */
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5'/%3E%3C/svg%3E" );
	background-size: 0.95rem;
	background-position: center;
	background-repeat: no-repeat;
}

/* A label inside a div-shaped option carries no weight of its own. */
.manifest-join-flow .manifest-join-checkbox label,
.manifest-join-flow .manifest-join-radio label {
	display: block;
	margin: 0;
	flex: 1 1 auto;
	font-weight: 400;
	font-size: inherit;
	cursor: pointer;
}

/* ---------------------------------------------------------------
 * Text fields
 * --------------------------------------------------------------- */

.manifest-join-flow label {
	display: block;
	margin: 0 0 0.4rem;
	font-weight: 600;
	font-size: 0.9rem;
	color: var( --mf-ink );
}

.manifest-join-flow input[type="text"],
.manifest-join-flow input[type="email"],
.manifest-join-flow input[type="tel"],
.manifest-join-flow input[type="number"],
.manifest-join-flow select,
.manifest-join-flow textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 1.35rem;
	padding: 0.95rem 1.1rem;
	font-family: inherit;
	/* 1rem is the floor: below 16px, iOS Safari zooms the viewport on
	   focus, which mid-flow is genuinely disorienting. */
	font-size: 1.02rem;
	line-height: 1.5;
	color: var( --mf-ink );
	background: var( --mf-field );
	border: 1.5px solid var( --mf-line );
	border-radius: var( --mf-radius-sm );
	transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.manifest-join-flow input::placeholder,
.manifest-join-flow textarea::placeholder {
	color: #a7afb4;
}

.manifest-join-flow textarea {
	min-height: 7.5rem;
	resize: vertical;
}

.manifest-join-flow input[type="text"]:hover,
.manifest-join-flow input[type="email"]:hover,
.manifest-join-flow input[type="tel"]:hover,
.manifest-join-flow select:hover,
.manifest-join-flow textarea:hover {
	border-color: #c9d1d6;
}

.manifest-join-flow input[type="text"]:focus,
.manifest-join-flow input[type="email"]:focus,
.manifest-join-flow input[type="tel"]:focus,
.manifest-join-flow input[type="number"]:focus,
.manifest-join-flow select:focus,
.manifest-join-flow textarea:focus {
	outline: 0;
	background: #fff;
	border-color: var( --mf-accent );
	box-shadow: 0 0 0 4px rgba( 60, 146, 195, 0.16 );
}

/* ---------------------------------------------------------------
 * Errors — help, not a telling-off. Only three things can block a
 * submission at all (brief §5), so these are rare by design.
 * --------------------------------------------------------------- */

.manifest-join-flow .manifest-join-error {
	margin: 0 0 0.85rem;
	padding: 0.75rem 1rem;
	font-size: 0.95rem;
	color: var( --mf-error );
	background: var( --mf-error-tint );
	border: 1px solid #eccfd0;
	border-radius: var( --mf-radius-sm );
}

/* ---------------------------------------------------------------
 * Actions
 * --------------------------------------------------------------- */

.manifest-join-flow .manifest-join-actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	margin: 2.25rem 0 0;
	padding-top: 1.75rem;
	border-top: 1px solid var( --mf-line );
}

/*
 * PHASE-6D-BRIEF.md (B2): the view no longer ever adds Divi's .et_pb_button
 * class to this button — Manifest owns its appearance outright, on every
 * theme, so there is exactly one styling system in play here and nothing
 * for it to collide with.
 */
.manifest-join-flow button[type="submit"],
.manifest-join-flow .manifest-join-submit {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.9rem 1.9rem;
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	background: var( --mf-accent );
	border: 0;
	border-radius: var( --mf-radius-sm );
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba( 20, 30, 40, 0.08 ), 0 6px 16px -6px rgba( 60, 146, 195, 0.5 );
	transition: background-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

/* Gives the primary action a direction. Decorative, so it is generated
   content rather than markup a screen reader would read out. */
.manifest-join-flow button[type="submit"]::after {
	content: "\2192";
	font-size: 1.05em;
	line-height: 1;
}

.manifest-join-flow button[type="submit"]:hover {
	background: var( --mf-accent-dark );
	transform: translateY( -1px );
	box-shadow: 0 2px 4px rgba( 20, 30, 40, 0.1 ), 0 10px 22px -8px rgba( 60, 146, 195, 0.55 );
}

.manifest-join-flow button[type="submit"]:active {
	transform: translateY( 0 );
}

.manifest-join-flow button[type="submit"]:focus-visible {
	outline: 3px solid rgba( 60, 146, 195, 0.4 );
	outline-offset: 2px;
}

/* Back: quiet and obviously secondary, but a real link, so it works
   with JavaScript disabled. */
.manifest-join-flow a.manifest-join-back,
.manifest-join-flow .manifest-join-back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0;
	font-size: 0.95rem;
	font-weight: 500;
	color: var( --mf-muted );
	background: none;
	border: 0;
	border-bottom: 1px solid transparent;
	border-radius: 0;
	box-shadow: none;
	text-decoration: none;
	transition: color 140ms ease, border-color 140ms ease;
}

.manifest-join-flow .manifest-join-back::before {
	content: "\2190";
}

.manifest-join-flow a.manifest-join-back:hover,
.manifest-join-flow a.manifest-join-back:focus {
	color: var( --mf-accent );
	border-bottom-color: currentColor;
}

.manifest-join-flow .manifest-join-privacy-notice {
	margin: 1.5rem 0 0;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var( --mf-muted );
}

/* ---------------------------------------------------------------
 * Highlighted content
 * --------------------------------------------------------------- */

/* The rate: the one number the applicant came to find out. */
.manifest-join-flow .manifest-join-rate {
	margin: 0 0 1.5rem;
	padding: 1.35rem 1.5rem;
	font-size: 1.05rem;
	background: var( --mf-accent-tint );
	border: 1px solid #d6e6f1;
	border-left: 4px solid var( --mf-warm );
	border-radius: var( --mf-radius-sm );
}

.manifest-join-flow .manifest-join-rate strong {
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.2;
	color: var( --mf-accent-dark );
	white-space: nowrap; /* or the figure gets orphaned mid-sentence */
}

/* The Gift Aid declaration is a legal statement to HMRC, so it is set as
   readable prose rather than squeezed into small print. */
.manifest-join-flow .manifest-join-giftaid-wording {
	margin: 0 0 1.5rem;
	padding: 1.25rem 1.4rem;
	font-size: 0.92rem;
	line-height: 1.7;
	color: #4a5257;
	background: #fafbfb;
	border: 1px solid var( --mf-line );
	border-radius: var( --mf-radius-sm );
}

/*
 * The honeypot is NOT styled here. Manifest_Formguard renders it with
 * its own inline style, deliberately: it must sit off-screen even on a
 * page where this stylesheet failed to load, or a visitor would see a
 * stray "website" field, fill it in helpfully, and have their
 * application silently rejected. A defence that breaks open when CSS is
 * missing is worse than no defence at all.
 */

/* ---------------------------------------------------------------
 * Motion — one entrance, so a new step reads as a new question rather
 * than a repainted page. Page-load only, so no JavaScript.
 * --------------------------------------------------------------- */

@keyframes manifest-join-step-in {
	from {
		opacity: 0;
		transform: translateY( 8px );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.manifest-join-flow .manifest-join-flow-inner {
	animation: manifest-join-step-in 320ms cubic-bezier( 0.4, 0, 0.2, 1 ) both;
}

@media ( max-width: 600px ) {
	.manifest-join-flow {
		border-radius: 10px;
	}

	.manifest-join-flow .manifest-join-flow-inner {
		padding: 1.6rem 1.25rem;
	}

	.manifest-join-flow .manifest-join-actions {
		/* Primary action nearest the thumb. */
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 0.9rem;
	}

	.manifest-join-flow button[type="submit"] {
		justify-content: center;
		width: 100%;
		padding: 1rem 1.5rem;
	}

	.manifest-join-flow .manifest-join-back {
		justify-content: center;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.manifest-join-flow *,
	.manifest-join-flow .manifest-join-flow-inner {
		animation: none !important;
		transition: none !important;
	}
}