/*
 * FAQs section (.bb-faq) — Figma 11217:3679.
 *
 * A heading and intro above two columns: the topic list (a white card, sticky beside
 * the questions at desktop, a row of scrolling chips at phone) and the topics
 * themselves, each a heading over a stack of <details> accordions.
 *
 * Every size, colour and border below is the value from the Figma node named in the
 * comment. The colours the mockup uses here are a shade off the theme.json palette, so
 * they are kept as their own variables rather than mapped onto the tokens.
 */

/*
 * The off-palette colours this frame uses (#4d2330 / #7a626a text, #fffdfc rows,
 * #d9bc9e and #ebd2a7 hairlines, #f3ddde highlight, #5f122a chevrons) resolve onto the
 * canonical palette; see docs/design-system.md.
 */

.bb-faq {
	padding: var( --bb-space-band ) var( --bb-bar-gutter );
}

/* Core's constrained layout centres every child; the section is left-aligned inside the
   shared content column instead. */
.bb-faq > * {
	max-width: var( --bb-container );
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Node 11217:3811 is 32px in Figma; it converges on the shared H2 role. */
.bb-faq__title.wp-block-heading {
	margin: 0;
}

/* Node 11217:3810 is 14/16 in Figma; it converges on the shared lead role. */
.bb-faq .bb-faq__intro {
	margin: var( --bb-space-head ) auto 0;
}

/* The shared 12-column grid (theme.css) with the design's 58px gutter; at 1280px and up
   the exact Figma tracks take over (300px card + 58px + the questions column). */
.bb-faq__layout.bb-grid {
	--bb-grid-gap: 58px;
	--bb-grid-row-gap: 32px;
	margin-top: var( --bb-space-intro );
}

/* ------------------------------------------------------------ topic list ---- */

/* 11217:4252 — 300px wide; the card chrome is the shared card role in theme.css. */
.bb-faq__nav {
	position: sticky;
	top: calc( var( --bb-header-h ) + 24px );
	margin-top: 19px;
	padding: var( --bb-card-pad-sm ) 0;
	overflow: hidden;
}

.bb-faq__nav-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-faq__nav-item + .bb-faq__nav-item {
	margin-top: 8px;
}

/* 11217:4181 — 50px rows; the label is the shared label role (11217:4182 is 11.5px). */
.bb-faq__nav-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 50px;
	padding: 0 25px 0 var( --bb-card-pad );
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.bb-faq__nav-link:hover,
.bb-faq__nav-link:focus-visible,
.bb-faq__nav-link.is-current {
	background: var( --bb-bg-alt );
	color: var( --bb-ink );
}

.bb-faq__nav-chevron {
	flex: none;
	width: 7px;
	height: 7px;
	border-top: var( --bb-border-w ) solid var( --bb-accent );
	border-right: var( --bb-border-w ) solid var( --bb-accent );
	transform: rotate( 45deg );
}

/* ---------------------------------------------------------- accordions ---- */

/* 39px between one topic's last row and the next topic's heading. */
.bb-faq__groups {
	display: flex;
	flex-direction: column;
	gap: 39px;
	min-width: 0;
}

/* The topic links jump here, so leave room for the fixed header. */
.bb-faq__group {
	scroll-margin-top: calc( var( --bb-header-h ) + 24px );
}

/* Type: the shared card-heading role (node 11217:4196). */
.bb-faq__group-title {
	margin: 0 0 25px;
}

/* 11217:4198 — the question line: body copy at semibold weight. */
.bb-main .bb-faq__q {
	font-family: var( --bb-font-body );
	font-size: var( --bb-fs-body );
	font-weight: 600;
	line-height: var( --bb-lh-body );
	color: var( --bb-ink );
}

/* The card chrome is the shared card role in theme.css (the SVG behind 11217:4256). */
.bb-faq__list {
	overflow: hidden;
}

.bb-faq__item + .bb-faq__item {
	border-top: var( --bb-border-w ) solid var( --bb-border-card );
}

/* 58px closed rows (11217:4203 and its siblings), 22px in from the left, the chevron
   25px from the right. The question line is 24px tall here against Figma's 17, so the
   22px top inset becomes 17px to keep the row exactly 58. */
.bb-faq__question {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding: 17px var( --bb-card-pad-sm );
	cursor: pointer;
	list-style: none;
}

.bb-faq__question::-webkit-details-marker {
	display: none;
}

.bb-faq__question:focus-visible {
	outline: var( --bb-focus-w ) solid var( --bb-focus );
	outline-offset: -4px;
}

/* An open row is 100px tall (11217:4197): the answer starts 50.5px down, so the summary
   keeps less space underneath it. */
.bb-faq__item[open] .bb-faq__question {
	padding-bottom: 9px;
}

/* 11217:4199 — the caret glyph. */
.bb-faq__icon {
	flex: none;
	width: 8px;
	height: 8px;
	margin-top: 3px;
	border-bottom: var( --bb-border-w ) solid var( --bb-accent );
	border-right: var( --bb-border-w ) solid var( --bb-accent );
	transform: rotate( 45deg );
	transition: transform 0.2s ease;
}

.bb-faq__item[open] .bb-faq__icon {
	margin-top: 7px;
	transform: rotate( -135deg );
}

/* Node 11217:4200 is 11.5/13 in Figma; it converges on the shared small role. The row
   closes 14px under the answer, which makes the open row 100px tall. */
.bb-faq__answer {
	padding: 0 var( --bb-card-pad-sm ) 14px;
}

.bb-faq__answer p {
	margin: 0;
	max-width: 70ch;
}

.bb-faq__answer p + p {
	margin-top: 13px;
}

/* ---------------------------------------------------------- responsive ---- */

/* 11217:4254 / 11217:4257 — a 300px topic card and the questions column, 58px apart. */
@media ( min-width: 1280px ) {
	.bb-faq__layout.bb-grid {
		grid-template-columns: 300px minmax( 0, 1fr );
	}

	.bb-faq__layout > .bb-col {
		grid-column: auto;
	}
}

/* The card only stays sticky while its grid area lasts, so the area is stretched to the
   row height and the card keeps its own content height inside it. */
@media ( min-width: 1025px ) {
	.bb-faq__nav {
		align-self: stretch;
		height: max-content;
	}
}

@media ( max-width: 1024px ) {
	.bb-faq__nav-link {
		padding: 0 20px;
	}
}

@media ( max-width: 781px ) {
	.bb-faq__layout.bb-grid {
		margin-top: 40px;
	}

	/* The card becomes a row of chips that scrolls sideways above the questions. */
	.bb-faq__nav {
		position: static;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.bb-faq__nav::-webkit-scrollbar {
		display: none;
	}

	.bb-faq__nav-list {
		display: flex;
		gap: 8px;
		width: max-content;
		padding-inline: 1px;
	}

	.bb-faq__nav-item + .bb-faq__nav-item {
		margin-top: 0;
	}

	.bb-faq__nav-link {
		min-height: 44px;
		padding: 12px 16px;
		border: var( --bb-border-w ) solid var( --bb-border-card );
		border-radius: var( --bb-radius-pill );
		background: var( --bb-white );
		white-space: nowrap;
	}

	.bb-faq__nav-chevron {
		display: none;
	}

	.bb-faq__groups {
		gap: 36px;
	}

	.bb-faq__question {
		padding: 16px 18px;
	}

	.bb-faq__answer {
		padding: 0 18px 16px;
	}
}