/* Common questions on the SAP EWM, TM and Logistics Management pages, as a collapsible list.
   Linked on those three pages only, after cap.css, so these rules replace its two-column .qa grid.
   A native <details> needs no script, works with the keyboard and screen readers, and keeps every
   answer in the page for search engines (the FAQPage markup carries the same text). */
.qa { display: block; max-width: 900px; }
.qa-item { border-top: 1px solid var(--line); padding: 0; }
.qa-item:last-child { border-bottom: 1px solid var(--line); }
.qa-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0;
                     cursor: pointer; list-style: none; }
.qa-item > summary::-webkit-details-marker { display: none; }
.qa-item > summary h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.4; transition: color .2s; }
/* the + turns into a close mark when the answer is open */
.qa-item > summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px;
                            border: 1px solid var(--line); border-radius: 50%; font: 400 18px/1 'IBM Plex Mono', monospace;
                            color: var(--lime); transition: transform .25s, border-color .2s; }
.qa-item[open] > summary::after { transform: rotate(45deg); border-color: rgba(179,210,48,.55); }
.qa-item > summary:hover h3, .qa-item > summary:focus-visible h3 { color: var(--lime); }
.qa-item > summary:hover::after { border-color: var(--lime); }
.qa-item > summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; border-radius: 4px; }
.qa-item > p { padding: 0 54px 24px 0; max-width: 72ch; }

@media (max-width: 620px) {
  .qa-item > summary { gap: 16px; padding: 18px 0; }
  .qa-item > summary h3 { font-size: 16px; }
  .qa-item > p { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .qa-item > summary h3, .qa-item > summary::after { transition: none; }
}