/* =========================
   FAQ wrapper
========================= */
.catalyst-faq{
  border-top: 1px solid var(--wp--preset--color--primary);
}

/* =========================
   FAQ item
========================= */
.catalyst-faq__item{
  border-bottom: 1px solid var(--wp--preset--color--primary);
}

/* =========================
   Question row
========================= */
.catalyst-faq__question{
  list-style: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  font-size: var(--wp--preset--font-size--h-5);

  padding: 1rem 0;
  user-select: none;
}

/* Remove default marker */
.catalyst-faq__question::-webkit-details-marker{
  display: none;
}
.catalyst-faq__question::marker{
  display: none;
}

/* =========================
   Chevron
========================= */
.catalyst-faq__question::after{
  content: '';
  width: 10px;
  height: 10px;

  border-right: 2px solid var(--wp--preset--color--tertiary);
  border-bottom: 2px solid var(--wp--preset--color--tertiary);

  transform: rotate(45deg);
  transition: transform 250ms ease;
  flex-shrink: 0;
}

/* Rotate when open */
.catalyst-faq__item[open] > .catalyst-faq__question::after{
  transform: rotate(-135deg);
}

/* =========================
   Answer animation (KEY PART)
========================= */
.catalyst-faq__answer{
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 500ms ease, opacity 500ms ease;
}

/* Needed for grid trick */
.catalyst-faq__answer-inner{
  overflow: hidden;
}

/* Open state */
.catalyst-faq__item[open] .catalyst-faq__answer{
  grid-template-rows: 1fr;
  opacity: 1;
}

@starting-style{
  .catalyst-faq__item[open] .catalyst-faq__answer{
    grid-template-rows: 0fr;
    opacity: 0;
  }
}

/* =========================
   Answer content styling
========================= */
.catalyst-faq__answer{
  line-height: 1.6;
  padding-bottom: 1rem;
  color: var(--wp--preset--color--primary);
}

/* =========================
   Reduced motion
========================= */
@media (prefers-reduced-motion: reduce){
  .catalyst-faq__answer,
  .catalyst-faq__question::after{
    transition: none;
  }
}