/* =========================================================
   Kirzner Premium Accordion
   ========================================================= */
.kpa-accordion,
.kpa-accordion * { box-sizing: border-box; }
.kpa-accordion { width: 100%; --kpa-scroll-offset: 120px; }
.kpa-item { width: 100%; scroll-margin-top: var(--kpa-scroll-offset, 120px); }
.kpa-header {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 18px;
  border: 0 solid transparent;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease;
}
.kpa-title-wrap { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.kpa-prefix { display: inline-flex; flex: 0 0 auto; line-height: 1; transition: color 220ms ease; }
.kpa-title-text { margin: 0; color: inherit; line-height: 1.25; transition: color 220ms ease; }
.kpa-icons { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; line-height: 1; }
.kpa-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  color: inherit;
  line-height: 1;
  transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.kpa-icon svg,
.kpa-icon i { display: block; width: 1em; height: 1em; fill: currentColor; }
.kpa-icon-normal { display: inline-flex; }
.kpa-header:hover .kpa-icon-normal,
.kpa-item.is-active .kpa-icon-normal { display: none; }
.kpa-header:hover .kpa-icon-hover { display: inline-flex; }
.kpa-item.is-active .kpa-icon-hover { display: none; }
.kpa-item.is-active .kpa-icon-active { display: inline-flex; }
.kpa-panel {
  --kpa-speed: 320ms;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--kpa-speed) ease, opacity 220ms ease;
}
.kpa-item.is-active > .kpa-panel { opacity: 1; }
.kpa-panel[hidden] { display: block; }
.kpa-content { border: 0 solid transparent; color: inherit; }
.kpa-content-inner { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .kpa-header,
  .kpa-prefix,
  .kpa-title-text,
  .kpa-icon,
  .kpa-panel { transition: none !important; }
}
