/*
 * AVOLIO questionnaire — the page, and the parts of Forminator's default
 * appearance that do not belong on this site.
 *
 * FORMINATOR SHIPS A DESIGN. It is competent and it is not Avolio's: rounded
 * cards, its own blues, its own type stack. Rather than switch the form to
 * Forminator's "none" design and inherit nothing, the form keeps its default
 * markup and this file re-registers the small number of surfaces that actually
 * show — type, colour, rule weight, focus ring, step indicator — in the
 * campaign's own tokens. That way a Forminator update changes behaviour and not
 * appearance.
 *
 * Every custom property has the theme's current value as its fallback, so a
 * renamed token degrades to the intended look rather than to an unstyled form.
 */

.eu-q {
	--eu-q-ink: var( --av-ink, #17211A );
	--eu-q-brand: var( --av-ink-brand, #004610 );
	--eu-q-page: var( --av-page, #F4F2EC );
	--eu-q-stone: var( --av-stone, #E4E5D8 );
	--eu-q-lime: #A2C63F;
	--eu-q-hair: var( --eu-hair, rgba( 23, 33, 26, 0.18 ) );

	box-sizing: border-box;
	max-width: 44rem;
	margin-inline: auto;
	padding-inline: var( --eu-gutter, 1.25rem );
	padding-block-end: clamp( 3rem, 8vw, 6rem );
	color: var( --eu-q-ink );
}

.eu-q *,
.eu-q *::before,
.eu-q *::after {
	box-sizing: border-box;
}

/* --------------------------------------------------- the private banner --- */

.eu-q__mode {
	margin: 0 0 2rem;
	padding: 0.85rem 1.1rem;
	background: var( --eu-q-stone );
	border-inline-start: 4px solid var( --eu-q-lime );
	font-size: 0.9rem;
	line-height: 1.5;
}

/* ------------------------------------------------------------- the intro --- */

.eu-q__intro {
	margin-block-end: 2.5rem;
}

.eu-q__lead {
	margin: 0 0 1rem;
	font-size: clamp( 1.05rem, 2.2vw, 1.2rem );
	line-height: 1.55;
}

.eu-q__note {
	margin: 0 0 0.9rem;
	font-size: 0.92rem;
	line-height: 1.6;
	opacity: 0.85;
}

/* ------------------------------------------------------ the privacy card --- */

.eu-q__privacy {
	margin-block-end: 2.5rem;
	padding: 1.25rem 1.4rem;
	background: var( --eu-q-stone );
}

.eu-q__privacy-title {
	margin: 0 0 0.6rem;
	font-family: var( --wp--preset--font-family--display, inherit );
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.eu-q__privacy p {
	margin: 0 0 0.75rem;
	font-size: 0.92rem;
	line-height: 1.6;
}

.eu-q__privacy p:last-child {
	margin-bottom: 0;
}

.eu-q__privacy-link {
	color: var( --eu-q-brand );
	text-underline-offset: 0.2em;
}

/* ----------------------------------------------- Forminator, re-dressed --- */

.eu-q .forminator-ui.forminator-custom-form,
.eu-q .forminator-ui.forminator-custom-form * {
	font-family: inherit;
}

.eu-q .forminator-field {
	margin-block-end: 2rem;
}

/*
 * A question is a fieldset legend, not a paragraph in bold. Forminator emits
 * the right elements; this only makes the legend read as the question it is.
 */
/*
 * Size, weight, family and colour of a question label all come from the form's
 * own design settings (cform-label-*), because the generated stylesheet sets
 * them at a specificity this file cannot reach. Only the box is set here.
 */
.eu-q .forminator-ui .forminator-label,
.eu-q .forminator-ui legend.forminator-label {
	display: block;
	margin-block-end: 0.85rem;
	line-height: 1.35;
	text-wrap: pretty;
}

.eu-q .forminator-ui .forminator-description {
	margin-block-end: 0.85rem;
	color: var( --eu-q-ink );
	font-size: 0.88rem;
	line-height: 1.5;
	opacity: 0.8;
}

/*
 * THE HIT TARGET IS THE WHOLE ROW, not the 16px box. On a phone, a radio list
 * whose only target is the control itself is the single most common reason a
 * questionnaire is abandoned halfway.
 */
.eu-q .forminator-ui .forminator-radio,
.eu-q .forminator-ui .forminator-checkbox {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	min-height: 2.75rem;
	margin: 0;
	padding: 0.5rem 0.6rem;
	border-bottom: 1px solid var( --eu-q-hair );
	color: var( --eu-q-ink );
	font-size: 1rem;
	line-height: 1.45;
	cursor: pointer;
}

.eu-q .forminator-ui .forminator-radio:hover,
.eu-q .forminator-ui .forminator-checkbox:hover {
	background: var( --eu-q-stone );
}

.eu-q .forminator-ui .forminator-radio:last-of-type,
.eu-q .forminator-ui .forminator-checkbox:last-of-type {
	border-bottom: 0;
}

/* A control the reader may not use must look unusable. */
.eu-q .forminator-ui input[ type="checkbox" ]:disabled + span,
.eu-q .forminator-ui .forminator-checkbox:has( input:disabled ) {
	opacity: 0.45;
	cursor: not-allowed;
}

.eu-q .forminator-ui input[ type="radio" ],
.eu-q .forminator-ui input[ type="checkbox" ] {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin-block-start: 0.15rem;
	accent-color: var( --eu-q-brand );
}

.eu-q .forminator-ui :focus-visible {
	outline: 3px solid var( --eu-q-brand );
	outline-offset: 2px;
}

/*
 * THE BUTTONS NEED THEIR OWN FOCUS RULE, AND A TWO-TONE RING.
 *
 * Forminator removes the outline from every button with
 *
 *   .forminator-ui.forminator-custom-form[data-design="default"][data-color-option="default"]
 *       .forminator-button { outline: 0 }
 *
 * — five class-level components. The general rule above is three, so it matched
 * the Next button, lost, and left the primary navigation control of a five-step
 * form with NO VISIBLE FOCUS INDICATOR for keyboard users in all four
 * languages. Measured 2026-09-14: the button matched `:focus-visible` after a
 * real Tab and computed `outline: 0px none`. WCAG 2.4.7.
 *
 * WHY THE RING IS TWO-TONE. The ring has two neighbours — the button fill and
 * the page ground — and WCAG 2.4.11 wants contrast against both:
 *   ink #17211A on page  #F4F2EC = 15.2:1
 *   ink #17211A on brand #004610 =  1.5:1   <- a single ink ring fails here
 * So a 2px white halo sits between the fill and the ink ring:
 *   paper #FFFFFF on brand #004610 = 11.2:1
 *   ink   #17211A on paper #FFFFFF = 16.9:1
 * Both edges clear 3:1 whatever the button's own colour is.
 */
.eu-q .forminator-ui.forminator-custom-form[ data-design="default" ][ data-color-option="default" ] .forminator-button:focus-visible,
.eu-q .forminator-ui.forminator-custom-form[ data-design="default" ] .forminator-button:focus-visible {
	outline: 3px solid var( --eu-q-ink );
	outline-offset: 4px;
	box-shadow: 0 0 0 2px #FFFFFF;
}

/* --------------------------------------------------- steps and controls --- */

.eu-q .forminator-pagination-steps,
.eu-q .forminator-break {
	margin-block-end: 2rem;
}

/*
 * Colour and type come from the form's design settings; shape and TARGET SIZE
 * come from here.
 *
 * THE SELECTOR CARRIES `[data-design="default"]` FOR A REASON. Forminator's own
 * base rule is
 *
 *   .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button
 *       { min-height: unset; height: auto; padding: 10px }
 *
 * which is four class-level components. An earlier version of this rule was
 * `.eu-q .forminator-ui .forminator-button` — three — so the `min-height: 44px`
 * added here on 2026-09-14 matched the element, lost the cascade, and never
 * applied: the buttons stayed 40px with 10px padding. Nothing looked wrong, and
 * the implementation report claimed 44px on the strength of the rule existing
 * rather than of a re-measurement. Matching their specificity and adding one
 * component wins it without `!important` and without touching a vendor file.
 *
 * 44x44 is the WCAG 2.2 AAA target size. A five-step form's Next button on a
 * phone is exactly the control that should clear the higher bar.
 */
.eu-q .forminator-ui.forminator-custom-form[ data-design="default" ] .forminator-button {
	min-height: 44px;
	padding: 0.7em 1.6em;
	border-radius: 0;
	cursor: pointer;
}

.eu-q .forminator-pagination-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	justify-content: space-between;
	padding-block-start: 1.5rem;
	border-top: 1px solid var( --eu-q-hair );
}

/* The live region that announces the three-choice limit. */
.eu-q__limit:empty {
	display: none;
}

.eu-q__limit {
	margin: 0.6rem 0 0;
	padding: 0.5rem 0.7rem;
	background: var( --eu-q-stone );
	font-size: 0.88rem;
	font-weight: 600;
}

/* ------------------------------------------------- errors and successes --- */

.eu-q .forminator-error-message,
.eu-q .forminator-response-message.forminator-error {
	padding: 0.7rem 0.9rem;
	background: #FBE9E7;
	border-inline-start: 4px solid #8C1D18;
	color: #5F1511;
	font-size: 0.92rem;
}

.eu-q .forminator-response-message.forminator-success {
	padding: 1rem 1.2rem;
	background: var( --eu-q-stone );
	border-inline-start: 4px solid var( --eu-q-brand );
	font-size: 1rem;
}

/* ------------------------------------------------ the EU compliance band --- */

.eu-q__compliance {
	margin-block-start: 3rem;
	padding-block-start: 1.5rem;
	border-top: 1px solid var( --eu-q-hair );
}

.eu-q__statement {
	margin: 0 0 0.75rem;
	font-size: 0.92rem;
	line-height: 1.55;
	font-weight: 600;
}

.eu-q__disclaimer {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.55;
	opacity: 0.9;
}

/* A missing mandatory string is LOUD, never silent. */
.eu-q__compliance-missing,
.eu-q__missing {
	margin-block-start: 2rem;
	padding: 0.9rem 1.1rem;
	background: #FBE9E7;
	border-inline-start: 4px solid #8C1D18;
	color: #5F1511;
	font-weight: 600;
}

@media ( prefers-reduced-motion: reduce ) {
	.eu-q * {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* ------------------------- the step indicator: layout only, colour elsewhere --- */

/*
 * THE COLOURS OF THIS COMPONENT ARE NOT SET HERE, AND THAT IS DELIBERATE.
 *
 * Forminator generates a per-form stylesheet whose selectors carry an ID
 * (`.forminator-ui#forminator-module-188...`). A plugin stylesheet cannot beat
 * that without an `!important` arms race, and the first version of this file
 * tried: the rules matched, lost the cascade, and the step rail stayed
 * Forminator's blue while the CSS looked correct. The palette is supplied
 * through Forminator's own design settings instead — see
 * eu1144_avolio_q_palette() in scripts/setup-avolio-questionnaire.php — so the
 * generated stylesheet is right rather than overridden.
 *
 * What is left here is geometry and type, which the generated sheet does not set.
 */

.eu-q .forminator-pagination-steps {
	margin-block-end: 2.5rem;
}

.eu-q .forminator-step .forminator-step-label {
	letter-spacing: 0.04em;
	line-height: 1.3;
}

/*
 * The section heading is a SUB-heading of the route's h1. Forminator renders it
 * as `h2.forminator-title` at 45px, within 4px of this route's own h1 — a
 * second heading competing with the first. Size and family are set here because
 * the generated stylesheet does not set them; the COLOUR comes from
 * `cform-title-color`.
 */
.eu-q .forminator-ui h2.forminator-title,
.eu-q .forminator-ui .forminator-title {
	margin: 0 0 0.4rem;
	line-height: 1.2;
	letter-spacing: 0.005em;
}

.eu-q .forminator-ui .forminator-subtitle,
.eu-q .forminator-ui .forminator-section-subtitle {
	margin: 0 0 1.75rem;
	line-height: 1.6;
}

/* A section opens a group: rule it off from the questions that follow. */
.eu-q .forminator-ui .forminator-field-section {
	margin-block-start: 0;
	padding-block-end: 0.5rem;
	border-bottom: 1px solid var( --eu-q-hair );
}