/*
 * The Crypto Secret — the standalone FAQ page (Story 4.3).
 *
 * Source of truth: design/canvas/FAQ.dc.html — a sticky intro column beside
 * the seven-item accordion, then a black CTA card.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * WHAT THIS FILE CONSUMES RATHER THAN RE-DECLARES
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * sections.css owns .tcs-band / .tcs-band--cream / the full-bleed mechanics
 * and .tcs-band__inner(--narrow). motion.css owns .tcs-btn / .tcs-btn--orange
 * / .tcs-btn__shimmer / .tcs-row(:hover). tokens.css owns every value: no
 * literal below duplicates a number that already has a name there except
 * where noted (this page introduces its own grid geometry, which has no
 * home in any earlier story's token block).
 *
 * THE ACCORDION CLASSES (`.tcs-faq*`) ARE DELIBERATELY PORTABLE. The
 * deferred home-FAQ spec (deferred-work.md:73-75) drops the same
 * tcs_faq_render() markup into front-page.php:2653 unchanged, so nothing
 * here scopes an accordion rule to `.tcs-faq-page` — every `.tcs-faq*` rule
 * works standing alone, on any cream or black ground, exactly as it does on
 * this page.
 *
 * Registered in tcs_child_stylesheets() AFTER tcs-delivery (functions.php),
 * per the parallel contract's file-ownership rule for Story 4.3.
 */

/* ===========================================================================
 * 1. THE PAGE SHELL — sticky intro + accordion column.
 *
 * FAQ.dc.html:48 draws a 340px intro column against the accordion column,
 * 70px apart. Neither value exists as a token anywhere in this codebase
 * (this is the first page with a two-column intro/content split at these
 * proportions), so both are literals here rather than invented names for a
 * relationship no other rule shares.
 * ========================================================================= */

.tcs-faq-page__inner {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 70px;
	align-items: start;
}

.tcs-faq-page__intro {
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: sticky;
	top: calc(var(--tcs-header-h, 80px) + 24px); /* clears the sticky header (js/header.js) */
}

.tcs-faq-page__title {
	margin: 0;
	font-size: var(--tcs-fs-page-title);
	line-height: var(--tcs-lh-page-title);
	letter-spacing: var(--tcs-ls-page-title);
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-black);
}

.tcs-faq-page__lede {
	margin: 0;
	font-size: var(--tcs-fs-body);
	line-height: var(--tcs-lh-body);
	color: var(--tcs-body);
}

/*
 * The intro's mailto link. RESOLVED, NOT THE ARTBOARD'S ORANGE: the spec's
 * own Resolved log is explicit — DESIGN.md:183 states orange fails contrast
 * as a link colour on cream, and delivery.css:81,251 already establishes
 * --tcs-amber as this codebase's house link colour on cream. Flagged there
 * as a discrepancy from the artboard, not silently "fixed" — the artboard's
 * intent (an accent-coloured link) survives; only the exact hue changes.
 */
.tcs-faq-page__mailto {
	color: var(--tcs-amber);
	font-weight: var(--tcs-fw-semibold);
	/*
	 * The 44px tap floor (Story 4.5's sweep caught this at 20px tall).
	 * inline-flex keeps it in the intro's sentence flow while the box
	 * grows to the floor — the artboards' own assurance-link pattern.
	 */
	display: inline-flex;
	align-items: center;
	min-height: var(--tcs-tap-min);
	vertical-align: middle;
}

.tcs-faq-page__column {
	display: flex;
	flex-direction: column;
}

/* ===========================================================================
 * 2. THE ACCORDION — portable to the home page unchanged.
 *
 * FAQ.dc.html:54-63: a white bordered card per item, 26px 28px inside,
 * 13px between the question row and the answer, 10px between cards.
 * ========================================================================= */

.tcs-faq {
	display: flex;
	flex-direction: column;
}

.tcs-faq__item {
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-border);
	border-radius: var(--tcs-radius-md);
	padding: 26px 28px;
	margin-bottom: 10px;
}

.tcs-faq__q {
	margin: 0;
}

.tcs-faq__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	min-height: var(--tcs-tap-min);
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font-family: var(--tcs-font);
	font-size: 20px;
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: -0.024em;
	color: var(--tcs-black);
	text-align: left;
	cursor: pointer;
}

/*
 * GeneratePress's inline `button:hover, button:focus` rule (#3f4047 ground,
 * white text) lands on this <button> the moment it is clicked, painting the
 * whole question row grey. The trigger is a bare text row, so every
 * interactive state keeps the transparent ground; hover/open are signalled
 * by the amber question colour and the orange icon instead.
 */
.tcs-faq__trigger:hover,
.tcs-faq__trigger:focus,
.tcs-faq__trigger:active {
	background: transparent;
	color: var(--tcs-black);
	box-shadow: none;
}

.tcs-faq__trigger:hover {
	color: var(--tcs-amber);
}

.tcs-faq__trigger:focus-visible {
	outline: 2px solid var(--tcs-orange);
	outline-offset: 3px;
}

/*
 * THE PLUS/MINUS ICON. Drawn from two pseudo-elements (a permanent
 * horizontal bar, a vertical bar that rotates) rather than swapped SVGs —
 * transform is the one property this project's motion contract allows to
 * animate here, and a rotation is exactly what turns a plus into a minus
 * with no layout shift and no second icon asset.
 */
.tcs-faq__icon {
	position: relative;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

.tcs-faq__icon::before,
.tcs-faq__icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--tcs-orange);
	transform: translate(-50%, -50%);
}

.tcs-faq__icon::before {
	width: 14px;
	height: 1.9px;
}

.tcs-faq__icon::after {
	width: 1.9px;
	height: 14px;
	transition: transform var(--tcs-dur-btn-hover) var(--tcs-ease-reveal);
}

.tcs-faq__item.is-open .tcs-faq__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.tcs-faq__item:not(.is-open) .tcs-faq__icon::before,
.tcs-faq__item:not(.is-open) .tcs-faq__icon::after {
	background: var(--tcs-muted);
}

/*
 * THE ANSWER PANEL. WITHOUT JS EVERY ANSWER IS VISIBLE — the spec's own
 * Always constraint. This rule hides an answer ONLY under
 * `html.tcs-faq-ready`, the class js/faq.js sets as its first statement
 * (mirroring nav.js's `.tcs-nav-ready` contract exactly): no JS, blocked JS,
 * or a script that throws before that first line all leave every answer
 * rendered open, which is the honest, accessible default state.
 *
 * ONLY OPACITY AND TRANSFORM ANIMATE, per the motion contract — the panel's
 * own height is never transitioned; collapsing to display:none is instant,
 * and the opacity/translateY only decorates the OPEN transition.
 */
.tcs-faq__a {
	margin-top: 13px;
	font-size: var(--tcs-fs-body);
	line-height: 1.68;
	color: var(--tcs-body);
	max-width: 620px;
}

.tcs-faq__a p {
	margin: 0;
}

.tcs-faq__a a {
	color: var(--tcs-amber);
	font-weight: var(--tcs-fw-semibold);
}

html.tcs-faq-ready .tcs-faq__item:not(.is-open) .tcs-faq__a {
	display: none;
}

html.tcs-faq-ready .tcs-faq__item.is-open .tcs-faq__a {
	animation: tcs-faq-open var(--tcs-dur-card-hover) var(--tcs-ease-reveal) both;
}

@keyframes tcs-faq-open {

	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ===========================================================================
 * 3. THE CTA CARD — FAQ.dc.html:64-71.
 * ========================================================================= */

.tcs-faq-page__cta {
	background: var(--tcs-black);
	color: var(--tcs-cream);
	border-radius: var(--tcs-radius-lg);
	padding: 34px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	margin-top: 22px;
}

.tcs-faq-page__cta-copy {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.tcs-faq-page__cta-title {
	font-size: 24px;
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: -0.028em;
}

.tcs-faq-page__cta-price-row {
	display: flex;
	align-items: baseline;
	gap: 11px;
}

.tcs-faq-page__cta-price-now {
	font-size: 30px;
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: -0.038em;
}

.tcs-faq-page__cta-price-was {
	font-size: 17px;
	font-weight: var(--tcs-fw-medium);
	color: var(--tcs-body-dark);
}

.tcs-faq-page__cta-meta {
	font-size: 13px;
	color: var(--tcs-muted);
}

.tcs-faq-page__cta-button {
	white-space: nowrap;
	padding: 17px 32px;
	font-size: 16px;
}

/* ===========================================================================
 * 4. MOBILE — 768px and below, matching every other band's own breakpoint.
 *
 * At 390 the intro stops being sticky (spec Resolved log) and the page goes
 * single column.
 * ========================================================================= */

@media (max-width: 768px) {

	.tcs-faq-page__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.tcs-faq-page__intro {
		position: static;
		top: auto;
	}

	.tcs-faq__item {
		padding: 20px;
	}

	.tcs-faq__trigger {
		font-size: 17px;
		gap: 16px;
	}

	.tcs-faq-page__cta {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		padding: 24px;
	}

	.tcs-faq-page__cta-button {
		width: 100%;
	}
}

/* ===========================================================================
 * 5. REDUCED MOTION — resolves to the final (open) value, never invisible.
 * ========================================================================= */

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

	html.tcs-faq-ready .tcs-faq__item.is-open .tcs-faq__a {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.tcs-faq__icon::after {
		transition: none !important;
	}
}