/* Product category FAQs accordion - see inc/category-faqs.php */

.detox-faqs {
	margin: 2.5em 0;
    max-width: 900px;
    margin-inline: auto;
}

.detox-faqs__heading {
	margin-bottom: 0.75em;
}

.detox-faqs__item {
	border-bottom: 1px solid #ddd3c4;
}

.detox-faqs__item:first-of-type {
	border-top: 1px solid #ddd3c4;
}

.detox-faqs__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 1.1em 0.25em;
	cursor: pointer;
	list-style: none;
}

.detox-faqs__question::-webkit-details-marker {
	display: none;
}

.detox-faqs__question h3 {
	margin: 0;
	font-size: 1.1em;
	line-height: 1.4;
	transition: color 0.2s;
}

.detox-faqs__question:hover h3,
.detox-faqs__item[open] > .detox-faqs__question h3 {
	color: #000;
}

/* Plus / minus: two bars, the vertical one collapses when open */
.detox-faqs__question::after {
	content: "";
	flex-shrink: 0;
	width: 0.9em;
	height: 0.9em;
	margin-right: 0.25em;
	background:
		linear-gradient(#000000, #000000) center / 100% 2px no-repeat,
		linear-gradient(#000000, #000000) center / 2px 100% no-repeat;
	transition: background-size 0.2s;
}

.detox-faqs__item[open] > .detox-faqs__question::after {
	background-size: 100% 2px, 2px 0;
}

.detox-faqs__question:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 2px;
}

.detox-faqs__answer {
	padding: 0 0.25em 1.25em;
}

.detox-faqs__answer > :last-child {
	margin-bottom: 0;
}

/* Smooth open/close in browsers that can animate to height: auto */
@supports (interpolate-size: allow-keywords) {
	.detox-faqs {
		interpolate-size: allow-keywords;
	}

	.detox-faqs__item::details-content {
		block-size: 0;
		overflow: hidden;
		transition: block-size 0.25s ease, content-visibility 0.25s allow-discrete;
	}

	.detox-faqs__item[open]::details-content {
		block-size: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.detox-faqs__question h3,
	.detox-faqs__question::after,
	.detox-faqs__item::details-content {
		transition: none;
	}
}