/* answer.css
   The direct answer under every H1 and the quick-answer card on question
   pages. Loaded on every page from scripts/normalise-chrome.mjs, right after
   the cookie sheet.

   Everything here is scoped to .direct-answer, .quick-answer and .answer-band
   so it cannot touch anything else on the page.

   British English. No long dashes in this file. */

/* ---------- the plain answer, inside the dark page header band ---------- */

.phead .direct-answer,
.ghead .direct-answer,
.bhead .direct-answer {
  margin-top: .9rem;
  max-width: 62ch;
  color: #e8e8e6;
  font-size: 1.05rem;
  line-height: 1.6;
}

/* ---------- the quick answer card on question pages ---------- */

.quick-answer {
  margin-top: 1.1rem;
  max-width: 62ch;
  background: #fcfcfb;
  color: #181818;
  border: 1px solid #dedbd5;
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
}

.quick-answer .qa-kicker {
  display: inline-block;
  margin: 0 0 .55rem;
  background: #f5c842;
  color: #241a00;
  border-radius: 999px;
  padding: .26rem .7rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.quick-answer p:not(.qa-kicker) {
  margin: 0;
  color: #181818;
  font-size: 1.05rem;
  line-height: 1.6;
}

/* ---------- the homepage band, directly under the video hero ---------- */

.answer-band {
  background: #f3f3f1;
  padding-block: 1.4rem;
}

.answer-band .direct-answer {
  max-width: 62ch;
  margin: 0;
  color: #181818;
  font-size: 1.1rem;
  line-height: 1.6;
}

/* ---------- phone: plain text, never a bright slab at the seam ----------
   Hugh reviews on a phone. A white card sitting on the dark band, or a warm
   slab immediately under the dark hero, reads as a broken page. Under 700px
   both become plain text on the ground they already sit on. */

@media (max-width: 700px) {
  .quick-answer {
    background: none;
    border: 0;
    border-left: 2px solid #f5c842;
    border-radius: 0;
    padding: 0 0 0 .9rem;
    margin-top: 1rem;
  }
  .quick-answer .qa-kicker {
    background: none;
    color: #f5c842;
    padding: 0;
    margin-bottom: .35rem;
  }
  .quick-answer p:not(.qa-kicker) {
    color: #e8e8e6;
    font-size: 1rem;
  }
  .answer-band {
    background: none;
    padding-block: 1.1rem 0;
  }
  .answer-band .direct-answer {
    color: #e8e8e6;
    font-size: 1rem;
  }
}