/**
 * Alfa Oven Selector — styles.
 *
 * Matched to The Outdoor Store's design language: amber/gold accent, white
 * cards with hairline borders, gold heading rule, and a 3-up option grid that
 * echoes the "Our Experts' Top Picks" section.
 *
 * Everything is scoped to .alfa-quiz-wrapper so nothing leaks into XStore.
 * Typography is deliberately inherited from the theme (font-family is never
 * declared) so the quiz always matches the site's fonts.
 *
 * All colour pairs below are verified against WCAG 2.1 AA:
 *   ink on white ........ 17.40:1      helper text on white .. 7.65:1
 *   amber text on white .. 5.91:1      progress fill vs track  3.70:1
 *   option border vs white 3.13:1      selected border ....... 3.04:1
 *
 * @package XStore_Child
 * @since   1.1.0
 */

/* -------------------------------------------------------------------------
 * Brand tokens — change these to retune the whole widget.
 * ---------------------------------------------------------------------- */

.alfa-quiz-wrapper {
	/* Store amber. Used for borders, fills and the selected state. */
	--alfa-brand: #c8862a;
	/* Darker amber for anything that is TEXT — the base amber is only 3:1. */
	--alfa-brand-text: #8a5a12;
	/* Progress fill: needs 3:1 against the track, which base amber misses. */
	--alfa-brand-fill: #a76d1b;
	/* Gold hairline used under section headings across the site. */
	--alfa-rule: #d9bc7f;

	--alfa-ink: #1a1a1a;
	--alfa-muted: #5a5340;
	--alfa-surface: #ffffff;
	--alfa-tint: #fdf6e9;
	--alfa-border: #9c9080;
	--alfa-border-soft: #e5e1d8;
	--alfa-track: #ededed;
	--alfa-dark: #14110f;

	--alfa-radius: 4px;
	--alfa-maxw: 1100px;

	background: var(--alfa-surface);
	border: 1px solid var(--alfa-border-soft);
	border-radius: var(--alfa-radius);
	padding: 40px;
	max-width: var(--alfa-maxw);
	margin: 0 auto;
	text-align: center;
	color: var(--alfa-ink);
}

/* -------------------------------------------------------------------------
 * Utilities
 * ---------------------------------------------------------------------- */

.alfa-quiz-wrapper .alfa-sr-only {
	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;
}

/* Ensures `hidden` wins over any theme rule that sets display on sections. */
.alfa-quiz-wrapper [hidden] {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * Header: step counter + progress
 * ---------------------------------------------------------------------- */

.alfa-quiz-wrapper .alfa-quiz-head {
	max-width: 420px;
	margin: 0 auto 34px;
}

.alfa-quiz-wrapper .alfa-step-counter {
	margin: 0 0 10px;
	color: var(--alfa-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.alfa-quiz-wrapper .alfa-current-step {
	color: var(--alfa-brand-text);
}

.alfa-quiz-wrapper .alfa-progress {
	background: var(--alfa-track);
	height: 4px;
	border-radius: 2px;
	width: 100%;
	overflow: hidden;
}

.alfa-quiz-wrapper .alfa-progress-bar {
	background: var(--alfa-brand-fill);
	height: 100%;
	width: 0;
	transition: width 0.35s ease;
}

/* -------------------------------------------------------------------------
 * Steps + question heading (gold rule, as elsewhere on the site)
 * ---------------------------------------------------------------------- */

.alfa-quiz-wrapper .quiz-step {
	display: none;
	animation: alfa-fade-in 0.35s ease-out;
}

.alfa-quiz-wrapper .quiz-step.active {
	display: block;
}

.alfa-quiz-wrapper .quiz-step h3,
.alfa-quiz-wrapper .alfa-question {
	font-size: 22px;
	line-height: 1.35;
	margin: 0 0 8px;
	font-weight: 700;
	color: var(--alfa-ink);
}

.alfa-quiz-wrapper .alfa-grid {
	margin-top: 30px;
}

/* Gold hairline beneath the question, matching the site's section headings. */
.alfa-quiz-wrapper .alfa-question::after {
	content: "";
	display: block;
	width: 56px;
	height: 2px;
	margin: 14px auto 0;
	background: var(--alfa-rule);
}

.alfa-quiz-wrapper .alfa-question:focus {
	outline: none;
}

.alfa-quiz-wrapper .alfa-question:focus-visible {
	outline: 2px solid var(--alfa-dark);
	outline-offset: 6px;
	border-radius: 2px;
}

/* -------------------------------------------------------------------------
 * Option cards — 3-up grid echoing the Top Picks section
 * ---------------------------------------------------------------------- */

.alfa-quiz-wrapper .alfa-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}

.alfa-quiz-wrapper .alfa-grid--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.alfa-quiz-wrapper .alfa-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	background: var(--alfa-surface);
	border: 1px solid var(--alfa-border);
	border-radius: var(--alfa-radius);
	padding: 28px 22px;
	font: inherit;
	cursor: pointer;
	color: var(--alfa-ink);
	text-align: center;
	min-height: 44px; /* WCAG 2.5.8 target size. */
	transition:
		border-color 0.18s ease,
		background-color 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.18s ease;
}

.alfa-quiz-wrapper .alfa-btn-icon {
	display: block;
	color: var(--alfa-brand-text);
	transition: color 0.18s ease;
}

.alfa-quiz-wrapper .alfa-btn-icon svg {
	display: block;
	width: 44px;
	height: 44px;
}

.alfa-quiz-wrapper .alfa-btn-label {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.alfa-quiz-wrapper .alfa-btn-help {
	display: block;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--alfa-muted);
	max-width: 24ch;
}

.alfa-quiz-wrapper .alfa-btn:hover {
	border-color: var(--alfa-brand);
	background: var(--alfa-tint);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(20, 17, 15, 0.08);
}

/* Visible keyboard focus. */
.alfa-quiz-wrapper .alfa-btn:focus-visible,
.alfa-quiz-wrapper .alfa-back:focus-visible,
.alfa-quiz-wrapper a:focus-visible {
	outline: 3px solid var(--alfa-dark);
	outline-offset: 3px;
}

.alfa-quiz-wrapper .alfa-btn[aria-pressed="true"],
.alfa-quiz-wrapper .alfa-btn.is-selected {
	border-color: var(--alfa-brand);
	background: var(--alfa-tint);
	box-shadow: inset 0 0 0 1px var(--alfa-brand);
}

.alfa-quiz-wrapper .alfa-btn[disabled] {
	opacity: 0.55;
	cursor: default;
	transform: none;
	box-shadow: none;
}

/* -------------------------------------------------------------------------
 * Back control
 * ---------------------------------------------------------------------- */

.alfa-quiz-wrapper .alfa-back {
	margin-top: 30px;
	background: none;
	border: 0;
	padding: 10px 12px;
	min-height: 44px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--alfa-muted);
	cursor: pointer;
	border-radius: 2px;
}

.alfa-quiz-wrapper .alfa-back:hover {
	color: var(--alfa-brand-text);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Loading state
 * ---------------------------------------------------------------------- */

.alfa-quiz-wrapper .step-loading {
	padding: 18px 0 8px;
}

.alfa-quiz-wrapper .step-loading .spinner {
	width: 36px;
	height: 36px;
	border: 3px solid var(--alfa-track);
	border-top-color: var(--alfa-brand);
	border-radius: 50%;
	animation: alfa-spin 0.9s linear infinite;
	margin: 0 auto 18px;
}

.alfa-quiz-wrapper .step-loading .alfa-question::after {
	display: none;
}

.alfa-quiz-wrapper .alfa-fallback,
.alfa-quiz-wrapper .alfa-noscript {
	font-size: 14px;
	color: var(--alfa-muted);
	margin: 16px 0 0;
}

.alfa-quiz-wrapper .alfa-fallback a,
.alfa-quiz-wrapper .alfa-noscript a {
	color: var(--alfa-brand-text);
	font-weight: 600;
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 860px) {

	.alfa-quiz-wrapper {
		padding: 28px 18px;
	}

	.alfa-quiz-wrapper .alfa-grid,
	.alfa-quiz-wrapper .alfa-grid--two {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	/* Stack to a compact horizontal row so all options stay above the fold. */
	.alfa-quiz-wrapper .alfa-btn {
		flex-direction: row;
		align-items: center;
		text-align: left;
		gap: 14px;
		padding: 16px;
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"icon label"
			"icon help";
		column-gap: 14px;
		row-gap: 2px;
	}

	.alfa-quiz-wrapper .alfa-btn-icon {
		grid-area: icon;
		align-self: center;
	}

	.alfa-quiz-wrapper .alfa-btn-icon svg {
		width: 32px;
		height: 32px;
	}

	.alfa-quiz-wrapper .alfa-btn-label {
		grid-area: label;
		font-size: 16px;
	}

	.alfa-quiz-wrapper .alfa-btn-help {
		grid-area: help;
		max-width: none;
		font-size: 13px;
	}

	.alfa-quiz-wrapper .alfa-question {
		font-size: 19px;
	}

	.alfa-quiz-wrapper .alfa-btn:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Motion, contrast & print preferences
 * ---------------------------------------------------------------------- */

@keyframes alfa-spin {

	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes alfa-fade-in {

	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

	.alfa-quiz-wrapper .quiz-step,
	.alfa-quiz-wrapper .step-loading .spinner {
		animation: none;
	}

	.alfa-quiz-wrapper .alfa-progress-bar,
	.alfa-quiz-wrapper .alfa-btn,
	.alfa-quiz-wrapper .alfa-btn-icon {
		transition: none;
	}

	.alfa-quiz-wrapper .alfa-btn:hover {
		transform: none;
	}
}

@media (forced-colors: active) {

	.alfa-quiz-wrapper .alfa-btn {
		border: 2px solid ButtonBorder;
	}

	.alfa-quiz-wrapper .alfa-btn[aria-pressed="true"] {
		border-color: Highlight;
		box-shadow: none;
	}

	.alfa-quiz-wrapper .alfa-progress-bar {
		background: Highlight;
	}

	.alfa-quiz-wrapper .alfa-question::after {
		background: CanvasText;
	}
}