/*
 * Guided Product Selector.
 * Loaded only on the page carrying the [treg_product_selector] shortcode,
 * after style.css and responsive-fixes.css.
 *
 * Built on the theme's own tokens. The colour and font tokens and the radius
 * scale are global, in :root in style.css, so this follows whichever way the
 * square-or-rounded decision lands without being touched.
 *
 * The neutrals below are local rather than the --pdp-* ones: those are defined
 * in css/product-detail.css, which only loads on V5 product pages, so reaching
 * for them here would resolve to nothing.
 */

/* ------------------------------------------------- The page template */

/*
 * The Guided Product Selector page template, where the quiz is the whole
 * page. The default page template puts content in a column beside the blog
 * sidebar; here it gets the full measure and the quiz centres inside it on
 * its own max-width.
 */
.selector-page__band {
	padding: 56px 0 72px;
}

.selector-page__band--editor {
	padding-top: 0;
}

/* Editor copy under the quiz lines up with it rather than the page. */
.selector-page__editor {
	max-width: 860px;
	text-align: left;
}

@media only screen and (max-width: 560px) {

	.selector-page__band {
		padding: 32px 0 48px;
	}
}

/*
 * The script hides steps and cards with the `hidden` property. `[hidden]`
 * lives in the user-agent stylesheet, so ANY author-level display rule
 * outranks it — and the theme sets one on these elements. Without this the
 * property is set correctly and nothing moves on screen, which is the same
 * trap .pdp-tabs and .treg-pdp-docs already carry a guard for.
 */
.treg-selector [hidden] {
	display: none !important;
}

/*
 * No script: put the questions and the recommendations back.
 *
 * The markup ships with everything after the first question hidden, so the
 * page paints as the quiz rather than as the whole flow at once. That is only
 * correct if the script is going to arrive and take over. The gate class in
 * the head says it will; without it this undoes the hiding and the visitor
 * gets every question and every recommendation under its own heading, with
 * working links.
 *
 * More specific than the rule above on purpose, so it wins for these two.
 */
html:not(.treg-selector-js) .treg-selector__step[hidden],
html:not(.treg-selector-js) .treg-selector__add[hidden],
html:not(.treg-selector-js) .treg-selector__result[hidden]:not(.treg-selector__result--none) {
	display: block !important;
}

.treg-selector {
	--sel-ink: #262524;
	--sel-gray: #6b6661; /* #156: was #7c7770, 4.4:1 on white */
	--sel-line: #d5d0c8;
	--sel-muted: #f5f3ef;

	/*
	 * The photo frame. Dashed, and it shows through wherever a photograph is
	 * missing or has not loaded, so an answer without one reads as waiting
	 * for artwork rather than as broken.
	 */
	--sel-frame: #d8d5cc;
	--sel-frame-bg: #f4f2ed;

	/*
	 * style.css sets `text-align: center` on body and the shortcode can sit
	 * in any container, so this cannot rely on a wrapper to have reset it.
	 */
	text-align: left;
	max-width: 860px;
	margin: 0 auto;
	color: var(--sel-ink);
	font-family: var(--font-body);
}

/* -------------------------------------------------------------------- Intro */

.treg-selector__eyebrow {
	display: block;
	font-family: var(--font-heading);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-primary-dark);
}

.treg-selector__title {
	margin: 10px 0 0;
	font-family: var(--font-heading);
	font-size: clamp(26px, 3.2vw, 36px);
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--sel-ink);
}

.treg-selector__lead {
	margin: 10px 0 0;
	max-width: 62ch;
	font-size: 17px;
	line-height: 1.55;
}

.treg-selector__time {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--sel-gray);
}

/* ----------------------------------------------------------------- Progress */

.treg-selector__progress {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 28px 0 20px;
}

.treg-selector__bar {
	flex: 1;
	height: 6px;
	overflow: hidden;
	border-radius: var(--pdp-radius-pill);
	background: var(--sel-line);
}

.treg-selector__bar span {
	display: block;
	width: 0;
	height: 100%;
	background: var(--color-primary-dark);
	transition: width 0.25s ease;
}

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

	.treg-selector__bar span {
		transition: none;
	}
}

.treg-selector__step-label {
	flex: 0 0 auto;
	font-size: 12.5px;
	color: var(--sel-gray);
	white-space: nowrap;
}

/* ---------------------------------------------------------------- Questions */

/*
 * Without the script every step is on the page at once, so each needs air and
 * a rule between it and the next. With the script only one is ever visible and
 * the rule sits above nothing, which is why it is a top border rather than a
 * bottom one: the first visible element never draws it.
 */
.treg-selector__step + .treg-selector__step,
.treg-selector__step + .treg-selector__result {
	margin-top: 36px;
	padding-top: 36px;
	border-top: 1px solid var(--sel-line);
}

.treg-selector--ready .treg-selector__step + .treg-selector__step,
.treg-selector--ready .treg-selector__step + .treg-selector__result {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.treg-selector__q {
	margin: 0 0 4px;
	font-family: var(--font-heading);
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 700;
	line-height: 1.2;
	/* Headlines in caps, Kaitlyn's call (#138). */
	text-transform: uppercase;
}

.treg-selector__help {
	margin: 0 0 16px;
	max-width: 70ch;
	color: var(--sel-ink);
}

/*
 * The cards fill the row rather than capping their width. A square photograph
 * in a capped card leaves a two-answer step as two small squares floating in
 * the middle of an 860px column; minmax still stops the three- and five-answer
 * steps collapsing on a narrow screen.
 */
.treg-selector__options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));

	/* Every card the same height, whatever the length of its description. */
	grid-auto-rows: 1fr;
	gap: 12px;
	margin-top: 8px;
}

.treg-selector__option {
	appearance: none;
	display: flex;
	flex-direction: column;
	gap: 6px;

	/* style.css puts margin-left on any button following another button. */
	margin: 0;
	padding: 18px;
	min-height: 0;
	border: 1px solid var(--sel-line);
	border-radius: var(--pdp-radius-lg);
	background: #fff;
	color: var(--sel-ink);
	font-family: inherit;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.treg-selector__option:hover,
.treg-selector__option:focus-visible {
	border-color: var(--color-primary);
	background: #fff;
	color: var(--sel-ink);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
	transform: translateY(-1px);
}

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

	.treg-selector__option:hover,
	.treg-selector__option:focus-visible {
		transform: none;
	}
}

.treg-selector__option[hidden] {
	display: none;
}

/*
 * #218: a step with only one answer (outdoor, step 3) stretches its card
 * across the whole column, and a square photo that wide was about 615px tall.
 * The square is only there to line up cards on the same row, so a lone card
 * takes the result card's 16:7 band instead. The JS sets the class.
 */
.treg-selector__options--single .treg-selector__photo {
	aspect-ratio: 16 / 7;
}

/*
 * The icons ship as SVG drawn with stroke="currentColor" and are inlined, so
 * the colour here is what they take. Gold against the dark label, as the
 * mockup has them.
 */
/*
 * Grey rather than gold, as the approved wireframe renders them. The same
 * grey as the description under it, which is the pairing the wireframe has:
 * the icon is a marker for the answer, not a highlight on it.
 */
.treg-selector__option .treg-selector__icon {
	display: block;

	/* With the 6px column gap above it, 10px under the photograph. */
	margin-bottom: 4px;
	color: var(--sel-gray);
	line-height: 0;
}

.treg-selector__icon svg {
	width: 38px;
	height: 38px;
	display: block;
}

/* ------------------------------------------------------- Answer photography */

/*
 * A square frame that crops whatever is put in it, so a landscape and a
 * portrait answer still line up on the same row.
 *
 * The frame carries the placeholder styling and `overflow: hidden`; the image
 * is absolutely positioned inside it. That way the card reserves the space
 * before the photograph has loaded, so nothing below it moves, and a file that
 * fails to load leaves a tidy grey square rather than a broken-image icon.
 */
.treg-selector__photo {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;

	/* With the 6px column gap below it, 12px above the icon. */
	margin: 0 0 6px;
	overflow: hidden;
	border: 1px dashed var(--sel-frame);
	border-radius: var(--pdp-radius);
	background: var(--sel-frame-bg);
}

.treg-selector__photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * The brand lockup on question one: by hand is a Bernard job, with a robot is
 * a Tregaskiss one, which the wording alone does not say. The files are 60px
 * tall on a white ground and are drawn at half that.
 *
 * The fixed-height box is what keeps the two cards level. The two lockups are
 * different shapes, so left to themselves they resolve to different heights
 * once the global `img { max-width: 100% }` applies, and every row below them
 * — the photograph most visibly — sits lower on one card than the other. The
 * box is always 22px and the artwork is letterboxed inside it.
 */
.treg-selector__brandbox {
	display: flex;
	align-items: center;
	height: 22px;
	margin-bottom: 12px;
}

.treg-selector__brand {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	opacity: 0.92;
}

/*
 * The segment answers, as bullets. They are the approved descriptors split at
 * the commas they already had; as one bold line each they ran to three lines
 * of solid bold on a narrow card.
 *
 * style.css indents every list item by 50px for its own bullet, hence the
 * reset before drawing one at 15px.
 */
.treg-selector__opt-list {
	margin: 0 0 2px;
	padding: 0;
	list-style: none;
}

.treg-selector__opt-list li {
	position: relative;
	margin: 0 0 3px;
	padding: 0 0 0 15px;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--sel-ink);
}

.treg-selector__opt-list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.62em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--color-primary-dark);
}

.treg-selector__option b {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

.treg-selector__option span {
	font-size: 13.5px;

	/* Regular. It is the qualifier under the answer, not part of it. */
	font-weight: 400;
	line-height: 1.45;
	color: var(--sel-gray);
}

/* ------------------------------------------------------------------ Results */

.treg-selector__result {
	padding: 26px;
	border: 1px solid var(--sel-line);
	border-radius: var(--pdp-radius-lg);
	background: var(--sel-muted);
}

.treg-selector--ready .treg-selector__result + .treg-selector__result {
	margin-top: 0;
}

.treg-selector__result + .treg-selector__result {
	margin-top: 20px;
}

/*
 * The family photograph across the top of a result card. A wide band rather
 * than a square: it is scene-setting under the heading, not the subject.
 */
.treg-selector__rec-photo {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 7;
	margin: 0 0 18px;
	overflow: hidden;
	border: 1px dashed var(--sel-frame);
	border-radius: var(--pdp-radius);
	background: var(--sel-frame-bg);
}

.treg-selector__rec-photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.treg-selector__rec-name {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 6px 0 8px;
	font-family: var(--font-heading);
	font-size: clamp(22px, 2.8vw, 30px);
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
}

/* Same label as the Coming soon flags (#117, #137). */
.treg-selector__timing {
	padding: 4px 10px;
	border-radius: var(--pdp-radius-pill);
	background: var(--color-button, #956a1b);
	color: var(--color-button-text, #fff);
	font-family: var(--font-heading);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.treg-selector__rec-desc {
	margin: 0;
	max-width: 62ch;
	line-height: 1.55;
}

.treg-selector__why {
	margin-top: 18px;
}

/*
 * #108: a checklist in two columns rather than pill chips (Serj's design).
 */
.treg-selector__chips {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, max-content));
	column-gap: 72px;
	row-gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

/* style.css indents every list item by 50px for its bullet. */
.treg-selector__chips li {
	position: relative;
	margin: 0;
	padding-left: 28px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--sel-ink);
}

.treg-selector__chips li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 16px;
	height: 16px;
	background-color: var(--color-primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.treg-selector__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}

.treg-selector__ctas .button,
.treg-selector__ctas .btn-outline {
	margin: 0;
	text-transform: var(--btn-case, none);
	letter-spacing: var(--btn-tracking, normal);
}

/*
 * #108: everything but the one gold button is a plain white button with dark
 * text (Serj's design), so the gold one is clearly the next step. Two classes
 * deep to beat .btn-outline--primary's gold.
 */
.treg-selector .treg-selector__ctas .btn-outline,
.treg-selector .treg-selector__nav .btn-outline {
	background: #fff;
	border: 1px solid var(--sel-line);
	color: var(--sel-ink);
	/* The shared button type (#117). */
	font-family: var(--btn-font, var(--font-body));
	font-weight: var(--btn-weight, 600);
}

.treg-selector .treg-selector__ctas .btn-outline:hover,
.treg-selector .treg-selector__ctas .btn-outline:focus-visible,
.treg-selector .treg-selector__nav .btn-outline:hover,
.treg-selector .treg-selector__nav .btn-outline:focus-visible {
	background: #fff;
	border-color: var(--sel-ink);
	color: var(--sel-ink);
}

.treg-selector__small {
	margin: 18px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--sel-gray);
}

/* ---------------------------------------------------- Additional solutions */

/*
 * Sits directly under whichever card is showing, and reads as a note attached
 * to it rather than a second recommendation competing with it: cream and gold
 * against the card's grey, and a text link rather than a button.
 */
.treg-selector__add {
	margin-top: 16px;
	padding: 14px 16px;
	border: 1px solid #e8d9ae;
	border-radius: var(--pdp-radius-lg);
	background: #faf6ea;
	text-align: left;
}

/* Inside a card once the script has placed it there. */
.treg-selector__result .treg-selector__add {
	margin-top: 18px;
	background: #fff;
}

.treg-selector__add-lab {
	display: block;
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: var(--color-primary-dark);
}

.treg-selector__add h4 {
	margin: 5px 0 6px;
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
}

.treg-selector__add p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
}

.treg-selector__add-cta {
	display: inline-block;
	margin-top: 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--color-primary-dark);
	text-decoration: none;
}

.treg-selector__add-cta:hover,
.treg-selector__add-cta:focus-visible {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------- Nav */

.treg-selector__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.treg-selector__result .treg-selector__nav {
	padding-top: 16px;
	border-top: 1px solid var(--sel-line);
}

.treg-selector__nav .btn-outline {
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
}

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

@media only screen and (max-width: 560px) {

	.treg-selector__options {
		grid-template-columns: 1fr;

		/* Stacked, a shared height only adds space under the shorter ones. */
		grid-auto-rows: auto;
	}

	.treg-selector__result {
		padding: 20px 16px;
	}

	.treg-selector__ctas .button,
	.treg-selector__ctas .btn-outline {
		width: 100%;
		text-align: center;
	}

	/* One column on a phone; two pushes the longer points onto three lines. */
	.treg-selector__chips {
		grid-template-columns: 1fr;
	}
}

/* #165: headings receive focus after each answer so keyboard and screen-reader
   users land on the new question. They aren't controls, so no outline. */
.treg-selector [tabindex="-1"]:focus {
	outline: none;
}