/* =====================================
   OFR FAQs (Display FAQs Shortcode)
   - Token-first
   - Native details/summary accordion
   - Divider-line layout (like your screenshot)
   - + / – affordance (no circles)
===================================== */

.ofr-faqs,
.ofr-faqs * { box-sizing: border-box; }

.ofr-faqs{
  --ofr-faq-maxw: 760px;
  --ofr-faq-divider: rgba(7,57,70,0.45);

  --ofr-faq-pad-y: var(--ofr-space-s, 24px);
  --ofr-faq-gap: var(--ofr-space-s, 24px);

  /* Use your system colour tokens where available */
  color: var(--ofr-ocean-dark, #073946)!important;
}

.ofr-faqs__list{
  max-width: var(--ofr-faq-maxw);
  margin: 0 auto;
}

/* Divider style between items */
.ofr-faqs__item{
  border-top: 1px solid var(--ofr-faq-divider);
  padding: 0;
  margin: 0;
}

/* Optional: last divider */
.ofr-faqs__item:last-child{
  border-bottom: 1px solid var(--ofr-faq-divider);
}

/* Summary = clickable question row */
.ofr-faqs__question{
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: var(--ofr-faq-pad-y) 0;
  margin: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ofr-space-s, 24px);

  text-align: left;
}
.ofr-faqs__question::-webkit-details-marker{ display: none; }

/* Semantic H3 inside summary, but styled like your “question” size */
.ofr-faqs__question-heading{
  margin: 0;
  font: inherit;
  line-height: inherit;

  /* If you want “question” to look like H5 visually: */
  font-size: var(--ofr-heading-h5-size, 18px);
  line-height: var(--ofr-heading-h5-lh, 1.3);
  font-weight: var(--ofr-heading-h5-weight, 600);
  text-transform: none;
  color: var(--ofr-ocean-dark, #073946)!important;
}

/* + / – indicator (no circle) */
.ofr-faqs__question::after{
  content: "+";
  flex: 0 0 auto;
  font-weight: 600;
  line-height: 1;
  opacity: 0.7;
}

.ofr-faqs__item[open] > .ofr-faqs__question::after{
  content: "–";
  opacity: 0.9;
}

/* Answer */
.ofr-faqs__answer{
  padding: 0 0 var(--ofr-faq-pad-y) 0;
  text-align: left;
}

/* Normalize answer typography (don’t fight your system classes) */
.ofr-faqs__answer p{
  margin: 0;
}
.ofr-faqs__answer p + p{
  margin-top: var(--ofr-space-xs, 16px);
}

/* Focus accessibility */
.ofr-faqs__question:focus{ outline: none; }
.ofr-faqs__question:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 4px;
}