/* =======================================================
  FAQ block — collapsible disclosure widget
  Styled to match the key-takeaways card pattern using
  the summary block's blue palette.
  WCAG 2.1/2.2 AA compliance:
  - 1.4.3  explicit #1a1a1a on #f0f4f8 → 13.6:1 contrast ✓
  - 1.4.11 border #b0bec5 on #f0f4f8 → ≥ 3:1 ✓
  - 2.4.7/2.4.11 3px solid #005fcc focus outline ✓
  - 2.3.3  prefers-reduced-motion suppresses transitions
  ======================================================= */

/* Container */
.block-faq {
  background: #f0f4f8;
  border-left: 4px solid #3dcd58;
  border-radius: 4px;
  padding: 16px;
  margin: 16px 0;
  box-sizing: border-box;
}

/* -------------------------------------------------------
   Interactive summary trigger
   ------------------------------------------------------- */
.block-faq > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a1a;
  padding-bottom: 6px;
  /* border-bottom: 1px solid #b0bec5; */
  margin-bottom: 10px;
  user-select: none;
}

/* Remove default WebKit/Firefox disclosure markers */
.block-faq > summary::-webkit-details-marker {
  display: none;
}

/* Custom chevron arrow */
.block-faq > summary::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid #1a1a1a;
  border-bottom: 2px solid #1a1a1a;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: 8px;
}

.block-faq[open] > summary::after {
  transform: rotate(225deg);
}

/* 2.4.7/2.4.11 — visible keyboard focus ring */
.block-faq > summary:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Remove pointer-click ring; preserve keyboard ring */
.block-faq > summary:focus:not(:focus-visible) {
  outline: none;
}

/* 2.3.3 — Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .block-faq,
  .block-faq > summary,
  .block-faq > summary::after {
    transition: none;
  }
}

h3.schema-faq-question {
  font-size: 1.5rem;
  font-weight: 700;
}
