/* ==================== FAQ «Вопрос-ответ» (page /faq/, template page-sidebar) ==================== */

/* Content of the page:
   group.faq > details.faq__item × N (summary = question, paragraphs = answer; opens without JS, several at once)
   → group.faq-ask (contentOnly): heading.faq-ask__title + Fluent Form 5 «Задать вопрос» (field styles — order-form.css).
   Selectors without the template wrapper — the same rules work in the editor. Sizes — --faq-*. */

.faq .faq__item{
	box-sizing: border-box;
	margin: 0;
	border-bottom: 1px solid var(--faq-line);
	background: #fff;
}

.faq .faq__item > summary{
	display: flex;
	align-items: center;
	gap: var(--faq-sign-gap);
	padding: var(--faq-q-pad);
	color: var(--color-black);
	font-size: var(--faq-q-size);
	font-weight: 600;
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
	transition: color .2s ease;
}

.faq .faq__item > summary::-webkit-details-marker{
	display: none;
}

.faq .faq__item > summary::before{
	content: "+";
	flex: 0 0 auto;
	width: 0.6em;
	font-size: var(--faq-sign-size);
	font-weight: 400;
	line-height: 1;
	text-align: center;
	transition: transform .2s ease;
}

.faq .faq__item[open] > summary::before{
	transform: rotate(45deg);
}

.faq .faq__item > summary:hover,
.faq .faq__item[open] > summary{
	color: var(--color-accent);
}

.faq .faq__item > summary:focus-visible{
	outline: 2px solid var(--color-accent);
	outline-offset: -2px;
}

.faq .faq__item > :not(summary){
	margin: 0;
	padding: 0 var(--faq-a-pad);
	font-size: var(--faq-a-size);
	line-height: 1.5;
	color: var(--color-text);
}

.faq .faq__item > summary + *{
	padding-top: calc(var(--faq-a-pad) / 2);
}

.faq .faq__item > :not(summary) + :not(summary){
	padding-top: 1em;
}

.faq .faq__item > :last-child:not(summary){
	padding-bottom: var(--faq-a-pad);
}

.faq .faq__item a{
	color: var(--color-accent);
}

/* ---------- «Задать вопрос» ---------- */

.faq-ask{
	box-sizing: border-box;
	max-width: var(--faq-ask-width);
	padding: var(--faq-ask-pad);
	border-radius: 4px;
	background: var(--about-form-bg);
}

:root .faq + .faq-ask{
	margin-top: var(--faq-ask-top);
}

.faq-ask h2.faq-ask__title{ /* h2 — beats .page-sidebar__content h2 (about.css) */
	margin: 0 0 20px;
	font-size: var(--faq-ask-title-size);
	line-height: 1.3;
}

.faq-ask .fluentform .ff-el-form-control{
	border-color: #fff;
	background: #fff;
}