/* MFY Soil Profile Builder - wizard styles. Loaded only on /soil-profile-builder/wizard/. */

/* --- 1. Steps: hidden until active --- */
.soil-quiz-step {
	display: none;
}

.soil-quiz-step.is-active {
	display: block;
}

/* When the step changes, the script scrolls the top of the quiz back into view.
   This keeps that spot clear of the sticky site header. */
#quiz-pill-nav {
	scroll-margin-top: 72px;
}

/* Programmatic focus lands on the step headline for screen readers; no ring needed there. */
.quiz-headline:focus {
	outline: none;
}

/* --- 2. Progress pills --- */
.soil-nav-pill {
	transition: all 0.3s ease;
}

.soil-nav-pill.is-active {
	background-color: #5c8001; /* MFY green */
	color: #ffffff;
}

/* --- 3. Back / Next buttons --- */
#soil-back-btn,
#soil-next-btn {
	cursor: pointer;
	transition: all 0.3s ease;
}

#soil-next-btn {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}

#soil-next-btn.is-active {
	opacity: 1;
	cursor: pointer;
	pointer-events: auto;
}

/* --- 4. Branching wrappers (revealed by the script with .is-visible) --- */
.ribbon-feel-questions-wrp,
.jar-inputs-wrp,
.kit-input-wrp,
.kitchen-test-wrp {
	display: none;
	margin-top: 30px;
}

/* --- 5. Selection states --- */
.soil-quiz-card {
	cursor: pointer;
}

.texture-option.is-selected,
.feel-test.is-selected,
.ph-option.is-selected,
.kitchen-test.is-selected,
.organic-matter.is-selected {
	border: 2px solid #5c8001 !important;
	background-color: #f9fbf2 !important;
}

/* Keyboard focus */
.soil-quiz-card:focus-visible,
#soil-back-btn:focus-visible,
#soil-next-btn:focus-visible {
	outline: 3px solid #5c8001;
	outline-offset: 2px;
}

/* --- 6. Inputs --- */
.texture-input,
.ph-input {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

/* --- 7. Error message under the buttons --- */
.soil-wizard-error {
	max-width: 480px;
	margin: 16px auto 0;
	text-align: center;
	color: #b3261e;
	font-size: 0.95rem;
}

.soil-wizard-error[hidden] {
	display: none;
}