/* =========================================================
   Program Accordions 2025
   ========================================================= */

.accordion {
  width: 100%;
  margin: 30px 0 30px;
  border-top: 2px solid #eee;
}

.accordion-item {
  border-bottom: 2px solid #eee;
  padding: 0.75rem 0;
}

.accordion-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}

.accordion-item summary::-webkit-details-marker {
  display: none;
}

.accordion-title {
  font-size: 24px;
  padding: 10px 0;
}

.accordion-icon {
  width: 34px;
  height: 34px;
  border: 3px solid #0069aa;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  color: #0069aa;
  flex: 0 0 auto;
}

.accordion-icon i {
  transition: transform 0.25s ease;
}

.accordion-item[open] summary .accordion-icon i::before {
  content: "\f068";
}

/*
   Animation shell.

   The panel starts collapsed by default.
   JavaScript animates this element's height.
*/
.accordion-panel {
  height: 0;
  overflow: hidden;
  box-sizing: border-box;
  transition: height 300ms ease;
}

/*
   Important fallback.

   If JavaScript does not run, or if the browser handles the native details
   opening before the script takes over, this allows the panel to display.
*/
.accordion-item[open] > .accordion-panel {
  height: auto;
}

/*
   Visual spacing belongs inside the animated shell.

   This prevents margin/padding jumps during open and close.
*/
.accordion:not(.accordion--legacy) .accordion-panel-inner {
  padding-top: 15px;
  padding-left: 4.1rem;
}

/*
   Prevent extra child margins from creating unexpected spacing.
*/
.accordion:not(.accordion--legacy) .accordion-panel-inner > :first-child {
  margin-top: 0;
}

.accordion:not(.accordion--legacy) .accordion-panel-inner > :last-child {
  margin-bottom: 0;
}

/*
   Respect reduced motion.
*/
@media (prefers-reduced-motion: reduce) {
  .accordion-panel {
    transition: none;
  }

  .accordion-icon i {
    transition: none;
  }
}