/* =============================================================================
   FAQ: acf/faq. При faq_tag=details разметка - <details class="faq__item">
   с <summary class="faq__item_question">. Тема дополнительно вешает класс
   .faq__item-showed скриптом (app.js) и прячет ответ через display:none,
   поэтому раскрытым считаем состояние [open] ИЛИ .faq__item-showed.
   ========================================================================== */

.faq {
	display: grid;
	gap: .7rem;
	margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
}

.faq__item,
.faq__item:nth-of-type(n+2) {
	margin: 0;
	background: var(--ms-surface-2);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius);
	overflow: hidden;
	transition: border-color var(--ms-dur) var(--ms-ease),
	            background-color var(--ms-dur) var(--ms-ease);
}

.faq__item:hover { border-color: var(--ms-border-2); }

.faq__item[open],
.faq__item.faq__item-showed {
	background: linear-gradient(180deg, rgba(86, 145, 255, .07), transparent 55%), var(--ms-surface-2);
	border-color: var(--ms-accent-line);
}

.faq__item_question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.05rem 1.25rem;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.45;
	color: #fff;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

/* убираем нативный треугольник <details> */
.faq__item_question::marker { content: ""; }
.faq__item_question::-webkit-details-marker { display: none; }

/* шеврон */
.faq__item_question::after {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-right: .25rem;
	border-right: 2px solid var(--ms-accent);
	border-bottom: 2px solid var(--ms-accent);
	transform: rotate(45deg) translate(-2px, -2px);
	transform-origin: center;
	transition: transform var(--ms-dur) var(--ms-ease);
}

.faq__item[open] .faq__item_question::after,
.faq__item.faq__item-showed .faq__item_question::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.faq__item_answer {
	display: none;
	margin: 0;
	padding: 0 1.25rem 1.15rem;
	color: var(--ms-muted);
}

.faq__item[open] .faq__item_answer,
.faq__item.faq__item-showed .faq__item_answer {
	display: block;
	animation: ms-faq-in .22s var(--ms-ease);
}

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

.faq__item_answer a { color: var(--ms-accent); }

@keyframes ms-faq-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

/* Вариант без <details> (faq_tag = section): крестик темы */
.faq__item_cross span { background-color: var(--ms-accent); }