/* /blocks/faq-block/style.css */

/* --- Стили в редакторе (админке) --- */
.faq-block--editor {
  border: 1px solid #e0e0e0;
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}
.faq-block__question-editor-label {
  text-transform: uppercase;
}
.faq-block--editor .block-editor-rich-text__editable {
  border: 1px solid #ddd;
  padding: 0.5rem;
}
.faq-block--editor .block-editor-rich-text__editable:focus {
  border-color: #06f;
}

/* --- Стили на сайте (фронтенд) --- */
.faq-block {
  border-bottom: 1px solid #e5e7eb;
}
.faq-block:first-of-type {
  border-top: 1px solid #e5e7eb;
}
.faq-block__question {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 24px 0;
  margin: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}
.faq-block__question:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: 2px;
}
.faq-block__question::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='3' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E");
  background-size: cover;
  transition: transform 400ms cubic-bezier(0.87, 0, 0.13, 1);
}
.faq-block__answer-wrapper {
  height: 0;
  overflow: hidden;
}
.faq-block__answer-content {
  padding: 0 0 24px;
}
.faq-block.is-open .faq-block__question::after {
  transform: translateY(-50%) rotate(180deg);
}
.faq-block__question:hover,
.faq-block.is-open .faq-block__question {
  color: var(--color-black);
}
.faq-block__question:hover::after,
.faq-block.is-open .faq-block__question::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='3' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E");
}