/* === g-faq — greenfield canonical, slot-contract form === */
/* Phase 0.1.f2 — rewritten per preset-architecture-v1.md §3.3 + §3.5.   */

/* ── Base layout ── */
.ssla-g-faq {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--g-faq-bg);
  color:      var(--g-faq-fg);
}
.ssla-g-faq-inner {
  text-align: var(--ssla-text-align, left); /* v3.18.32 f3.text-align */
  max-width: var(--g-faq-content-max-width);
  margin: 0 auto;
  padding: var(--g-faq-section-padding) 48px;
  position: relative;
  z-index: 1;
}

/* ── Fullbleed ── */
.alignfull .ssla-g-faq-inner {
  max-width: 100%;
  padding-left: 48px;
  padding-right: 48px;
}

/* ── Header ── */
.ssla-g-faq-header { text-align: center; margin: 0 auto 64px; max-width: 720px; }
.ssla-g-faq-eyebrow {
  color:           var(--g-faq-eyebrow);
  font-size:       var(--g-faq-eyebrow-size);
  letter-spacing:  var(--g-faq-eyebrow-letter);
  font-weight:     800;
  text-transform:  uppercase;
  margin:          0 0 20px;
}
.ssla-g-faq-heading {
  font-family: var(--g-faq-heading-family);
  font-size:   var(--g-faq-heading-size);
  font-weight: var(--g-faq-heading-weight);
  line-height: 1.15;
  margin:      0;
}

/* ── Items (stacked, default) ── */
.ssla-g-faq-items { max-width: 800px; margin: 0 auto; }
.ssla-g-faq-item {
  padding: 32px 0;
  border-top: 1px solid var(--g-faq-line);
}
.ssla-g-faq-item:last-child { border-bottom: 1px solid var(--g-faq-line); }
.ssla-g-faq-question {
  font-family: var(--g-faq-question-family);
  font-size:   var(--g-faq-question-size);
  font-weight: var(--g-faq-question-weight);
  line-height: 1.4;
  margin:      0 0 12px;
}
.ssla-g-faq-answer {
  font-family: var(--g-faq-answer-family);
  font-size:   var(--g-faq-answer-size);
  line-height: var(--g-faq-answer-line-height);
  opacity:     0.85;
}
.ssla-g-faq-answer p { margin: 0 0 12px; }
.ssla-g-faq-answer p:last-child { margin-bottom: 0; }

/* ── v3.18.38 / f3.faq — Q/A rows + markers ── */
/* v3.18.39 — grid rail: marker in a fixed 26px column, text in the content
 * column. Q and A rows share the template, so markers align vertically and
 * question/answer text share one left edge. text-align:left keeps the rail
 * intact regardless of the section's heading alignment. */
.ssla-g-faq-q-row,
.ssla-g-faq-a-row {
  display: grid;
  grid-template-columns: 26px 1fr;
  column-gap: 14px;
  align-items: start;
  text-align: left;
}
.ssla-g-faq-a-row { margin-top: 6px; }
.ssla-g-faq-q-row .ssla-g-faq-question,
.ssla-g-faq-a-row .ssla-g-faq-answer { margin: 0; min-width: 0; }
.ssla-g-faq-marker {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--g-faq-question-family);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  margin-top: 2px;
}
/* Q — filled box in the accent color (square; zero-radius house rule).
 * v3.18.44 / WALK-4 — letter color reads from --g-faq-marker-q-fg, not
 * --g-faq-bg. Pre-v3.18.44 this used --g-faq-bg as a contrast color, but
 * v3.18.43 flipped --g-faq-bg to transparent for paint-on-demand, making
 * the letter invisible. Decoupled token preserves both behaviors. */
.ssla-g-faq-marker--q { background: var(--g-faq-accent); color: var(--g-faq-marker-q-fg); }
/* A — simple outlined circle (deliberate radius exception for this marker). */
.ssla-g-faq-marker--a {
  background: transparent;
  border: 1.5px solid var(--g-faq-line);
  border-radius: 50%;
  color: var(--g-faq-fg);
}

/* ── Structural variant: layout (per §3.4) ── */
.ssla-g-faq--layout-two-col .ssla-g-faq-items {
  max-width: 1100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 64px;
}
.ssla-g-faq--layout-two-col .ssla-g-faq-item {
  padding: 24px 0;
  border-top: 1px solid var(--g-faq-line);
  border-bottom: none;
}
.ssla-g-faq--layout-two-col .ssla-g-faq-item:last-child {
  border-bottom: none;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .ssla-g-faq--layout-two-col .ssla-g-faq-items { grid-template-columns: 1fr; gap: 0; }
  .ssla-g-faq-inner {
    padding: 60px 24px;
  }
}

/* ═══ Skeleton state per §3.5 ═══ */
.ssla-section.ssla-g-faq {
  --g-faq-bg:                 transparent;
  --g-faq-fg:                 var(--brand-fg);
  --g-faq-eyebrow:            var(--brand-accent);
  --g-faq-accent:             var(--brand-accent); /* v3.18.38 — drives the Q box */
  /* v3.18.44 / WALK-4 fix — Q marker letter color. Decoupled from --g-faq-bg
   * (which v3.18.43 flipped to transparent for paint-on-demand). The marker
   * letter needs an opaque contrast color against the accent-filled square;
   * defaults to brand-bg so it reads against the preset's normal background.
   * Operators can override via Cog Colors tab (future enhancement). */
  --g-faq-marker-q-fg:        var(--brand-bg);
  --g-faq-line:               var(--brand-line);
  --g-faq-heading-family:     var(--brand-heading-family);
  --g-faq-heading-size:       var(--brand-h2-size-clamp);
  --g-faq-heading-weight:     var(--brand-heading-weight);
  --g-faq-question-family:    var(--brand-heading-family);
  --g-faq-question-size:      var(--brand-h3-size);
  --g-faq-question-weight:    700;
  --g-faq-answer-family:      var(--brand-body-family);
  --g-faq-answer-size:        var(--brand-body-size);
  --g-faq-answer-line-height: var(--brand-body-line-height);
  --g-faq-eyebrow-size:       var(--brand-eyebrow-size);
  --g-faq-eyebrow-letter:     var(--brand-letter-spacing-eyebrow);
  --g-faq-section-padding:    var(--brand-section-padding);
  --g-faq-content-max-width:  var(--brand-content-max-width);
}