.accordion {
  padding: var(--spacing-3) 0;
  border-bottom: 0.1rem solid var(--bg-primary);
}

.accordion:first-child {
  border-top: 0.1rem solid var(--bg-primary);
}

.accordion__title {
  margin-top: 0;
}

.accordion-item__header button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  color: var(--c-heading-secondary);
  padding: 0 var(--spacing-6) 0 0;
  text-align: left;
}

.accordion-item__header .button__icon {
  background-color: transparent;
}

.accordion-item__header {
  margin: 0;

  span {
    line-height: 1.5;
  }
}

.accordion-item__header:focus-visible {
  border-radius: 0.375rem;
}

.accordion-item__header .button__icon .icon {
  fill: var(--c-primary-orange);
  transform: rotate(180deg);
  width: 3rem;
  height: 3rem;
  transition: transform 0.3s ease; /* Smooth transition */
}

.accordion-item__header.is-active .button__icon .icon {
  transform: rotate(0);
}

.accordion-item__content {
  margin-top: var(--spacing-2);

  li:not(:last-child) {
    margin-bottom: var(--spacing-2);
  }

  li::marker {
    color: var(--c-primary-orange);
  }
}

.accordion-item__content > :first-child {
  margin-top: 0;
}

.accordion-item__content > :last-child {
  margin-bottom: 0;
}

/* Accordion blue variation */
.paragraph--type--accordion.c-bg--blue .accordion-item__header button {
  color: var(--c-primary-light);
}

.paragraph--type--accordion.c-bg--blue .accordion {
  border-color: var(--c-primary-light);
}

@media (min-width: 768px) {
  .accordion {
    padding: var(--spacing-4) 0;
  }

  .accordion-item__content {
    margin-top: var(--spacing-4);
  }
}

@media (min-width: 1440px) {
  .accordion {
    padding: var(--spacing-5) 0;
  }
}