/* ===========================================================================
 * Trail-specific styles (onboarding + results)
 *
 * Despite the file name, this stylesheet now hosts trail-only rules for
 * BOTH the onboarding template (page-trail-onboarding.php) AND the trail
 * results template (page-trail-results.php). Both pages enqueue it
 * IN ADDITION to their existing shared base CSS:
 *
 *   - onboarding page: onboarding.css (shared with ski boot) + this file
 *   - results page:    fits.css (shared with ski boot fits) + this file
 *
 * Migration policy:
 *   - All NEW trail-only rules go here.
 *   - When a shared rule needs to diverge for trail, override it here
 *     with a more specific selector or .trail-* prefix.
 *   - The ski boot flows MUST NOT enqueue this file.
 *
 * @package WP_Wayfinder
 * =========================================================================== */

/* ---------------------------------------------------------------------------
 * Accessibility: focus rings.
 * Per DESIGN_SYSTEM.md §Accessibility — every interactive element should
 * have a visible focus state (WCAG 2.1 AA). The shared .onboarding-option
 * class previously relied on browser-default outlines, which were
 * frequently invisible against the existing border. These rules apply on
 * trail pages only because this stylesheet is enqueued only there;
 * the ski boot flow has the same gap and is flagged in
 * docs/trail-design-review.md for a separate decision.
 * ------------------------------------------------------------------------- */

.onboarding-option:focus-visible,
.trail-expert-option:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 101, 1, 0.4);
}

/* ---------------------------------------------------------------------------
 * Accessibility: respect prefers-reduced-motion.
 * Per DESIGN_SYSTEM.md §Accessibility. Scoped here (rather than globally
 * in onboarding.css) so the ski boot flow's behaviour is unchanged; it
 * has the same gap and should get the same fix in a separate pass.
 * ------------------------------------------------------------------------- */

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

/* ---------------------------------------------------------------------------
 * Step 2 terrain photo cards.
 * Photo-first layout with the real terrain shot filling the top of each
 * card and the label / sublabel below. The 4 cards land in a 2×2 grid
 * on mobile and a 1×4 row on desktop. The audit identified image-based
 * terrain options as genuinely novel for a recommendation tool —
 * photos must be the primary visual element.
 * ------------------------------------------------------------------------- */

.trail-terrain-card {
	min-height: 0; /* allow card to size to content + image */
}

.trail-terrain-image {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

/* ---------------------------------------------------------------------------
 * Step 3 footprint silhouette cards.
 * PNG silhouettes (106 × 228 native, RGBA with alpha) — clean black-on-
 * transparent illustrations of a left foot's sole. Each panel's silhouette
 * shows a different arch height via the depth of the medial-side cutout.
 * Natural sizing (height: auto) so the silhouette's own proportions
 * dominate; max-width ≈ native size keeps edges crisp on standard
 * displays without needing a separate retina asset.
 * ------------------------------------------------------------------------- */

.trail-arch-image {
	width: 100%;
	max-width: 96px;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* ---------------------------------------------------------------------------
 * "Our thoughts" callout — founder-voice surface used at vulnerable moments
 * (beginner-path step 3 reassurance, future inline injury-step callouts).
 * Styled to feel like a margin note, not a banner ad.
 *
 * Background and label colour reference the design-system warning tokens
 * defined in style.css. The 3px left-border accent is an intentional
 * brighter-amber callout colour (#f59e0b) — there is no mid-tone
 * --color-feedback-warning-accent token to reference, and the darker
 * --color-feedback-warning would lose visual distinction against the
 * pale background.
 * ------------------------------------------------------------------------- */

.trail-our-thoughts {
	max-width: 520px;
	margin: 0 auto;
	padding: 14px 18px;
	background: var(--color-feedback-warning-bg);
	border-left: 3px solid #f59e0b;
	border-radius: 0 var(--radius-2xl) var(--radius-2xl) 0;
}

.trail-our-thoughts__label {
	font-size: 11px;
	font-weight: 600;
	color: var(--color-feedback-warning);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 4px 0;
}

.trail-our-thoughts__body {
	font-size: 13px;
	line-height: 1.55;
	color: #374151;
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Grouped sub-question badges — small "1 of 2" / "2 of 2" labels so users
 * skimming a step realise it contains two independent questions rather than
 * one long list. Used on every step whose second question is revealed on
 * selection (steps 1, 4) as well as step 5's two-part health question.
 * ------------------------------------------------------------------------- */

.trail-step5-section__num,
.trail-substep-num {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	background: #f3f4f6;
	padding: 3px 9px;
	border-radius: 999px;
	margin: 0 0 10px 0;
}

/* ---------------------------------------------------------------------------
 * Step 4 expert path — direct preference questions, all visible at once.
 * Each question is a labelled grid of buttons followed by a "derive note"
 * that only shows when the user picked "Not sure".
 * ------------------------------------------------------------------------- */

.trail-expert-question {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.trail-expert-question__label {
	font-size: 14px;
	font-weight: 600;
	color: #1f2937;
	margin: 0;
}

/* Inline "We'll derive this from..." note. Hidden until the user picks
 * the "Not sure" / 'no_preference' option, at which point JS adds
 * .has-no-preference to the wrapper. */
.trail-derive-note {
	display: none;
	font-size: 12px;
	line-height: 1.5;
	color: #6b7280;
	font-style: italic;
	margin: 0;
	padding: 8px 12px;
	background: #f9fafb;
	border-left: 2px solid #d1d5db;
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.trail-expert-question.has-no-preference .trail-derive-note {
	display: block;
}

/* Compact button styling for the optional expert questions — sits inside
 * onboarding-option's hover/select hooks but tighter than the main step
 * cards so the section reads as supplemental. Padding is sized for a
 * minimum 44px tap target on mobile (16px vertical + 13px line-height = ~46px). */
.trail-expert-option {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 14px 16px;
	border-radius: var(--radius-2xl);
	border: 2px solid #d1d5db;
	background: #ffffff;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
	text-align: center;
}

.trail-expert-option:hover {
	border-color: #fbbf24;
}

.trail-expert-option.selected {
	border-color: #fbbf24;
	background: var(--color-feedback-warning-bg);
}

.trail-expert-option__label {
	font-size: 13px;
	font-weight: 500;
	color: #1f2937;
	line-height: 1.3;
}

.trail-expert-continue {
	margin-top: 4px;
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * Results page: affiliate disclosure.
 * Deliberately quiet — neutral slate treatment with no fill, small text.
 * Positioned above the hero so the commercial relationship is visible
 * before any buy CTA, but styled to NOT compete with the "Our thoughts
 * on this pick" amber block below. The two blocks used to share an amber
 * palette and read as a stacked pair; this restores hierarchy.
 * ------------------------------------------------------------------------- */

.trail-affiliate-disclosure {
	border-top: 1px solid #e5e7eb;
	border-bottom: 1px solid #e5e7eb;
	padding: 10px 0;
}

.trail-affiliate-disclosure p {
	font-size: 11px;
	line-height: 1.55;
	color: #6b7280;
	margin: 0;
	max-width: 720px;
}

.trail-affiliate-disclosure__label {
	font-weight: 600;
	color: #4b5563;
	margin-right: 2px;
}

/* ---------------------------------------------------------------------------
 * Results page: "Our thoughts on this pick" rationale block.
 * Sits between the personalised headline and the hero shoe card. The audit
 * identified rationale-tied-to-inputs as the single most underdone UX
 * pattern in the running-shoe finder category — this block is the visible
 * realisation of that strategic claim.
 * ------------------------------------------------------------------------- */

.trail-our-thoughts-results {
	padding: 20px 24px;
	background: var(--color-feedback-warning-bg);
	border-left: 4px solid #f59e0b;
	border-radius: 0 var(--radius-2xl) var(--radius-2xl) 0;
}

.trail-our-thoughts-results__label {
	font-size: 11px;
	font-weight: 700;
	color: var(--color-feedback-warning);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 10px 0;
}

.trail-our-thoughts-results__body {
	font-size: 16px;
	line-height: 1.65;
	color: #1f2937;
	margin: 0;
	max-width: 640px;
}

/* -------------------------------------------------------------------------
 * Step-transition feedback.
 * Added by JS (beginStepTransition) the moment an answer commits. The
 * preference save runs a network round-trip before the redirect; on slow
 * connections the untouched page looked frozen and users re-tapped or bailed.
 * Dimming + locking input signals "got it, moving on" instantly.
 * ------------------------------------------------------------------------- */

[data-current-step] {
	transition: opacity 200ms ease;
}

[data-current-step].trail-navigating {
	opacity: 0.55;
	pointer-events: none;
}