/**
 * sigma/faq. Loaded only where the block renders (block.json "style"
 * field). Same rules as blocks/accordion/style.css -- duplicated under
 * this block's own class names rather than shared, per CONVENTIONS.md
 * file ownership (this block owns blocks/faq/ only).
 *
 * Geometry is the comp's "Questions Our Sellers Often Ask" band, measured
 * in docs/qa/comp-spec/SPEC-sell-your-business.md S05 (1 unit = 1 CSS px
 * at 1440): a 1140px column at x=150..1290, the 70px title 58px below the
 * band's top, questions at 30px on a 100px pitch, each followed by a gold
 * arrow and underlined by a short 0.75px gold rule, the open answer at
 * 20px Light on a 28px pitch, indented 55px. The comp has no full-width
 * item rules and no plus/minus glyph -- the arrow is the same whether the
 * item is open or closed, and the open state shows only as the answer.
 *
 * The numbers below that have no token are the comp's own measurements,
 * kept in one place as block-scoped custom properties so the arithmetic
 * that produces the 100px pitch is readable rather than scattered.
 */

.faq {
	/*
	 * The comp draws this column 1140px wide, questions starting at x=150.
	 * We narrow it, and the reason is readability rather than taste: at
	 * 1140 the longest answer runs about 120 characters per line, against
	 * the 65-75 that prose is comfortable at, so the eye loses its place
	 * on the return sweep. 860 puts it near 75 and still clears the widest
	 * question ("What steps do you take to protect my confidentiality?",
	 * measured at 686px) with room to spare.
	 *
	 * It also settles how the band sits among its neighbours. The sections
	 * either side of it are centred, so a 1140px block hard against the
	 * left gutter read as though it had come loose. Narrower and centred,
	 * the block is symmetrical on the page while the questions keep the
	 * left alignment the comp gives them -- a list of differing lengths
	 * centred line by line is markedly harder to scan, which is why the
	 * comp aligns them left and why that part stays.
	 */
	--faq-max-width: 860px;
	/* Section spacing "tight" gives 48px; the comp's title ink starts
	   at 72px, which is a 70px/77px line box at 62px (measured against
	   the comp's own raster, not computed from font metrics). */
	--faq-band-inset: 14px;
	/* Below the last rule the comp leaves 101px: 45 (tail) + 8 + 48. */
	--faq-band-inset-bottom: var(--space-xs);
	/* Title line box bottom (62 + 77 = 139) to the first button top
	   (204: question line at 212 minus its 8px pad). */
	--faq-title-gap: 65px;
	/* 8px above and below the 33px question line: a 49px button, which
	   clears the 44px tap target and is part of the pitch sum below. */
	--faq-trigger-pad: var(--space-xs);
	/* The rule sits 13px under the question line: trigger pad + this. */
	--faq-rule-gap: 5px;
	/* The comp's five rules are 117..234px long (the open first item's is
	   202); one length, since nothing in the text predicts theirs. */
	--faq-rule-length: 200px;
	--faq-hairline: 0.75px;
	/* Rule to the next button, so the next question line lands 53px under
	   the rule once its own 8px pad is added. Pitch of a closed item:
	   49 (button) + 5 (rule gap) + 1 (rule: Chrome lays a 0.75px border
	   out as 1px at 1x) + 45 = 100, measured. */
	--faq-item-tail: 45px;
	/* The comp's open item is 3px tighter after its answer than a closed
	   one is after its rule. */
	--faq-open-tail: 42px;
	/* Answer starts at x=205 against the question's x=150. */
	--faq-answer-indent: 55px;
	/* 20px Light on a 28px pitch, measured on the comp's open answer. */
	--faq-answer-leading: 1.4;
	/* The arrow's centre sits on the question's x-height, 5px below the
	   line box centre at 30px. The comp's white between the question mark
	   and the shaft is 16..24px across the five items; 18px after the
	   advance width lands inside that range on every one. */
	--faq-arrow-drop: 5px;
	--faq-arrow-gap: 18px;
	/* The comp centres its title on x=744 rather than the column's 720,
	   and this padding reproduced that 24px offset inside the original
	   1140px column. With the column narrowed and deliberately centred on
	   the page, carrying the offset over would read as a title that has
	   slipped sideways -- the one thing the narrowing is meant to fix. So
	   the title now centres on the block it heads. */
	--faq-title-shift: 0px;
	/* How far the 70px title may overhang the narrowed list on each side.
	   It needs 914px to stay on one line against the list's 860, so 32px
	   a side covers it with a little to spare. Equal on both sides, so the
	   title stays centred on the list's axis. Zeroed below 1280, where the
	   band itself is narrower than the title wants and it wraps anyway. */
	--faq-title-bleed: var(--space-lg);
	/* Question size below 768 -- 30px wraps every second question there. */
	--faq-question-size-mobile: 1.375rem;

	box-sizing: border-box;
	max-width: var(--faq-max-width);
	margin-inline: auto;
	padding-block: var(--faq-band-inset) var(--faq-band-inset-bottom);
}

/*
 * 2026-09-07 fix (task 773, third of three home-page spacing
 * complaints, her own words: "these are actually two different
 * sections: testimonials and FAQ"). home.json box 7 stacks
 * sigma/testimonials directly over this block inside one shared
 * sigma/section, so they met with 0px between them, measured live.
 * Kept through the comp rebuild: harmless once the layout gives the FAQ
 * its own white section, and still the right gap if it does not.
 */
.testimonials + .faq {
	margin-block-start: var(--space-2xl);
}

.faq__title {
	margin: 0 0 var(--faq-title-gap);
	padding-left: var(--faq-title-shift);
	/*
	 * The title is allowed to be wider than the list it heads. At 70px it
	 * needs 914px to stay on one line, and the list is deliberately
	 * narrower than that for reading comfort -- without this the heading
	 * breaks into "Questions Our / Sellers Often Ask", splitting the
	 * phrase mid-thought where the comp keeps it whole. The negative
	 * margins let it overhang symmetrically, so it stays centred on the
	 * same axis as the list rather than shifting off it. It never exceeds
	 * the section's own gutters: at narrow widths the min() falls back to
	 * the available width and the heading wraps as it must.
	 */
	width: auto;
	margin-inline: calc(-1 * var(--faq-title-bleed));
	margin-bottom: var(--faq-title-gap);
	font-family: var(--font-serif);
	font-size: var(--text-h2);
	font-weight: var(--weight-serif-bold);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-heading);
	color: var(--color-navy);
	text-align: center;
}

/*
 * The comp sets "Questions" in the upright Bold, not the Bold Italic the
 * other comped headlines use for their gold phrase (zoomed on the vector
 * render: the Q, s and t are all upright). font-style is stated so a
 * theme-level em rule can never slant it.
 */
.faq__title-accent {
	font-style: normal;
	color: var(--color-gold);
}

.faq__item {
	padding-bottom: var(--faq-item-tail);
}

/* Open item (the first one on load, or any the visitor opens). Also the
   no-JavaScript state, where every panel is open. */
.faq__item:has(> .faq__panel:not([hidden])) {
	padding-bottom: var(--faq-open-tail);
}

.faq__heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

/* The short gold rule under every question, open or closed. */
.faq__heading::after {
	content: "";
	display: block;
	width: var(--faq-rule-length);
	max-width: 100%;
	margin-top: var(--faq-rule-gap);
	border-top: var(--faq-hairline) solid var(--color-gold);
}

/*
 * space-between, not flex-start: the arrow is the row's only affordance
 * and it has to sit in one place.
 *
 * Trailing the question text put it wherever that text happened to end.
 * Measured live on Exit Readiness at 1440, five questions in one list:
 * the arrows landed 0, 103, 339, 0 and 52px in from the right edge --
 * a 339px ragged edge down the side of the accordion, which reads as
 * broken alignment rather than as a list of controls.
 *
 * The comp does not draw this arrow at all (SPEC-sell-your-business has
 * the FAQ label and nothing else), so there is no measured position to
 * honour here; a right-aligned disclosure arrow is the convention every
 * accordion uses and it is what makes the column read as one control.
 *
 * The gap stays as the minimum space between a long question and its
 * arrow, so a question that fills the row still does not collide.
 */
.faq__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--faq-arrow-gap);
	width: 100%;
	min-height: 44px;
	box-sizing: border-box;
	margin: 0;
	padding: var(--faq-trigger-pad) 0;
	background: transparent;
	border: none;
	border-radius: var(--radius-none);
	box-shadow: var(--shadow-none);
	font-family: var(--font-serif);
	font-size: var(--text-h3);
	font-weight: var(--weight-serif-bold);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-heading);
	color: var(--color-navy);
	text-align: left;
	cursor: pointer;
}

.faq__trigger:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

.faq__icon {
	flex: 0 0 auto;
	display: block;
	width: 36px;
	height: 18px;
	margin-top: var(--faq-arrow-drop);
	color: var(--color-gold);
}

.faq__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.faq__panel[hidden] {
	display: none;
}

.faq__panel-inner {
	padding: var(--space-md) 0 0 var(--faq-answer-indent);
	font-family: var(--font-serif);
	font-size: var(--text-body);
	font-weight: var(--weight-serif-light);
	line-height: var(--faq-answer-leading);
	color: var(--color-navy);
}

.faq__panel-inner > *:first-child {
	margin-top: 0;
}

.faq__panel-inner > *:last-child {
	margin-bottom: 0;
}

.faq__panel-inner > * + * {
	margin-top: var(--space-sm);
}

/* The 24px title offset is a property of the 1140px column; once the
   column is narrower than that the title is simply centred. */
@media (max-width: 1279px) {
	.faq {
		--faq-title-shift: 0px;
		/* Below this width the band is narrower than the title wants, so
		   the overhang buys nothing and would only push the heading into
		   the section's gutters. */
		--faq-title-bleed: 0px;
	}
}

/*
 * Below 768 the comp's geometry has no answer: the 30px questions wrap,
 * the 55px indent eats a sixth of the width, and the 100px pitch reads as
 * gaps. Questions drop to 22px, the rule runs the full width, the answer
 * sits flush, and the tail shrinks with the type. The title follows
 * base.css's own h2 step-down to the statement size.
 */
@media (max-width: 767px) {
	.faq {
		--faq-title-gap: var(--space-xl);
		--faq-rule-length: 100%;
		--faq-answer-indent: 0px;
		--faq-item-tail: var(--space-lg);
		--faq-open-tail: var(--space-lg);
		--faq-arrow-gap: var(--space-sm);
	}

	.faq__title {
		font-size: var(--text-statement);
	}

	.faq__trigger {
		font-size: var(--faq-question-size-mobile);
	}
}