/* Accordion - things Tailwind can't handle */

/* Hide native marker */
.details-accordion summary::-webkit-details-marker,
.details-accordion summary::marker {
  display: none;
}

/* Chevron via CSS mask */
.details-accordion summary::after {
  content: "";
  margin-left: auto;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  opacity: 0.5;
  transition: transform 0.2s ease;
}

.details-accordion[open] summary::after {
  transform: rotate(180deg);
}

/* Animate content open/close via CSS grid */
.accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease;
}

.details-accordion[open] .accordion-body {
  grid-template-rows: 1fr;
}