/**
 * Блок FAQ #faq (2026-11-01): шапка по центру, список и плашка «Не знайшли відповідь…» на всю ширину контейнера 1400 (Саша 2026-11-01; в макете было 920).
 * Разметка: template-parts/blocks/faq.php. Макет: reports/new-design-tasks/faq section (FaqCenter.dc.html).
 * Ответы скрыты только атрибутом hidden="until-found" — display им здесь не задаём.
 */

.wa-faq {
	--wa-faq-ink: #14233a;
	--wa-faq-blue: #1a72a8;
	--wa-faq-line: #e3e9ef;
	--wa-faq-head: Montserrat, Arial, sans-serif;
	padding: 80px 0;
	background: #fff;
	font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color: #1d2433;
	clear: both;
}
.wa-faq *,
.wa-faq *::before,
.wa-faq *::after { box-sizing: border-box; }

.wa-faq__wrap {
	width: 1400px;
	max-width: 100%;
	margin: 0 auto;
}

/* ---------- шапка ---------- */
.wa-faq__head {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}
.wa-faq__eyebrow {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	background: #eaf4fa;
	color: #1a5f8c;
	font-size: 13px;
	font-weight: 600;
}
.wa-faq .wa-faq__title {
	margin: 14px 0 0;
	padding: 0;
	font-family: var(--wa-faq-head);
	font-weight: 700;
	font-size: 40px;
	line-height: 1.15;
	letter-spacing: -.01em;
	text-transform: none;
	text-align: center;
	color: var(--wa-faq-ink);
	background: none;
}
.wa-faq .wa-faq__lead {
	margin: 14px 0 0;
	font-size: 17px;
	line-height: 1.6;
	color: #4b5563;
}

/* ---------- список ---------- */
.wa-faq__list {
	max-width: none;
	margin: 36px auto 0;
	border-top: 1px solid var(--wa-faq-line);
}
.wa-faq__item { border-bottom: 1px solid var(--wa-faq-line); }
.wa-faq .wa-faq__q {
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	text-transform: none;
	background: none;
}
.wa-faq .wa-faq__btn {
	width: 100%;
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) 40px;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 22px 4px;
	border: 0;
	border-radius: 0;
	background: transparent;
	text-align: left;
	color: inherit;
	cursor: pointer;
}
.wa-faq__btn:focus-visible { outline: 2px solid var(--wa-faq-blue); outline-offset: 2px; border-radius: 8px; }
.wa-faq__btn { scroll-margin-top: calc(var(--wa-hdr-h, 80px) + 16px); }
.wa-faq__num {
	font-family: var(--wa-faq-head);
	font-weight: 700;
	font-size: 15px;
	color: #9aa6b3;
	transition: color .25s;
}
.wa-faq__qt {
	font-family: var(--wa-faq-head);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.35;
	color: var(--wa-faq-ink);
	overflow-wrap: break-word;
	transition: color .25s;
}
.wa-faq__chev {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: #f0f4f8;
	color: var(--wa-faq-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .3s, background-color .3s, color .3s;
}
.wa-faq__chev svg { width: 16px; height: 16px; }
.wa-faq__btn:hover .wa-faq__qt,
.wa-faq__item.is-open .wa-faq__qt { color: var(--wa-faq-blue); }
.wa-faq__item.is-open .wa-faq__num { color: #7dc91b; }
.wa-faq__item.is-open .wa-faq__chev { transform: rotate(180deg); background: var(--wa-faq-blue); color: #fff; }

/* ---------- ответ ---------- */
.wa-faq__a { margin: -4px 52px 24px 68px; }
.wa-faq__a-in {
	padding: 18px 22px;
	background: #f5f8fb;
	border-radius: 16px;
	font-size: 16px;
	line-height: 1.7;
	color: #36404f;
	overflow-wrap: break-word;
}
.wa-faq__item.is-open .wa-faq__a-in { animation: waFaqIn .3s ease-out; }
@keyframes waFaqIn {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}
.wa-faq .wa-faq__a-in p { margin: 0 0 10px; font-size: inherit; line-height: inherit; color: inherit; }
.wa-faq .wa-faq__a-in p:last-child { margin-bottom: 0; }
.wa-faq .wa-faq__a-in ul,
.wa-faq .wa-faq__a-in ol { margin: 0 0 10px; padding-left: 20px; }
.wa-faq .wa-faq__a-in ul { list-style: disc; }
.wa-faq .wa-faq__a-in ol { list-style: decimal; }
.wa-faq .wa-faq__a-in ul:last-child,
.wa-faq .wa-faq__a-in ol:last-child { margin-bottom: 0; }
.wa-faq .wa-faq__a-in li { margin: 0; padding: 0; font-size: inherit; line-height: inherit; color: inherit; background: none; }
.wa-faq .wa-faq__a-in li::before { content: none; }
.wa-faq .wa-faq__a-in li + li { margin-top: 4px; }
.wa-faq .wa-faq__a-in a { color: var(--wa-faq-blue); text-decoration: underline; text-underline-offset: 2px; }
.wa-faq .wa-faq__a-in a:hover { color: #125a85; }
.wa-faq .wa-faq__a-in strong,
.wa-faq .wa-faq__a-in b { font-weight: 700; color: var(--wa-faq-ink); }

/* ---------- плашка «Не знайшли…» ---------- */
.wa-faq__help {
	max-width: none;
	margin: 40px auto 0;
	padding: 26px 28px;
	background: #f5f8fb;
	border-radius: 22px;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 18px 20px;
}
.wa-faq__help-ico {
	width: 54px;
	height: 54px;
	flex: none;
	border-radius: 16px;
	background: var(--wa-faq-blue);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wa-faq__help-ico svg { width: 24px; height: 24px; }
.wa-faq__help-text { flex: 1 1 0; min-width: 0; }
.wa-faq .wa-faq__help-title {
	margin: 0;
	font-family: var(--wa-faq-head);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
	color: var(--wa-faq-ink);
}
.wa-faq .wa-faq__help-sub {
	margin: 4px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: #5b6472;
}
/* десктоп: иконка · тексты · кнопки в одну строку */
.wa-faq__help-acts {
	flex: none;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
}
.wa-faq .wa-faq__pill {
	height: 50px;
	padding: 0 18px 0 12px;
	border: 1px solid #d9e3ec;
	border-radius: 14px;
	background: #fff;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wa-faq-head);
	font-weight: 600;
	font-size: 15px;
	color: var(--wa-faq-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .25s, transform .25s;
}
.wa-faq__pill-ico {
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 9px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wa-faq__pill-ico--tg { background: #29a9eb; }
.wa-faq__pill-ico--phone { background: var(--wa-faq-ink); }
.wa-faq .wa-faq__ask {
	order: 3;
	height: 50px;
	padding: 0 22px;
	border-radius: 14px;
	background: #7dc91b;
	color: #0e2a06;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--wa-faq-head);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	transition: background-color .25s, transform .25s;
}
.wa-faq__ask svg { width: 16px; height: 16px; flex: none; }
.wa-faq__pill:focus-visible,
.wa-faq__ask:focus-visible { outline: 2px solid var(--wa-faq-blue); outline-offset: 2px; }
@media (hover: hover) {
	.wa-faq .wa-faq__pill:hover { border-color: var(--wa-faq-blue); color: var(--wa-faq-ink); transform: translateY(-2px); }
	.wa-faq .wa-faq__ask:hover { background: #8bd626; color: #0e2a06; transform: translateY(-2px); }
}

/* ---------- ширина: 1400 + поля 20px ниже 1440 ---------- */
@media (max-width: 1439px) {
	.wa-faq__wrap { width: calc(100% - 40px); }
}

/* 1024–1279: места меньше — Telegram только иконкой (подпись остаётся для скринридеров в aria-label) */
@media (min-width: 1024px) and (max-width: 1279px) {
	.wa-faq .wa-faq__pill--tg { width: 50px; padding: 0; justify-content: center; }
	.wa-faq__pill--tg .wa-faq__pill-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- планшет 768–1023 ---------- */
@media (max-width: 1023px) {
	.wa-faq { padding: 56px 0; }
	.wa-faq__wrap { width: calc(100% - 32px); }
	.wa-faq .wa-faq__title { font-size: 32px; line-height: 1.2; }
	.wa-faq__a { margin-right: 0; }
	.wa-faq__help { flex-wrap: wrap; }
	.wa-faq__help-acts { flex: 0 0 100%; flex-wrap: wrap; }
	.wa-faq .wa-faq__ask { margin-left: auto; }
}

/* ---------- мобилка ≤767 ---------- */
@media (max-width: 767px) {
	.wa-faq { padding: 48px 0; }
	.wa-faq .wa-faq__title { font-size: 27px; }
	.wa-faq .wa-faq__lead { font-size: 15px; }
	.wa-faq__list { margin-top: 28px; }
	.wa-faq .wa-faq__btn { grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 10px; padding: 18px 0; }
	.wa-faq__num { font-size: 13px; }
	.wa-faq__qt { font-size: 16px; }
	.wa-faq__chev { width: 36px; height: 36px; border-radius: 10px; }
	.wa-faq__a { margin: -2px 0 18px 0; }
	.wa-faq__a-in { padding: 16px 18px; font-size: 15px; }
	.wa-faq__help { padding: 22px 18px; flex-direction: column; align-items: flex-start; gap: 14px; }
	.wa-faq__help-text { flex: none; }
	.wa-faq__help-acts { flex: none; width: 100%; flex-direction: column; }
	.wa-faq .wa-faq__ask { order: 0; margin-left: 0; }
	.wa-faq .wa-faq__ask,
	.wa-faq .wa-faq__pill { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.wa-faq__num,
	.wa-faq__qt,
	.wa-faq__chev,
	.wa-faq__pill,
	.wa-faq__ask { transition: none; }
	.wa-faq__item.is-open .wa-faq__a-in { animation: none; }
	.wa-faq .wa-faq__pill:hover,
	.wa-faq .wa-faq__ask:hover { transform: none; }
}