/* Страница «Вопросы и ответы» /faq/ (faq/index.php), подключается только на ней, после catalog-faq.css.
   Аккордеон — стили блока с листингов (catalog-faq.css) без изменений; здесь только отличия страницы: восемь блоков
   с заголовками h2, оглавление-якоря и плавная прокрутка. Правила с префиксом .faq-page: внутри .text_page
   стили main.css (.text_page h2, .text_page p) подключены позже и иначе перебили бы блок. Брейкпоинт — 767px. */

/* плавно — только когда фокус внутри страницы (переход по ссылке оглавления): кнопка «наверх» в подвале крутит
   страницу jQuery-анимацией, и постоянный smooth на html её тормозит; клик по кнопке снимает фокус */
@media (prefers-reduced-motion: no-preference) {
	html:focus-within {
		scroll-behavior: smooth;
	}
}

.faq-page {
	margin: 10px 0 50px;
}

.faq-page__toc-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.faq-page .faq-page__toc-item {
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 24px;
}

.faq-page .faq-page__toc-item::before {
	content: none;
}

.faq-page .faq-page__toc-link {
	color: #DD5454;
	border-bottom: 1px solid rgba(221, 84, 84, 0.3);
	text-decoration: none;
	transition: border-color 0.2s;
}

.faq-page .faq-page__toc-link:focus-visible {
	outline: 2px solid #DD5454;
	outline-offset: 2px;
}

@media (hover: hover) {
	.faq-page .faq-page__toc-link:hover {
		border-bottom-color: transparent;
	}
}

.faq-page .faq-page__group {
	margin-top: 40px;
}

/* якорь оглавления: заголовок не должен уходить под фиксированное меню (60px при прокрутке) */
.faq-page .faq-page__title {
	margin: 0 0 16px;
	font-size: 22px;
	font-weight: 700;
	line-height: 30px;
	letter-spacing: normal;
	text-transform: none;
	color: #2E2E2E;
	scroll-margin-top: 80px;
}

.faq-page .catalog-faq__answer p {
	margin: 0;
	letter-spacing: normal;
}

@media (max-width: 767px) {
	.faq-page {
		margin-bottom: 40px;
	}

	.faq-page__toc-list {
		display: block;
	}

	.faq-page .faq-page__toc-item + .faq-page__toc-item {
		margin-top: 8px;
	}

	.faq-page .faq-page__group {
		margin-top: 30px;
	}

	/* мобильная шапка зафиксирована всегда, 100px */
	.faq-page .faq-page__title {
		margin-bottom: 12px;
		font-size: 18px;
		line-height: 24px;
		scroll-margin-top: 120px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.faq-page .faq-page__toc-link {
		transition: none;
	}
}