/* SFF 2026 - FAQ. Scoped to .sff26-faq; rules are written as
   ".sff26-faq .sff26-faq__x" so they outrank the theme's element rules.
   The only !important is phone typography (see the phone block). */

.sff26-faq {
  --sff26-muted: #cfcfcf;
  --sff26-amber: #FCB316;
  --sff26-rule: #333;
  --sff26-ease: cubic-bezier(.22, .8, .24, 1);
  --sff26-gut: 20px;
  --sff26-max: var(--forum-content-max, 1416px);
  box-sizing: border-box;
  position: relative;
  padding: 120px 0 120px;
  color: #fff;
  font-family: var(--forum-font, "Open Sans", Arial, sans-serif);
}

/* From tablets up the content lines up with the site header and footer: the
   forum skin's --forum-content-max and --forum-gutter (these fallbacks without it) */
@media (min-width: 768px) {
  .sff26-faq { --sff26-gut: var(--forum-gutter, 40px); }
}
.sff26-faq *,
.sff26-faq *::before,
.sff26-faq *::after { box-sizing: border-box; }
.sff26-faq .sff26-faq__w { max-width: calc(var(--sff26-max) + 2 * var(--sff26-gut)); margin: 0 auto; padding: 0 var(--sff26-gut); }
.sff26-faq .sff26-faq__h2 {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.018em;
  color: #fff;
  text-transform: none;
  text-wrap: balance;
}
.sff26-faq .sff26-faq__h2 span { color: inherit; }
.sff26-faq .sff26-faq__lead { max-width: 56ch; margin: 18px 0 0; padding: 0; font-size: 18px; line-height: 1.5; color: var(--sff26-muted); }

/* Text link: amber, the primary CTA's arrow; the underline runs under the
   text and the arrow and stretches with it (same as the other v2 modules) */
.sff26-faq .sff26-faq__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 16px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--forum-highlight, var(--sff26-amber));
  text-decoration: none;
}
.sff26-faq .sff26-faq__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: calc(24px * -0.3);
  bottom: 8px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s ease;
}
.sff26-faq .sff26-faq__link:hover,
.sff26-faq .sff26-faq__link:focus-visible { color: var(--forum-highlight, var(--sff26-amber)); text-decoration: none; }
.sff26-faq .sff26-faq__link:hover::after,
.sff26-faq .sff26-faq__link:focus-visible::after { transform: scaleX(1); }
.sff26-faq .sff26-faq__link-ic { flex: none; display: block; width: 24px; height: 12px; transform-origin: left center; transition: transform .3s ease; }
.sff26-faq .sff26-faq__link:hover .sff26-faq__link-ic,
.sff26-faq .sff26-faq__link:focus-visible .sff26-faq__link-ic { transform: scaleX(1.3); }

/* Answers (both styles): the rich text an editor writes */
.sff26-faq .sff26-faq__a { color: var(--sff26-muted); }
.sff26-faq .sff26-faq__a p { margin: 0; padding: 0; font-size: 16px; line-height: 1.6; color: var(--sff26-muted); }
.sff26-faq .sff26-faq__a p + p,
.sff26-faq .sff26-faq__a ul,
.sff26-faq .sff26-faq__a ol { margin-top: 10px; }
.sff26-faq .sff26-faq__a li { font-size: 16px; line-height: 1.6; color: var(--sff26-muted); }
.sff26-faq .sff26-faq__a a { color: var(--sff26-amber); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.sff26-faq .sff26-faq__a a:hover,
.sff26-faq .sff26-faq__a a:focus-visible { color: #fff; }
.sff26-faq a:focus-visible,
.sff26-faq .sff26-faq__sum:focus-visible { outline: 2px solid var(--sff26-amber); outline-offset: 4px; border-radius: 8px; }

/* Accordion */
.sff26-faq.sff26-faq--accordion .sff26-faq__w { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px 72px; align-items: start; }
.sff26-faq.sff26-faq--accordion .sff26-faq__hd { position: sticky; top: 132px; }
.sff26-faq .sff26-faq__item { border-bottom: 1px solid var(--sff26-rule); }
.sff26-faq .sff26-faq__item:first-child { border-top: 1px solid var(--sff26-rule); }
.sff26-faq .sff26-faq__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
}
.sff26-faq .sff26-faq__sum::-webkit-details-marker { display: none; }
.sff26-faq .sff26-faq__sum::marker { content: none; }
.sff26-faq .sff26-faq__q { margin: 0; padding: 0; font-family: inherit; font-size: 19px; line-height: 1.4; font-weight: 600; color: #fff; text-transform: none; transition: color .25s ease; }
.sff26-faq .sff26-faq__sum:hover .sff26-faq__q,
.sff26-faq .sff26-faq__sum:focus-visible .sff26-faq__q { color: var(--sff26-amber); }
.sff26-faq .sff26-faq__pl {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px;
  color: #fff;
  transition: transform .35s var(--sff26-ease), background-color .25s ease, border-color .25s ease, color .25s ease;
}
.sff26-faq .sff26-faq__pl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sff26-faq .sff26-faq__sum:hover .sff26-faq__pl,
.sff26-faq .sff26-faq__sum:focus-visible .sff26-faq__pl { border-color: var(--sff26-amber); background: var(--sff26-amber); color: #141414; }
.sff26-faq .sff26-faq__item[open] .sff26-faq__pl { transform: rotate(45deg); }
.sff26-faq .sff26-faq__item .sff26-faq__a { padding: 0 64px 26px 0; }
/* The answer slides open where the browser supports animating details */
.sff26-faq.sff26-faq--animate .sff26-faq__item::details-content { block-size: 0; overflow: clip; transition: block-size .4s var(--sff26-ease), content-visibility .4s allow-discrete; }
.sff26-faq.sff26-faq--animate .sff26-faq__item[open]::details-content { block-size: auto; }

/* Columns */
.sff26-faq.sff26-faq--columns { padding-bottom: 0; }
.sff26-faq.sff26-faq--columns .sff26-faq__bd { margin-top: 56px; }
.sff26-faq .sff26-faq__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; margin: 0; padding: 0; list-style: none; }
.sff26-faq .sff26-faq__col { margin: 0; padding: 24px 0 0; border-top: 1px solid var(--sff26-rule); list-style: none; }
.sff26-faq .sff26-faq__col::before,
.sff26-faq .sff26-faq__col::marker { content: none; }
.sff26-faq .sff26-faq__col .sff26-faq__q { margin: 0 0 10px; font-size: 20px; line-height: 1.3; }
.sff26-faq .sff26-faq__col .sff26-faq__a p { line-height: 1.55; }

@media (max-width: 991px) {
  .sff26-faq { padding-top: 96px; padding-bottom: 96px; }
  .sff26-faq.sff26-faq--accordion .sff26-faq__w { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .sff26-faq.sff26-faq--accordion .sff26-faq__hd { position: static; }
  .sff26-faq .sff26-faq__cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .sff26-faq { padding-top: 72px; padding-bottom: 72px; }
  .sff26-faq.sff26-faq--columns .sff26-faq__bd { margin-top: 30px; }
  .sff26-faq .sff26-faq__sum { padding: 20px 0; }
  .sff26-faq .sff26-faq__item .sff26-faq__a { padding-right: 0; }
  .sff26-faq .sff26-faq__a a { display: inline-block; margin: -11px 0; padding: 11px 0; }

  /* Phone type. The theme's main.css and the page's own head styles set
     h2 / h3 / p sizes and weights on phones with !important, so these must
     be !important too (phone typography only). */
  .sff26-faq .sff26-faq__h2 { font-size: 32px !important; line-height: 1.1 !important; font-weight: 600 !important; }
  .sff26-faq .sff26-faq__lead { font-size: 16px !important; line-height: 1.5 !important; }
  .sff26-faq .sff26-faq__q { font-size: 17px !important; line-height: 1.4 !important; font-weight: 600 !important; }
  .sff26-faq .sff26-faq__col .sff26-faq__q { font-size: 19px !important; line-height: 1.3 !important; }
  .sff26-faq .sff26-faq__a p,
  .sff26-faq .sff26-faq__a li { font-size: 15px !important; line-height: 1.6 !important; }
  .sff26-faq .sff26-faq__col .sff26-faq__a p { font-size: 16px !important; line-height: 1.55 !important; }
}

/* Columns rise in once (module.js arms this only when it can also reveal) */
.sff26-faq.sff26-faq--armed .sff26-faq__col { transition: opacity .6s ease, transform .85s cubic-bezier(.2, .9, .25, 1.1); transition-delay: calc(var(--sff26-i, 0) * 80ms); }
.sff26-faq.sff26-faq--armed .sff26-faq__cols:not(.sff26-faq__cols--in) .sff26-faq__col { opacity: 0; transform: translateY(28px) scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .sff26-faq .sff26-faq__q,
  .sff26-faq .sff26-faq__pl,
  .sff26-faq .sff26-faq__link::after,
  .sff26-faq .sff26-faq__link-ic,
  .sff26-faq.sff26-faq--armed .sff26-faq__col { transition: none; }
  .sff26-faq.sff26-faq--animate .sff26-faq__item::details-content { transition: none; }
  .sff26-faq.sff26-faq--armed .sff26-faq__cols:not(.sff26-faq__cols--in) .sff26-faq__col { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Other forums (12 Oct, user: "globalise the new modules to be used on other forums"). Everything below applies only
   OFF SFF (".sff26-faq:not(.skin-sff *)"), so SFF keeps exactly the values above. The module reads the forum skin's tokens
   (the bss.css contract: --forum-text, --forum-text-body, --forum-text-muted, --forum-text-faint, --forum-surface,
   --forum-surface-raised, --forum-line, --forum-highlight, --forum-dark, the brand palette --forum-gold / -accent /
   -orchid / -teal) and the BSS layout (--bss-max, --bss-gutter), each falling back to SFF's value. A light edition
   (BSS Cambodia) sets --forum-highlight-text to its text colour: brand colours never as small text on a light page.
   BSS forces p / li to var(--forum-text-body) !important, so each text role sets that token to its own colour.
   --------------------------------------------------------------------------------------------------------------- */
.sff26-faq:not(.skin-sff *) {
  --sff26-gut: 15px; /* BSS's phone gutter (from 768px: --bss-gutter, below) */
  --sff26-max: var(--forum-content-max, var(--bss-max, 1416px));
  --sff26-amber: var(--forum-highlight, #FCB316);
  --sff26-hl-text: var(--forum-highlight-text, var(--forum-highlight, #FCB316));
  --sff26-fg: var(--forum-text, #fff);
  --sff26-pal-amber: var(--forum-gold, var(--forum-highlight, #FCB316));
  --sff26-pal-red: var(--forum-highlight, #E53935);
  --sff26-pal-blue: var(--forum-accent, #3399FF);
  --sff26-pal-pink: var(--forum-orchid, #FF88A2);
  --sff26-pal-green: var(--forum-teal, #76C893);
  --sff26-muted: var(--forum-text-muted, #cfcfcf);
  --sff26-rule: var(--forum-line, #333);
  --forum-text-body: var(--sff26-muted);
  color: var(--sff26-fg);
}
@media (min-width: 768px) {
  .sff26-faq:not(.skin-sff *) { --sff26-gut: var(--forum-gutter, var(--bss-gutter, 40px)); }
}
.sff26-faq:not(.skin-sff *) .sff26-faq__h2,
.sff26-faq:not(.skin-sff *) .sff26-faq__q,
.sff26-faq:not(.skin-sff *) .sff26-faq__a a:hover,
.sff26-faq:not(.skin-sff *) .sff26-faq__a a:focus-visible { color: var(--sff26-fg); }
.sff26-faq:not(.skin-sff *) .sff26-faq__sum:hover .sff26-faq__q,
.sff26-faq:not(.skin-sff *) .sff26-faq__sum:focus-visible .sff26-faq__q,
.sff26-faq:not(.skin-sff *) .sff26-faq__link,
.sff26-faq:not(.skin-sff *) .sff26-faq__link:hover,
.sff26-faq:not(.skin-sff *) .sff26-faq__link:focus-visible,
.sff26-faq:not(.skin-sff *) .sff26-faq__a a { color: var(--sff26-hl-text); }
.sff26-faq:not(.skin-sff *) .sff26-faq__pl { border-color: var(--forum-line, rgba(255, 255, 255, .28)); color: var(--sff26-fg); }
.sff26-faq:not(.skin-sff *) .sff26-faq__sum:hover .sff26-faq__pl,
.sff26-faq:not(.skin-sff *) .sff26-faq__sum:focus-visible .sff26-faq__pl { border-color: var(--sff26-amber); background: var(--sff26-amber); color: var(--sff26-hl-ink); }
/* The ink on the highlight fill: white on a dark highlight (BSS India's purple), a near-black on a light one (River
   Stone's oklch), from the fill's own lightness; --forum-dark where relative colours aren't supported. */
.sff26-faq:not(.skin-sff *) { --sff26-hl-ink: var(--forum-dark, #141414); }
@supports (color: oklch(from red l c h)) {
  .sff26-faq:not(.skin-sff *) { --sff26-hl-ink: oklch(from var(--sff26-amber) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248); }
}