/**
 * Category Q&A: template-parts/archive/faq.php.
 * From 1280 (2156:868): 96px top, 80px bottom; 48px "Q&A" in a 340px column,
 * 80px gap, the accordion beside it, 12px between items. Items: white with a
 * cream border, radius 20, 22 / 22 / 22 / 28px padding, 20px question, 36px
 * toggle (cream with a plus; orange with a white minus when open). The open
 * item is cream with the answer in muted Body/M.
 * Below 1280 (not designed): the heading above the accordion.
 */

.cat-faq {
	padding: var(--section-space-m) 0 var(--section-space-s);
}

.cat-faq__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.cat-faq__title {
	align-self: flex-start;
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-h2);
	font-weight: var(--weight-extrabold);
	letter-spacing: var(--tracking-h2);
	line-height: var(--leading-h2);
}

.cat-faq__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-md);
	min-width: 0;
}

.cat-faq__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

/* Product page: "Still have a question? Contact us" (not designed): Body/M
 * muted, the link ink semibold with an arrow. */
.cat-faq__contact {
	margin: 0;
	color: var(--color-muted);
	font-size: var(--text-body-m);
	line-height: var(--leading-body-m);
}

.cat-faq__contact-link {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	color: var(--color-ink);
	font-weight: var(--weight-semibold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cat-faq__contact-link:hover {
	color: var(--color-orange);
}

/* Opening and closing animate (not designed): the answer's height and
 * opacity, the item background. Native details content animates through
 * ::details-content with interpolate-size; browsers without them open the
 * answer instantly. */
.cat-faq__item {
	box-sizing: border-box;
	border: 1px solid var(--color-cream);
	border-radius: 20px;
	interpolate-size: allow-keywords;
	transition: background-color 0.3s ease;
	background: var(--color-white);
}

.cat-faq__item[open] {
	background: var(--color-cream);
}

.cat-faq__question {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px; /* phones (client, 19 Oct 2026); 22px from 768 */
	cursor: pointer;
	transition: padding-bottom 0.35s ease;
	list-style: none;
}

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

.cat-faq__question:focus-visible {
	border-radius: 20px;
}

.cat-faq__q {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-h4);
	line-height: var(--leading-h4);
}

.cat-faq__toggle {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-pill);
	background: var(--color-cream);
	transition: background-color 0.3s ease;
}

.cat-faq__question:hover .cat-faq__toggle {
	background: var(--color-line);
}

.cat-faq__minus,
.cat-faq__item[open] .cat-faq__plus {
	display: none;
}

.cat-faq__item[open] .cat-faq__minus {
	display: block;
}

/* 10px between the question and the answer when open. Animated with the
 * answer; a negative margin on the answer made the item jump. */
.cat-faq__item[open] .cat-faq__question {
	padding-bottom: 10px;
}

.cat-faq__item[open] .cat-faq__toggle {
	background: var(--color-orange);
}

.cat-faq__item::details-content {
	block-size: 0;
	overflow: clip;
	opacity: 0;
	transition:
		block-size 0.35s ease,
		opacity 0.35s ease,
		content-visibility 0.35s allow-discrete;
}

.cat-faq__item[open]::details-content {
	block-size: auto;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.cat-faq__item,
	.cat-faq__item::details-content,
	.cat-faq__question,
	.cat-faq__toggle {
		transition: none;
	}
}

.cat-faq__answer {
	padding: 0 20px 22px;
	color: var(--color-muted);
	font-size: var(--text-body-m);
	line-height: var(--leading-body-m);
}

.cat-faq__answer > :first-child {
	margin-top: 0;
}

.cat-faq__answer > :last-child {
	margin-bottom: 0;
}

/* 768+: the framed 22 / 28px sides (2156:872). Phones: 20px. */
@media (min-width: 768px) {
	.cat-faq__question {
		padding-top: 22px;
		padding-right: 22px;
		padding-bottom: 22px;
		padding-left: 28px;
	}

	.cat-faq__answer {
		padding-right: 22px;
		padding-left: 28px;
	}
}

@media (min-width: 1280px) {
	.cat-faq__inner {
		flex-direction: row;
		gap: 80px;
	}

	.cat-faq__title {
		flex: none;
		width: 340px;
	}
}