/* ==========================================================================
  FTS: accordions.css
  Purpose:
  - Visually separated accordion items
  - Clean, uppercase triggers
  - Preserve keyboard focus visibility
  ========================================================================== */

.fl-accordion .fl-accordion-item {
  margin-bottom: 10px;
  background-color: var(--white);
  border: 1px solid var(--cream);
  transition: margin-bottom 0.2s ease;
}

.fl-accordion .fl-accordion-content.open {
  margin-bottom: 0;
}

.fl-accordion .fl-accordion-button {
  display: flex;
  align-items: center;
  justify-content: space-between;

  background: var(--white);
  border: none;
  box-shadow: none;

  text-align: left;
  text-transform: uppercase;

  padding-right: 2rem;
  cursor: pointer;
}

.fl-accordion-button-label {
  margin: 0;
  padding: 0;

  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: var(--weight-bold);
  line-height: 1.1;
  letter-spacing: 0.025em;
  text-transform: uppercase;

  color: var(--midnight);
  transition: color 0.25s ease;
}

.fl-accordion-button-label:hover {
  color: var(--ocean);
}

.fl-accordion-button-icon {
  color: var(--ocean);
  outline: none !important;
}

.fl-accordion .fl-accordion-content {
  display: none;
  margin-bottom: 4px;

  background: var(--white);
  border: none;

  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--midnight);
}

/* Keyboard focus: visible and consistent */
.fl-accordion .fl-accordion-button:focus-visible {
  outline: var(--fts-focus-width) solid var(--fts-focus-ring);
  outline-offset: var(--fts-focus-offset);
}

@media (forced-colors: active) {
  .fl-accordion .fl-accordion-button:focus-visible {
    outline: 2px solid CanvasText !important;
  }
}

/* When BB is actively editing, keep chrome clean */
:where(body.fl-builder, body.fl-builder-edit, body.fl-builder-preview)
.fl-accordion .fl-accordion-button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}