/* Вопрос-ответ: строки с разделителями, плюс справа превращается в крестик у раскрытого ответа. */
@layer theme.components {

.faq { max-inline-size: var(--width-text); border-block-start: 1px solid var(--color-border-divider); }
.faq__item { border-block-end: 1px solid var(--color-border-divider); }

.faq__question {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-block: 18px; cursor: pointer; list-style: none;
  color: var(--color-text); font-size: var(--font-size-h3); font-weight: 600; line-height: var(--line-height-heading);
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question:hover .faq__question-text { color: var(--color-accent-text); }
.faq__question:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: var(--radius-sm); }

.faq__toggle {
  position: relative; flex: none;
  inline-size: 32px; block-size: 32px;
  border: 1px solid var(--color-border-strong); border-radius: 50%;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.faq__toggle::before,
.faq__toggle::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  inline-size: 12px; block-size: 2px; border-radius: 1px;
  background: currentColor; translate: -50% -50%;
}
.faq__toggle::after { rotate: 90deg; }
.faq__item[open] .faq__toggle { transform: rotate(45deg); border-color: var(--color-accent); background: var(--color-accent); color: var(--color-text-inverse); }

.faq__answer { padding-block-end: 22px; padding-inline-end: 52px; color: var(--color-text-body); }
.faq__answer > * + * { margin-block-start: 10px; }
.faq__answer ul,
.faq__answer ol { margin-block: 10px 0; padding-inline-start: 22px; }
.faq__answer li + li { margin-block-start: 6px; }
.faq__answer li::marker { color: var(--color-accent-text); }

.section--dark .faq,
.section--dark .faq__item { border-color: var(--color-border-footer); }
.section--dark .faq__question { color: var(--color-text-inverse); }
.section--dark .faq__answer { color: var(--color-text-on-dark-muted); }

@media (max-width: 640px) {
  .faq__question { padding-block: 16px; gap: 14px; }
  .faq__toggle { inline-size: 28px; block-size: 28px; }
  .faq__answer { padding-inline-end: 0; }
}

}