/* FAQs: the old page's question boxes were wider than the shared accordion. */

.pg-faqs .accordion, .pg-faqs .accordion-group-title { max-width: 1024px; }
.pg-faqs .accordion-group-title { font-family: var(--font-body); }
.pg-faqs .accordion-body h3 { margin: 4px 0 10px; font-size: 17px; font-weight: 600; }
.pg-faqs .accordion-body ul { margin: 0 0 1.2em; padding-left: 1.3em; list-style: disc; }
.pg-faqs .accordion-body li { margin-bottom: .6em; }
.pg-faqs .accordion-body li::marker { color: var(--navy-text); }

/* Banner photo (notes/STYLE-GUIDE.md, "Banner photos"; notes/review/faqs.md, "Banner"). The webp is the
   original cropped by 150 px on the right, to 1469 x 971 (aspect 0.661), so the instructor stands far enough
   right to clear the end of "Questions" at every width. Focal points, in the webp's pixels: the instructor's
   face at 1330-1400 across and 240-305 down (she stands at 1280-1440, 228-715), and the raised hand at
   660-725, 335-440. The calm area is the blank whiteboard, 612-1268 across and 118-458 down, which sits
   behind the title.
   Wide screens cover the banner by width, so her face's middle (row 272, 28% down) sits
   0.28 x 0.661 x 100vw = 18.5vw below the photo's top. Holding it at the title's centre (213 px) puts her
   beside the end of the title, with the whiteboard behind the title and the hand below it:
   calc(213px - 18.5vw), and clamp() keeps the photo filling the banner (up to about 1150 px it stays at the
   top). The whiteboard is plain, so the burst is a light one. */
.fq-hero { background-color: #e5e5e6; background-position: 50% clamp(100%, calc(213px - 18.5vw), 0px); --burst: 45%; }
/* Phones: drawn at the banner's height, her face would sit under the header. Drawn at 125% from the top left,
   she falls off the right edge, and the window, whiteboard and class fill the banner. */
@media (max-width: 480px) {
  .fq-hero { background-size: auto 125%; background-position: 0 0; }
}


/* ---- Dark mode, generated by tools/darkmode.py when the site is built. Don't edit this part in site/; change the light rule in src/, or add a hand-written dark rule. ---- */
@media (prefers-color-scheme: dark) {
  .fq-hero { background-color: #242a35; }
}