/* experience_editor/accordion.css – Accordion + section layout */

/* ── Accordion section ── */
.accordion__section {
  border-bottom: none;
}

/* ── Accordion header (base) ── */
.accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 var(--space-4);
  border: none;
  background: none;
  width: 100%;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background var(--duration-fast) var(--ease-out);
}

/* ── Chevron ── */
.accordion__chevron {
  font-size: 18px;
  transition: transform var(--duration-fast) var(--ease-out);
}
.accordion__section[data-open="true"] .accordion__chevron {
  transform: rotate(90deg);
}

/* ── CSS grid height animation ── */
.accordion__body {
  display: grid;
  grid-template-rows: 0fr;
}
.accordion--ready .accordion__body {
  transition: grid-template-rows var(--duration-normal) var(--ease-out);
}
.accordion--ready .accordion__chevron {
  transition: transform var(--duration-fast) var(--ease-out);
}
.accordion__section[data-open="true"] .accordion__body {
  grid-template-rows: 1fr;
}
.accordion__content {
  overflow: hidden;
  padding: var(--space-4);
}
/* When open, allow popovers to overflow (clipping only needed during animation) */
.accordion__section[data-open="true"] .accordion__content {
  overflow: visible;
}

/* ── Section dividers — accent-colored top border + bold title ── */
.ee-section + .ee-section {
  margin-top: var(--space-8, 32px);
}
.ee-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  position: relative;
}
.ee-section__title > .material-symbols-rounded {
  font-size: 24px;
  color: var(--accent-primary);
}

.ee-section__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* Hide empty Turbo Stream wrapper divs so they don't create phantom flex gaps */
.ee-section__fields > [id]:not(:has(*)) {
  display: none;
}
.ee-section__fields .form-group {
  margin-bottom: 0;
}