/* container + items */
.wcag-accordions { width: 100%;  }
.wcag-accordions__item { border-bottom: 1px solid #444; }
.wcag-accordions__header { margin: 0; font-size:20px;}

/* trigger (your visual classes preserved) */
.accordion {
  position: relative;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  color: black;
  cursor: pointer;
  padding: 20px 20px 20px 70px;
  transition: 0.4s;
  background-color: transparent;
  width: 100%;
  border: 0;
  text-align: left;
  font: inherit;
  line-height: 1.4;
}
.accordion:hover { color: black; }
.accordion:hover, .open-accordion, .panel { background-color: #F6CDC1 !important; }
.accordion:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
  border-radius: .5rem;
}

/* icon states */
.accordion:before{
  transition: 0.2s;
  position: absolute;
  width: 25px;
  height: 25px;
  left: 20px;
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 25px 25px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='39.421' height='39.421' viewBox='0 0 39.421 39.421'%3E%3Cline y2='37.421' transform='translate(19.71 1)' fill='none' stroke='%23444' stroke-linecap='round' stroke-width='2'/%3E%3Cline x1='37.421' transform='translate(1 19.71)' fill='none' stroke='%23444' stroke-linecap='round' stroke-width='2'/%3E%3C/svg%3E%0A");
}


.accordion.active:before { transform: rotate(45deg); }
.accordion.active { background-color: #F6CDC1; }

/* panel */
.panel {
  padding: 0 70px;
  color: #444;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out, padding-top 0.2s ease-out, padding-bottom 0.2s ease-out;
}
.panel ul li { color: black; }

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