/**
 * Category FAQ accordion (template-parts/category-faq.php).
 *
 * Same look as the mobile footer accordion (.footer-middle .widget-item in
 * the parent's footer CSS): black 1px dividers, 16px/500 titles and the
 * theme's icomoon plus / minus icons. The footer classes themselves are
 * scoped to .footer-middle and opened by JS on phones only, so the FAQ keeps
 * its own no-JS <details> markup and just mirrors the rules here.
 */
.category-faq {
	max-width: 900px;
	margin: 48px auto 32px;
	padding: 0 15px;
	color: #000;
}

.category-faq__title {
	margin: 0 0 16px;
	color: #000;
	font-size: 21px;
	font-weight: 500;
	line-height: 1.3;
}

.category-faq__list {
	border-top: 1px solid #000;
}

.category-faq__item {
	border-bottom: 1px solid #000;
	padding: 0.3125rem 0 0.34375rem;
}

.category-faq__question {
	position: relative;
	display: block;
	margin: 0;
	padding: 0.625rem 0 0.625rem 1.25rem;
	color: #000;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
	cursor: pointer;
	list-style: none;
}

/* H3 inside <summary>: keep the summary's look (theme h3 styles reset) */
.category-faq__question-text {
	display: inline;
	margin: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
}

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

/* icomoon plus (\e936) / minus (\e935), as in the footer */
.category-faq__question::after {
	content: '\e936';
	position: absolute;
	top: 50%;
	left: 0;
	font: 0.5rem "icomoon";
	transform: translate(0, -50%);
}

.category-faq__item[open] > .category-faq__question::after {
	content: '\e935';
}

.category-faq__question:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

.category-faq__answer {
	padding: 0 0 0.625rem;
	color: #000;
	font-size: 15px;
	line-height: 1.6;
}

.category-faq__answer p {
	margin: 0 0 8px;
}

.category-faq__answer p:last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.category-faq {
		margin-top: 32px;
	}

	.category-faq__title {
		font-size: 19px;
	}
}