/**
 * P9 FAQ accordion on the Horizon band (Figma Home 121:1414, Board 170:3081,
 * Events 210:6466).
 *
 * Skin for the parent's kds/accordion (core/details; markup, exclusive-open
 * injection and a11y semantics untouched), opt-in by `.lts-faq` on the accordion
 * group so the parent's hairline rows are never restyled. Pattern lts/faq wraps it
 * in `.lts-faq-band` (Horizon, full width, left Tide H2).
 *
 * Drawn (1440): band 633 tall, H2 at y101 (Tide, 48/50), rows start 20px under it,
 * 1004 wide centred (x 218), white / Clear card, radius 16, 12px apart, closed row
 * 60 tall; question Medium 16 Deep at x+34; chevron 14x7 Tide at the right (36px
 * in), flipped when open; answer 15.2/19 under the question.
 * Derived: no ring around the chevron (parent), the answer is 16 / 1.4 (a body
 * token, not 15.2 / 1.25: tight lines are hard to read), hover = Tide Dark text,
 * focus = inset 3px ring (`--lts-focus-ring`), tablet / mobile padding.
 *
 * Specificity: parent rules are `.kd-accordion .wp-block-details ...` (up to
 * 0,3,2); every selector here adds `.lts-faq` (0,4,x) so order never decides.
 */

.lts-faq-band {
	padding-block: 6.3125rem 7.1875rem; /* 101 / 115 */
	padding-inline: var(--wp--custom--layout--gutter);
}

.lts-faq-band .lts-faq-band__title {
	margin-block: 0 1.25rem;
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.0417; /* 50 / 48 */
	text-align: left;
}

/* -- Rows --------------------------------------------------------------------- */

.kd-accordion.lts-faq {
	--lts-faq-body-size: var(--wp--preset--font-size--medium);
	--lts-faq-pad-x: 2.125rem; /* text at x+34 */
	--lts-faq-chevron: 14px;

	margin-block: 0;
}

.kd-accordion.lts-faq > .wp-block-details {
	border: 0;
	border-radius: 1rem;
	background-color: var(--wp--preset--color--surface);
}

.kd-accordion.lts-faq > .wp-block-details + .wp-block-details {
	margin-block-start: 0.75rem;
}

/* The last row keeps its radius (the parent zeroes only the border). */
.kd-accordion.lts-faq > .wp-block-details:last-of-type {
	border: 0;
}

.kd-accordion.lts-faq .wp-block-details > summary {
	gap: 1rem;
	padding-block: 1.0625rem; /* 26.4 line + 34 = 60.4 closed row */
	padding-inline: var(--lts-faq-pad-x) 2.25rem; /* chevron 36px from the edge */
	border-radius: 1rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.65; /* 26.4 / 16 */
	color: var(--wp--preset--color--contrast);
}

.kd-accordion.lts-faq .wp-block-details[open] > summary {
	padding-block: 1.1875rem 0.8125rem; /* question sits 4px lower when open (Figma) */
	color: var(--wp--preset--color--contrast);
}

.kd-accordion.lts-faq .wp-block-details > summary:hover {
	color: var(--wp--preset--color--accent-2);
}

/* Keyboard focus: 3px ring inside the row (Tide Dark on white 5.5:1; the row edge
   against Horizon is white, so the ring is never on the band itself). */
.kd-accordion.lts-faq .wp-block-details > summary:focus-visible {
	outline: 3px solid var(--lts-focus-ring);
	outline-offset: -3px;
	border-radius: 1rem;
}

/* -- Chevron: one 14x7 Tide glyph (the parent's ring + glyph pair is dropped) --- */

.kd-accordion.lts-faq .wp-block-details > summary::before {
	display: none;
}

.kd-accordion.lts-faq .wp-block-details > summary::after {
	flex: none;
	inline-size: var(--lts-faq-chevron);
	block-size: calc(var(--lts-faq-chevron) / 2 + 1px);
	border: 0;
	border-radius: 0;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: center / contain no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
	mask: center / contain no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
	transition: transform var(--kd-transition-base);
}

.kd-accordion.lts-faq .wp-block-details[open] > summary::after {
	background-color: var(--wp--preset--color--primary);
	transform: rotate(180deg);
}

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

.kd-accordion.lts-faq .wp-block-details > :not(summary) {
	max-width: calc(40rem + var(--lts-faq-pad-x)); /* Figma answer box 633 */
	padding-inline: var(--lts-faq-pad-x) 0;
	font-size: var(--lts-faq-body-size);
	line-height: 1.4;
	color: var(--wp--preset--color--body-ink);
}

.kd-accordion.lts-faq .wp-block-details > :not(summary):last-child {
	padding-block-end: 1.875rem;
}

/* -- Responsive (derived) ----------------------------------------------------- */

@media (max-width: 1024px) {
	.lts-faq-band {
		padding-block: 5rem 5.5rem;
	}
}

@media (max-width: 781.98px) {
	.lts-faq-band {
		padding-block: 3.5rem 4rem;
	}

	.kd-accordion.lts-faq {
		--lts-faq-pad-x: 1.25rem;
	}

	.kd-accordion.lts-faq .wp-block-details > summary {
		padding-inline-end: 1.25rem;
	}

	.kd-accordion.lts-faq .wp-block-details > :not(summary) {
		max-width: none;
		padding-inline-end: 1.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kd-accordion.lts-faq .wp-block-details > summary::after {
		transition: none;
	}
}