/* ==========================================================================
   FAQ Stack Widget — faq-stack.css  v1.1.0
   ========================================================================== */

.fsw-stack {
  --fsw-duration:    450ms;
  --fsw-easing:      cubic-bezier(0.4, 0, 0.2, 1);
  --fsw-gap:         12px;
  --fsw-scale-step:  5;
  --fsw-offset-step: 10;
}

/* ── Scene ─────────────────────────────────────────────────────────── */
.fsw-scene {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  width:           100%;
  box-sizing:      border-box;
  padding:         32px 24px;
  background-color:#f2f2f7;
  border-radius:   20px;
}

/* ── Stack ─────────────────────────────────────────────────────────── */
.fsw-stack {
  position:        relative;
  width:           100%;
  max-width:       520px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
}

/* Cards inner — absolutely positioned container managed by JS */
.fsw-cards-inner {
  position:   relative;
  width:      100%;
  transition: height var(--fsw-duration) var(--fsw-easing);
}

/* ── Card ──────────────────────────────────────────────────────────── */
.fsw-card {
  position:         absolute;
  left:             0;
  width:            100%;
  background-color: #ffffff;
  border-radius:    16px;
  box-sizing:       border-box;
  overflow:         hidden;
  outline:          none; /* keyboard focus handled below */
  transition:
    transform  var(--fsw-duration) var(--fsw-easing),
    opacity    var(--fsw-duration) var(--fsw-easing),
    top        var(--fsw-duration) var(--fsw-easing),
    box-shadow var(--fsw-duration) var(--fsw-easing);
  will-change: transform, top, opacity;
}

/* ── Card Header ───────────────────────────────────────────────────── */
.fsw-card__header {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     14px 16px;
  cursor:      pointer;
  user-select: none;
}

.fsw-card__icon {
  flex-shrink:      0;
  width:            40px;
  height:           40px;
  border-radius:    10px;
  background-color: #1c1c1e;
  display:          flex;
  align-items:      center;
  justify-content:  center;
}
.fsw-card__icon i,
.fsw-card__icon svg {
  font-size: 16px;
  width:     16px;
  height:    16px;
  color:     #ffffff;
  fill:      #ffffff;
  display:   block;
}

.fsw-card__header-body {
  flex:        1;
  min-width:   0;
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         6px;
}

.fsw-card__question {
  margin:       0;
  font-size:    15px;
  font-weight:  600;
  line-height:  1.35;
  color:        #1c1c1e;
  flex:         1 1 100%;
}

.fsw-card__badge {
  display:          inline-flex;
  align-items:      center;
  padding:          2px 9px;
  border-radius:    20px;
  font-size:        11px;
  font-weight:      500;
  line-height:      1.4;
  background-color: #f2f2f7;
  color:            #8e8e93;
  letter-spacing:   0.02em;
  white-space:      nowrap;
}

/* Expand/collapse chevron button */
.fsw-card__toggle {
  flex-shrink:    0;
  width:          28px;
  height:         28px;
  border:         none;
  background:     transparent;
  cursor:         pointer;
  display:        flex;
  align-items:    center;
  justify-content:center;
  border-radius:  50%;
  padding:        0;
  transition:     background 0.15s ease;
  -webkit-appearance: none;
  appearance:     none;
  outline:        none;
}
.fsw-card__toggle:hover  { background: rgba(0,0,0,0.05); }
.fsw-card__toggle:active { background: rgba(0,0,0,0.10); }

/* ── Keyboard focus styles ─────────────────────────────────────────── */
.fsw-card__toggle:focus-visible {
  outline:        2px solid #007aff;
  outline-offset: 2px;
  background:     rgba(0,122,255,0.08);
}
.fsw-toggle-btn:focus-visible {
  outline:        2px solid #007aff;
  outline-offset: 2px;
}
/* Highlight the whole card when its toggle is keyboard-focused */
.fsw-card:has(.fsw-card__toggle:focus-visible) {
  box-shadow: 0 0 0 3px rgba(0,122,255,0.25), 0 2px 12px rgba(0,0,0,0.08) !important;
}

.fsw-card__expand-icon {
  display:       block;
  width:         8px;
  height:        8px;
  border-right:  2px solid #8e8e93;
  border-bottom: 2px solid #8e8e93;
  transform:     rotate(45deg) translate(-1px, -1px);
  transition:    transform var(--fsw-duration) var(--fsw-easing),
                 border-color 0.15s ease;
}
.fsw-card--open .fsw-card__expand-icon {
  transform: rotate(-135deg) translate(-1px, -1px);
}

/* ── Answer collapse — grid-template-rows animation ───────────────── */
/*
 * grid-template-rows: 0fr → 1fr is the modern GPU-friendly technique.
 * No JS height measurement needed; the browser handles the easing.
 * The inner wrapper needs min-height: 0 so it can collapse to zero.
 */
.fsw-card__answer-collapse {
  display:             grid;
  grid-template-rows:  0fr;
  transition:          grid-template-rows var(--fsw-duration) var(--fsw-easing);
}
.fsw-card--open .fsw-card__answer-collapse {
  grid-template-rows: 1fr;
}

/* Grid child — must have min-height: 0 to allow collapse to 0 */
.fsw-card__answer-inner {
  min-height: 0;
  overflow:   hidden;
}

.fsw-card__divider { height: 1px; margin: 0 16px; background-color: #e5e5ea; }

.fsw-card__answer-wrap { padding: 14px 16px 16px; }

/* ── Rich text answer ──────────────────────────────────────────────── */
.fsw-card__answer {
  font-size:   14px;
  font-weight: 400;
  line-height: 1.65;
  color:       #3a3a3c;
}
.fsw-card__answer p { margin: 0 0 0.75em; }
.fsw-card__answer p:last-child { margin-bottom: 0; }
.fsw-card__answer strong, .fsw-card__answer b { font-weight: 600; color: #1c1c1e; }
.fsw-card__answer em, .fsw-card__answer i     { font-style: italic; }
.fsw-card__answer a                            { color: #007aff; text-decoration: underline; }
.fsw-card__answer a:hover                      { opacity: 0.8; }
.fsw-card__answer ul,
.fsw-card__answer ol  { margin: 0.5em 0 0.75em 1.25em; padding: 0; }
.fsw-card__answer li  { margin-bottom: 0.3em; }
.fsw-card__answer h1,.fsw-card__answer h2,.fsw-card__answer h3,
.fsw-card__answer h4,.fsw-card__answer h5,.fsw-card__answer h6 {
  margin: 0.75em 0 0.35em; font-weight: 600; color: #1c1c1e; line-height: 1.3;
}
.fsw-card__answer h1:first-child,.fsw-card__answer h2:first-child,
.fsw-card__answer h3:first-child { margin-top: 0; }
.fsw-card__answer blockquote {
  margin: 0.5em 0; padding: 0.5em 0 0.5em 1em;
  border-left: 3px solid #e5e5ea; color: #6e6e73;
}
.fsw-card__answer code {
  font-family: monospace; font-size: 0.9em;
  background-color: #f2f2f7; padding: 0.1em 0.4em; border-radius: 4px;
}

/* ── Stack toggle button ───────────────────────────────────────────── */
.fsw-toggle-btn {
  display:          flex;
  align-items:      center;
  gap:              6px;
  margin-top:       20px;
  padding:          8px 20px;
  background-color: #ffffff;
  border:           none;
  border-radius:    20px;
  font-family:      inherit;
  font-size:        14px;
  font-weight:      500;
  color:            #1c1c1e;
  cursor:           pointer;
  position:         relative;
  z-index:          20;
  transition:       opacity 0.15s ease, transform 0.15s ease;
  -webkit-appearance: none;
  appearance:       none;
  outline:          none;
}
.fsw-toggle-btn:hover  { opacity: 0.85; }
.fsw-toggle-btn:active { transform: scale(0.96); }

.fsw-toggle-btn__chevron {
  display:       inline-block;
  width:         9px;
  height:        9px;
  border-right:  2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform:     rotate(45deg) translateY(-2px);
  transition:    transform var(--fsw-duration) var(--fsw-easing);
  flex-shrink:   0;
}
.fsw-stack--expanded .fsw-toggle-btn__chevron { transform: rotate(-135deg) translateY(-2px); }

/* ── Hover: expanded ───────────────────────────────────────────────── */
.fsw-stack--expanded .fsw-card:hover {
  transform:  translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.13) !important;
  transition:
    transform  0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease !important;
}

/* ── Hover: collapsed ──────────────────────────────────────────────── */
.fsw-stack:not(.fsw-stack--expanded) .fsw-card:first-of-type {
  cursor: pointer;
}
.fsw-stack:not(.fsw-stack--expanded) .fsw-card:first-of-type:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.14) !important;
  transform:  scale(1) translateY(-4px) !important;
  transition:
    transform  0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease !important;
}
.fsw-stack:not(.fsw-stack--expanded):hover .fsw-card:nth-of-type(2) {
  transform:  scale(0.96) translateY(-14px) !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1) !important;
}
.fsw-stack:not(.fsw-stack--expanded):hover .fsw-card:nth-of-type(3) {
  transform:  scale(0.91) translateY(-24px) !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1) 0.04s !important;
}
.fsw-stack:not(.fsw-stack--expanded):hover .fsw-card:nth-of-type(n+4) {
  transform:  scale(0.86) translateY(-32px) !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1) 0.07s !important;
}

/* ── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fsw-card,
  .fsw-cards-inner,
  .fsw-card__answer-collapse,
  .fsw-toggle-btn__chevron,
  .fsw-card__expand-icon {
    transition-duration: 0ms !important;
  }
}

/* ── Screen reader only utility ────────────────────────────────────── */
.fsw-scene .screen-reader-text {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0,0,0,0);
  white-space:nowrap;
  border:     0;
}

/* ── Schema h3 reset — match p styling ────────────────────────────── */
.fsw-card__question {
  margin:       0;
  font-size:    15px;
  font-weight:  600;
  line-height:  1.35;
  color:        #1c1c1e;
  flex:         1 1 100%;
}