/* ============================================================
   Блок «FAQ» — faq-block

   ⚠️ РАЗМЕТКА НЕ МЕНЯЛАСЬ (установка владельца 02.09.2026). Аккордеон
   бутстраповский, вопрос — ссылка с data-bs-toggle="collapse", раскрытие
   держит сам Bootstrap. Здесь только оформление и состояния.

   ⚠️ УБРАН ХАРДКОД. Было `.dark-theme .accordion-item { border-color:
   #00000070 }` — чёрная полупрозрачная линия, придуманная под прежнюю тёмную
   тему. На изумрудной рампе она читалась как грязь, а к токенам проекта
   отношения не имела. Теперь граница у обеих тем одна и та же — --ctx-border,
   и тёмной ветки в файле не осталось вовсе.

   ⚠️ ОБЛАСТЬ ДЕЙСТВИЯ. Было `.accordion-item a` без всякой привязки: правило
   красило ЛЮБОЙ аккордеон на странице, где стоит блок. Теперь всё висит на
   .accordion-flush — этот класс приходит из разметки блока.
   ============================================================ */

.accordion-flush .accordion-item {
	--faq-accent-text: var(--case-accent-text, var(--macro-accent-text, var(--ctx-accent)));

	/* Заливки у элемента нет: аккордеон flush — это список строк, разделённых
	   волосяной линейкой, тот же приём, что у .bottom_nav и плитки фактов.
	   Перебивает и `.accordion-item { background-color: #fff }` бутстрапа,
	   и `.dark-theme .accordion-item { background-color: var(--macro-surface) }`
	   темы — за счёт порядка подключения (CSS блока грузится после style.css)
	   при равной специфичности (0,2,0). */
	background-color: transparent;
	border-color: var(--ctx-border);
}


/* --- ВОПРОС ---
   Цвет пишем явно, потому что в разметке у ссылки висит утилита .text-dark,
   а у неё !important. Наша цепочка (0,2,1) перебивает и её (0,1,0),
   и `.dark-theme .text-dark` (0,2,0) плагина тёмной темы — но только вместе
   с !important, иначе выигрывает утилита. */
.accordion-flush .accordion-item > a {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding-right: 0.5rem;
	color: var(--ctx-ink) !important;
	font-size: clamp(1rem, 1.6vw, 1.125rem);
	font-weight: 600;
	line-height: 1.45;
	touch-action: manipulation;
	transition: color 0.3s ease;
}

/* Свёрнутый вопрос — обычного веса: раскрытый обязан отличаться от соседей
   не только стрелкой. Правило из первой версии файла, сохранено. */
.accordion-flush .accordion-item > a[class*="collapsed"] {
	font-weight: 400;
}

/* Раскрытый вопрос — акцентом. Единственное место блока, где цвет что-то
   означает, поэтому больше акцента в блоке нет. */
.accordion-flush .accordion-item > a:not(.collapsed) {
	color: var(--faq-accent-text) !important;
}

@media (hover: hover) and (pointer: fine) {
	.accordion-flush .accordion-item > a:hover {
		color: var(--faq-accent-text) !important;
	}
}

.accordion-flush .accordion-item > a:focus-visible {
	color: var(--faq-accent-text) !important;
}


/* --- УКАЗАТЕЛЬ РАСКРЫТИЯ ---
   Шеврон нарисован псевдоэлементом, а не картинкой и не иконкой из разметки:
   разметку блока трогать нельзя, а ::after — не разметка, состав классов от
   него не меняется. Бутстраповский `.accordion-button::after` тут не работает
   вовсе: в разметке не .accordion-button, а обычная ссылка.

   Порядок в строке держит `order`, а не абсолютное позиционирование: у ссылки
   display:flex, и шеврон обязан честно занимать своё место — иначе длинный
   вопрос уезжает под него. */
.accordion-flush .accordion-item > a::after {
	content: "";
	flex: 0 0 auto;
	order: 2;
	width: 0.5rem;
	height: 0.5rem;
	margin-top: 0.4em;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 0.3s ease;
}

.accordion-flush .accordion-item > a:not(.collapsed)::after {
	transform: rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
	.accordion-flush .accordion-item > a,
	.accordion-flush .accordion-item > a::after {
		transition: none;
	}
}


/* --- ОТВЕТ --- */
.accordion-flush .accordion-body {
	padding: 0.75rem 0 0;
	color: var(--ctx-muted);
	line-height: 1.6;
}

.accordion-flush .accordion-body p:last-child {
	margin-bottom: 0;
}

/* Выделения внутри ответа (<b> из контента) — основным текстом, а не акцентом:
   акцент в блоке значит «этот вопрос раскрыт», второго смысла у него быть
   не должно. --ctx-ink к --ctx-muted различим и в светлой, и в тёмной. */
.accordion-flush .accordion-body b,
.accordion-flush .accordion-body strong {
	color: var(--ctx-ink);
	font-weight: 600;
}

.accordion-flush .accordion-body a {
	color: var(--faq-accent-text);
	text-underline-offset: 0.2em;
}