/* ==========================================================================
   FAQ — окрема сторінка (Figma 733:1732).
   Мобільного макета в Figma немає, тому нижче 768px розкладка виведена
   за логікою мобільного FAQ на головній.

   Акордеон — той самий компонент, що в секції FAQ на головній, тільки
   світлий на темному. Секція: 988 = 90 (шапка) + 100 + 72 (H1) + 42 +
   8×73 (рядки) + 100.
   ========================================================================== */

.faq--page {
  min-height: 0;
  padding-block: 11.875rem 6.25rem; /* контент на 190, низ 100 */
  background-color: var(--color-dark);
}

/* Декоративне «Wedding» — векторний експорт вузла з макета.
   Прозорість 4% і колір #E4EAE2 запечені у самому файлі, тому в CSS
   їх дублювати не треба. Позиція калібрується під рендер рамки. */
.faq__wordmark {
  position: absolute;
  top: -10.875rem; /* −174px */
  left: -33.375rem; /* −534px: експорт зсунутий на 6px відносно вузла */
  width: 159.5625rem; /* 2553px — власний розмір експорту */
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* Скрипт «FAQ» у макеті стоїть на 157 і заходить на заголовок, тому
   виведений з потоку. Відлік іде від .faq__container, чий верх — це 190
   (padding секції), тож зсув від'ємний: 157 − 190 = −33. */
.faq--page .faq__eyebrow {
  position: absolute;
  top: -2.0625rem;
  right: 0;
  left: 0;
  margin-inline: auto;
  color: var(--color-cerise);
}

.faq--page .faq__head {
  width: 100%;
}

.faq--page .faq__title {
  color: var(--color-ivory);
  text-align: center;
}

.faq--page .accordion {
  margin-top: 2.625rem; /* 42px */
}

.faq--page .accordion__item,
.faq--page .accordion__item:first-child {
  border-bottom-color: rgba(206, 209, 190, 0.52);
}

.faq--page .accordion__question,
.faq--page .accordion__answer {
  color: var(--color-ivory);
}

.faq--page .accordion__icon {
  background-image: url("../../images/svg/faq-toggle-light.svg");
}

/* --------------------------------------------------------------------------
   Мобайл: своя типографіка, як у секції FAQ на головній
   -------------------------------------------------------------------------- */
@media (max-width: 47.99em) {
  .faq--page {
    padding-block: 8.5rem 4.375rem;
  }

  .faq__wordmark {
    top: -6rem;
    left: -18rem;
    width: 86rem;
  }

  .faq--page .faq__eyebrow {
    top: -1.75rem;
  }
}