/* Shared FAQ presentation: native theme disclosures and Typeflo's React controls.
   Only FAQ classes are targeted; other details and buttons retain their own styles. */
@font-face {
  font-family: "GBS FAQ Centra";
  src: local("Centra No. 2 Book"), local("CentraNo2-Book"), url(../fonts/centra-no2-book.woff2) format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.nc-FAQ {
  font-family: "GBS FAQ Centra", "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
}

.gbs-faq-item,
.nc-FAQ {
  --gbs-faq-ink: var(--green-dark, #174536);
  --gbs-faq-text: var(--ink-soft, #2d2d28);
  --gbs-faq-green: var(--green, #215e4b);
  --gbs-faq-white: var(--white, #fff);
  --gbs-faq-focus: var(--focus, #937b42);
  --gbs-faq-surface: #f7f3eb;
  --gbs-faq-surface-open: #edf2eb;
  --gbs-faq-border: rgba(20, 61, 47, .12);
  --gbs-faq-border-open: rgba(35, 105, 81, .34);
  --gbs-faq-icon-surface: rgba(35, 105, 81, .1);
  --gbs-faq-shadow: 0 12px 30px rgba(20, 61, 47, .08);
}

.gbs-faq-item,
.nc-FAQ button[aria-expanded][aria-controls] {
  box-sizing: border-box;
}

.gbs-faq-item,
.nc-FAQ div:has(> button[aria-expanded][aria-controls]) {
  margin-block: 10px;
  overflow: hidden;
  border: 1px solid var(--gbs-faq-border);
  border-radius: 16px;
  background: var(--gbs-faq-surface);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.gbs-faq-item[open],
.nc-FAQ div:has(> button[aria-expanded="true"][aria-controls]) {
  border-color: var(--gbs-faq-border-open);
  background: var(--gbs-faq-surface-open);
  box-shadow: var(--gbs-faq-shadow);
}

.gbs-faq-item > summary,
.nc-FAQ button[aria-expanded][aria-controls] {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 60px;
  padding-block: 12px;
  padding-inline: 18px 56px;
  border: 0;
  background: transparent;
  color: var(--gbs-faq-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  text-align: start;
  list-style: none;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.gbs-faq-item > summary::-webkit-details-marker { display: none; }
.gbs-faq-item > summary::marker { content: ""; }

.gbs-faq-item > summary :is(h3, h4) {
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: normal;
  text-align: inherit;
}

/* Typeflo emits important typography utilities on each question, including dark mode.
   Match that priority only at this widget boundary so its heading inherits the control. */
.nc-FAQ button[aria-expanded][aria-controls] h3 {
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font: inherit !important;
  letter-spacing: normal;
  text-align: inherit;
}

.gbs-faq-item > summary::after,
.nc-FAQ button[aria-expanded][aria-controls]::after {
  content: "+";
  position: absolute;
  inset-inline-end: 14px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gbs-faq-icon-surface);
  color: var(--gbs-faq-ink);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-50%);
  transition: color 180ms ease, background 180ms ease;
}

.gbs-faq-item[open] > summary::after,
.nc-FAQ button[aria-expanded="true"][aria-controls]::after {
  content: "−";
  background: var(--gbs-faq-green);
  color: var(--gbs-faq-white);
}

.gbs-faq-item > summary:focus-visible,
.nc-FAQ button[aria-expanded][aria-controls]:focus-visible {
  outline: 2px solid var(--gbs-faq-focus);
  outline-offset: -4px;
  border-radius: 15px;
}

.gbs-faq-item > .gbs-faq-answer,
.nc-FAQ [id^="faq-answer-"] > div > div {
  box-sizing: border-box;
  max-width: 72ch;
  margin-inline: 18px;
  padding: 0 0 18px;
  color: var(--gbs-faq-text);
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.gbs-faq-item > .gbs-faq-answer p,
.nc-FAQ [id^="faq-answer-"] p { margin-block: 0 18px; font-size: inherit; line-height: inherit; }
.gbs-faq-item > .gbs-faq-answer > :last-child,
.nc-FAQ [id^="faq-answer-"] > div > div > :last-child { margin-bottom: 0; }
.gbs-faq-item > .gbs-faq-answer :is(ul, ol) { padding-inline-start: 24px; }
.gbs-faq-item > .gbs-faq-answer a,
.nc-FAQ [id^="faq-answer-"] a { color: var(--gbs-faq-ink); text-decoration: underline; text-underline-offset: 4px; }
.gbs-faq-item > .gbs-faq-answer strong { color: var(--gbs-faq-ink); }

/* React owns aria-expanded, the controlled panel and its animation. */
.nc-FAQ div:has(> div > button[aria-expanded][aria-controls]) { display: block; }
.nc-FAQ button[aria-expanded][aria-controls] > span:has(svg) { display: none; }

@media (prefers-reduced-motion: reduce) {
  .gbs-faq-item,
  .gbs-faq-item > summary::after,
  .nc-FAQ div:has(> button[aria-expanded][aria-controls]),
  .nc-FAQ button[aria-expanded][aria-controls]::after { transition: none; }
}