/**
 * Qualifier form styling. Pairs with assets/js/nld-quiz.js.
 *
 * Sharp corners throughout, per the house rule. Colours are the site's own: the green from the
 * primary buttons and the navy from the headings, so the form looks like part of the site rather
 * than a plugin's default skin.
 *
 * Built by NLD.
 */

/* The theme lays CF7 forms out as display:flex;flex-wrap:wrap, so a direct child with no width
   shrink-to-fits and every question ends up in a ~230px column. Claim the full row first; the rest
   of this file assumes the form is the width of its container. */
.wpcf7-form .nld-quiz,
.wpcf7-form .nld-quiz__step,
.wpcf7-form .nld-quiz .f-group {
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}

.nld-quiz {
	--q-green: #89c635;
	--q-green-deep: #6ea828;
	--q-navy: #132c52;
	--q-ink: #2c3a45;
	--q-muted: #6b7783;
	--q-line: #dfe4e8;
	--q-track: #eef1f4;
	--q-danger: #d3372b;
	font-family: inherit;
	color: var(--q-ink);
}

/* ---- progress ------------------------------------------------------------------------ */
.nld-quiz__head { margin: 0 0 22px; }
.nld-quiz__meta {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 12px; margin-bottom: 8px;
}
.nld-quiz__count {
	font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	color: var(--q-navy);
}
.nld-quiz__pct { font-size: 12.5px; color: var(--q-muted); font-variant-numeric: tabular-nums; }
.nld-quiz__track { height: 6px; background: var(--q-track); overflow: hidden; }
.nld-quiz__fill {
	height: 100%; width: 0;
	background: linear-gradient(90deg, var(--q-green-deep), var(--q-green));
	transition: width .32s cubic-bezier(.4, 0, .2, 1);
}

/* ---- steps --------------------------------------------------------------------------- */
.nld-quiz__step[hidden] { display: none; }
.nld-quiz__step { animation: nld-quiz-in .26s ease both; }
@keyframes nld-quiz-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}
.nld-quiz ._title {
	font-size: 21px; line-height: 1.28; font-weight: 700; color: var(--q-navy); margin: 0 0 4px;
}
.nld-quiz ._text { font-size: 15px; color: var(--q-muted); margin: 0 0 16px; }
.nld-quiz ._label {
	display: block; font-size: 17px; line-height: 1.35; font-weight: 700;
	color: var(--q-navy); margin: 0 0 14px; text-wrap: balance;
}
.nld-quiz ._label .required { color: var(--q-danger); font-weight: 700; }
.nld-quiz .f-group { margin: 0 0 16px; }
.nld-quiz .f-group:last-child { margin-bottom: 0; }

/* ---- choices as cards ---------------------------------------------------------------- */
/* CF7 renders each option as
     <span class="wpcf7-list-item"><input id="x"><label class="wpcf7-list-item-label" for="x">Windows</label></span>
   The input and the label are SIBLINGS, not nested, so the card is the wrapping span. Styling the
   label as the card (the obvious guess) leaves the checkbox stranded outside it. */
.nld-quiz .wpcf7-checkbox .wpcf7-list-item,
.nld-quiz .wpcf7-radio .wpcf7-list-item {
	display: flex; align-items: center; gap: 12px;
	margin: 0 0 8px; padding: 13px 15px;
	border: 1px solid var(--q-line); background: #fff;
	font-size: 15.5px; line-height: 1.3; color: var(--q-ink);
	cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
}
.nld-quiz .wpcf7-list-item:hover { border-color: var(--q-green); background: #fbfdf7; }
.nld-quiz .wpcf7-list-item:has(input:checked) {
	border-color: var(--q-green-deep); background: #f3faea;
	box-shadow: inset 3px 0 0 var(--q-green-deep);
}

/* Elsewhere the theme hides the real control and paints its own box in the label's left padding.
   In here the real control is shown, so the theme's painted version is switched off. */
.nld-quiz .wpcf7-list-item input[type="checkbox"],
.nld-quiz .wpcf7-list-item input[type="radio"] {
	flex: 0 0 auto; width: 19px; height: 19px; margin: 0 !important;
	opacity: 1 !important; position: static !important; z-index: auto !important;
	accent-color: var(--q-green-deep); cursor: pointer;
}
.nld-quiz .wpcf7-list-item .wpcf7-list-item-label {
	flex: 1 1 auto; display: block;
	margin: 0 !important; padding: 0 !important;
	border: 0 !important; background: none !important;
	font-size: inherit; line-height: inherit; color: inherit; font-weight: 400; cursor: pointer;
}
.nld-quiz .wpcf7-list-item .wpcf7-list-item-label:before,
.nld-quiz .wpcf7-list-item .wpcf7-list-item-label:after {
	content: none !important; display: none !important;
}
.nld-quiz .wpcf7-list-item input:focus-visible { outline: 2px solid var(--q-navy); outline-offset: 2px; }

/* ---- text inputs --------------------------------------------------------------------- */
.nld-quiz input[type="text"],
.nld-quiz input[type="tel"],
.nld-quiz input[type="email"],
.nld-quiz select,
.nld-quiz textarea {
	width: 100%; padding: 13px 14px; font-size: 16px; /* 16px stops iOS zooming on focus */
	border: 1px solid var(--q-line); background: #fff; color: var(--q-ink);
	transition: border-color .15s, box-shadow .15s;
}
.nld-quiz textarea { min-height: 104px; resize: vertical; }
.nld-quiz input:focus, .nld-quiz select:focus, .nld-quiz textarea:focus {
	outline: none; border-color: var(--q-green-deep); box-shadow: 0 0 0 3px rgba(137, 198, 53, .22);
}
.nld-quiz .nld-invalid { border-color: var(--q-danger) !important; }
.nld-quiz .nld-invalid:focus { box-shadow: 0 0 0 3px rgba(211, 55, 43, .18); }
.nld-quiz .nld-invalid-group label { border-color: var(--q-danger); }
.nld-quiz__step.has-error:after {
	content: "Please answer this to continue.";
	display: block; margin-top: 10px; font-size: 13.5px; color: var(--q-danger);
}

/* ---- navigation ---------------------------------------------------------------------- */
.nld-quiz__nav { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.nld-quiz__next, .nld-quiz .nld-quiz__submit {
	order: 2; margin-left: auto;
	padding: 14px 30px; border: 0; background: var(--q-green); color: #fff;
	font-size: 16px; font-weight: 700; font-family: inherit; cursor: pointer;
	transition: background .15s;
}
.nld-quiz__next:hover, .nld-quiz .nld-quiz__submit:hover { background: var(--q-green-deep); }
.nld-quiz__next:focus-visible, .nld-quiz .nld-quiz__submit:focus-visible {
	outline: 3px solid var(--q-navy); outline-offset: 2px;
}
/* The theme paints every <button> with a green gradient via background-IMAGE and appends an arrow
   glyph as ::after. Back is a quiet secondary action, so both are switched off explicitly;
   resetting background-color alone leaves the gradient in place. */
.nld-quiz .nld-quiz__back {
	order: 1; flex: 0 0 auto; width: auto;
	padding: 14px 4px; border: 0;
	background: none !important; background-image: none !important;
	background-color: transparent !important;
	color: var(--q-muted); box-shadow: none !important;
	font-size: 15px; font-weight: 400; font-family: inherit; cursor: pointer;
	text-decoration: underline; text-underline-offset: 3px;
}
.nld-quiz .nld-quiz__back:after,
.nld-quiz .nld-quiz__back:before { content: none !important; display: none !important; }
.nld-quiz .nld-quiz__back:hover { color: var(--q-navy); }
.nld-quiz__back[hidden], .nld-quiz__next[hidden], .nld-quiz .nld-quiz__submit[hidden] { display: none; }

/* The theme adds an arrow glyph to submit buttons via a wrapper; keep it out of the flow. */
.nld-quiz .wpcf7-spinner { margin-left: 10px; }

/* ---- small screens ------------------------------------------------------------------- */
@media (max-width: 560px) {
	.nld-quiz ._label { font-size: 16px; }
	.nld-quiz ._title { font-size: 19px; }
	.nld-quiz__nav { margin-top: 18px; }
	.nld-quiz__next, .nld-quiz .nld-quiz__submit { padding: 14px 22px; flex: 1 1 auto; }
	.nld-quiz .wpcf7-checkbox .wpcf7-list-item label,
	.nld-quiz .wpcf7-radio .wpcf7-list-item label { padding: 14px 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.nld-quiz__step { animation: none; }
	.nld-quiz__fill { transition: none; }
}

/* ---- final step ---------------------------------------------------------------------- */
/* This step mixes a plain CF7 checkbox with the SMS consent box, and the theme paints its own
   control for the latter (real input hidden, a box drawn as ::before in the label's padding).
   Three checkbox systems on one screen argue about alignment, so both rows are given one explicit
   two-column layout with the real control in column one. */
.nld-quiz__step[data-step="finish"] .wpcf7-list-item,
.nld-quiz .nld-sms-consent .wpcf7-list-item {
	display: grid !important;
	grid-template-columns: 19px 1fr;
	align-items: start;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}
.nld-quiz__step[data-step="finish"] .wpcf7-list-item:hover,
.nld-quiz .nld-sms-consent .wpcf7-list-item:hover { background: none; border: 0; }

.nld-quiz__step[data-step="finish"] .wpcf7-list-item > input,
.nld-quiz .nld-sms-consent .wpcf7-list-item > label > input,
.nld-quiz .nld-sms-consent .wpcf7-list-item > input {
	grid-column: 1; grid-row: 1;
	width: 19px; height: 19px; margin: 2px 0 0 !important;
	opacity: 1 !important; position: static !important; z-index: auto !important;
	accent-color: var(--q-green-deep);
}
.nld-quiz__step[data-step="finish"] .wpcf7-list-item > label,
.nld-quiz__step[data-step="finish"] .wpcf7-list-item .wpcf7-list-item-label,
.nld-quiz .nld-sms-consent .wpcf7-list-item .wpcf7-list-item-label {
	grid-column: 2; grid-row: 1;
	display: block; margin: 0 !important; padding: 0 !important;
	border: 0 !important; background: none !important;
}
/* The theme's painted box would otherwise sit on top of the real one. */
.nld-quiz__step[data-step="finish"] .wpcf7-list-item-label:before,
.nld-quiz__step[data-step="finish"] .wpcf7-list-item-label:after,
.nld-quiz .nld-sms-consent .wpcf7-list-item-label:before,
.nld-quiz .nld-sms-consent .wpcf7-list-item-label:after { content: none !important; display: none !important; }

/* The consent wording is fine print, not a question. */
.nld-quiz .nld-sms-consent { margin-top: 14px; }
.nld-quiz .nld-sms-consent .wpcf7-list-item-label {
	font-size: 12.5px; line-height: 1.5; color: var(--q-muted);
}
.nld-quiz .nld-sms-consent a { color: #1b4f8a; text-decoration: underline; }

/* Keep the optional extra clear of the email field above it. */
.nld-quiz__step[data-step="finish"] .wpcf7-form-control-wrap + .f-group,
.nld-quiz__step[data-step="finish"] .f-group { margin-top: 16px; }

/* The consent box nests differently to the other checkboxes: CF7's [acceptance] wraps the input
   AND the text inside a single <label>, so the label is the row, not the item span. */
.nld-quiz .nld-sms-consent .wpcf7-list-item > label {
	display: grid; grid-template-columns: 19px 1fr; gap: 12px; align-items: start;
	margin: 0; padding: 0;
}
.nld-quiz .nld-sms-consent .wpcf7-list-item > label > input[type="checkbox"] {
	grid-column: 1; grid-row: 1; margin: 2px 0 0 !important;
}
.nld-quiz .nld-sms-consent .wpcf7-list-item > label > .wpcf7-list-item-label {
	grid-column: 2; grid-row: 1;
}

/* The consent row's only grid child is the <label>, which holds BOTH the input and the wording, so
   gridding the item achieves nothing. The label itself has to be the row. The extra
   .wpcf7-acceptance in the selector is deliberate: nld-responsive-fixes.css styles this control
   through a five-class selector, and anything shorter loses to it. */
.nld-quiz .nld-sms-consent .wpcf7-acceptance .wpcf7-list-item {
	display: block !important;
}
.nld-quiz .nld-sms-consent .wpcf7-acceptance .wpcf7-list-item > label {
	display: grid !important;
	grid-template-columns: 19px 1fr;
	gap: 12px;
	align-items: start;
	margin: 0;
	padding: 0;
}
.nld-quiz .nld-sms-consent .wpcf7-acceptance .wpcf7-list-item > label > input[type="checkbox"] {
	grid-column: 1; grid-row: 1; margin: 2px 0 0 !important;
}
.nld-quiz .nld-sms-consent .wpcf7-acceptance .wpcf7-list-item > label > .wpcf7-list-item-label {
	grid-column: 2; grid-row: 1; display: block !important;
}