/* assets/css/components/accordion.css */
.accordion {
  display: grid;
  gap: var(--space-2);
}

.accordion__item {
  border: var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
}

.accordion__trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 14px;
  background: var(--color-white);
  border: 0;
  color: var(--color-gray-900);
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s;
}

.accordion__trigger:focus-visible {
  outline: 3px solid var(--color-gray-900);
  outline-offset: -3px;
}

/* Icon rotation */
.accordion__trigger i.fa-chevron-down {
  transition: transform 0.3s ease;
}

.accordion__trigger[aria-expanded="true"] i.fa-chevron-down {
  transform: rotate(180deg);
}

/* Panel Animation (Grid Trick) */
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out, opacity 0.3s ease-out;
  opacity: 0;
  /* overflow: hidden is implied by 0fr usually but safer to have it here if we want to be strict, 
     but grid implementation handles overflow by clipping constraints usually. 
     Actually, we need overflow hidden on the panel to hide valid content. */
  overflow: hidden;
}

.accordion__panel[aria-hidden="false"] {
  grid-template-rows: 1fr;
  opacity: 1;
}

.accordion__content {
  min-height: 0;
  color: var(--color-gray-700);
}


.accordion__content p {
  padding: 5px 14px 14px 14px
}

/* --- CSS-only accordion support using <details>/<summary> --- */
.accordion__item > summary.accordion__trigger {
  list-style: none; /* remove default marker in Firefox */
}

/* remove default marker in WebKit (Chrome/Safari/Edge) */
.accordion__item > summary.accordion__trigger::-webkit-details-marker {
  display: none;
}

/* Open state: rotate icon (works without JS) */
.accordion__item[open] > summary.accordion__trigger i.fa-chevron-down {
  transform: rotate(180deg);
}

/* Open state: reveal panel (works without JS) */
.accordion__item[open] > .accordion__panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* Optional: prevent accidental text selection on rapid taps */
.accordion__item > summary.accordion__trigger {
  -webkit-tap-highlight-color: transparent;
}