/* ==========================================================================
   Rug Stain Wizard + stain guides — /rug-stain-removal/ only (page-scoped
   enqueue from fs-stain-data.php). Navy/gold per the prototype, translated
   onto the theme tokens. Contrast rules honored: gold is never text on a
   light surface (--gold-text is the one AA-safe gold for that); gold text
   on navy is fine. CLS: the wizard body reserves its height between steps.
   ========================================================================== */

/* ---------- compact hero: copy left, the wizard IN the hero right ----------
   Replaces the full-screen hero monolith. Same navy + woven-gold-thread motif
   as .fs-page-hero, but the band is only as tall as its content, the H1 starts
   near ~120px, and step 1 of the wizard is on screen at load. No gold TEXT in
   here (dark band, but the contrast gate allowlist is selector-based): copy is
   cream/powder only. */
.fs-stainhero {
	position: relative;
	background-color: var(--navy, #010F62);
	background-image: url(../tex/dark-gold-threads.webp);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: var(--on-navy, #EAF1FA);
	overflow: hidden;
}
.fs-stainhero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	/* NAVY veil, not charcoal: the gold-thread texture is near-black, and the old
	   rgba(16,16,20) scrim made the whole band (and the transparent header over it)
	   read black instead of brand navy. This keeps the woven motif faintly visible
	   at the light end while the sampled background stays in the #010F62 family. */
	background: linear-gradient(105deg, rgba(1, 15, 98, .95) 0%, rgba(1, 15, 98, .85) 52%, rgba(1, 15, 98, .68) 100%);
}
/* Single centered column: copy stacked on top, the wizard card centered below.
   The old 42/58 side-by-side grid left a ~2,000px empty navy void under the
   short copy column; stacking makes the band exactly as tall as its content. */
.fs-stainhero__grid {
	position: relative;
	z-index: 2;
	display: block;
	max-width: 1600px;
	margin-inline: auto;
	/* Top padding is floored at the fixed two-tier header height (token from style.css) plus
	   32px of air, so the H1 clears the taller header at every viewport instead of riding up
	   under the centered logo. */
	padding: max(clamp(5rem, 10vh, 5.75rem), calc(var(--fs-header-h, 138px) + 32px)) clamp(1.5rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem);
}
.fs-stainhero__copy {
	text-align: center;
	max-width: 680px;
	margin: 0 auto;
}
.fs-stainhero__copy h1 {
	color: var(--wool-white, #EAF1FA);
	margin: 0 auto .8rem;
	max-width: none;
	font-size: clamp(2rem, 3.1vw, 2.8rem);
	line-height: 1.08;
	text-wrap: balance;
}
/* The BLUF keeps its .fs-answer class (gates + Speakable selector) but sheds the
   light-canvas card styling inside the dark hero. */
.fs-stainhero .fs-answer {
	background: none;
	border: 0;
	padding: 0;
	margin: 0 auto .8rem;
	color: var(--powder, #D5E4F5);
	font-size: 1.05rem;
	line-height: 1.55;
	max-width: 52ch;
}
.fs-stainhero__trust {
	margin: 0;
	font-size: .88rem;
	letter-spacing: .02em;
	color: var(--powder, #D5E4F5);
}
.fs-stainhero__trust b { color: var(--cream, #F5EFE1); }
.fs-stainhero__tool {
	max-width: 960px;
	margin: 28px auto 0;
}
.fs-stainhero__tool .fs-wiz { margin: 0; }
@media (max-width: 900px) {
	/* same header-clearance floor as the base rule, so the H1 clears the nav on phones too */
	.fs-stainhero__grid { padding-top: max(4.25rem, calc(var(--fs-header-h, 124px) + 32px)); padding-bottom: 1.5rem; }
	.fs-stainhero__copy h1 { font-size: clamp(1.8rem, 7vw, 2.2rem); margin-bottom: .7rem; }
	.fs-stainhero .fs-answer { font-size: 1rem; margin-bottom: .8rem; max-width: none; }
	.fs-stainhero__tool { margin-top: 18px; }
}

/* ---------- card shell ---------- */
.fs-wiz {
	background: #fff;
	border: 1px solid rgba(1, 15, 98, .08);
	border-radius: 20px;
	box-shadow: 0 30px 70px rgba(1, 15, 98, .14);
	overflow: hidden;
	margin: 2rem 0 2.5rem;
}
.fs-wiz__bar { background: var(--navy, #010F62); }
.fs-wiz__steps-nav {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}
.fs-wiz__dot {
	flex: 1;
	padding: 14px 10px;
	text-align: center;
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(213, 228, 245, .78);
}
.fs-wiz__dot span {
	display: inline-flex;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	align-items: center;
	justify-content: center;
	margin-right: 8px;
	font-size: .7rem;
}
.fs-wiz__dot.is-active { color: var(--gold-lt, #E4CB8B); font-weight: 600; }
.fs-wiz__dot.is-done { color: var(--cream, #F5EFE1); }

/* Reserve height so the card never jumps between steps (CLS 0). */
.fs-wiz__body {
	padding: 32px clamp(18px, 4vw, 46px) 40px;
	min-height: 560px;
}
@media (max-width: 640px) { .fs-wiz__body { padding: 24px 16px 32px; min-height: 620px; } }

/* ---------- panels ---------- */
.fs-wiz__panel { display: none; }
.fs-wiz__panel.is-on { display: block; animation: fs-wiz-fade .4s ease; }
@keyframes fs-wiz-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.fs-wiz__eyebrow {
	font-size: .7rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--gold-text, #795E2C); /* the one AA-safe gold on a light surface */
	margin: 0 0 .5rem;
}
.fs-wiz__title {
	font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
	font-weight: 600;
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	color: var(--navy, #010F62);
	margin: 0 0 6px;
}
.fs-wiz__title:focus { outline: none; }
.fs-wiz__title--visually-hidden,
.fs-wiz__search-label,
.fs-wiz__live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.fs-wiz__sub { color: var(--ink-soft, #454C5E); margin: 0 0 20px; }

/* ---------- step 1: search, cats, grid ---------- */
.fs-wiz__search {
	width: 100%;
	padding: 13px 18px;
	border: 1.5px solid #dce3ee;
	border-radius: 12px;
	font-family: inherit;
	font-size: .95rem;
	color: var(--ink, #0B1330);
	background: #fff;
	margin: 0 0 6px;
}
.fs-wiz__search:focus { outline: 2px solid var(--focus-ring, #010F62); outline-offset: 1px; border-color: var(--gold, #B08D4A); }
.fs-wiz__cats { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 18px; }
.fs-wiz__cat {
	font-family: inherit;
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 100px;
	border: 1px solid #dce3ee;
	background: #fff;
	cursor: pointer;
	color: var(--ink-soft, #454C5E);
}
.fs-wiz__cat.is-on { background: var(--navy, #010F62); color: var(--cream, #F5EFE1); border-color: var(--navy, #010F62); }
.fs-wiz__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.fs-wiz__cell { margin: 0; }
.fs-wiz__stain {
	display: block;
	border: 1.5px solid #e6ebf3;
	border-radius: 14px;
	padding: 16px 10px;
	text-align: center;
	background: #fff;
	text-decoration: none;
	color: var(--ink, #0B1330);
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
	height: 100%;
}
.fs-wiz__stain:hover { border-color: var(--gold, #B08D4A); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(1, 15, 98, .08); }
.fs-wiz__stain:focus-visible { outline: 2px solid var(--focus-ring, #010F62); outline-offset: 2px; }
.fs-wiz__ic { font-size: 1.7rem; display: block; margin-bottom: 6px; }
.fs-wiz__nm { font-size: .84rem; line-height: 1.3; display: block; }
.fs-wiz__warn { color: #9a3b2e; }
.fs-wiz__empty { color: var(--ink-soft, #454C5E); margin: 18px 0 0; }

/* ---------- step 2: fibers ---------- */
.fs-wiz__fibers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.fs-wiz__fiber {
	font-family: inherit;
	border: 1.5px solid #e6ebf3;
	border-radius: 14px;
	padding: 20px 14px;
	cursor: pointer;
	text-align: center;
	background: #fff;
	color: var(--ink, #0B1330);
	transition: transform .18s ease, border-color .18s ease;
}
.fs-wiz__fiber:hover { border-color: var(--gold, #B08D4A); transform: translateY(-2px); }
.fs-wiz__fiber:focus-visible { outline: 2px solid var(--focus-ring, #010F62); outline-offset: 2px; }
.fs-wiz__fiber b { display: block; font-weight: 600; color: var(--navy, #010F62); font-size: .95rem; }
.fs-wiz__fiber small { color: var(--ink-soft, #454C5E); font-size: .74rem; line-height: 1.35; display: block; margin-top: 2px; }

/* ---------- shared: back button ---------- */
.fs-wiz__back {
	background: none;
	border: none;
	color: var(--ink-soft, #454C5E);
	cursor: pointer;
	font-family: inherit;
	font-size: .82rem;
	padding: 0;
	margin: 0 0 16px;
}
.fs-wiz__back:hover { color: var(--navy, #010F62); text-decoration: underline; }
.fs-wiz__back:focus-visible { outline: 2px solid var(--focus-ring, #010F62); outline-offset: 2px; }

/* ---------- step 3: treatment / results ---------- */
.fs-wiz__rtitle {
	font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
	font-weight: 600;
	font-size: clamp(1.5rem, 3.2vw, 2.1rem);
	color: var(--navy, #010F62);
	margin: 0 0 10px;
}
.fs-wiz__rtitle:focus { outline: none; }
.fs-wiz__result { text-align: center; padding: 24px 0 8px; max-width: 560px; margin: 0 auto; }
.fs-wiz__result p { color: var(--ink-soft, #454C5E); margin: 0 0 22px; }
.fs-wiz__rtitle--left { text-align: left; }
.fs-wiz__safe {
	display: flex;
	gap: 12px;
	background: #fff7e8;
	border: 1px solid #f0dfb5;
	border-radius: 12px;
	padding: 13px 15px;
	margin: 0 0 8px;
	font-size: .9rem;
	color: var(--ink, #0B1330);
	text-align: left;
}
.fs-wiz__list { counter-reset: fswiz; list-style: none; margin: 8px 0 0; padding: 0; text-align: left; }
.fs-wiz__list li { position: relative; padding: 16px 0 16px 54px; border-bottom: 1px solid #eef2f8; color: var(--ink-soft, #454C5E); }
.fs-wiz__list li:last-child { border-bottom: none; }
.fs-wiz__list li b { color: var(--navy, #010F62); }
.fs-wiz__list li::before {
	counter-increment: fswiz;
	content: counter(fswiz);
	position: absolute;
	left: 0;
	top: 14px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--navy, #010F62);
	color: var(--gold-lt, #E4CB8B); /* gold on navy: AA-safe */
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Fraunces', Georgia, serif;
	font-size: 1rem;
	font-weight: 600;
}
.fs-wiz__never {
	background: #fbece9;
	border: 1px solid #f0c8bf;
	border-radius: 12px;
	padding: 13px 15px;
	margin-top: 16px;
	font-size: .9rem;
	color: #7a2a20;
	text-align: left;
}
.fs-wiz__never b { color: #9a3b2e; }
.fs-wiz__ask { margin-top: 26px; padding-top: 20px; border-top: 2px dashed #e6ebf3; text-align: center; }
.fs-wiz__ask p { font-family: 'Fraunces', Georgia, serif; font-size: 1.4rem; color: var(--navy, #010F62); margin: 0 0 14px; }
.fs-wiz__askbtns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.fs-wiz__btn {
	font-family: inherit;
	font-size: .88rem;
	letter-spacing: .04em;
	padding: 12px 24px;
	border-radius: 100px;
	background: #fff;
	cursor: pointer;
	font-weight: 600;
}
.fs-wiz__btn--yes { border: 1.5px solid #2f7d4f; color: #226343; }
.fs-wiz__btn--yes:hover { background: #2f7d4f; color: #fff; }
.fs-wiz__btn--no { border: 1.5px solid #9a3b2e; color: #9a3b2e; }
.fs-wiz__btn--no:hover { background: #9a3b2e; color: #fff; }
.fs-wiz__btn:focus-visible { outline: 2px solid var(--focus-ring, #010F62); outline-offset: 2px; }
.fs-wiz__trust { font-size: .82rem; color: var(--ink-soft, #454C5E); margin-top: 14px !important; }
.fs-wiz__trust b { color: var(--gold-text, #795E2C); } /* the one AA-safe gold on light */

/* ---------- crawlable guides: compact two-column masonry flow ----------
   CSS columns pack the uneven card heights tightly, preserve DOM order (the
   crawl/priority order is untouched), and roughly halve the section height.
   The container breaks out of the 1080px content measure to ~1180px, centered
   on the same axis. One column below 760px. */
.fs-stain-guides {
	margin: 1.5rem 0 0;
	width: min(1180px, calc(100vw - 2.5rem));
	margin-left: calc(50% - min(1180px, calc(100vw - 2.5rem)) / 2);
	column-count: 2;
	column-gap: 20px;
}
.fs-stain-guide {
	border: 1px solid #e6ebf3;
	border-radius: 14px;
	padding: 16px 20px;
	margin: 0 0 16px;
	background: #fff;
	break-inside: avoid;
}
.fs-stain-guide__q {
	font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
	font-size: 1.125rem;
	color: var(--navy, #010F62);
	margin: 0 0 6px;
}
.fs-stain-guide__bluf { color: var(--ink, #0B1330); margin: 0 0 8px; font-weight: 500; font-size: .95rem; line-height: 1.5; }
.fs-stain-guide__steps { margin: 0 0 8px 1.1rem; padding: 0; color: var(--ink-soft, #454C5E); font-size: .92rem; line-height: 1.5; }
.fs-stain-guide__steps li { margin: 0 0 6px; }
.fs-stain-guide__steps b { color: var(--navy, #010F62); }
.fs-stain-guide__note { font-size: .82rem; line-height: 1.45; color: var(--ink-soft, #454C5E); margin: 0; }
.fs-stain-guide--pro { border-color: #f0dfb5; background: #fffdf7; }
.fs-stain-guide__stop p { color: var(--ink, #0B1330); margin: 0 0 10px; font-size: .92rem; line-height: 1.5; }
/* Escalate cards stay visually distinct (cream/gold) but compact: the pickup
   button shrinks to a small pill so these cards sit close to guide height. */
.fs-stain-guide__stop .fs-btn { margin-bottom: 2px; padding: 9px 18px; font-size: .78rem; }
@media (max-width: 760px) {
	.fs-stain-guides {
		column-count: 1;
		width: auto;
		margin-left: 0;
	}
}

/* ---------- page-scoped polish ---------- */
/* The FAQ stays a compact collapsed accordion; just bring its display heading
   down to a proportionate size on this page. */
.fs-faq > h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.fs-wiz__panel.is-on { animation: none; }
	.fs-wiz__stain, .fs-wiz__fiber { transition: none; }
	.fs-wiz__stain:hover, .fs-wiz__fiber:hover { transform: none; }
}