/**
 * Loan prequalifier.
 *
 * Colours and type follow the existing site: green #619f43 for primary actions,
 * orange #f79564 for the answer tiles, Roboto Condensed for copy, and the same
 * white-tile-with-orange-border treatment the Gravity Forms version used.
 */

.pf-prequal {
	margin: 0 0 30px;
}

.pf-prequal [hidden] {
	display: none !important;
}

/* Progressive enhancement -------------------------------------------------- */

.pf-prequal:not(.pf-prequal--ready) .pf-prequal__shell {
	display: none;
}

.pf-prequal--ready .pf-prequal__fallback {
	display: none;
}

.pf-prequal__fallback-lead {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 17px;
	line-height: 28px;
	color: #231f20;
}

.pf-prequal__fallback-referral {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid #e2e2e2;
}

/* Progress ---------------------------------------------------------------- */

.pf-prequal__progress {
	list-style: none;
	margin: 0 0 22px;
	padding: 0 0 20px;
	border-bottom: 1px solid #e2e2e2;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pf-prequal__dot {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: #e8e8e8;
	color: #9a9a9a;
	border: 2px solid transparent;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 15px;
	line-height: 30px;
	text-align: center;
	box-sizing: border-box;
	transition: background-color 150ms linear, color 150ms linear, border-color 150ms linear;
}

.pf-prequal__dot--current {
	background-color: #ffffff;
	border-color: #619f43;
	color: #619f43;
	font-weight: 700;
}

.pf-prequal__dot--done {
	background-color: #619f43;
	border-color: #619f43;
	color: #ffffff;
}

/* Replace the number with a tick once the question is answered. */
.pf-prequal__dot--done span {
	display: none;
}

.pf-prequal__dot--done::after {
	content: '\2713';
	font-size: 17px;
}

.pf-prequal__status {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #6d6d6d;
	margin: 0 0 18px;
	min-height: 20px;
}

/* On an outcome there is no "question 3 of 8" worth showing, but the change
   still needs announcing, so the text stays in the live region unseen. */
.pf-prequal__status--quiet {
	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;
}

/* Steps ------------------------------------------------------------------- */

.pf-prequal__group {
	border: 0;
	margin: 0 0 20px;
	padding: 0;
}

.pf-prequal__question {
	display: block;
	float: none;
	width: auto;
	padding: 0;
	margin: 0 0 16px;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
	color: #231f20;
}

.pf-prequal__question:focus {
	outline: none;
}

.pf-prequal__question:focus-visible {
	outline: 3px solid #4ec0e0;
	outline-offset: 4px;
}

/* Answer tiles ------------------------------------------------------------ */

.pf-prequal__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 18px;
}

.pf-prequal__choice {
	display: inline-block;
}

/* Visually hidden but still reachable by keyboard - the Gravity Forms version
   used display:none here, which removed the answers from the tab order. */
.pf-prequal__radio {
	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;
}

.pf-prequal__tile {
	display: inline-block;
	min-width: 100px;
	padding: 10px;
	box-sizing: border-box;
	background-color: #ffffff;
	color: #333333;
	border: 2px solid #f79564;
	border-radius: 5px;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 17px;
	line-height: 24px;
	text-align: center;
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.pf-prequal__tile:hover {
	background-color: #f7d1a1;
}

.pf-prequal__radio:checked + .pf-prequal__tile {
	background-color: #f79564;
	border-color: #f79564;
	color: #ffffff;
}

.pf-prequal__radio:focus-visible + .pf-prequal__tile {
	outline: 3px solid #4ec0e0;
	outline-offset: 3px;
}

/* While a step is sliding in, its tiles ignore pointer input. This is what
   stops a second click landing on the next question's answer. */
.pf-prequal__step--locked .pf-prequal__choices {
	pointer-events: none;
}

/* Help text --------------------------------------------------------------- */

.pf-prequal__help {
	max-width: 70ch;
}

#generic-page .entry-content .pf-prequal__help p,
.pf-prequal__help p {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 14px;
	line-height: 22px;
	color: #231f20;
	margin-bottom: 0;
}

/* Outcomes ---------------------------------------------------------------- */

.pf-prequal__step--outcome:focus,
.pf-prequal__step--approved:focus {
	outline: none;
}

.pf-prequal__step--outcome:focus-visible,
.pf-prequal__step--approved:focus-visible {
	outline: 3px solid #4ec0e0;
	outline-offset: 6px;
}

.pf-prequal__cta {
	margin: 18px 0 0;
}

/* Buttons ---------------------------------------------------------------- */

.pf-prequal__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 24px;
	margin-top: 22px;
}

.pf-prequal__next,
.pf-prequal__button {
	display: inline-block;
	background: #619f43;
	padding: 10px 30px;
	color: #ffffff;
	border: none;
	border-radius: 0;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 17px;
	line-height: 24px;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 150ms linear;
}

.pf-prequal__next:hover,
.pf-prequal__button:hover {
	background: #4e8036;
	color: #ffffff;
}

/* The theme sets `.entry-content a { color: #f79564 }`, which outranks a single
   class, so anchor buttons need the extra weight to keep their white label. */
.pf-prequal a.pf-prequal__button,
.pf-prequal a.pf-prequal__button:visited,
.pf-prequal a.pf-prequal__button:hover,
.pf-prequal a.pf-prequal__button:focus {
	color: #ffffff;
	text-decoration: none;
}

.pf-prequal__next[disabled] {
	background: #c4d6ba;
	cursor: default;
}

/* Next only appears when it is actually needed, so the nav row must not leave a
   gap behind on the steps where nothing is showing. */
.pf-prequal__nav:not(:has(> *:not([hidden]))) {
	margin-top: 0;
}

/* The Gravity Forms version styled Previous as plain text with no border. Kept,
   with an underline on hover so it reads as something you can click.
   No side padding, so the text sits flush with the question and answer tiles
   above it - the nav's column gap handles the spacing between links instead. */
.pf-prequal__back,
.pf-prequal__restart {
	background: none;
	padding: 10px 0;
	color: #231f20;
	border: none;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 17px;
	line-height: 24px;
	cursor: pointer;
	text-decoration: none;
}

.pf-prequal__back:hover,
.pf-prequal__restart:hover {
	color: #f79564;
	text-decoration: underline;
}

.pf-prequal__next:focus-visible,
.pf-prequal__back:focus-visible,
.pf-prequal__restart:focus-visible,
.pf-prequal__button:focus-visible {
	outline: 3px solid #4ec0e0;
	outline-offset: 3px;
}

/* Mobile ----------------------------------------------------------------- */

@media only screen and (max-width: 767px) {

	.pf-prequal__question {
		font-size: 20px;
		line-height: 27px;
	}

	.pf-prequal__tile {
		min-width: 84px;
	}

	.pf-prequal__dot {
		width: 28px;
		height: 28px;
		font-size: 13px;
		line-height: 24px;
	}

	.pf-prequal__nav {
		margin-top: 18px;
	}

	.pf-prequal__next,
	.pf-prequal__button {
		padding: 12px 26px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.pf-prequal__tile,
	.pf-prequal__dot,
	.pf-prequal__next,
	.pf-prequal__button {
		transition: none;
	}
}