/* ==========================================================================
   FAQ — Webflow code component styles (rendered inside Shadow DOM)

   Site variables defined in Webflow live on :root, and CSS custom properties
   inherit into Shadow DOM, so the component reads them directly.

   Source of truth is the Figma frame. A Webflow variable is used only where
   its value matches Figma; everything else is a fixed Figma value.
   ALL values live in the token block below. If a variable is renamed in
   Webflow, change it here only. Every variable reference has a fallback
   equal to the Figma value, so nothing breaks if a name doesn't resolve.

   Webflow's CSS name for a grouped variable is  --<group>--<name>
   e.g. Colors / Equity Blue  ->  --colors--equity-blue
        H2 / M - font-size    ->  --h2--m-font-size
   Names taken from the site's variable export (see README).
   ========================================================================== */

:host {
  display: block;

  /* ===== Webflow variables (value matches Figma) ===== */

  /* Fonts */
  --faq-font-primary:   var(--fonts--primary, "Bitter");     /* Figma: Bitter */
  --faq-font-secondary: var(--fonts--secondary, "Inter");    /* Figma: Inter  */

  /* Colors */
  --faq-text:       var(--colors--equity-blue, #132c3a);     /* Figma: Text-Primary #132C3A   */
  --faq-slate:      var(--colors--market-slate, #3c6e82);    /* Figma border rgba(60,110,130) */
  --faq-soft-trust: var(--colors--soft-trust, #d4f2fa);      /* Figma toggle #D4F2FA          */
  --faq-bg:         var(--colors--clear-ledger, #f5f7fb);    /* Figma section #F5F7FB         */
  --faq-card:       var(--colors--white, #ffffff);           /* Figma card #FFF               */
  --faq-trust:      var(--colors--trust-blue, #7fcada);      /* hover only (not in Figma)     */

  /* Spacing */
  --faq-pad-x: var(--spacing--horizontal-padding, 5rem);     /* Figma: section 0 80px         */
  --faq-pad-y: var(--spacing--vertical-padding, 5rem);       /* Figma: columns 80px 0         */
  --faq-max-width: var(--spacing--max-width, 1440px);        /* Figma frame width             */

  /* Heading: family + weight match H2; mobile uses H2 "M -" (no mobile Figma) */
  --faq-h2-family: var(--h2--font-family, var(--faq-font-primary));
  --faq-h2-weight: var(--h2--font-weight, 400);
  --faq-h2-size-m: var(--h2--m-font-size, 2.4rem);
  --faq-h2-lh-m:   var(--h2--m-line-height, 3rem);

  /* Answer: family, size, weight match Paragraph */
  --faq-p-family: var(--paragraph--font-family, var(--faq-font-secondary));
  --faq-p-size:   var(--paragraph--font-size, 1rem);
  --faq-p-weight: var(--paragraph--font-weight, 300);

  /* ===== Fixed Figma values (no matching variable) ===== */

  /* Heading 45px / 122%  (H2 is 44.8px / 3.4rem) */
  --faq-h2-size: 2.8125rem;
  --faq-h2-lh:   122%;

  /* Question 18px / 600 / 150%  (family = Secondary variable) */
  --faq-q-family: var(--faq-font-secondary);
  --faq-q-size:   1.125rem;
  --faq-q-weight: 600;
  --faq-q-lh:     150%;

  /* Answer line-height 150% = 24px  (Paragraph is 1.75rem) */
  --faq-p-lh: 150%;

  /* Card */
  --faq-card-radius:  1.875rem;            /* 30px  (Card-Roundness is 2.5rem) */
  --faq-card-padding: 1.5rem 1.5rem 1.5rem 2rem;  /* 24 24 24 32 */
  --faq-card-gap:     0.75rem;             /* 12px question → answer */
  --faq-toggle-size:  2.25rem;             /* 36px */
  --faq-row-gap:      1.5rem;              /* 24px question → toggle */

  /* Layout */
  --faq-pad-x-tablet: 2rem;  /* 32px side padding at 991px and below */
  --faq-col-gap:  5rem;     /* 80px heading → list (Horizontal-Gap is 3rem) */
  --faq-item-gap:  0.75rem;  /* 12px between cards */
  --faq-heading-w: 25rem;    /* 400px heading column */
  --faq-heading-gap: 1rem;   /* 16px */
  --faq-header-h:   6.4rem;  /* fixed site header height */
  --faq-sticky-gap: 2rem;    /* space between header and the sticky heading */

  /* Derived */
  --faq-border:       color-mix(in srgb, var(--faq-slate) 10%, transparent); /* = rgba(60,110,130,.10) */
  --faq-border-hover: color-mix(in srgb, var(--faq-slate) 22%, transparent);
  --faq-toggle-hover: color-mix(in srgb, var(--faq-soft-trust) 55%, var(--faq-trust));
}

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

/* ---------- Section ---------- */

/* The container queries are anchored to elements inside the Shadow DOM, not
   :host. Webflow styles the host element from outside (that wins over :host),
   and a host without its own box can't be a container, which would leave
   the desktop layout stuck at every width. */
.faq-section,
.faq-item-container {
  container: faq / inline-size;
}

.faq-section {
  background: var(--faq-bg);
  padding-inline: var(--faq-pad-x);
}

.faq-inner {
  width: 100%;
  max-width: var(--faq-max-width);
  margin-inline: auto;
}

/* Webflow's tablet breakpoint (viewport, so it lines up with the rest of the site) */
@media (max-width: 991px) {
  .faq-section {
    padding-inline: var(--faq-pad-x-tablet);
  }
}

.faq-layout {
  display: flex;
  align-items: flex-start;
  gap: clamp(2.5rem, 5.6cqi, var(--faq-col-gap));
}

.faq-heading-col {
  display: flex;
  flex-direction: column;
  gap: var(--faq-heading-gap);
  flex: 0 0 clamp(15rem, 32cqi, var(--faq-heading-w));
  padding-block: var(--faq-pad-y);
  position: sticky;
  /* Heading text stops just below the fixed site header. The column's own
     top padding is subtracted so the text, not the box edge, lands there. */
  top: calc(var(--faq-header-h) + var(--faq-sticky-gap) - var(--faq-pad-y));
}

.faq-heading {
  margin: 0;
  color: var(--faq-text);
  font-family: var(--faq-h2-family), Georgia, serif;
  font-size: var(--faq-h2-size);
  font-weight: var(--faq-h2-weight);
  line-height: var(--faq-h2-lh);
  text-wrap: balance;
}

.faq-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  /* The last card's bottom margin makes up the difference */
  padding-block: var(--faq-pad-y) calc(var(--faq-pad-y) - var(--faq-item-gap));
}

.faq-list > *,
.faq-list ::slotted(*) {
  align-self: stretch;
}

/* Tablet: stack heading above the list */
@container faq (max-width: 900px) {
  .faq-layout {
    flex-direction: column;
    gap: 0;
  }

  .faq-heading-col {
    position: static;
    flex: none;
    width: 100%;
    max-width: 40rem;
    padding-block: clamp(3rem, 8cqi, var(--faq-pad-y)) 2rem;
  }

  .faq-list {
    width: 100%;
    padding-block: 0 calc(clamp(3rem, 8cqi, var(--faq-pad-y)) - var(--faq-item-gap));
  }
}

/* Mobile (matches Webflow's 767px breakpoint): use the H2 "M -" sizes */
@container faq (max-width: 767px) {
  .faq-heading {
    font-size: var(--faq-h2-size-m);
    line-height: var(--faq-h2-lh-m);
  }
}

/* ---------- Item ---------- */

/* Each card carries its own spacing. A flex `gap` on .faq-list doesn't work in
   Webflow, because slot content (and CMS Collection Lists) arrive wrapped in
   extra elements, so the list sees one child instead of one per card. */
.faq-item {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  margin-block-end: var(--faq-item-gap);
  padding: var(--faq-card-padding);
  border-radius: var(--faq-card-radius);
  border: 1px solid var(--faq-border);
  background: var(--faq-card);
  transition: border-color 0.2s ease;
}

.faq-item:hover {
  border-color: var(--faq-border-hover);
}

.faq-question {
  all: unset;
  display: flex;
  align-items: center;
  gap: var(--faq-row-gap);
  width: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.faq-question:focus-visible {
  outline: 2px solid var(--faq-text);
  outline-offset: 6px;
  border-radius: 0.5rem;
}

.faq-question-text {
  flex: 1 1 0;
  min-width: 0;
  color: var(--faq-text);
  font-family: var(--faq-q-family), system-ui, sans-serif;
  font-size: var(--faq-q-size);
  font-weight: var(--faq-q-weight);
  line-height: var(--faq-q-lh);
  overflow-wrap: anywhere;
}

.faq-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--faq-toggle-size);
  height: var(--faq-toggle-size);
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--faq-soft-trust);
  color: var(--faq-text);
  transition: background-color 0.2s ease;
}

@media (hover: hover) {
  .faq-item:hover .faq-toggle {
    background: var(--faq-toggle-hover);
  }
}

/* Plus/minus drawn with two bars: the vertical bar collapses when open */
.faq-icon {
  position: relative;
  width: 14px;
  height: 14px;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease;
}

.faq-icon::before { width: 14px; height: 2.5px; }
.faq-icon::after  { width: 2.5px; height: 14px; }

.faq-item.is-open .faq-icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

/* Smooth height animation without measuring: 0fr -> 1fr */
/* The answer text keeps a normal cursor so it reads as selectable */
.faq-answer-wrap {
  cursor: auto;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.faq-item.is-open .faq-answer-wrap {
  grid-template-rows: 1fr;
}

.faq-answer-inner {
  overflow: hidden;
  min-height: 0;
}

.faq-answer {
  padding-top: var(--faq-card-gap);
  color: var(--faq-text);
  font-family: var(--faq-p-family), system-ui, sans-serif;
  font-size: var(--faq-p-size);
  font-weight: var(--faq-p-weight);
  line-height: var(--faq-p-lh);
  overflow-wrap: anywhere;
}

.faq-answer > :first-child { margin-top: 0; }
.faq-answer > :last-child  { margin-bottom: 0; }
.faq-answer p  { margin: 0 0 0.75rem; }
.faq-answer ul,
.faq-answer ol { margin: 0 0 0.75rem; padding-left: 1.25em; }
.faq-answer a  { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Compact cards on phones / narrow containers */
@container faq (max-width: 440px) {
  .faq-item {
    padding: 1.125rem 1rem 1.125rem 1.25rem;
    border-radius: calc(var(--faq-card-radius) * 0.6);
  }

  .faq-question { gap: 0.875rem; }
  .faq-question-text {
    font-size: var(--faq-p-size);
    line-height: 1.5rem;
  }

  .faq-toggle { width: 2rem; height: 2rem; }
  .faq-icon { width: 12px; height: 12px; }
  .faq-icon::before { width: 12px; height: 2px; }
  .faq-icon::after  { width: 2px; height: 12px; }

  .faq-answer {
    font-size: 0.9375rem;
    line-height: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-answer-wrap,
  .faq-icon::before,
  .faq-icon::after,
  .faq-item,
  .faq-toggle {
    transition: none;
  }
}