/* =============================================================================
   FAQ page (Claude Design FAQ.dc.html). Tokens only (guard: npm run guard:tokens).
   Off-scale design values are snapped to the token scale; breakpoints: the shared tokens (theme.json, theme.css).
   ============================================================================= */

/* ---- Hero: pink band, white postcard, Pinky ------------------------------- */
.wsp-sec.wsp-fq-hero { background: var(--c-pink); padding: var(--s-20) var(--wp--custom--section--pad-x); }
.wsp-fq-hero-card {
	position: relative; max-width: var(--wp--custom--maxw--narrow); margin: 0 auto;
	background: var(--c-white); border: 3px solid var(--c-navy); box-shadow: var(--sh-xl);
	padding: var(--s-12) var(--s-12);
}
.wsp-fq-hero-grid {
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
	gap: var(--s-10); align-items: center;
}
@media (min-width: 900px) { .wsp-fq-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wsp-fq-tag-wrap { display: inline-block; transform: rotate(-3deg); margin-bottom: var(--s-5); }
.wsp-fq-tag {
	display: inline-block; font-family: var(--f-label); font-size: var(--fs-sm); letter-spacing: var(--wp--custom--ls--button);
	text-transform: uppercase; padding: var(--s-1) var(--s-3); border: 2px solid var(--c-teal); color: var(--c-navy);
}
.wsp-fq-hero-title {
	font-family: var(--f-display); font-weight: 700; font-size: var(--wp--preset--font-size--display-card); line-height: 1;
	letter-spacing: var(--wp--custom--ls--hero); color: var(--c-navy); margin: 0 0 var(--s-6); text-wrap: balance;
}
.wsp-fq-hero-lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--c-ink); margin: 0 0 var(--s-8); max-width: 460px; }
.wsp-fq-hero-btns { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.wsp-fq-photo { position: relative; justify-self: end; width: 100%; max-width: 400px; }
.wsp-fq-photo-frame {
	aspect-ratio: 1 / 1; border: 3px solid var(--c-navy); box-shadow: var(--wp--preset--shadow--hover);
	background: var(--c-white); overflow: hidden;
}
/* Illustration: contain, not cover (Dev Context image rule). */
.wsp-fq-photo-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.wsp-fq-photo-stamp {
	position: absolute; right: calc(-1 * var(--s-5)); bottom: var(--s-5); transform: rotate(8deg);
	background: var(--c-white); border: 2px solid var(--c-navy); box-shadow: var(--sh-sm);
	padding: var(--s-1) var(--s-3); font-family: var(--f-label); font-size: var(--fs-sm);
	letter-spacing: var(--wp--custom--ls--button); color: var(--c-navy);
}

/* Tablet: text left, Pinky right, the buttons across the bottom (FAQ.dc.html 768–1024 layout, now 641–899). */
@media (min-width: 641px) and (max-width: 899px) {
	.wsp-sec.wsp-fq-hero { padding: var(--s-16) var(--wp--custom--section--pad-x-tablet); }
	.wsp-fq-hero-card { padding: var(--s-10) var(--s-8) var(--s-12); }
	.wsp-fq-hero-grid {
		grid-template-columns: minmax(0, 1fr) minmax(250px, 40%); column-gap: var(--s-10); row-gap: 0;
		grid-template-rows: 1fr auto auto auto 1fr auto; align-items: start;
	}
	.wsp-fq-hero-text { display: contents; }
	.wsp-fq-tag-wrap { grid-column: 1; grid-row: 2; justify-self: start; margin-bottom: var(--s-3); }
	.wsp-fq-hero-title { grid-column: 1; grid-row: 3; font-size: var(--wp--preset--font-size--display-band); margin-bottom: var(--s-4); }
	.wsp-fq-hero-lede { grid-column: 1; grid-row: 4; margin-bottom: 0; max-width: 440px; font-size: var(--fs-body); }
	.wsp-fq-hero-btns { grid-column: 1 / -1; grid-row: 6; margin-top: var(--s-8); flex-wrap: nowrap; }
	.wsp-fq-photo { grid-column: 2; grid-row: 1 / span 5; align-self: center; justify-self: stretch; max-width: none; margin-right: var(--s-5); }
}
@media (max-width: 640px) {
	.wsp-sec.wsp-fq-hero { padding: var(--s-12) var(--s-4) var(--wp--custom--section--pad-y-mobile); }
	.wsp-fq-hero-card { padding: var(--s-8) var(--s-6); box-shadow: var(--wp--custom--shadow--navy-6); }
	.wsp-fq-hero-grid { gap: var(--wp--custom--gap--grid); }
	.wsp-fq-hero-btns > * { flex: 1 1 100%; }
	.wsp-fq-photo { justify-self: center; max-width: 320px; margin-right: var(--s-4); }
}

/* ---- The list: search, chips, grouped accordion -------------------------- */
.wsp-fq-wrap { max-width: var(--wp--custom--maxw--text); margin: 0 auto; }
.wsp-fq-search {
	position: relative; display: flex; align-items: center; gap: var(--s-3);
	background: var(--c-cream); border: 3px solid var(--c-navy); box-shadow: var(--sh-lg);
	padding: 0 var(--s-5); margin-bottom: var(--s-5);
	transition: border-color var(--m-fast) var(--e-std), box-shadow var(--m-base) var(--e-std);
}
/* The DS field treatment on the whole field (Dev Context): pink border, pink shadow. */
.wsp-fq-search:focus-within { border-color: var(--c-pink); box-shadow: var(--wp--custom--shadow--pink-lg); }
.wsp-fq-search input {
	flex: 1; min-width: 0; border: none; background: transparent; padding: var(--s-4) 0;
	font-family: var(--f-body); font-size: var(--fs-md); color: var(--c-ink);
}
.wsp-fq-search input:focus { outline: none; }
.wsp-fq-search input::placeholder { color: var(--c-muted); }
.wsp-fq-search-icon { font-size: var(--fs-lede); color: var(--c-navy); }

.wsp-fq-chips { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-4); }
.wsp-fq-chip {
	font-family: var(--f-label); font-size: var(--fs-button); letter-spacing: var(--wp--custom--ls--button);
	padding: var(--s-3) var(--s-4); border: 2px solid var(--c-navy); background: var(--c-white); color: var(--c-navy); cursor: pointer;
	transition: background-color var(--m-base) var(--e-std), color var(--m-base) var(--e-std), transform var(--m-fast) var(--e-std), box-shadow var(--m-fast) var(--e-std);
}
.wsp-fq-chip:hover { transform: var(--lift); box-shadow: var(--sh-sm); }
.wsp-fq-chip[aria-pressed="true"] { background: var(--c-navy); color: var(--c-cream); }
.wsp-fq-count {
	font-family: var(--f-label); font-size: var(--fs-sm); letter-spacing: var(--wp--custom--ls--button);
	text-transform: uppercase; color: var(--c-muted); margin: 0 0 var(--s-10);
}

/* Collapsible wrappers: a group, a row and the empty state collapse (grid rows 1fr → 0fr) and fade
   instead of vanishing. Spacing lives inside the collapse so a hidden row takes no space at all. */
.wsp-fq-group, .wsp-fq-row, .wsp-fq-empty {
	display: grid; grid-template-rows: 1fr; opacity: 1; visibility: visible;
	transition: grid-template-rows var(--m-base) var(--e-std), opacity var(--m-base) var(--e-std), visibility var(--m-base) var(--e-std);
}
.wsp-fq-group.is-out, .wsp-fq-row.is-out, .wsp-fq-empty:not(.is-shown) {
	grid-template-rows: 0fr; opacity: 0; visibility: hidden;
	transition: grid-template-rows var(--m-base) var(--e-std), opacity var(--m-fast) var(--e-exit), visibility var(--m-base) var(--e-exit);
}
.wsp-fq-collapse { min-height: 0; overflow: hidden; }
/* Spacing is content inside the clip (a margin and a spacer, never padding on the clipped box,
   which would survive 0fr). The rows' hard shadow sits inside the clip too. */
.wsp-fq-group > .wsp-fq-collapse::after { content: ""; display: block; height: var(--s-12); }
.wsp-fq-row .wsp-faq-item { margin: 0 var(--s-1) var(--s-3) 0; }
.wsp-fq-group-title {
	font-family: var(--f-display); font-weight: 700; font-size: var(--wp--preset--font-size--display-row); line-height: var(--wp--custom--lh--tight);
	color: var(--c-navy); margin: 0 0 var(--s-5); padding-bottom: var(--s-3); border-bottom: 2px dashed var(--c-navy); text-wrap: balance;
}

.wsp-fq-empty-box { text-align: center; padding: var(--s-12) var(--s-6); background: var(--c-sand); border: 3px dashed var(--c-navy); }
.wsp-fq-empty-title { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-lg); color: var(--c-navy); margin: 0 0 var(--s-2); }
.wsp-fq-empty-text { font-size: var(--fs-md); color: var(--c-muted); margin: 0 0 var(--s-6); }
.wsp-fq-empty-btns { display: flex; justify-content: center; gap: var(--s-3); flex-wrap: wrap; }
.wsp-fq-empty-btns .wsp-btn { cursor: pointer; }

/* ---- Find your city -------------------------------------------------------- */
.wsp-fq-cities-inner { max-width: var(--wp--custom--maxw--content); margin: 0 auto; }
.wsp-fq-city-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6);
}
/* Six cities: 2 × 3 on a phone, 3 × 2 up to 1239, one row of six from wide (1240). Never 5 + 1. */
@media (min-width: 1240px) { .wsp-fq-city-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* The coloured hard shadow is a layer behind the tile (a shadow preset can't take a per-city colour). */
.wsp-fq-city { position: relative; display: flex; }
.wsp-fq-city::before {
	content: ""; position: absolute; inset: 0; transform: translate(var(--s-2), var(--s-2));
	background: var(--wsp-tile); transition: background-color var(--m-base) var(--e-std);
}
.wsp-fq-city-link {
	position: relative; flex: 1; display: flex; flex-direction: column; min-height: 190px;
	background: var(--c-cream); border: 3px solid var(--c-navy); padding: var(--s-6) var(--s-5);
	transition: transform var(--m-base) var(--e-std);
}
.wsp-fq-city:hover::before { background: var(--c-navy); }
.wsp-fq-city-link:hover { transform: var(--lift-lg); color: inherit; }
.wsp-fq-city-icon { font-size: var(--fs-lg); line-height: 1; margin-bottom: var(--s-3); }
.wsp-fq-city-name { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-quote); color: var(--c-navy); line-height: var(--wp--custom--lh--tight); }
.wsp-fq-city-tag {
	font-family: var(--f-label); font-size: var(--fs-button); letter-spacing: var(--wp--custom--ls--button); text-transform: uppercase;
	color: var(--c-navy); margin-top: var(--s-2); flex: 1;
}
.wsp-fq-city-go { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-button); color: var(--c-navy); margin-top: var(--s-4); }
.wsp-fq-cities-note { text-align: center; font-size: var(--fs-md); color: var(--c-muted); margin: var(--s-10) 0 0; }
.wsp-fq-cities-note a { color: var(--c-navy); font-weight: 700; }
.wsp-fq-cities-note a:hover { color: var(--c-pink); }
@media (max-width: 640px) {
	.wsp-fq-city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
	.wsp-fq-city-link { min-height: 160px; padding: var(--s-5) var(--s-3); }
}

/* ---- Still have questions -------------------------------------------------- */
.wsp-sec.wsp-fq-cta { background: var(--c-pink); color: var(--c-white); padding: var(--s-16) var(--wp--custom--section--pad-x); }
.wsp-fq-cta-inner {
	max-width: var(--wp--custom--maxw--content); margin: 0 auto;
	display: flex; align-items: center; justify-content: space-between; gap: var(--s-6) var(--s-12); flex-wrap: wrap;
}
.wsp-fq-cta-copy { flex: 1 1 420px; min-width: 0; }
.wsp-fq-cta-title {
	font-family: var(--f-display); font-weight: 700; font-size: var(--fs-2xl); line-height: 1.1;
	color: var(--c-white); margin: 0 0 var(--s-2); text-wrap: balance;
}
.wsp-fq-cta-text { font-size: var(--fs-body); line-height: 1.55; max-width: var(--wp--custom--maxw--prose); margin: 0; text-wrap: pretty; }
.wsp-fq-cta-row { display: flex; gap: var(--s-3); flex-wrap: wrap; }
@media (min-width: 641px) and (max-width: 899px) { .wsp-sec.wsp-fq-cta { padding: var(--s-16) var(--wp--custom--section--pad-x-tablet); } }
@media (max-width: 640px) {
	.wsp-sec.wsp-fq-cta { padding: var(--s-10) var(--wp--custom--section--pad-x-mobile); }
	.wsp-fq-cta-title { font-size: var(--fs-xl); }
	.wsp-fq-cta-row > * { flex: 1 1 100%; }
}

/* ---- Sticky book bar (below desktop): slides up once the hero has gone, back down at the top ---- */
.wsp-fq-sticky { display: none; }
@media (max-width: 899px) {
	body { padding-bottom: calc(var(--s-16) + var(--s-3)); }
	.wsp-fq-sticky {
		display: block; position: fixed; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); z-index: var(--wp--custom--z--header);
		background: var(--c-pink); color: var(--c-white); text-align: center; text-transform: uppercase;
		font-family: var(--f-label); font-size: var(--fs-md); letter-spacing: var(--wp--custom--ls--button);
		padding: var(--s-4) var(--s-5); border: 3px solid var(--c-navy); box-shadow: var(--sh-md);
		transform: translateY(calc(100% + var(--s-6))); opacity: 0; visibility: hidden;
		transition: transform var(--m-base) var(--e-exit), opacity var(--m-fast) var(--e-exit), visibility var(--m-base) var(--e-exit);
	}
	.wsp-fq-sticky.is-shown {
		transform: none; opacity: 1; visibility: visible;
		transition: transform var(--m-slow) var(--e-enter), opacity var(--m-base) var(--e-enter), visibility var(--m-slow) var(--e-enter);
	}
	.wsp-fq-sticky:hover { color: var(--c-white); }
}