/* ==========================================================================
   AQAR — Soal Jawab Tajwid
   Styles the semantic, unstyled markup produced by the AQAR Core plugin plus the
   theme's own archive/single templates. Loaded only on Soal Jawab views.
   Depends on tokens.css + ui.css (which supplies .card, .tag, .instr).
   ========================================================================== */

/* The "S" badge that opens each question. It is the BADGE; .qa-row is the row
   wrapper. Keeping them on separate classes matters: they were once the same
   class, and the card collapsed to 30px because the wrapper inherited the
   badge's fixed size. */
.qa-q { display: flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: var(--c-tint); color: var(--c-turquoise-700); font-weight: 800; }

/* --- Topic filter bar ----------------------------------------------------- */
.qa-filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.qa-filter-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 8px 14px; border-radius: var(--r-pill);
  background: #fff; border: 1px solid var(--c-line);
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.qa-filter-pill:hover { text-decoration: none; border-color: var(--c-turquoise); color: var(--c-turquoise-700); }
.qa-filter-pill.is-active { background: var(--c-turquoise); border-color: var(--c-turquoise); color: #fff; }
.qa-filter-count {
  font-size: var(--fs-xs); font-weight: 700; padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--c-surface); color: var(--c-muted);
}
.qa-filter-pill.is-active .qa-filter-count { background: rgba(255,255,255,.22); color: #fff; }

/* --- Archive listing ------------------------------------------------------ */
.qa-list { display: grid; gap: var(--sp-4); }
.qa-card { padding: var(--sp-5); }
.qa-row { display: flex; align-items: flex-start; gap: var(--sp-4); }
.qa-body { flex: 1; min-width: 0; }
.qa-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.qa-title { font-size: var(--fs-h4); margin: 0 0 var(--sp-2); line-height: var(--lh-snug); }
.qa-title a { color: var(--c-ink); }
.qa-title a:hover { color: var(--c-turquoise-600); text-decoration: none; }
.qa-excerpt { color: var(--c-muted); font-size: var(--fs-sm); margin: 0; }
.qa-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-sm); color: var(--c-muted); margin-top: var(--sp-3); }
.qa-meta .instr { margin: 0; }

/* --- Single --------------------------------------------------------------- */
.qa-single-title { max-width: 26ch; }
.qa-single-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); }

.qa-answer { margin-bottom: var(--sp-6); }
.qa-answer-heading {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
  color: var(--c-turquoise-600); margin: 0 0 var(--sp-3);
}

/* Guru attribution card */
.qa-guru-card { max-width: var(--content); margin-bottom: var(--sp-6); }
.qa-guru-card:hover { transform: none; box-shadow: none; }
.qa-guru-body { display: flex; align-items: flex-start; gap: var(--sp-4); }
.qa-guru-body .avatar-lg {
  width: 56px; height: 56px; border-radius: var(--r-pill); flex: none;
  background: var(--c-turquoise);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: var(--fs-body);
}
.qa-guru-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
  font-weight: 700; color: var(--c-faint); margin: 0 0 2px; }
.qa-guru-name { font-weight: 700; color: var(--c-ink); margin: 0; }
.qa-guru-bio { font-size: var(--fs-sm); color: var(--c-muted); margin: var(--sp-2) 0 0; }

/* Share buttons moved to ui.css (SHARE ROW section) — the blog single reuses
   them too now, via the same aqar_core_get_share_urls() helper. */

.qa-back { margin-top: var(--sp-6); }