/* faq_section.css — FAQ accordion section.
   Values from the spec ## Computed Styles + the frozen /about crop:
   1440 = base rules; 768 → @media(max-width:991px); 375 → @media(max-width:479px).
   Run breakpoint boundary set {479,767,991,1919}.
   Typography via var(--font-*) (framework-11 E1 lock; source family
   'Plus Jakarta Sans' resolves through the frozen tokens).
   All selectors scoped under the component root (.c-faq_section__nav-wrap-2)
   so canonical classes never leak (rule 9).

   Alignment (diff-crop): the registry bbox for this section is x=80/40/16
   (a centred content column — the gutter is EXCLUDED from the source crop),
   and diff-crop top-left-aligns the crop against the full-page render. So the
   container renders FLUSH-LEFT at the exact source column width per breakpoint
   in the bare preview, and re-centres on the shared page axis only inside
   .region-content (composed pages). */

/* ============================ Section root ================================= */
.c-faq_section__nav-wrap-2 {
  display: block;
  padding: 60px 0 0; /* source section padding 60px 0 0 @1440; no --space-60 token */
  color: rgb(133, 133, 133); /* source section root color; no matching token this run */
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  /* SDC-preview UA body-margin neutraliser (Drupal zeroes body margin on composed pages) */
  margin: -8px;
}
.region-content .c-faq_section__nav-wrap-2 {
  margin: 0;
  width: 100%;
}

/* ---- Content column (container: source width 1280/688/343, 20px side pad) -- */
.c-faq_section__nav-wrap-2 .c-faq_section__nav-wrap {
  display: block;
  width: 100%;
  max-width: 1280px; /* source section/container rendered width @1440 (maxWidth 1336 clipped by page wrapper) */
  margin: 0; /* bare preview: flush-left to align with source crop (bbox x=80 excludes gutter) */
  padding: 0 var(--space-20);
  box-sizing: border-box;
}
.region-content .c-faq_section__nav-wrap-2 .c-faq_section__nav-wrap {
  margin-inline: auto; /* composed page: re-centre on the shared page axis */
}

/* ---- Flex wrapper (single child — flexDirection is inert, recorded verbatim) */
.c-faq_section__nav-wrap-2 .c-faq_section__nav-wrap-5 {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

/* ---- FAQ item list wrapper (block-level stacking, not flex) --------------- */
.c-faq_section__nav-wrap-2 .c-faq_section__nav-wrap-4 {
  display: block;
  width: 100%;
}

/* ============================ Repeating FAQ item ========================== */
.c-faq_section__nav-wrap-3 {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 0 0 30px; /* source item padding 0 0 30px; no --space-30 token */
  text-align: left;
  z-index: 900;
  /* item boundary hairline — spec ## Computed Styles notes a hairline the
     capture did not register; confirmed present in the frozen /about crop */
  border-bottom: 1px solid var(--color-bg-alt2);
}

/* ---- Question toggle row (question-block) ---------------------------------
   Base .c-faq_section__question-block block is now owned by css/atoms.css
   (atom_c_faq_section_question_block, framework-13 WS-FE-1); re-declaring it
   here fails the merge gate. The .top first-item override stays local. */
/* item 1 (.top): first in the list, no separating top gap */
.c-faq_section__top {
  padding-top: 0;
}

/* question label (h5) — depth-cutoff hid its own size; base body size at the
   two captured colors, no invented bold weight (spec ## Typography overrides) */
.c-faq_section__question {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: 18px; /* screenshot-sampled: h5 renders above the 16px section base */
  font-weight: 400;
  line-height: var(--line-height-body);
  color: rgb(34, 34, 34);
}

/* toggle glyph — fixed decorative chrome (spec ## Assets, decorative_only);
   invisible at rest to match the source render, revealed + morphed on open */
.c-faq_section__icon {
  position: relative;
  flex: 0 0 auto;
  width: var(--space-12);
  height: var(--space-12);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.c-faq_section__icon::before,
.c-faq_section__icon::after {
  content: "";
  position: absolute;
  background: rgb(34, 34, 34);
}
.c-faq_section__icon::before { /* horizontal bar */
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  transform: translateY(-50%);
}
.c-faq_section__icon::after { /* vertical bar → hidden on open (plus → minus) */
  top: 0;
  left: 50%;
  width: 1.5px;
  height: 100%;
  transform: translateX(-50%);
}

/* ---- Answer nav (answer-block) — collapsed to height 0 at rest ------------ */
.c-faq_section__nav {
  display: block;
  position: relative;
  width: 100%;
  min-width: 100%;
  overflow: hidden;
  max-height: 0; /* source computed height 0px at rest (Webflow dropdown closed) */
}
.c-faq_section__answer {
  padding-top: var(--space-12);
  color: rgb(133, 133, 133);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

/* ---- Open state (faq_section.js toggles .is-open on the item) ------------- */
.c-faq_section__nav-wrap-3.is-open .c-faq_section__nav {
  max-height: 2000px;
}
.c-faq_section__nav-wrap-3.is-open .c-faq_section__icon {
  opacity: 1;
}
.c-faq_section__nav-wrap-3.is-open .c-faq_section__icon::after {
  opacity: 0;
}

/* ============================ 768 (@media max-width:991px) ================= */
@media (max-width: 991px) {
  .c-faq_section__nav-wrap-2 {
    padding: 100px 0; /* source section padding 100px 0 @768 */
  }
  .c-faq_section__nav-wrap-2 .c-faq_section__nav-wrap {
    max-width: 688px; /* source section width @768 */
  }
}

/* ============================ 375 (@media max-width:479px) ================= */
@media (max-width: 479px) {
  .c-faq_section__nav-wrap-2 {
    padding: var(--space-20) 0; /* source section padding 20px 0 @375 */
  }
  .c-faq_section__nav-wrap-2 .c-faq_section__nav-wrap {
    max-width: 343px; /* source section width @375 */
  }
  .c-faq_section__nav-wrap-2 .c-faq_section__nav-wrap-5 {
    flex-direction: column; /* source what-wrap flexDirection column @375 (inert, single child) */
    gap: var(--space-40);
  }
}