/*
 * Аккордеон на нативных <details>/<summary>: работает без JS, с клавиатуры (Enter/Space) и в читалках.
 * Структура: .op-accordion > details.op-accordion__item > summary.op-accordion__summary + .op-accordion__panel.
 */

/* Без рамок вокруг пунктов: разделение — тонкая линия снизу (декор, не несёт смысла) */
.op-accordion {
  display: flex;
  flex-direction: column;
  border-top: var(--border-width) solid var(--color-border);
}

.op-accordion__item {
  border-bottom: var(--border-width) solid var(--color-border);
}

.op-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--hit-min);
  padding: var(--space-4) var(--space-2);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  cursor: pointer;
  list-style: none;
  transition: color var(--transition-ui);
}

.op-accordion__summary::-webkit-details-marker {
  display: none;
}

.op-accordion__summary:hover {
  color: var(--color-primary-hover);
}

.op-accordion__summary:focus-visible {
  outline-offset: calc(var(--focus-offset) * -1);
}

/* Шеврон рисуется рамками; поворачивается при открытии */
.op-accordion__summary::after {
  content: "";
  flex: none;
  width: var(--space-2);
  height: var(--space-2);
  margin-right: var(--space-1);
  border: solid var(--color-primary);
  border-width: 0 var(--border-width-strong) var(--border-width-strong) 0;
  transform: rotate(45deg);
  transition: transform var(--transition-ui);
}

.op-accordion__item[open] > .op-accordion__summary::after {
  transform: rotate(-135deg);
}

.op-accordion__panel {
  padding: 0 var(--space-2) var(--space-5);
}

.op-accordion__panel > :last-child {
  margin-bottom: 0;
}