/* Site-wide accordion look for AsciiDoc collapsible blocks ([%collapsible] -> <details>),
   mostly used for FAQs. Replaces the theme's left-hand triangle with a chevron on the right
   and separates consecutive questions with thin lines. Antora's own details.result blocks
   (code example results) keep the default theme styling. */

.doc details:not(.result) {
  margin: 1rem 0 0;
  border-top: 1px solid #e3e7ed;
  border-bottom: 1px solid #e3e7ed;
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
}

/* Collapse the borders of consecutive questions into a single separator line. */
.doc details:not(.result) + details:not(.result) {
  margin-top: -1px;
}

.doc details:not(.result) > summary {
  margin: 0;
  padding: 0.75rem 2.25rem 0.75rem 0.5rem;
  color: var(--color-oem-secondary, #00204e);
  transition: background-color 0.15s ease;
}

@media (hover: hover) {
  .doc details:not(.result) > summary:hover {
    background: #f5f7fa;
  }
}

.doc details:not(.result) > summary:focus-visible {
  outline: 2px solid var(--color-oem-primary, #0fcdf8);
  outline-offset: -2px;
}

/* Chevron (Font Awesome "chevron-down", solid) replacing the theme's CSS triangle. */
.doc details:not(.result) > summary::before {
  content: "\f078";
  position: absolute;
  top: 50%;
  right: 0.75rem;
  left: auto;
  width: auto;
  height: auto;
  margin-top: -0.5em;
  border: none;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.8rem;
  line-height: 1;
  color: #8a96a8;
  transform: none;
  transition: transform 0.2s ease;
}

.doc details[open]:not(.result) > summary::before {
  border: none;
  transform: rotate(180deg);
}

/* The theme uses ::after as an enlarged click target for its left-hand triangle. */
.doc details:not(.result) > summary::after {
  content: none;
}

.doc details:not(.result) > .content {
  padding: 0.25rem 0.5rem 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .doc details:not(.result) > summary,
  .doc details:not(.result) > summary::before {
    transition: none;
  }
}

/* Small uppercase group label above a set of questions, opt-in via
     [discrete.doc-faq-group]
     === Group name */
.doc h3.discrete.doc-faq-group {
  margin: 2rem 0 0.5rem;
  color: #6b7686;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.doc h3.discrete.doc-faq-group + details:not(.result) {
  margin-top: 0.5rem;
}