/* Questions and answers: each question is a native <details> disclosure.
   Grid, sticky group titles, row rules and the section pills stay in page.css. */

/* the padding moves from the row onto the summary so the whole row is the click target */
details.qa { padding-block: 0; }

details.qa > .qa__q {
  position: relative;
  display: block;
  list-style: none;
  margin: 0;
  padding-block: 1.1rem;
  padding-inline-end: 2.4rem;
  border-radius: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
details.qa > .qa__q::-webkit-details-marker { display: none; }
details.qa > .qa__q::marker { content: ""; }
.qa__q h3 { font: inherit; color: inherit; margin: 0; text-wrap: pretty; }

/* chevron points down and turns to point up, so RTL needs no mirror; it sits at the
   inline end, which is the left edge in Arabic */
details.qa > .qa__q::after {
  content: "";
  position: absolute;
  inset-inline-end: 0.2rem;
  top: calc(1.1rem + 0.725em - 0.5rem); /* centred on the first line (line-height 1.45) */
  width: 1rem;
  height: 1rem;
  background-color: var(--ink-3-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 220ms var(--ease);
}

@media (hover: hover) {
  details.qa > .qa__q:hover { color: var(--gold-text); }
  details.qa > .qa__q:hover::after { background-color: var(--gold-text); }
}

details.qa > .qa__q:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}

details.qa[open] > .qa__q { color: var(--gold-text); padding-block-end: 0.5rem; }
details.qa[open] > .qa__q::after { background-color: var(--gold); transform: rotate(180deg); }

details.qa > .qa__a { padding-block-end: 1.3rem; }
details.qa[open] > .qa__a { animation: qa-reveal 240ms var(--ease) both; }

@keyframes qa-reveal {
  from { opacity: 0; transform: translateY(-0.35rem); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  details.qa > .qa__q::after { transition: none; }
  details.qa[open] > .qa__a { animation: none; }
}