/* FAQ (odwzorowanie brendz.com/faqs) */

.faq { padding: 32px 0 31px; }
@media (min-width: 768px) { .faq { padding-top: 40px; } }
@media (min-width: 992px) {
	.faq { display: grid; grid-template-columns: 25% 1fr; align-items: start; }
	.faq__side { grid-column: 1; grid-row: 1; }
	.faq__main { grid-column: 2; grid-row: 1; padding-left: 35px; }
}

.faq__title {
	margin: 0 0 16px;
	font-size: 21px;
	font-weight: 700;
	line-height: 33.6px;
	color: #1a1b1d;
}
@media (min-width: 768px) { .faq__title { font-size: 28px; line-height: 44.8px; } }

.faq__item {
	margin-bottom: 14px;
	border: 1px solid var(--border);
	border-radius: 3.5px;
}
.faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px;
	font-size: 14px;
	font-weight: 500;
	line-height: 21px;
	color: var(--text);
	list-style: none;
	cursor: pointer;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__icon {
	flex: none;
	width: 17.5px;
	height: 17.5px;
	background: currentColor;
	-webkit-mask: url("../img/icons/chevron-down.svg") center / contain no-repeat;
	mask: url("../img/icons/chevron-down.svg") center / contain no-repeat;
	transition: transform 0.2s ease;
}
.faq__item[open] .faq__icon { transform: rotate(180deg); }
.faq__question:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.faq__answer { padding: 0 14px 14px; font-size: 14px; line-height: 21px; }
.faq__answer > :first-child { margin-top: 0; }
.faq__answer > :last-child { margin-bottom: 0; }
.faq__answer p, .faq__answer ol, .faq__answer ul { margin: 0 0 10px; }
.faq__answer ol, .faq__answer ul { padding-left: 21px; list-style: revert; }

.faq__side { padding-top: 21px; }
.faq__side-title { margin: 0 0 7px; font-size: 14px; font-weight: 700; line-height: 22.4px; color: #1a1b1d; }

.faq__cat {
	display: block;
	margin-top: -1px;
	padding: 14px;
	border: 1px solid rgba(0, 0, 0, 0.125);
	background: #fff;
	font-size: 14px;
	line-height: 22.4px;
	color: #222;
	text-decoration: none;
}
.faq__cats li:first-child .faq__cat { margin-top: 0; border-radius: 3.5px 3.5px 0 0; }
.faq__cats li:last-child .faq__cat { border-radius: 0 0 3.5px 3.5px; }
.faq__cats li:only-child .faq__cat { border-radius: 3.5px; }
.faq__cat:hover { color: var(--green); }
.faq__cat.is-active { border-color: var(--green); background: var(--green); color: #fff; }