/* =========================================================
   FLEXIBLE FAQ BUILDER - FRONTEND
   v0.4.0
   ========================================================= */

.ffb {
  --ffb-background: #F0EEE9;
  --ffb-surface: #FFFFFF;
  --ffb-text: #005461;
  --ffb-muted: #4A7076;
  --ffb-accent: #6257E3;
  --ffb-interaction: #4EB6B0;
  --ffb-border: #D5DEDD;

  --ffb-question-bg: #FFFFFF;
  --ffb-question-hover-bg: #E7F4F2;
  --ffb-question-hover-text: #005461;
  --ffb-question-open-bg: #E7F4F2;
  --ffb-question-open-text: #005461;
  --ffb-answer-bg: #FFFFFF;
  --ffb-answer-text: #315F65;

  --ffb-icon-bg: #FFFFFF;
  --ffb-icon-text: #005461;
  --ffb-icon-border: #4EB6B0;
  --ffb-icon-hover-bg: #005461;
  --ffb-icon-hover-text: #F0EEE9;
  --ffb-icon-open-bg: #005461;
  --ffb-icon-open-text: #F0EEE9;

  --ffb-font-family: "Nunito", Arial, Helvetica, sans-serif;
  --ffb-heading-font-family: "Metropolis", Arial, Helvetica, sans-serif;
  --ffb-base-font-size: 17px;
  --ffb-section-label-size: 0.72em;
  --ffb-section-size: 1.45em;
  --ffb-section-intro-size: 0.96em;
  --ffb-question-size: 1em;
  --ffb-answer-size: 0.96em;
  --ffb-answer-line-height: 1.68;
  --ffb-section-weight: 700;
  --ffb-section-label-weight: 700;
  --ffb-question-weight: 600;

  --ffb-section-index-width: 215px;
  --ffb-section-column-gap: 48px;
  --ffb-section-gap: 76px;
  --ffb-question-gap: 12px;
  --ffb-question-min-height: 64px;
  --ffb-question-padding-y: 18px;
  --ffb-question-padding-x: 22px;
  --ffb-answer-padding-top: 18px;
  --ffb-answer-padding-bottom: 22px;
  --ffb-answer-padding-x: 22px;
  --ffb-question-radius: 12px;
  --ffb-question-border-width: 1px;
  --ffb-icon-size: 32px;
  --ffb-icon-glyph-size: 11px;
  --ffb-icon-border-width: 1px;

  width: 100%;
  min-width: 0;

  color: var(--ffb-text);
  font-family: var(--ffb-font-family);
  font-size: var(--ffb-base-font-size);

  container-type: inline-size;
}

.ffb,
.ffb *,
.ffb *::before,
.ffb *::after {
  box-sizing: border-box;
}

.ffb[hidden],
.ffb [hidden] {
  display: none !important;
}

.ffb__notice {
  padding: 1rem 1.25rem;
  border: 1px solid var(--ffb-border);
  border-radius: 12px;
  background: var(--ffb-surface);
  color: var(--ffb-text);
}


/* =========================================================
   PAGE INTRO
   ========================================================= */

.ffb__page-intro {
  width: 100%;
  max-width: 960px;
  margin: 0;

  /*
   * The shortcode is a component, not a page shell.
   * Outer page/template CSS owns the vertical distance from
   * headers, breadcrumbs and neighbouring sections.
   */
  padding: 0;
}

.ffb__page-eyebrow {
  margin: 0 0 0.8rem;

  font-family: var(--ffb-heading-font-family);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;

  letter-spacing: 0.1em;
  text-transform: uppercase;

  color: var(--ffb-accent);
}

.ffb__page-title {
  max-width: 900px;
  margin: 0;

  font-family: var(--ffb-heading-font-family);
  font-size: clamp(2.7rem, 5vw, 4.6rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;

  color: var(--ffb-text);
  text-wrap: balance;
}

.ffb__page-lead {
  max-width: 720px;
  margin: 1.15rem 0 0;

  font-family: var(--ffb-font-family);
  font-size: clamp(1.08rem, 1rem + 0.3vw, 1.24rem);
  font-weight: 400;
  line-height: 1.62;

  color: var(--ffb-muted);
}

.ffb__page-rule {
  width: min(100%, 900px);
  height: 1px;
  margin-top: clamp(2rem, 3.5vw, 3rem);
  background: var(--ffb-border);
}


/* =========================================================
   SECTIONS
   ========================================================= */

.ffb__sections {
  width: 100%;

  /*
   * Internal separation between the page intro/divider and the
   * first FAQ section. This is component spacing, not page-shell
   * spacing, and mirrors the Buyer Consulting legal-page rhythm.
   */
  padding-top: clamp(2.5rem, 4vw, 4rem);
}

.ffb-columns--1 .ffb__sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.ffb-columns--2 .ffb__sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 4rem);
}

.ffb__section {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--ffb-section-gap) 0 0;
}

.ffb__section:first-child {
  padding-top: 0;
}

.ffb__section + .ffb__section {
  margin-top: var(--ffb-section-gap);
  border-top: 1px solid var(--ffb-border);
}

.ffb-section-header--indexed .ffb__section {
  display: grid;
  grid-template-columns: minmax(120px, var(--ffb-section-index-width)) minmax(0, 1fr);
  column-gap: var(--ffb-section-column-gap);
  align-items: start;
}

.ffb-section-header--indexed.ffb-section-info--left .ffb__section-header {
  grid-column: 1;
}

.ffb-section-header--indexed.ffb-section-info--left .ffb__questions {
  grid-column: 2;
}

.ffb-section-header--indexed.ffb-section-info--right .ffb__section {
  grid-template-columns: minmax(0, 1fr) minmax(120px, var(--ffb-section-index-width));
}

.ffb-section-header--indexed.ffb-section-info--right .ffb__section-header {
  grid-column: 2;
  order: 2;
}

.ffb-section-header--indexed.ffb-section-info--right .ffb__questions {
  grid-column: 1;
  order: 1;
}

.ffb-section-header--plain .ffb__section,
.ffb-section-info--above .ffb__section,
.ffb-layout--stacked .ffb__section {
  display: block;
}

.ffb-section-header--plain .ffb__section-header,
.ffb-section-info--above .ffb__section-header,
.ffb-layout--stacked .ffb__section-header {
  max-width: 760px;
  margin-bottom: 1.65rem;
}

.ffb__section-header {
  min-width: 0;
}

.ffb-section-align--center .ffb__section-header {
  text-align: center;
}

.ffb__section-label {
  margin: 0 0 0.55rem;

  font-family: var(--ffb-heading-font-family);
  font-size: var(--ffb-section-label-size);
  font-weight: var(--ffb-section-label-weight);
  line-height: 1.2;

  letter-spacing: 0.075em;

  color: var(--ffb-accent);
}

.ffb-section-label--hidden .ffb__section-label {
  display: none;
}

.ffb__section-title {
  margin: 0;

  font-family: var(--ffb-heading-font-family);
  font-size: var(--ffb-section-size);
  font-weight: var(--ffb-section-weight);
  line-height: 1.18;
  letter-spacing: -0.025em;

  color: var(--ffb-text);
  text-wrap: balance;
}

.ffb__section-intro {
  margin-top: 0.9rem;

  font-family: var(--ffb-font-family);
  font-size: var(--ffb-section-intro-size);
  font-weight: 400;
  line-height: 1.65;

  color: var(--ffb-muted);
}

.ffb__section-intro > :first-child,
.ffb__answer-inner > :first-child {
  margin-top: 0;
}

.ffb__section-intro > :last-child,
.ffb__answer-inner > :last-child {
  margin-bottom: 0;
}


/* =========================================================
   QUESTIONS
   ========================================================= */

.ffb__questions {
  display: flex;
  flex-direction: column;
  gap: var(--ffb-question-gap);

  width: 100%;
  min-width: 0;
}

.ffb__item {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;

  border: var(--ffb-question-border-width) solid var(--ffb-border);
  border-radius: var(--ffb-question-radius);

  background: var(--ffb-question-bg);

  overflow: clip;
}

.ffb__question {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;

  width: 100%;
  min-height: var(--ffb-question-min-height);
  margin: 0;
  padding: var(--ffb-question-padding-y) var(--ffb-question-padding-x);

  list-style: none;
  cursor: pointer;

  background: var(--ffb-question-bg);
  color: var(--ffb-text);

  transition:
    background-color 180ms ease,
    color 180ms ease;
}

.ffb__question::-webkit-details-marker {
  display: none;
}

.ffb__question::marker {
  content: "";
}

.ffb__question-text {
  min-width: 0;

  font-family: var(--ffb-heading-font-family);
  font-size: var(--ffb-question-size);
  font-weight: var(--ffb-question-weight);
  line-height: 1.4;
  letter-spacing: -0.01em;

  color: inherit;
}

.ffb__question:hover {
  background: var(--ffb-question-hover-bg);
  color: var(--ffb-question-hover-text);
}

.ffb__item[open] > .ffb__question {
  background: var(--ffb-question-open-bg);
  color: var(--ffb-question-open-text);
}


/* =========================================================
   ANSWERS
   ========================================================= */

.ffb__answer {
  background: var(--ffb-answer-bg);
  color: var(--ffb-answer-text);
}

.ffb__answer-inner {
  width: 100%;
  max-width: none;

  padding:
    var(--ffb-answer-padding-top)
    var(--ffb-answer-padding-x)
    var(--ffb-answer-padding-bottom);

  border-top: 1px solid var(--ffb-border);

  font-family: var(--ffb-font-family);
  font-size: var(--ffb-answer-size);
  font-weight: 400;
  line-height: var(--ffb-answer-line-height);

  color: var(--ffb-answer-text);
}

.ffb__answer-inner p,
.ffb__answer-inner li {
  color: inherit;
}

.ffb__answer-inner a {
  color: var(--ffb-accent);
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.ffb__answer-inner a:hover {
  color: var(--ffb-text);
}


/* =========================================================
   ICON
   ========================================================= */

.ffb__icon {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: var(--ffb-icon-size);
  height: var(--ffb-icon-size);

  border: var(--ffb-icon-border-width) solid var(--ffb-icon-border);
  border-radius: 999px;

  background: var(--ffb-icon-bg);
  color: var(--ffb-icon-text);

  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.ffb__question:hover .ffb__icon {
  background: var(--ffb-icon-hover-bg);
  border-color: var(--ffb-icon-hover-bg);
  color: var(--ffb-icon-hover-text);
}

.ffb__item[open] > .ffb__question .ffb__icon {
  background: var(--ffb-icon-open-bg);
  border-color: var(--ffb-icon-open-bg);
  color: var(--ffb-icon-open-text);
}

.ffb__icon-line {
  position: absolute;
  display: block;
  width: var(--ffb-icon-glyph-size);
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transition: transform 180ms ease;
}

.ffb-icon--chevron .ffb__icon-line--a {
  width: calc(var(--ffb-icon-glyph-size) * 0.62);
  transform: translateX(-2px) rotate(45deg);
}

.ffb-icon--chevron .ffb__icon-line--b {
  width: calc(var(--ffb-icon-glyph-size) * 0.62);
  transform: translateX(2px) rotate(-45deg);
}

.ffb-icon--chevron .ffb__item[open] .ffb__icon-line--a {
  transform: translateX(-2px) rotate(-45deg);
}

.ffb-icon--chevron .ffb__item[open] .ffb__icon-line--b {
  transform: translateX(2px) rotate(45deg);
}

.ffb-icon--plus .ffb__icon-line--a {
  transform: rotate(0deg);
}

.ffb-icon--plus .ffb__icon-line--b {
  transform: rotate(90deg);
}

.ffb-icon--plus .ffb__item[open] .ffb__icon-line--b {
  transform: rotate(0deg);
}

.ffb-icon--none .ffb__icon {
  display: none;
}


/* =========================================================
   DENSITY
   ========================================================= */

.ffb-density--compact {
  --ffb-question-min-height: max(48px, calc(var(--ffb-question-min-height) - 8px));
  --ffb-question-padding-y: max(10px, calc(var(--ffb-question-padding-y) - 5px));
  --ffb-answer-padding-top: max(10px, calc(var(--ffb-answer-padding-top) - 4px));
  --ffb-answer-padding-bottom: max(12px, calc(var(--ffb-answer-padding-bottom) - 5px));
}

.ffb-density--spacious {
  --ffb-question-min-height: calc(var(--ffb-question-min-height) + 8px);
  --ffb-question-padding-y: calc(var(--ffb-question-padding-y) + 5px);
  --ffb-answer-padding-top: calc(var(--ffb-answer-padding-top) + 4px);
  --ffb-answer-padding-bottom: calc(var(--ffb-answer-padding-bottom) + 5px);
}


/* =========================================================
   MINIMAL LIST - FUNCTIONALLY MINIMAL ONLY
   ========================================================= */

.ffb-preset--minimal-list .ffb__questions {
  gap: 0;
}

.ffb-preset--minimal-list .ffb__item {
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-radius: 0;
  background: transparent;
}

.ffb-preset--minimal-list .ffb__question,
.ffb-preset--minimal-list .ffb__answer {
  background: transparent;
}

.ffb-preset--minimal-list .ffb__question:hover,
.ffb-preset--minimal-list .ffb__item[open] > .ffb__question {
  background: var(--ffb-question-hover-bg);
}


/* =========================================================
   FOCUS
   ========================================================= */

.ffb__question:focus-visible,
.ffb__answer-inner a:focus-visible {
  outline: 3px solid var(--ffb-accent);
  outline-offset: 3px;
}


/* =========================================================
   DARK MODE - EXPLICIT ONLY
   ========================================================= */

.ffb[data-ffb-dark-enabled="true"][data-ffb-theme="dark"] {
  --ffb-background: #073F49;
  --ffb-surface: #0A4A55;
  --ffb-text: #F0EEE9;
  --ffb-muted: #C5D4D2;
  --ffb-border: #49727A;
  --ffb-question-bg: #0A4A55;
  --ffb-question-hover-bg: #145D66;
  --ffb-question-hover-text: #F0EEE9;
  --ffb-question-open-bg: #17656B;
  --ffb-question-open-text: #F0EEE9;
  --ffb-answer-bg: #0A4A55;
  --ffb-answer-text: #E1E8E6;
  --ffb-icon-bg: #073F49;
  --ffb-icon-text: #F0EEE9;
  --ffb-icon-border: #4EB6B0;
  --ffb-icon-hover-bg: #4EB6B0;
  --ffb-icon-hover-text: #073F49;
  --ffb-icon-open-bg: #4EB6B0;
  --ffb-icon-open-text: #073F49;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@container (max-width: 900px) {
  .ffb-columns--2 .ffb__sections {
    grid-template-columns: minmax(0, 1fr);
  }

  .ffb-section-header--indexed .ffb__section,
  .ffb-section-header--indexed.ffb-section-info--right .ffb__section {
    grid-template-columns: minmax(150px, 0.68fr) minmax(0, 1.6fr);
    column-gap: min(var(--ffb-section-column-gap), 34px);
  }

  .ffb-section-header--indexed.ffb-section-info--right .ffb__section {
    grid-template-columns: minmax(0, 1.6fr) minmax(150px, 0.68fr);
  }
}

@container (max-width: 700px) {
  .ffb__page-intro {
    padding: 0;
  }

  .ffb__page-title {
    font-size: clamp(2.25rem, 9cqw, 3.35rem);
  }

  .ffb-section-header--indexed .ffb__section,
  .ffb-section-header--indexed.ffb-section-info--right .ffb__section {
    display: block;
  }

  .ffb-section-header--indexed .ffb__section-header,
  .ffb-section-header--indexed.ffb-section-info--right .ffb__section-header {
    margin-bottom: 1.5rem;
  }

  .ffb__section + .ffb__section {
    margin-top: clamp(2.75rem, 9vw, 4rem);
    padding-top: clamp(2.75rem, 9vw, 4rem);
  }

  .ffb__section-title {
    font-size: max(1.3rem, var(--ffb-section-size));
  }

  .ffb__section-intro {
    max-width: 38rem;
  }

  .ffb__question {
    gap: 0.85rem;
    min-height: max(54px, var(--ffb-question-min-height));
    padding-left: min(var(--ffb-question-padding-x), 18px);
    padding-right: min(var(--ffb-question-padding-x), 16px);
  }

  .ffb__answer-inner {
    padding-left: min(var(--ffb-answer-padding-x), 18px);
    padding-right: min(var(--ffb-answer-padding-x), 18px);
  }
}

@container (max-width: 440px) {
  .ffb__page-title {
    font-size: clamp(2.05rem, 12cqw, 2.65rem);
  }

  .ffb__page-lead {
    font-size: 1rem;
  }

  .ffb__question-text,
  .ffb__answer-inner {
    font-size: 0.94rem;
  }

  .ffb__icon {
    width: max(28px, min(var(--ffb-icon-size), 32px));
    height: max(28px, min(var(--ffb-icon-size), 32px));
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .ffb *,
  .ffb *::before,
  .ffb *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* =========================================================
   BUYER SIGNATURE - BRANDED DETAIL
   v0.4.3

   This is the portable fallback treatment. On the Buyer
   Consulting website the global stylesheet uses the bc-faq
   hooks and is authoritative for final presentation.
   ========================================================= */

/*
 * Buyer Signature is embedded inside a host page layout.
 * It must not add page-level vertical spacing of its own.
 */
.ffb-preset--buyer-signature .ffb__page-intro,
.bc-faq--buyer-signature .bc-faq__intro,
.bc-faq .bc-faq__intro {
  padding-top: 0;
  padding-bottom: 0;
}

.ffb-preset--buyer-signature .ffb__sections,
.bc-faq--buyer-signature .bc-faq__sections {
  padding-top: clamp(2.5rem, 4vw, 4rem);
}

.ffb-preset--buyer-signature .ffb__page-eyebrow {
  display: block;
  width: fit-content;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ffb-accent);
}

.ffb-preset--buyer-signature .ffb__page-rule {
  height: 1px;
  border-radius: 0;
  background: var(--ffb-border);
}

.ffb-preset--buyer-signature .ffb__section-header {
  position: relative;
  padding: 0.1rem 0 0.1rem 1.1rem;
  border: 0;
  border-left: 3px solid var(--ffb-interaction);
  border-radius: 0;
  background: transparent;
}

.ffb-preset--buyer-signature .ffb__section-header::before {
  content: none;
  display: none;
}

.ffb-preset--buyer-signature .ffb__section-label {
  color: var(--ffb-accent);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.ffb-preset--buyer-signature .ffb__section-title {
  color: var(--ffb-text);
}

.ffb-preset--buyer-signature .ffb__item {
  border-color: var(--ffb-border);
  box-shadow: 0 6px 18px rgba(0, 84, 97, 0.035);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.ffb-preset--buyer-signature .ffb__item:hover {
  border-color: color-mix(in srgb, var(--ffb-text) 26%, transparent);
  box-shadow: 0 10px 24px rgba(0, 84, 97, 0.065);
}

.ffb-preset--buyer-signature .ffb__item[open] {
  border-color: color-mix(in srgb, var(--ffb-accent) 32%, transparent);
  box-shadow: 0 10px 28px rgba(42, 31, 119, 0.075);
}

.ffb-preset--buyer-signature .ffb__question {
  position: relative;
}

.ffb-preset--buyer-signature .ffb__item[open] > .ffb__question {
  box-shadow: inset 3px 0 0 var(--ffb-accent);
}

.ffb-preset--buyer-signature .ffb__answer-inner {
  border-top-color: color-mix(in srgb, var(--ffb-text) 10%, transparent);
}

.ffb-preset--buyer-signature .ffb__icon {
  box-shadow: none;
}

.ffb-preset--buyer-signature .ffb__question:hover .ffb__icon,
.ffb-preset--buyer-signature .ffb__item[open] > .ffb__question .ffb__icon {
  box-shadow: none;
}

/* =========================================================
   FRONTEND EDITORIAL SPLIT GUARANTEE

   The old 700px container collapse caused the frontend to
   stack at desktop when the shortcode sat inside a narrower
   Cornerstone content container. Keep the split until the
   FAQ itself is genuinely mobile-sized.
   ========================================================= */

@container (min-width: 621px) {
  .ffb-layout--editorial-split.ffb-section-header--indexed.ffb-section-info--left .ffb__section {
    display: grid !important;
    grid-template-columns:
      minmax(150px, var(--ffb-section-index-width))
      minmax(0, 1fr) !important;
    column-gap: var(--ffb-section-column-gap) !important;
    align-items: start;
  }

  .ffb-layout--editorial-split.ffb-section-header--indexed.ffb-section-info--left .ffb__section-header {
    grid-column: 1 !important;
  }

  .ffb-layout--editorial-split.ffb-section-header--indexed.ffb-section-info--left .ffb__questions {
    grid-column: 2 !important;
  }

  .ffb-layout--editorial-split.ffb-section-header--indexed.ffb-section-info--right .ffb__section {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(150px, var(--ffb-section-index-width)) !important;
  }

  .ffb-layout--editorial-split.ffb-section-header--indexed.ffb-section-info--right .ffb__section-header {
    grid-column: 2 !important;
    order: 2;
  }

  .ffb-layout--editorial-split.ffb-section-header--indexed.ffb-section-info--right .ffb__questions {
    grid-column: 1 !important;
    order: 1;
  }
}

@container (max-width: 620px) {
  .ffb-layout--editorial-split.ffb-section-header--indexed.ffb-section-info--left .ffb__section,
  .ffb-layout--editorial-split.ffb-section-header--indexed.ffb-section-info--right .ffb__section {
    display: block !important;
  }

  .ffb-layout--editorial-split.ffb-section-header--indexed.ffb-section-info--left .ffb__section-header,
  .ffb-layout--editorial-split.ffb-section-header--indexed.ffb-section-info--right .ffb__section-header {
    margin-bottom: 1.5rem;
  }
}

/* Final motion override after Buyer Signature enhancements. */
@media (prefers-reduced-motion: reduce) {
  .ffb *,
  .ffb *::before,
  .ffb *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}