/* Вопросы и ответы (faq.php): только то, чего нет у остальных страниц.
   Типографика ответа общая с руководством и блогом - она в ui.css (.hm-doc__body),
   решётка якоря - тоже (.hm-doc__anchor). Здесь только сам аккордеон. */

/* Колонка уже .hm-wrap и прижата влево: так она выровнена с h1 в шапке страницы,
   а строка ответа не растягивается на 1000px. */
.hm-faq {
    max-width: 780px;
}

/* scroll-margin-top - под липкую шапку: она перекрыла бы вопрос, к которому прыгнули
   по ссылке /faq.php#5. Отсюда же берёт отступ scrollIntoView в docpage.js. */
.hm-faq__item {
    border: 1px solid var(--hm-border);
    border-radius: 12px;
    background: var(--hm-surface);
    scroll-margin-top: 84px;
    transition: border-color .15s, box-shadow .15s;
}

.hm-faq__item + .hm-faq__item {
    margin-top: 10px;
}

.hm-faq__item:hover,
.hm-faq__item[open] {
    border-color: var(--hm-brand);
}

.hm-faq__item[open] {
    box-shadow: var(--hm-shadow);
}

/* ============ вопрос ============ */
/* Свой маркер вместо системного: у него ни цвета из токенов, ни размера.
   list-style убирает треугольник везде, ::-webkit-details-marker - в Safari,
   где list-style на summary не действует. */
.hm-faq__q {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.hm-faq__q::-webkit-details-marker {
    display: none;
}

.hm-faq__q:focus-visible {
    outline: 2px solid var(--hm-brand);
    outline-offset: 2px;
    border-radius: 12px;
}

.hm-faq__qt {
    flex: 1;
    font-size: 16.5px;
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: -.01em;
    color: var(--hm-ink);
    transition: color .15s;
}

.hm-faq__item[open] .hm-faq__qt,
.hm-faq__q:hover .hm-faq__qt {
    color: var(--hm-brand);
}

/* Решётка живёт в ui.css и по умолчанию скрыта до наведения на .hm-doc__item -
   у аккордеона обёртка другая, поэтому проявляем её сами.

   У раскрытого вопроса показываем без наведения: наведения нет на тач-экране, а ссылку
   на вопрос надо чем-то взять и там. Раскрытый вопрос - как раз тот, которым делятся. */
.hm-faq__item:hover .hm-doc__anchor,
.hm-faq__item[open] .hm-doc__anchor {
    opacity: 1;
}

/* Шеврон смотрит вниз у свёрнутого вопроса и вверх у раскрытого: показывает, что
   произойдёт по клику, - тот же приём, что у переключателя темы в шапке. */
.hm-faq__ico {
    flex: none;
    color: var(--hm-ink-3);
    transition: transform .2s, color .15s;
}

.hm-faq__item[open] .hm-faq__ico {
    transform: rotate(180deg);
    color: var(--hm-brand);
}

@media (prefers-reduced-motion: reduce) {
    .hm-faq__ico { transition: none; }
}

/* ============ ответ ============ */
/* Отступ сверху нулевой: его уже дал padding вопроса. */
.hm-faq__a {
    margin-top: 0;
    padding: 0 18px 18px;
}

.hm-faq__empty {
    color: var(--hm-ink-2);
}

@media (max-width: 768px) {
    .hm-faq__q { padding: 14px 15px; }
    .hm-faq__qt { font-size: 15.5px; }
    .hm-faq__a { padding: 0 15px 15px; }
}