.com-accordion {
  --com-accordion-padding            : 1rem;
  --com-accordion-content-max-height : 1000px;
  --color-com-accordion-border       : hsl(0 0% 80% / 1);
  --color-com-accordion-bg           : hsl(0 0% 94% / 1);
  --color-com-accordion-bg-hover     : hsl(0 0% 88% / 1);
}

.com-accordion {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
}

.com-accordion-item {
  border: 1px solid var(--color-com-accordion-border);
  border-top: none;
}

.com-accordion-item:first-child {
  border-top: 1px solid var(--color-com-accordion-border);
}

.com-accordion-toggle {
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  width: 100%;
  padding: var(--com-accordion-padding);
  text-align: left;
  background: var(--color-com-accordion-bg);
  border: none;
}

.com-accordion-toggle:hover {
  background: var(--color-com-accordion-bg-hover);
}

.com-accordion-content {
  max-height: 0;
  overflow: hidden;
}

.com-accordion-item.is-open .com-accordion-content {
  max-height: var(--com-accordion-content-max-height);
}

.com-accordion-content-inner {
  padding: var(--com-accordion-padding);
  border-top: 1px solid var(--color-com-accordion-border);
  p:last-child { margin-bottom: 0; }
}