/**
 * HOME — page stylesheet. Loads only on the front page.
 * Enqueued automatically by inc/afd-page-assets.php (key "home"), deferred
 * after the parent theme, versioned by filemtime. No PHP was edited to add it.
 *
 * Scope: the multi-step lead quiz that wraps Contact Form 7 form #6
 * ([contact-form-7 id="a1fc229"]), the only CF7 form on this route
 * (verified: wp_search for "a1fc229" returns page 8401 and nothing else).
 *
 * ---------------------------------------------------------------------------
 * THE ONE RULE THAT MAKES THIS SAFE
 *
 * Every rule that HIDES something is gated behind `.afd-quiz--on`, a class
 * that only assets/pages/home.js adds, and only after it has found the steps.
 * So the failure modes are:
 *
 *   JS blocked / errored  -> no --on class -> every step is visible and the
 *                            form behaves exactly as it does today.
 *   CSS blocked           -> nothing is hidden (hiding lives here) -> same.
 *   Both fine             -> the quiz.
 *
 * A broken state cannot hide a required field from the visitor. That was the
 * design constraint, not an afterthought.
 *
 * ---------------------------------------------------------------------------
 * COLOURS come from the Elementor Global Colors that are actually live on this
 * site (read from the rendered page, not from a doc):
 *
 *   27d249b #054777 navy   b0f8bca #A48A61 gold   ff5b792 #333333 ink
 *   7b22327 #F5F5F5 bg     18e252d #5E7A9A accent a322e34 #DC2F02 danger
 *
 * The `--afd-*` design tokens are NOT defined on the live site (confirmed:
 * getComputedStyle on :root and body returns "" for all of them — the
 * afdal-suite plugin that would define them does not exist). Hex fallbacks
 * therefore carry the real values; the var() lookup is there so this file
 * follows the palette automatically if the globals are ever re-bound.
 *
 * The panel surface (background, radius, padding) stays owned by the Elementor
 * shortcode widget df02f95 — this file never paints it. Change it in Elementor.
 *
 * ROLLBACK: delete this file. The loader skips what is not there.
 *
 * @package Afdalhome_Theme_Child
 */

/* ========================================================================== */
/* 1 - TOKENS + SHELL                                                         */
/* ========================================================================== */

.afd-quiz {
	--q-navy:   var(--e-global-color-27d249b, #054777);
	--q-gold:   var(--e-global-color-b0f8bca, #A48A61);
	--q-ink:    var(--e-global-color-ff5b792, #333333);
	--q-danger: var(--e-global-color-a322e34, #DC2F02);

	/* Derived, not re-declared elsewhere. */
	--q-gold-soft: color-mix(in srgb, var(--q-gold) 14%, transparent);
	--q-navy-soft: color-mix(in srgb, var(--q-navy) 8%, transparent);
	--q-line:      color-mix(in srgb, var(--q-navy) 18%, transparent);
	--q-field:     #FFFFFF;
	--q-on-gold:   #1B1206;   /* the only ink allowed on gold — DESIGN-SYSTEM */

	--q-r:      14px;
	--q-r-pill: 999px;
	--q-ease:   cubic-bezier(.4, 0, .2, 1);
	--q-speed:  280ms;

	/*
	 * SURFACE TOKENS — the only things that change between the two panels.
	 *
	 * The default is the LIGHT panel, because that is what the live homepage
	 * actually is: section 58093f6 paints an off-white polka-dot image and the
	 * shortcode widget df02f95 lays rgba(136,131,131,.35) over it, on a white
	 * body. Measured on the rendered page, not assumed — the heading directly
	 * above the form is navy #054777 and reads correctly there.
	 *
	 * Add `afd-quiz--dark` to the wrapper if that panel is ever repainted dark
	 * (a navy gradient card, for instance). Nothing else has to change.
	 */
	--q-heading:   var(--q-navy);
	--q-body:      var(--q-ink);
	--q-hint:      color-mix(in srgb, var(--q-ink) 70%, transparent);
	--q-meta:      color-mix(in srgb, var(--q-ink) 72%, transparent);
	--q-track:     var(--q-navy-soft);
	--q-chip-bg:   #FFFFFF;
	--q-chip-ink:  var(--q-ink);
	--q-focus:     var(--q-navy);
	--q-back-ink:  var(--q-navy);

	display: block;
	color: var(--q-body);
	font-family: inherit;
	text-align: start;
}

/* Dark panel. Ratios against #054777–#021F38: gold-pale #E6D3AE headings and
   white body copy both clear 4.5:1; the chip stays white-on-dark so the
   selected gold state keeps its #1B1206 ink, the only ink DESIGN-SYSTEM.md
   allows on gold. */
.afd-quiz--dark {
	--q-heading:   #E6D3AE;
	--q-body:      #FFFFFF;
	--q-hint:      rgba(255, 255, 255, .78);
	--q-meta:      rgba(255, 255, 255, .78);
	--q-track:     rgba(255, 255, 255, .18);
	--q-line:      rgba(255, 255, 255, .28);
	--q-chip-bg:   rgba(255, 255, 255, .10);
	--q-chip-ink:  #FFFFFF;
	--q-focus:     #E6D3AE;
	--q-back-ink:  #FFFFFF;
}

/* color-mix has been baseline since 2023, but a browser without it would drop
   the whole declaration and leave the property unset. Give each derived token
   a plain fallback first so the value is never empty. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.afd-quiz {
		--q-gold-soft: rgba(164, 138, 97, .14);
		--q-navy-soft: rgba(5, 71, 119, .08);
		--q-line:      rgba(5, 71, 119, .18);
	}
}

/* ========================================================================== */
/* 2 - PROGRESS                                                               */
/* Only rendered as a progress bar once JS is driving the steps; before that   */
/* it is an empty 6px strip, which is why it is hidden until --on.             */
/* ========================================================================== */

.afd-quiz__progress { display: none; }

.afd-quiz--on .afd-quiz__progress {
	display: block;
	margin-block-end: 18px;
}

.afd-quiz__bar {
	block-size: 6px;
	border-radius: var(--q-r-pill);
	background: var(--q-track);
	overflow: hidden;
}

.afd-quiz__bar-fill {
	display: block;
	block-size: 100%;
	inline-size: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--q-gold) 0%, var(--q-navy) 100%);
	transition: inline-size var(--q-speed) var(--q-ease);
}

.afd-quiz__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin: 8px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--q-meta);
}

.afd-quiz__count { font-weight: 700; }

.afd-quiz__pct {
	font-weight: 700;
	color: var(--q-gold);
	/* Percentages are an LTR island inside RTL copy — same rule the rest of
	   the site uses for prices. */
	unicode-bidi: isolate;
}

/* ========================================================================== */
/* 3 - STEPS                                                                  */
/* ========================================================================== */

.afd-quiz--on .afd-quiz__step { display: none; }

.afd-quiz--on .afd-quiz__step.is-active {
	display: block;
	animation: afd-quiz-in var(--q-speed) var(--q-ease) both;
}

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

.afd-quiz__q {
	margin: 0 0 4px;
	font-size: clamp(16px, 2.2vw, 20px);
	font-weight: 800;
	line-height: 1.7;
	color: var(--q-heading);
}

.afd-quiz__hint {
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 1.9;
	color: var(--q-hint);
}

/* ========================================================================== */
/* 4 - CHIPS                                                                  */
/*                                                                            */
/* CF7 wraps every option in `.wpcf7-list-item`. Whether the <input> sits      */
/* inside a <label> (use_label_element) or beside a                            */
/* `.wpcf7-list-item-label` span depends on the tag options, so both shapes    */
/* are covered: the chip skin is on `.wpcf7-list-item` itself, which exists    */
/* either way, and `is-checked` is put there by home.js rather than relying    */
/* on :has() — the state must not depend on a selector feature.                */
/* ========================================================================== */

.afd-quiz--on .afd-quiz__chips .wpcf7-form-control-wrap,
.afd-quiz--on .afd-quiz__chips .wpcf7-radio,
.afd-quiz--on .afd-quiz__chips .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	inline-size: 100%;
}

.afd-quiz--on .afd-quiz__chips .wpcf7-list-item {
	margin: 0;
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	min-block-size: 48px;              /* comfortable tap target */
	border: 1.5px solid var(--q-line);
	border-radius: var(--q-r-pill);
	background: var(--q-chip-bg);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--q-chip-ink);
	cursor: pointer;
	transition:
		border-color var(--q-speed) var(--q-ease),
		background-color var(--q-speed) var(--q-ease),
		color var(--q-speed) var(--q-ease),
		transform 160ms var(--q-ease);
}

/* The whole chip is the hit area; the label inside must not shrink it. */
.afd-quiz--on .afd-quiz__chips .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	inline-size: 100%;
	font: inherit;
	color: inherit;
	cursor: inherit;
}

/* The native input stays in the DOM and stays focusable — it is only made
   visually flat, never display:none, so keyboard and screen-reader users keep
   the real radio group. */
.afd-quiz--on .afd-quiz__chips .wpcf7-list-item input[type="radio"],
.afd-quiz--on .afd-quiz__chips .wpcf7-list-item input[type="checkbox"] {
	inline-size: 18px;
	block-size: 18px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--q-gold);
	cursor: inherit;
}

.afd-quiz--on .afd-quiz__chips .wpcf7-list-item:hover {
	border-color: var(--q-gold);
	transform: translateY(-2px);
}

.afd-quiz--on .afd-quiz__chips .wpcf7-list-item:focus-within {
	outline: 2px solid var(--q-focus);
	outline-offset: 2px;
}

.afd-quiz--on .afd-quiz__chips .wpcf7-list-item.is-checked {
	border-color: var(--q-gold);
	background: var(--q-gold);
	color: var(--q-on-gold);
}

/* ========================================================================== */
/* 5 - CONTACT FIELDS (final step)                                            */
/* The parent theme's .DK rules (style.css:238) give these a 40px grey box     */
/* with square corners. These override that inside the quiz only.             */
/* ========================================================================== */

.afd-quiz--on .afd-quiz__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.afd-quiz--on .afd-quiz__grid > .afd-quiz__field--wide { grid-column: 1 / -1; }

.afd-quiz--on .afd-quiz__field p { margin: 0; }

.afd-quiz--on .afd-quiz__field .wpcf7-form-control-wrap { display: block; }

.afd-quiz--on .afd-quiz__field :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
	inline-size: 100%;
	min-block-size: 48px;
	padding: 13px 16px;
	border: 1.5px solid var(--q-line);
	border-radius: var(--q-r);
	background: var(--q-field);
	color: var(--q-ink);
	font: inherit;
	font-size: 14px;
	line-height: 1.6;
	transition:
		border-color var(--q-speed) var(--q-ease),
		box-shadow var(--q-speed) var(--q-ease);
}

.afd-quiz--on .afd-quiz__field textarea {
	min-block-size: 96px;
	resize: vertical;
}

.afd-quiz--on .afd-quiz__field :is(input, textarea):focus {
	border-color: var(--q-gold);
	box-shadow: 0 0 0 3px var(--q-gold-soft);
	outline: none;
}

.afd-quiz--on .afd-quiz__field :is(input, textarea)::placeholder {
	color: color-mix(in srgb, var(--q-ink) 55%, transparent);
	opacity: 1;
}

/* Phone numbers are Latin digits inside an RTL form. */
.afd-quiz--on .afd-quiz__field input[type="tel"],
.afd-quiz--on .afd-quiz__field input[type="email"] {
	direction: ltr;
	text-align: end;
	unicode-bidi: isolate;
}

.afd-quiz--on .afd-quiz__field .wpcf7-not-valid {
	border-color: var(--q-danger);
}

.afd-quiz--on .wpcf7-not-valid-tip {
	display: block;
	margin-block-start: 6px;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--q-danger);
}

/* ========================================================================== */
/* 6 - THE SUMMARY CARD ("your profile")                                      */
/* Written by home.js from the answers already given. Empty and hidden until   */
/* then, so it cannot show a half-built sentence.                              */
/* ========================================================================== */

.afd-quiz__summary { display: none; }

.afd-quiz--on .afd-quiz__summary.is-ready {
	display: block;
	margin-block-end: 16px;
	padding: 14px 16px;
	border: 1.5px dashed var(--q-gold);
	border-radius: var(--q-r);
	background: var(--q-gold-soft);
}

.afd-quiz__summary-title {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 800;
	color: var(--q-heading);
}

.afd-quiz__summary-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.afd-quiz__summary-list li {
	padding: 5px 12px;
	border-radius: var(--q-r-pill);
	background: #FFFFFF;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--q-navy);
}

/* ========================================================================== */
/* 7 - FOOTER: TURNSTILE + NAVIGATION                                         */
/*                                                                            */
/* The Turnstile widget is deliberately OUTSIDE the stepped area and never     */
/* hidden. Cloudflare renders it into an element it measures; a display:none   */
/* container is the standard way to end up with a widget that never issues a   */
/* token and a form that always fails as spam. Verified on the live page: the  */
/* widget is `.wpcf7-turnstile.cf-turnstile` with data-sitekey                 */
/* 0x4AAAAAACg3h3RKFUAptngH and an empty _wpcf7_turnstile_response until it    */
/* resolves.                                                                   */
/* ========================================================================== */

.afd-quiz__foot {
	margin-block-start: 18px;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--q-line);
}

.afd-quiz__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-block-start: 12px;
}

/* Both nav buttons are hidden until JS owns the flow — without JS there are no
   steps to move between, and only CF7's own submit should be visible. */
.afd-quiz__btn { display: none; }

.afd-quiz--on .afd-quiz__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 50px;
	padding: 13px 28px;
	border: 1.5px solid transparent;
	border-radius: var(--q-r-pill);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	transition:
		background-color var(--q-speed) var(--q-ease),
		border-color var(--q-speed) var(--q-ease),
		color var(--q-speed) var(--q-ease),
		transform 160ms var(--q-ease);
}

.afd-quiz--on .afd-quiz__btn[hidden] { display: none; }

.afd-quiz--on .afd-quiz__btn--next {
	flex: 1 1 200px;
	background: var(--q-gold);
	color: var(--q-on-gold);
}

.afd-quiz--on .afd-quiz__btn--next:hover { transform: translateY(-2px); }

.afd-quiz--on .afd-quiz__btn--next[disabled] {
	opacity: .45;
	cursor: not-allowed;
	transform: none;
}

.afd-quiz--on .afd-quiz__btn--back {
	flex: 0 0 auto;
	background: transparent;
	border-color: var(--q-line);
	color: var(--q-back-ink);
}

.afd-quiz--on .afd-quiz__btn--back:hover { border-color: var(--q-gold); }

/* CF7's own submit lives in .afd-quiz__submit and is revealed on the last
   step. It is `visibility`, not `display`, so its layout box — and the spinner
   CF7 puts next to it — never jumps. */
.afd-quiz--on .afd-quiz__submit {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.afd-quiz--on.is-last .afd-quiz__submit {
	position: static;
	inline-size: auto;
	block-size: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
	flex: 1 1 200px;
}

.afd-quiz--on .afd-quiz__submit p { margin: 0; }

.afd-quiz--on.is-last .afd-quiz__submit .wpcf7-submit {
	inline-size: 100%;
	min-block-size: 50px;
	padding: 13px 28px;
	border: 0;
	border-radius: var(--q-r-pill);
	background: var(--q-navy);
	color: #FFFFFF;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: background-color var(--q-speed) var(--q-ease), transform 160ms var(--q-ease);
}

.afd-quiz--on.is-last .afd-quiz__submit .wpcf7-submit:hover {
	background: var(--q-gold);
	color: var(--q-on-gold);
	transform: translateY(-2px);
}

.afd-quiz__turnstile { min-block-size: 0; }

/* ========================================================================== */
/* 8 - CF7 RESPONSE OUTPUT                                                    */
/* ========================================================================== */

.afd-quiz--on ~ .wpcf7-response-output,
.wpcf7-form .afd-quiz--on .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 16px;
	border-width: 1.5px;
	border-radius: var(--q-r);
	font-size: 13.5px;
	line-height: 1.9;
}

/* ========================================================================== */
/* 9 - DONE STATE                                                             */
/* Added by home.js on wpcf7mailsent. CF7 also prints its own success text;    */
/* this only replaces the quiz body so the visitor is not left staring at an   */
/* empty form.                                                                 */
/* ========================================================================== */

.afd-quiz__done { display: none; }

.afd-quiz--on.is-done .afd-quiz__progress,
.afd-quiz--on.is-done .afd-quiz__steps,
.afd-quiz--on.is-done .afd-quiz__nav { display: none; }

.afd-quiz--on.is-done .afd-quiz__done {
	display: block;
	padding: 22px 18px;
	border-radius: var(--q-r);
	background: var(--q-gold-soft);
	text-align: center;
}

.afd-quiz__done-title {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 800;
	color: var(--q-heading);
}

.afd-quiz__done-text {
	margin: 0 0 16px;
	font-size: 13.5px;
	line-height: 2;
	color: var(--q-body);
}

.afd-quiz__done-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 48px;
	padding: 12px 26px;
	border-radius: var(--q-r-pill);
	background: var(--q-navy);
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.afd-quiz__done-cta:hover,
.afd-quiz__done-cta:focus {
	background: var(--q-gold);
	color: var(--q-on-gold);
}

/* ========================================================================== */
/* 10 - RESPONSIVE                                                            */
/* One breakpoint, matching the site's mobile switch. Below it the two-column  */
/* contact grid collapses and the nav stacks.                                  */
/* ========================================================================== */

@media (max-width: 767px) {
	.afd-quiz--on .afd-quiz__grid { grid-template-columns: minmax(0, 1fr); }

	.afd-quiz--on .afd-quiz__btn,
	.afd-quiz--on.is-last .afd-quiz__submit { flex: 1 1 100%; }

	.afd-quiz--on .afd-quiz__chips .wpcf7-list-item {
		inline-size: 100%;
		justify-content: flex-start;
	}
}

/* ========================================================================== */
/* 11 - REDUCED MOTION                                                        */
/* End states only, never a missing state. Mirrors afd-motion.js's contract.   */
/* ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.afd-quiz *,
	.afd-quiz *::before,
	.afd-quiz *::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}

	.afd-quiz--on .afd-quiz__chips .wpcf7-list-item:hover,
	.afd-quiz--on .afd-quiz__btn:hover { transform: none; }
}

/* ========================================================================== */
/* 12 - DARK PANEL: the three places a token swap is not enough               */
/*                                                                            */
/* Everything else in this file reads a surface token, so the dark variant is  */
/* a token block. These three paint navy on purpose and navy is the dark       */
/* panel's own colour — they would disappear into it.                          */
/* ========================================================================== */

.afd-quiz--dark .afd-quiz__bar-fill {
	background: linear-gradient(90deg, #E6D3AE 0%, var(--q-gold) 100%);
}

.afd-quiz--dark.afd-quiz--on.is-last .afd-quiz__submit .wpcf7-submit,
.afd-quiz--dark .afd-quiz__done-cta {
	background: var(--q-gold);
	color: var(--q-on-gold);
}

.afd-quiz--dark.afd-quiz--on.is-last .afd-quiz__submit .wpcf7-submit:hover,
.afd-quiz--dark .afd-quiz__done-cta:hover,
.afd-quiz--dark .afd-quiz__done-cta:focus {
	background: #E6D3AE;
	color: var(--q-on-gold);
}