/* ===================================================================
   FAQ — аккордеон на <details>/<summary> с плавной JS-анимацией.
   Значения — только из tokens.css.
   =================================================================== */

.faq {
    max-width: var(--w-read);
}

/* ------------------------------------------------------------------
   Список вопросов
   ------------------------------------------------------------------ */

.faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.faq__item {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease),
                background-color var(--dur) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}

.faq__item[open] {
    background: var(--surface-3);
    border-color: var(--accent-line);
}

/* Фокус-рамка на клавиатурной навигации. Outline на summary обрезался бы
   border-radius + overflow:hidden родителя — поэтому рисуем box-shadow
   на самом .faq__item, он уже со скруглёнными углами. */
.faq__item:has(.faq__question:focus-visible) {
    box-shadow: 0 0 0 2px var(--accent);
}

/* ------------------------------------------------------------------
   Вопрос
   ------------------------------------------------------------------ */

.faq__question {
    display: block;
    padding: var(--sp-4) var(--pad-card);
    cursor: pointer;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    color: var(--text);
    list-style: none;
    user-select: none;
}

/* Раскладка вопроса переехала с summary на заголовок внутри него: по
   спецификации <summary> не может содержать заголовок вперемешку с другими
   элементами, поэтому в h2 лежит всё содержимое строки. Кегль и начертание
   наследуются от summary — заголовок здесь про структуру документа, а не про
   отдельный размер, и в шкалу кеглей ничего нового не заводит. */
.faq__question-heading {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin: 0;
    font: inherit;
    color: inherit;
}

.faq__question::-webkit-details-marker {
    display: none;
}

/* Базовый индикатор — работает везде. Офсет внутрь, а не наружу: кольцо
   должно остаться внутри скруглённого угла .faq__item. Значение берётся
   из --focus-offset со знаком минус, а не литералом: именно из-за
   литералов офсет когда-то был то 2px, то 3px, то -2px. */
.faq__question:focus-visible {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: calc(var(--focus-offset) * -1);
}

/* Там, где :has() поддерживается, кольцо рисует .faq__item выше. */
@supports selector(:has(*)) {
    .faq__question:focus-visible {
        outline: none;
    }
}

/* Номер и плюс были жёлтыми у всех двадцати вопросов сразу — сорок
   акцентных пятен на одном экране. Акцент остался только у раскрытого
   вопроса: он и отвечает на вопрос «что сейчас открыто». */
.faq__question-num {
    flex-shrink: 0;
    min-width: var(--box-md);
    color: var(--text-4);
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw-semibold);
    transition: color var(--dur) var(--ease);
}

.faq__item[open] .faq__question-num {
    color: var(--accent);
}

.faq__question-text {
    flex: 1;
    min-width: 0;
}

.faq__question-icon {
    position: relative;
    flex-shrink: 0;
    width: var(--icon-sm);
    height: var(--icon-sm);
    transition: transform var(--dur-slow) var(--ease);
}

.faq__question-icon::before,
.faq__question-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--text-4);
    /* Полоски плюса толщиной 2px: любой радиус браузер обрежет до
       половины толщины, поэтому --r-pill даёт ровно те же скруглённые
       торцы, что литеральные 2px, и не заводит значение мимо шкалы. */
    border-radius: var(--r-pill);
    transition: transform var(--dur-slow) var(--ease),
                opacity var(--dur-slow) var(--ease),
                background-color var(--dur) var(--ease);
}

.faq__question-icon::before {
    width: var(--icon-sm);
    height: 2px;
    transform: translate(-50%, -50%);
}

.faq__question-icon::after {
    width: 2px;
    height: var(--icon-sm);
    transform: translate(-50%, -50%);
}

.faq__item[open] .faq__question-icon::before,
.faq__item[open] .faq__question-icon::after {
    background: var(--accent);
}

.faq__item[open] .faq__question-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

/* ------------------------------------------------------------------
   Ответ

   Внешний .faq__answer — «движок» анимации: height + opacity, padding=0.
   Внутренний .faq__answer-inner держит padding и контент. Так height=0
   реально схлопывает бокс в ноль без остатка.
   ------------------------------------------------------------------ */

.faq__answer {
    overflow: hidden;
    transition: height var(--dur-slow) var(--ease),
                opacity var(--dur-slow) var(--ease);
}

.faq__item:not([open]) .faq__answer {
    height: 0;
    opacity: 0;
}

.faq__answer-inner {
    padding: 0 var(--pad-card) var(--sp-5) calc(28px + var(--sp-3) + var(--pad-card));
    font-size: var(--fs-body);
    line-height: var(--lh-base);
    color: var(--text-2);
}

.faq__answer-inner p {
    margin: 0 0 var(--sp-3);
}

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

.faq__answer-inner a,
.faq__answer-inner a:visited {
    color: var(--accent);
    border-bottom: 1px solid var(--accent-line);
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.faq__answer-inner a:hover {
    color: var(--accent-hover);
    border-bottom-color: var(--accent);
}

/* ==================================================================
   Адаптив
   ================================================================== */

@media (max-width: 768px) {
    .faq__question {
        padding: var(--sp-4) var(--sp-5);
        font-size: var(--fs-body);
        gap: var(--sp-3);
    }

    .faq__question-num {
        font-size: var(--fs-small);
    }

    .faq__answer-inner {
        padding: 0 var(--sp-5) var(--sp-4) calc(28px + var(--sp-3) + var(--sp-5));
        font-size: var(--fs-small);
    }

}

@media (max-width: 480px) {
    .faq__answer-inner {
        padding-left: var(--sp-5);
    }
}