/* ═══════════════════════════════════════════════════════════
   FAQ ACCORDION — Styles
   Outer element fills the host column and carries the background
   + the container context; the inner element holds the max-width
   and padding. See CLAUDE.md, "A pasted block is a guest" — and
   note a @container rule cannot style its own container, so every
   query below targets a descendant of .fq-wrap.
   ═══════════════════════════════════════════════════════════ */

.fq-section {
  background: transparent;
  padding: 0;
}

.fq-wrap {
  width: 100%;
  background: var(--fq-bg, transparent);
  border-radius: var(--fq-radius, 0px);
  container-type: inline-size;
  container-name: fq;
}

.fq-inner {
  width: 100%;
  max-width: var(--fq-max-width, none);
  margin: 0 auto;
  padding: var(--fq-pad-y, 0px) var(--fq-pad-x, 0px);
  box-sizing: border-box;
}

/* ── Heading ── */
.fq-heading { margin: 0 0 var(--fq-head-gap, 40px) 0; }
.fq-heading[data-align="center"] { text-align: center; }

.fq-heading__title {
  margin: 0;
  font-family: var(--hsElevate--h2__font, inherit);
  font-size: var(--fq-head-size, 68px);
  font-weight: var(--fq-head-weight, 900);
  letter-spacing: calc(var(--fq-head-track, -3) * 0.01em);
  line-height: 0.95;
  color: var(--fq-head-color, inherit);
}

.fq-heading__title[data-caps="1"] { text-transform: uppercase; }

.fq-heading__intro {
  margin: 16px 0 0 0;
  font-family: var(--hsElevate--body__font, inherit);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fq-a-color, inherit);
  white-space: pre-line;          /* author line breaks, no <br> in HubL */
  max-width: 660px;               /* ~80ch at this theme's 16px Inter */
}

.fq-heading[data-align="center"] .fq-heading__intro {
  margin-left: auto;
  margin-right: auto;
}

/* ── The list ── */
.fq-list {
  --fq-gap: 24px;
  --fq-line: var(--fq-divider-w, 1px) solid var(--fq-divider-color, rgba(0, 0, 0, 0.1));
}

.fq-list[data-dividers="all"] { border-top: var(--fq-line); }
.fq-list[data-dividers="all"] .fq-item { border-bottom: var(--fq-line); }
.fq-list[data-dividers="between"] .fq-item + .fq-item { border-top: var(--fq-line); }

/* ── The question row ──
   A <summary> only shows its marker while it is display:list-item,
   so display:flex removes it in Chrome and Firefox; Safari needs the
   ::-webkit-details-marker rule as well. */
.fq-q {
  display: flex;
  align-items: center;
  gap: var(--fq-gap, 24px);
  padding: var(--fq-row-pad-y, 26px) 0;
  margin: 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--hsElevate--body__font, inherit);
  font-size: var(--fq-q-size, 19px);
  font-weight: var(--fq-q-weight, 700);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--fq-q-color, inherit);
  background: transparent;
  transition: background-color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.fq-q::-webkit-details-marker { display: none; }
.fq-q::marker { content: ""; }

.fq-q:hover { background: var(--fq-row-hover-bg, transparent); }

/* Focus ring. :focus first so browsers without :focus-visible still get a
   ring, then suppress it for pointer focus in a SEPARATE rule — one selector
   list containing an unknown pseudo-class would invalidate the whole thing.
   See CLAUDE.md, "Focus rings over video". */
.fq-q:focus {
  outline: 3px solid var(--fq-focus-color, #1B99E8);
  outline-offset: 2px;
  border-radius: 4px;
}

.fq-q:focus:not(:focus-visible) { outline: none; }

.fq-q__text {
  flex: 1 1 auto;
  min-width: 0;
}

/* ── Icon ── */
.fq-q__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--fq-icon-size, 20px);
  height: var(--fq-icon-size, 20px);
  color: var(--fq-icon-color, inherit);
  box-sizing: border-box;
  transition: background-color 0.2s ease;
}

.fq-list[data-icon-shape="circle"] .fq-q__icon,
.fq-list[data-icon-shape="square"] .fq-q__icon {
  width: var(--fq-icon-box, 54px);
  height: var(--fq-icon-box, 54px);
  background: var(--fq-icon-bg, rgba(0, 0, 0, 0.05));
}

.fq-list[data-icon-shape="circle"] .fq-q__icon { border-radius: 50%; }
.fq-list[data-icon-shape="square"] .fq-q__icon { border-radius: 14px; }

.fq-list[data-icon-pos="left"] .fq-q__icon { order: -1; }

.fq-icon {
  display: block;
  width: var(--fq-icon-size, 20px);
  height: var(--fq-icon-size, 20px);
  overflow: visible;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fq-icon__bar {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease;
  transform-origin: 12px 12px;    /* viewBox units — the SVG default box */
}

/* Open state, per icon style */
.fq-list[data-icon-style="plus_x"] .fq-item[open] .fq-icon { transform: rotate(45deg); }
.fq-list[data-icon-style="chevron"] .fq-item[open] .fq-icon { transform: rotate(180deg); }

.fq-list[data-icon-style="plus_minus"] .fq-item[open] .fq-icon__bar--v {
  transform: scaleY(0);
  opacity: 0;
}

/* Closing: module.js keeps [open] until the collapse finishes, so without this
   the icon would hold its open pose for the whole animation. */
.fq-list[data-icon-style="plus_x"] .fq-item[open][data-closing] .fq-icon,
.fq-list[data-icon-style="chevron"] .fq-item[open][data-closing] .fq-icon { transform: none; }

.fq-list[data-icon-style="plus_minus"] .fq-item[open][data-closing] .fq-icon__bar--v {
  transform: none;
  opacity: 1;
}

/* ── The answer ──
   .fq-a is the element module.js animates to height 0, so it owns the
   overflow clip and nothing else; .fq-a__in owns the padding, which
   would otherwise stop the panel collapsing fully. */
.fq-a { overflow: hidden; }

.fq-a__in {
  padding: 0 0 var(--fq-row-pad-y, 26px) 0;
  max-width: var(--fq-a-max-width, none);
  font-family: var(--hsElevate--body__font, inherit);
  font-size: var(--fq-a-size, 16px);
  line-height: 1.65;
  color: var(--fq-a-color, inherit);
}

/* Line the answer up under the question text when the icon is on the left. */
.fq-list[data-icon-pos="left"] .fq-a__in {
  padding-left: calc(var(--fq-icon-size, 20px) + var(--fq-gap, 24px));
}

.fq-list[data-icon-pos="left"][data-icon-shape="circle"] .fq-a__in,
.fq-list[data-icon-pos="left"][data-icon-shape="square"] .fq-a__in {
  padding-left: calc(var(--fq-icon-box, 54px) + var(--fq-gap, 24px));
}

/* Keep the reserved right-hand gutter so the answer never runs under
   the icon when the icon sits on the right. */
.fq-list[data-icon-pos="right"] .fq-a__in {
  padding-right: var(--fq-gap, 24px);
}

.fq-a__in > *:first-child { margin-top: 0; }
.fq-a__in > *:last-child { margin-bottom: 0; }

.fq-a__in p { margin: 0 0 14px 0; }
.fq-a__in ul,
.fq-a__in ol { margin: 0 0 14px 0; padding-left: 22px; }
.fq-a__in li { margin: 0 0 6px 0; }
.fq-a__in a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.fq-a__in h2,
.fq-a__in h3,
.fq-a__in h4 {
  margin: 0 0 10px 0;
  font-size: calc(var(--fq-a-size, 16px) + 1px);
  line-height: 1.3;
  color: var(--fq-q-color, inherit);
}

/* JS is running: it sets height explicitly, so start closed panels at 0
   rather than relying on [open]. The attribute is added before the
   animation starts. */
.fq-list[data-js="1"] .fq-item:not([open]) .fq-a { height: 0; }

/* ═══════════════════════════════════════════
   RESPONSIVE — container queries, so a block
   dropped into a one-third column reflows on
   its own width rather than the viewport's.
═══════════════════════════════════════════ */

/* Fluid heading, capped at the author's chosen size. cqw resolves against
   .fq-wrap, so this tracks the module's own width, not the window's. */
@supports (container-type: inline-size) {
  .fq-heading__title { font-size: min(var(--fq-head-size, 68px), 13cqw); }
}

@container fq (max-width: 720px) {
  .fq-list { --fq-gap: 16px; }

  .fq-q {
    font-size: min(var(--fq-q-size, 19px), 17px);
    padding: min(var(--fq-row-pad-y, 26px), 22px) 0;
  }

  .fq-list[data-icon-shape="circle"] .fq-q__icon,
  .fq-list[data-icon-shape="square"] .fq-q__icon {
    width: min(var(--fq-icon-box, 54px), 44px);
    height: min(var(--fq-icon-box, 54px), 44px);
  }

  .fq-list[data-icon-pos="left"][data-icon-shape="circle"] .fq-a__in,
  .fq-list[data-icon-pos="left"][data-icon-shape="square"] .fq-a__in {
    padding-left: calc(min(var(--fq-icon-box, 54px), 44px) + var(--fq-gap, 16px));
  }

  .fq-a__in { padding-bottom: min(var(--fq-row-pad-y, 26px), 22px); }
  .fq-heading { margin-bottom: min(var(--fq-head-gap, 40px), 28px); }
}

@container fq (max-width: 420px) {
  .fq-list { --fq-gap: 12px; }

  .fq-q {
    font-size: min(var(--fq-q-size, 19px), 16px);
    padding: min(var(--fq-row-pad-y, 26px), 18px) 0;
  }

  .fq-list[data-icon-shape="circle"] .fq-q__icon,
  .fq-list[data-icon-shape="square"] .fq-q__icon {
    width: min(var(--fq-icon-box, 54px), 38px);
    height: min(var(--fq-icon-box, 54px), 38px);
  }

  .fq-icon { width: min(var(--fq-icon-size, 20px), 17px); height: min(var(--fq-icon-size, 20px), 17px); }

  .fq-list[data-icon-pos="left"][data-icon-shape="circle"] .fq-a__in,
  .fq-list[data-icon-pos="left"][data-icon-shape="square"] .fq-a__in {
    padding-left: calc(min(var(--fq-icon-box, 54px), 38px) + var(--fq-gap, 12px));
  }

  .fq-a__in {
    font-size: min(var(--fq-a-size, 16px), 15px);
    padding-bottom: min(var(--fq-row-pad-y, 26px), 18px);
  }
}

/* Viewport fallback for browsers without container queries
   (Safari < 16, Chrome < 105). Same two tiers. */
@supports not (container-type: inline-size) {
  @media (max-width: 720px) {
    .fq-heading__title { font-size: min(var(--fq-head-size, 68px), 13vw); }
    .fq-list { --fq-gap: 16px; }
    .fq-q { font-size: min(var(--fq-q-size, 19px), 17px); }
    .fq-list[data-icon-shape="circle"] .fq-q__icon,
    .fq-list[data-icon-shape="square"] .fq-q__icon {
      width: min(var(--fq-icon-box, 54px), 44px);
      height: min(var(--fq-icon-box, 54px), 44px);
    }
  }
  @media (max-width: 420px) {
    .fq-list { --fq-gap: 12px; }
    .fq-q { font-size: min(var(--fq-q-size, 19px), 16px); }
    .fq-list[data-icon-shape="circle"] .fq-q__icon,
    .fq-list[data-icon-shape="square"] .fq-q__icon {
      width: min(var(--fq-icon-box, 54px), 38px);
      height: min(var(--fq-icon-box, 54px), 38px);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .fq-q,
  .fq-q__icon,
  .fq-icon,
  .fq-icon__bar { transition: none; }
}

@media (forced-colors: active) {
  .fq-list[data-dividers="all"],
  .fq-list[data-dividers="all"] .fq-item,
  .fq-list[data-dividers="between"] .fq-item + .fq-item { border-color: CanvasText; }
  .fq-list[data-icon-shape="circle"] .fq-q__icon,
  .fq-list[data-icon-shape="square"] .fq-q__icon { border: 1px solid CanvasText; }
}