/**
 * Q&A with FAQPage microdata (design/sections/fragor.section.json).
 *
 * Replaces the template's `faq`, which renders identical markup but carries no
 * structured data at all — nothing in the deepwater section pack emits any. The
 * schema is expressed as microdata attributes rather than JSON-LD because section
 * templates forbid <script>; the itemscope/itemprop attributes survive that ban
 * and describe the same FAQPage graph.
 *
 * <details> keeps a long answer list scannable. The text stays in the HTML source
 * either way, so an answer engine reads it whether or not a human expands it.
 */

.dw-band--fragor {
  padding-block: var(--dw-section-y);
}

.dw-fragor {
  margin-top: 1.25rem;
  border-top: 1px solid var(--dw-line);
  max-width: 52rem;
}

.dw-fragor__item {
  border-bottom: 1px solid var(--dw-line);
}

.dw-fragor__q {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  /* 44px minimum target, and the whole row is clickable rather than the text alone. */
  min-height: 44px;
  padding: 0.9rem 0;
  cursor: pointer;
  font-family: var(--dw-display);
  font-weight: 600;
  color: var(--dw-ink);
  list-style: none;
}

/* Safari still paints its own disclosure triangle without this. */
.dw-fragor__q::-webkit-details-marker {
  display: none;
}

.dw-fragor__q::before {
  content: "+";
  flex: none;
  font-weight: 700;
  color: var(--wp--preset--color--accent);
  transition: transform 160ms var(--dw-ease);
}

.dw-fragor__item[open] .dw-fragor__q::before {
  content: "–";
}

.dw-fragor__q:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}

.dw-fragor__a {
  padding: 0 0 1.1rem 1.6rem;
  color: var(--dw-dis);
  line-height: 1.6;
  max-width: 46rem;
}

@media (prefers-reduced-motion: reduce) {
  .dw-fragor__q::before { transition: none; }
}