/* FAQ accordion: native details and summary, no script. The eyebrow, heading and column come from the page's own
   rules; this file styles the question rows and answers with the page's colors. */

/* Questions: navy, body size, weight 600, a thin navy rule between items. */
.faq-item + .faq-item { border-top: 1px solid var(--navy); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  /* 17px is the triangle (8px) plus its gap (9px); wrapped lines hang under the question text. */
  padding: 22px 0 22px 17px;
  text-indent: -17px;
  color: var(--navy);
  font-size: inherit;
  font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }

/* The small brand triangle the eyebrows and chips use: points right when closed, down when open. */
.faq-item summary::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 8px solid var(--pink);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  margin-right: 9px;
  vertical-align: 3px;
}
.faq-item[open] > summary::before { transform: rotate(90deg); }

/* Keyboard focus, in the page's focus ring. */
.faq-item summary:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

/* Answers: the page's body text, lined up under the question text. */
.faq-item[open] > summary { padding-bottom: 8px; }
.faq-item p {
  color: var(--body);
  padding: 0 0 26px 17px;
  max-width: 800px;
  text-wrap: pretty;
}