@charset "utf-8";

/* Ported verbatim from sahifah-mockup css/main.css, section 14.
   Every value is a token from tokens.css — no raw colours, sizes or magic numbers. */

/* ============================================================
   14. THE ANSWERS ARCHIVE
   ------------------------------------------------------------
   A published record of rulings, not a forum and not a run of
   short articles. The exchange happened elsewhere; what is on
   the page is the question as it was put and the answer as it
   was given, and the two must never read as one voice.

   So the question is set as a quotation — a block, in the
   display face, on the burgundy wash — and never as a heading.
   The answer beneath it is ordinary prose, with the ayah and
   hadith blocks from section 12 carrying the cited evidence.
   ============================================================ */

/* -- 14a. The question block ---------------------------------
   Distinct from both existing quotation blocks by ground and
   frame: the ayah is cream inside a double warm rule, the
   hadith is cream behind a burgundy rail, and the question is
   the burgundy wash inside a single accent rule.
   ------------------------------------------------------------ */
.question {
  max-width: var(--measure-wide);
  margin: 0 auto var(--space-xl);
  padding: var(--space-md);
  background-color: var(--colour-bg-wash);
  border: var(--border-accent);
  border-radius: var(--radius-tile);
}

@media (min-width: 40em) {
  .question {
    padding: var(--space-lg);
  }
}

.question__label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--colour-heading);
  margin-bottom: var(--space-sm);
}

.question__text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--ink-900);
  text-wrap: pretty;
  /* Opening quotes hang, as they do in the prose column. */
  hanging-punctuation: first;
}

.question__text p + p {
  margin-top: var(--space-sm);
}

/* Who asked, and when — the question's own small print, kept
   apart from the answer's attribution at the foot. */
.question__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  margin-top: var(--space-md);
  padding-top: var(--space-xs);
  border-top: var(--rule-hairline) solid var(--burgundy-100);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-style: normal;
  letter-spacing: var(--tracking-wide);
  color: var(--colour-text-meta);
}

.question__ref {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-normal);
  color: var(--colour-text-muted);
}

/* -- 14b. Attribution ----------------------------------------
   Who answered, and when. A line, not a biography — the author
   card at the foot of an article says more, and would say too
   much here, where the ruling is the thing and the mufti is its
   provenance.
   ------------------------------------------------------------ */
.answer-attribution {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2xs) var(--space-md);
  max-width: var(--measure-wide);
  margin: var(--space-2xl) auto 0;
  padding-top: var(--space-md);
  border-top: var(--border-hairline);
}

.answer-attribution__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--colour-heading);
}

.answer-attribution__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-xs);
  margin: var(--space-3xs) 0 0;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--colour-text-meta);
}

/* -- 14c. The listing ----------------------------------------
   Denser than the article listing on purpose. An article
   listing sells a piece of writing, so it gets a card, a
   generous excerpt and room to breathe. This is an archive
   being searched, so it drops the card entirely: hairline rows,
   tighter leading, and the question doing the work of the
   heading.
   ------------------------------------------------------------ */
.answer-group {
  margin-bottom: var(--space-2xl);
}

.answer-group:last-child {
  margin-bottom: 0;
}

/* Clears the fixed header when a nav dropdown link lands here. */
.answer-group,
.category-section {
  scroll-margin-top: calc(var(--header-height) + var(--space-md));
}

.answer-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-sm);
  padding-bottom: var(--space-2xs);
  margin-bottom: var(--space-2xs);
  border-bottom: var(--rule-thin) solid var(--colour-rule-accent);
}

.answer-group__title {
  font-size: var(--text-xl);
  margin: 0;
}

.answer-group__arabic {
  font-family: var(--font-arabic);
  font-size: var(--text-base);
  line-height: var(--leading-arabic-inline);
  color: var(--burgundy-400);
  direction: rtl;
  /* Physical, not logical, and deliberately so. dir="rtl" on the
     span sets the direction of the text inside it; it does not
     move the span within the heading's own left-to-right line.
     margin-inline-end would resolve against the span's rtl and
     put the space on its left, where nothing is. The gap wanted
     is between the Arabic and the English that follows it, which
     on this line is the right-hand side. */
  margin-right: var(--space-2xs);
}

.answer-list {
  display: grid;
}

.answer-item {
  position: relative;
  display: grid;
  gap: var(--space-3xs);
  /* Pulled out by its own inset so the hover ground extends
     past the text without the text leaving the group's rule. */
  padding: var(--space-sm) var(--space-2xs);
  margin-inline: calc(var(--space-2xs) * -1);
  border-bottom: var(--border-hairline);
  transition: var(--transition-colour);
}

.answer-item:last-child {
  border-bottom: 0;
}

.answer-item:hover {
  background-color: var(--colour-bg-band);
}

.band .answer-item:hover {
  background-color: var(--colour-bg-card-cream);
}

.answer-item__question {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--colour-heading);
  text-wrap: pretty;
}

.answer-item__question a {
  color: inherit;
}

.answer-item__question a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
}

.answer-item:hover .answer-item__question a {
  color: var(--colour-link-hover);
}

.answer-item__excerpt {
  margin: 0;
  max-width: var(--measure-wide);
  font-size: var(--text-sm);
  /* Tighter than a card excerpt — this is a scan, not a read. */
  line-height: var(--leading-normal);
  color: var(--colour-text-muted);
}

.answer-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3xs) var(--space-xs);
  margin: var(--space-3xs) 0 0;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--colour-text-meta);
}

.answer-item__ref {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-normal);
  margin-left: auto;
}