.com-accordion {
  --com-accordion-padding            : 1rem;
  --com-accordion-duration           : 0.3s;
  --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);
}

/* Open/close animation: the grid-template-rows 0fr→1fr trick animates to the
   content's NATURAL height (no max-height magic number, so timing is smooth
   for short and long panels alike). visibility:hidden while closed removes
   the collapsed content from the tab order and from screen readers — with
   plain overflow:hidden, links inside a closed panel stayed focusable. The
   delayed visibility transition keeps content visible until the close
   animation finishes. */
.com-accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--com-accordion-duration) ease,
              visibility 0s linear var(--com-accordion-duration);
}

.com-accordion-item.is-open .com-accordion-content {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--com-accordion-duration) ease,
              visibility 0s;
}

/* Vertical padding and the top border can't be compressed by the collapsing
   grid row (padding keeps its height even at 0fr), so closed panels would
   show an empty strip. Animate them alongside the height instead: closed =
   no vertical padding, transparent border. */
.com-accordion-content-inner {
  min-height: 0;      /* Lets the 0fr grid row actually collapse. */
  overflow: hidden;
  padding: 0 var(--com-accordion-padding);
  border-top: 1px solid transparent;
  transition: padding var(--com-accordion-duration) ease,
              border-top-color var(--com-accordion-duration) ease;
  p:last-child { margin-bottom: 0; }
}

.com-accordion-item.is-open .com-accordion-content-inner {
  padding: var(--com-accordion-padding);
  border-top-color: var(--color-com-accordion-border);
}

/* WCAG 2.3.3: honor the user's OS-level reduced-motion setting. */
@media (prefers-reduced-motion: reduce) {
  .com-accordion-content,
  .com-accordion-item.is-open .com-accordion-content,
  .com-accordion-content-inner,
  .com-accordion-item.is-open .com-accordion-content-inner {
    transition: none;
  }
}