/* ============================================================
   Accordion Component — structural stylesheet
   Visual styles (colors, padding, font, etc.) are emitted by
   AccordionComponent::render() inside a scoped <style> block
   keyed to the accordion's unique #acc-{id}.
   ============================================================ */

/* ── Container ─────────────────────────────────────────────── */
.accordion-container {
  /* border / background-color / border-radius injected by PHP */
  border-width: 1px;
  border-style: solid;
  overflow: hidden;
  margin: 20px 0;
  font-size: 14px;
  color: #333;
}

/* ── Wrapper ────────────────────────────────────────────────── */
.accordion-wrapper {
  display: block;
  width: 100%;
}

/* ── Item ───────────────────────────────────────────────────── */
.acc-item {
  border-bottom: 1px solid #e5e7eb;
}

.acc-item:last-child {
  border-bottom: none;
}

/* ── Header ─────────────────────────────────────────────────── */
/*
  Layout only — colors / padding / font are injected by PHP:
    #acc-{id} .accordion-header            { ...default style... }
    #acc-{id} .acc-item.open .accordion-header { ...active style... }
*/
.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
  user-select: none;
  /* Smooth transition when PHP active-style overrides kick in */
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.accordion-header:hover {
  filter: brightness(0.97);
}

/* ── Title ──────────────────────────────────────────────────── */
.accordion-title {
  flex: 1;
  min-width: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/* ── Icon image ─────────────────────────────────────────────── */
/*
  Base defaults — overridden by PHP rule:
    #acc-{id} .accordion-icon-img { ...iconStyle... }
*/
.accordion-icon-img {
  flex-shrink: 0;
  display: block;
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 4px;
}

/* ── Chevron (+ / −) ────────────────────────────────────────── */
.accordion-chevron {
  flex-shrink: 0;
  margin-left: 8px;
  font-size: 18px;
  line-height: 1;
  color: #555;
  font-style: normal;
}

/* ── Content panel ──────────────────────────────────────────── */
/*
  Smooth open/close via max-height trick.
  Padding/background injected by PHP:
    #acc-{id} .acc-content { padding:...; background-color:... }
*/
.acc-content {
  overflow: hidden;
  max-height: 0;
  /* Collapse vertical rhythm while closed */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition:
    max-height 0.3s ease,
    padding-top 0.3s ease,
    padding-bottom 0.3s ease;
}

.acc-item.open > .acc-content {
  /* Large enough for any real content; avoids abrupt snap */
  max-height: 2000px;
  /* Restore padding — PHP rule sets the actual values */
  padding-top: revert !important;
  padding-bottom: revert !important;
}

/* ── Icon-right layout helper ───────────────────────────────── */
/*
  When iconPosition="right" PHP outputs:
    [.accordion-title] [.accordion-icon-img] [.accordion-chevron]
  A small left gap between title and icon when it sits to the right.
*/
.accordion-title + .accordion-icon-img {
  margin-left: 8px;
}