/**
 * The questionnaire page.
 *
 * Forminator ships its own stylesheet and this does not fight it. What is here
 * is the campaign's typography and spacing applied to the parts Forminator
 * leaves neutral, plus the few things a 20-question form on a phone genuinely
 * needs: legible answer targets, a step heading that reads as a heading, and
 * an error note that is not a colour on its own.
 */

.eu1144-q {
	max-width: 44rem;
	margin-inline: auto;
	font-family: var( --wp--preset--font-family--text, Figtree, Helvetica, Arial, sans-serif );
}

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

.eu1144-q-intro {
	margin-bottom: 2rem;
}

.eu1144-q-intro__lead {
	margin: 0 0 1rem;
	font-size: clamp( 1.05rem, 1rem + 0.3vw, 1.15rem );
	line-height: 1.55;
	color: var( --wp--preset--color--ink, #333133 );
}

.eu1144-q-intro__rules {
	margin: 0;
	padding: 1rem 1.25rem 1rem 2.25rem;
	background: var( --wp--preset--color--stone, #e8e1d8 );
	border-left: 3px solid var( --wp--preset--color--accent, #f27121 );
	font-size: 0.95rem;
	line-height: 1.5;
}

.eu1144-q-intro__rules li + li {
	margin-top: 0.35rem;
}

/* ------------------------------------------------------------------ steps -- */

.eu1144-q-step-head {
	margin: 0 0 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var( --wp--preset--color--stone, #e8e1d8 );
}

.eu1144-q-step-count {
	margin: 0 0 0.25rem;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.72;
}

.eu1144-q-step-title {
	margin: 0;
	font-family: var( --wp--preset--font-family--display, Fraunces, Georgia, serif );
	font-size: clamp( 1.3rem, 1.1rem + 1vw, 1.65rem );
	line-height: 1.15;
	color: var( --wp--preset--color--dark, #1e1b19 );
}

/* --------------------------------------------------------------- answers -- */

/*
 * A comfortable target on a phone. Forminator's default label is a tight line
 * of text; with 20 questions and up to eight options each, a 24px tap target
 * is the difference between a survey somebody finishes and one they abandon.
 *
 * ---------------------------------------------------------------------------
 * pointer-events MUST BE RESTORED, AND THIS IS NOT A COSMETIC DETAIL
 * ---------------------------------------------------------------------------
 *
 * Forminator's default design sets
 *
 *   .forminator-ui.forminator-custom-form[data-design="default"] .forminator-radio
 *     { pointer-events: none; }
 *
 * and re-enables pointing only on the small bullet and text INSIDE the label.
 * That is survivable with Forminator's own tight layout, where the label is
 * barely larger than its text.
 *
 * It is not survivable with the rule below. Growing the label to a 44px row
 * without restoring pointer-events produces a control that LOOKS like a 44px
 * target and ACTUALLY accepts clicks only on the few pixels of the word — a
 * target that fails WCAG 2.2 target size precisely because it was enlarged,
 * and one that no screenshot can show. Every empty pixel of the row silently
 * did nothing.
 *
 * Restoring it here makes the whole visible row clickable, which is what the
 * row's appearance promises. Scoped to .eu1144-q so no other Forminator form
 * on this site is affected.
 *
 * THE SELECTOR REPEATS FORMINATOR'S OWN AND IS NOT REDUNDANT. Its rule scores
 * three classes plus an attribute; a plain `.eu1144-q .forminator-radio` scores
 * two classes and LOSES, silently, leaving pointer-events at none however
 * emphatically this file sets it. Prefixing .eu1144-q to Forminator's exact
 * selector both wins the cascade and keeps the rule scoped to this form.
 */
.eu1144-q .forminator-ui.forminator-custom-form[data-design="default"] .forminator-checkbox,
.eu1144-q .forminator-ui.forminator-custom-form[data-design="default"] .forminator-radio,
.eu1144-q .forminator-checkbox,
.eu1144-q .forminator-radio {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	min-height: 2.75rem;
	padding: 0.35rem 0;
	line-height: 1.45;
	pointer-events: auto;
	cursor: pointer;
}

.eu1144-q .forminator-checkbox:focus-within,
.eu1144-q .forminator-radio:focus-within {
	outline: 3px solid var( --wp--preset--color--dark, #1e1b19 );
	outline-offset: 2px;
}

/* ------------------------------------------------- navigation buttons -- */

/*
 * ---------------------------------------------------------------------------
 * THE STEP CONTROLS: Back, Next, and the final Submit
 * ---------------------------------------------------------------------------
 *
 * Forminator ships these three buttons almost unstyled. Its base sheet sets
 * only `min-height: unset; height: auto; padding: 10px; display: inline-block`,
 * and the generated per-form sheet adds `font-size: 14px` and nothing else — no
 * background and no colour. Back and Next inherited something usable from the
 * theme; the SUBMIT button, which carries no shared class until the pagination
 * script promotes it on the last step, fell through to the BROWSER DEFAULT grey.
 * Combined with the empty label (see forms.php) that produced the control the
 * owner photographed: a pale 100x20 rectangle with nothing in it.
 *
 * THE SELECTORS MIRROR FORMINATOR'S OWN SHAPE ON PURPOSE. Its base rule scores
 * (0,4,0); a plain `.eu1144-q .forminator-button-submit` scores (0,2,0) and
 * loses silently, leaving `min-height: unset` in force and the button 20px tall
 * however emphatically this file sets 44. Prefixing `.eu1144-q` to Forminator's
 * exact selector wins the cascade and stays scoped to this questionnaire — no
 * other Forminator form on this site is touched. Same technique, and same
 * reason, as the pointer-events rule above.
 *
 * WHAT IS NOT DONE HERE: nothing hides the submit button, nothing is marked
 * !important, and `.forminator-hidden` is left alone — it carries its own
 * !important, so the per-step show/hide logic keeps working untouched and these
 * rules cannot reveal a button Forminator means to hide.
 */

.eu1144-q .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-back,
.eu1144-q .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-next,
.eu1144-q .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-submit {
	/*
	 * inline-flex + centring is what actually puts the label on the vertical
	 * mid-line. With Forminator's `display: inline-block` the text sits on the
	 * baseline and a taller button grows downward away from it.
	 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* WCAG 2.2 target size. Also what stops an empty button collapsing to 20px. */
	min-height: 44px;
	padding: 0.6rem 1.5rem;
	font-family: var( --wp--preset--font-family--text, Figtree, Helvetica, Arial, sans-serif );
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

/* ---- the final action: a filled campaign CTA ---- */

.eu1144-q .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-submit {
	background: var( --wp--preset--color--accent, #f27121 );
	/*
	 * #1E1B19 on #F27121 is about 6.6:1. White on the same orange is about
	 * 3.1:1 and would fail AA at this size, which is why the label is dark.
	 * Identical to the invitation CTA, so the two reads as one campaign.
	 */
	color: var( --wp--preset--color--dark, #1e1b19 );
	border: 2px solid var( --wp--preset--color--accent, #f27121 );
}

.eu1144-q .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-submit:hover {
	background: var( --wp--preset--color--dark, #1e1b19 );
	border-color: var( --wp--preset--color--dark, #1e1b19 );
	color: var( --wp--preset--color--paper, #fff );
}

/* ---- Back and Next: present, secondary, never disguised ---- */

.eu1144-q .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-back,
.eu1144-q .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-next {
	background: var( --wp--preset--color--stone, #e8e1d8 );
	color: var( --wp--preset--color--dark, #1e1b19 );
	border: 2px solid var( --wp--preset--color--stone, #e8e1d8 );
}

.eu1144-q .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-back:hover,
.eu1144-q .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-next:hover {
	border-color: var( --wp--preset--color--dark, #1e1b19 );
}

/* ---- focus ---- */

.eu1144-q .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-back:focus-visible,
.eu1144-q .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-next:focus-visible,
.eu1144-q .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-submit:focus-visible {
	outline: 3px solid var( --wp--preset--color--dark, #1e1b19 );
	outline-offset: 2px;
}

/* ---- in flight, and disabled ---- */

/*
 * Forminator adds .forminator-button-onload to the submit button for the
 * duration of the request. The label STAYS LEGIBLE while that is true: a
 * heavily faded button in the one moment the respondent is waiting to be told
 * something is the worst time to make text hard to read. It is dimmed enough to
 * read as busy, and the pointer is blocked so a second click cannot be sent.
 */
.eu1144-q .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-submit.forminator-button-onload {
	opacity: 0.8;
	pointer-events: none;
}

.eu1144-q .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-back[disabled],
.eu1144-q .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-next[disabled],
.eu1144-q .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-submit[disabled] {
	opacity: 0.65;
	cursor: not-allowed;
}

/*
 * On a phone the two controls stack and each spans the row, so neither is a
 * small target and the primary action is not squeezed by a long label.
 *
 * THE ORDER IS LEFT AS THE DOM HAS IT: Back above, Submit below. Forminator's
 * footer is `display: block`, so they stack in source order, and the primary
 * action ends up nearest the thumb. Nothing here reorders them visually — a
 * CSS-only reorder would put the tab order out of step with what is on screen,
 * which is a worse defect than the one being fixed.
 */
@media ( max-width: 30em ) {
	.eu1144-q .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-back,
	.eu1144-q .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-next,
	.eu1144-q .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-submit {
		width: 100%;
	}

	/* Stacked buttons need their own separation; the footer supplies none. */
	.eu1144-q .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-back + .forminator-button-submit,
	.eu1144-q .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-back + .forminator-button-next {
		margin-top: 0.75rem;
	}
}

/* ---------------------------------------------------------------- notices -- */

/*
 * The note carries its own word "!" marker and sits in normal text colour on a
 * tinted band, so the message does not depend on colour alone to be noticed
 * (WCAG 1.4.1). It is also announced in a live region by questionnaire.js.
 */
.eu1144-q-note {
	margin: 0.5rem 0 0;
	padding: 0.5rem 0.75rem;
	background: #fdeee2;
	border-left: 3px solid var( --wp--preset--color--accent, #f27121 );
	font-size: 0.9rem;
	line-height: 1.45;
	color: var( --wp--preset--color--dark, #1e1b19 );
}

.eu1144-q-note[hidden] {
	display: none;
}

.eu1144-q-note::before {
	content: "! ";
	font-weight: 700;
}

/*
 * Visually hidden, still announced. The standard clip pattern rather than
 * display:none, which would remove it from the accessibility tree and silence
 * the live region entirely.
 */
.eu1144-q-announce {
	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;
}

/* ---------------------------------------------------------------- privacy -- */

.eu1144-q-privacy {
	margin-top: 2.5rem;
	padding: 1.25rem 1.5rem;
	background: var( --wp--preset--color--stone, #e8e1d8 );
	font-size: 0.9rem;
	line-height: 1.55;
}

.eu1144-q-privacy__heading {
	margin: 0 0 0.5rem;
	font-family: var( --wp--preset--font-family--text, Figtree, Helvetica, Arial, sans-serif );
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.eu1144-q-privacy p {
	margin: 0 0 0.5rem;
}

.eu1144-q-privacy__link a {
	color: var( --wp--preset--color--dark, #1e1b19 );
}

/* ---------------------------------------------------------------- thanks -- */

.eu1144-q-thanks h2 {
	font-family: var( --wp--preset--font-family--display, Fraunces, Georgia, serif );
	margin-top: 0;
}

/* --------------------------------------------------------------- privacy
 * supplement, appended to the site's privacy notice by privacy.php.
 * ------------------------------------------------------------------------- */

.eu1144-q-privacy-supplement {
	margin-top: 2rem;
}