/* =====================================================================
   D - FAQ Introduction + Accordion (Figma 10159:19423).
   "OneGold FAQ" H1 + native <details> disclosure list. The 900px content
   group is centred within the 1240 container; questions span full width
   with a flipping chevron on the right. Tokens only.
   ===================================================================== */

.faq-accordion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--faq-set-gap);
  /* Figma: header bottom 126 -> Introduction top 166 = 40px above; the
     Introduction frame carries pb-80 below. Split top/bottom accordingly
     (was 80px both, which doubled the top gap). */
  padding-top: 40px;
  padding-bottom: var(--faq-acc-pad-y);
}

/* ---- H1 (Axiforma Medium 44/55, centred) ---- */
.faq-accordion__title {
  margin: 0;
  width: 100%;
  font-size: var(--fs-44);
  font-weight: var(--fw-medium);
  line-height: var(--lh-55);
  color: var(--gray-8);
  text-align: center;
  word-break: break-word;
}

/* ---- Question set: 900px column centred in the container ---- */
.faq-accordion__set {
  display: flex;
  flex-direction: column;
  gap: var(--faq-set-gap);
  width: 100%;
  max-width: var(--faq-set-max);
}

/* ---- Disclosure item ---- */
.faq-accordion__item {
  width: 100%;
}

/* Summary = the clickable question row. Strip native marker. */
.faq-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--faq-q-gap);
  width: 100%;
  list-style: none;
  cursor: pointer;
}
.faq-accordion__summary::-webkit-details-marker { display: none; }
.faq-accordion__summary::marker { content: ""; }

.faq-accordion__summary:focus-visible {
  outline: 2px solid var(--og-blue);
  outline-offset: 4px;
}

/* ---- Question text (Axiforma Regular 18/25, near-black) ---- */
.faq-accordion__question {
  flex: 1 1 auto;
  font-size: var(--fs-18);
  font-weight: var(--fw-regular);
  line-height: var(--lh-25);
  color: var(--gray-8);
  word-break: break-word;
}

/* ---- Chevron: single asset tinted via mask; flips when [open] ----
   Natural box 27.055 x 24 from Figma; points down when collapsed. */
.faq-accordion__chevron {
  flex: none;
  width: var(--faq-chevron-w);
  height: var(--faq-chevron-h);
  background-color: var(--gray-8);
  -webkit-mask: url("../../img/faq-chevron-down.svg") no-repeat center / var(--faq-chevron-glyph-w) var(--faq-chevron-glyph-h);
          mask: url("../../img/faq-chevron-down.svg") no-repeat center / var(--faq-chevron-glyph-w) var(--faq-chevron-glyph-h);
  transition: transform 0.2s ease;
}
.faq-accordion__item[open] .faq-accordion__chevron {
  transform: rotate(180deg);
}

/* ---- Answer (Axiforma Regular 16/normal, gray-7); rich text via {{{a}}} ----
   Open item adds the 20px bottom pad shown in Figma's "Open Question". */
.faq-accordion__answer {
  padding-top: var(--faq-answer-gap);
  padding-bottom: var(--faq-answer-pad-b);
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: normal;
  color: var(--gray-7);
  word-break: break-word;
}
.faq-accordion__answer p {
  margin: 0 0 20px;
}
.faq-accordion__answer p:last-child {
  margin-bottom: 0;
}
.faq-accordion__answer a {
  color: var(--dusty-blue);
  text-decoration: underline;
}

/* Deep-link target: briefly highlight the question opened from a search result. */
.faq-accordion__item.is-target {
  border-color: var(--og-blue);
  box-shadow: 0 0 0 2px rgba(0, 128, 243, 0.18);
  border-radius: var(--radius-10);
}

/* "Was this helpful?" feedback row under each answer. */
.faq-helpful {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-14);
  color: var(--gray-7);
}
.faq-helpful__prompt { font-weight: var(--fw-medium); }
.faq-helpful__btn {
  font: inherit;
  cursor: pointer;
  padding: 5px 16px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--gray-0);
  color: var(--gray-8);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.faq-helpful__btn:hover { border-color: var(--og-blue); color: var(--og-blue); }
.faq-helpful__thanks { color: var(--og-blue); font-weight: var(--fw-medium); }
/* lists + comparison tables inside FAQ answers */
.faq-accordion__answer ul {
  margin: 0 0 20px;
  padding-left: 1.25em;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq-accordion__answer ul:last-child { margin-bottom: 0; }
.faq-accordion__answer table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-10);
  overflow: hidden;
}
.faq-accordion__answer th,
.faq-accordion__answer td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.faq-accordion__answer thead th { background: var(--pale-blue); font-weight: var(--fw-semibold); color: var(--gray-8); }
.faq-accordion__answer tbody tr:last-child td { border-bottom: 0; }
.faq-accordion__answer table:last-child { margin-bottom: 0; }
/* table overflow merged into 767.98px block below */

/* =====================================================================
   --limit variant (Figma 6344:45822). Opt-in via content flag
   "variant" (truthy) on the faq object; the build adds
   faq-accordion--limit to the section root. Scoped so the default FAQ
   hub / category pages (no flag) stay byte-identical.
     - Heading: Axiforma Medium 32/45, left-aligned (default 44/55 centred).
     - Heading + question column capped at 800px (default 900px).
     - 40px gaps between FAQ rows and around the section (default 20px).
   ===================================================================== */
.faq-accordion--limit {
  gap: 40px;
}
.faq-accordion--limit .faq-accordion__title {
  max-width: 800px;
  font-size: var(--fs-32);
  line-height: var(--lh-45);
  text-align: left;
}
.faq-accordion--limit .faq-accordion__set {
  gap: 40px;
  max-width: 800px;
}

/* Responsive (mobile best-effort) — rules merged into 767.98px block below */

/* =====================================================================
   Tablet (600–1023): step accordion width + padding; search box full-width.
   ===================================================================== */
@media (max-width: 1023.98px) {
  /* Loosen top padding slightly for mid-size viewports */
  .faq-accordion { padding-top: 32px; }
  /* Allow the 900px set to use full width with comfortable side room */
  .faq-accordion__set { max-width: 100%; }
  /* Category page search: full-width under breadcrumb */
  .faq-cat-search { padding-inline: 0; }
  .faq-cat-search .faq-search { max-width: 100%; }
}

/* =====================================================================
   M - EU FAQ Introduction (Figma 10159:19546) @ 390.
   Title shrinks to H2 32/40; the question column drops the 900px cap and
   spans the full mobile width (container provides the 20px gutters). The
   question row keeps text left + chevron right with a tighter gap.
   ===================================================================== */
@media (max-width: 767.98px) {
  .faq-accordion {
    gap: var(--faq-set-gap);
    /* Figma mobile (10159:19546): header bottom 96 -> Introduction top 116
       = 20px above; ~40px below before the facts band. */
    padding-top: 20px;
    padding-bottom: 40px;
  }
  /* "OneGold FAQ": single line, 32/40, centred at 390. */
  .faq-accordion__title {
    font-size: var(--fs-32);
    line-height: 40px;
  }
  /* Full-width column (no 900px desktop cap on mobile). */
  .faq-accordion__set {
    max-width: none;
  }
  /* Question row: keep text/chevron split, tighten the inter-gap. */
  .faq-accordion__summary {
    gap: 12px;
  }
  .faq-accordion__question {
    font-size: var(--fs-18);
    line-height: var(--lh-25);
  }
  .faq-accordion__answer {
    font-size: var(--fs-16);
    line-height: normal;
  }
  /* Table overflow: scroll horizontally on narrow screens (merged from 767px rule) */
  .faq-accordion__answer table { display: block; overflow-x: auto; white-space: nowrap; }
}