/**
 * sigma/accordion (P5). Loaded only where the block renders (block.json
 * "style" field). The schema-less twin of blocks/faq/style.css --
 * duplicated under this block's own class names rather than shared, per
 * CONVENTIONS.md file ownership (this block owns blocks/accordion/ 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.
 */

.accordion {
	/* Comp column: questions start at x=150, the band is 1440 wide. */
	--accordion-max-width: 1140px;
	/* 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). */
	--accordion-band-inset: 14px;
	/* Below the last rule the comp leaves 101px: 45 (tail) + 8 + 48. */
	--accordion-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). */
	--accordion-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. */
	--accordion-trigger-pad: var(--space-xs);
	/* The rule sits 13px under the question line: trigger pad + this. */
	--accordion-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. */
	--accordion-rule-length: 200px;
	--accordion-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. */
	--accordion-item-tail: 45px;
	/* The comp's open item is 3px tighter after its answer than a closed
	   one is after its rule. */
	--accordion-open-tail: 42px;
	/* Answer starts at x=205 against the question's x=150. */
	--accordion-answer-indent: 55px;
	/* 20px Light on a 28px pitch, measured on the comp's open answer. */
	--accordion-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. */
	--accordion-arrow-drop: 5px;
	--accordion-arrow-gap: 18px;
	/* The comp's title is centred on x=744, not on the column's 720:
	   left padding of twice that offset keeps text-align: center and
	   moves the centre by 24px. */
	--accordion-title-shift: var(--space-xl);
	/* Question size below 768 -- 30px wraps every second question there. */
	--accordion-question-size-mobile: 1.375rem;

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

.accordion__title {
	margin: 0 0 var(--accordion-title-gap);
	padding-left: var(--accordion-title-shift);
	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.
 */
.accordion__title-accent {
	font-style: normal;
	color: var(--color-gold);
}

.accordion__item {
	padding-bottom: var(--accordion-item-tail);
}

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

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

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

.accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--accordion-arrow-gap);
	width: 100%;
	min-height: 44px;
	box-sizing: border-box;
	margin: 0;
	padding: var(--accordion-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;
}

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

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

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

.accordion__panel[hidden] {
	display: none;
}

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

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

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

.accordion__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) {
	.accordion {
		--accordion-title-shift: 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) {
	.accordion {
		--accordion-title-gap: var(--space-xl);
		--accordion-rule-length: 100%;
		--accordion-answer-indent: 0px;
		--accordion-item-tail: var(--space-lg);
		--accordion-open-tail: var(--space-lg);
		--accordion-arrow-gap: var(--space-sm);
	}

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

	.accordion__trigger {
		font-size: var(--accordion-question-size-mobile);
	}
}