/* Accordion
   Expandable sections built from native details and summary, so they work
   without JavaScript. Group sections in .dp-accordion. Colour and type from
   tokens.css. */

.dp-accordion {
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-lg);
  overflow: hidden;
  background: var(--dp-surface);
}

.dp-accordion details {
  border-bottom: 1px solid var(--dp-border);
}

.dp-accordion details:last-child {
  border-bottom: 0;
}

.dp-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dp-space-3);
  padding: var(--dp-space-4) var(--dp-space-5);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
  cursor: pointer;
  list-style: none;
}

.dp-accordion summary::-webkit-details-marker {
  display: none;
}

.dp-accordion summary:hover {
  background: var(--dp-surface-subtle);
}

.dp-accordion summary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--dp-blue-300);
}

.dp-accordion-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--dp-text-muted);
  transition: transform var(--dp-transition);
}

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

.dp-accordion-content {
  padding: 0 var(--dp-space-5) var(--dp-space-5);
  color: var(--dp-text-muted);
  font-size: var(--dp-text-sm);
}