.wp-block-details {
  border-top: 1px solid var(--wp--preset--color--border);
  padding-top: 12px;
  padding-bottom: 12px;
  margin-top: 0px !important;
}

.wp-block-details:last-of-type {
  border-bottom: 1px solid var(--wp--preset--color--border);
}

.wp-block-details > summary {
  font-size: var(--wp--preset--font-size--normal);
  font-family: var(--wp--preset--font-family--accent);
  font-weight: 700;
  list-style: none;
  gap: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.wp-block-details > summary::-webkit-details-marker {
  display: none;
}

.wp-block-details > summary::after {
  content: "";
  width: 10px;
  height: 24px;
  flex-shrink: 0;
  background-color: var(--wp--preset--color--secondary-light);
  mask: url("../../img/chevron-right.svg") no-repeat center / contain;
  -webkit-mask: url("../../img/chevron-right.svg") no-repeat center / contain;
  transition: transform 0.25s ease;
}

.wp-block-details[open] > summary::after {
  transform: rotate(-90deg);
}

/* [open] stays set until the collapse finishes, so the chevron needs
   is-closing to start turning back together with the content. */
.wp-block-details.is-closing > summary::after {
  transform: rotate(0deg);
}

.wp-block-details p {
  font-size: var(--wp--preset--font-size--small);
  margin-top: 1em !important;
  margin-bottom: 0 !important;
}

.wp-block-details p:last-child {
  padding-bottom: 1em;
}

/* JS-inserted, so WP's block-gap margin lands here — and a margin can't
   animate with height, it would snap at the end of the collapse. */
.wp-details-transition__content {
  margin: 0;
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition:
    height 0.35s cubic-bezier(0.33, 1, 0.68, 1),
    opacity 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}

.wp-block-details[open] > .wp-details-transition__content {
  opacity: 1;
}

.wp-block-details.is-closing > .wp-details-transition__content {
  opacity: 0;
}
/* scrollHeight ignores a bottom margin here, so it would snap in at the end
   of the expand; !important because the editor's spacing panel writes inline. */
.wp-details-transition__content > :last-child {
  margin-bottom: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  .wp-details-transition__content {
    height: auto;
    overflow: visible;
    opacity: 1;
    transition: none;
  }
}