/* =========================================================================
   faq.css — the baked copy of the FAQ.

   Separate from article.css because faq.html does not link that file and
   never has; it carries its own shell inline. Putting these rules there
   meant the baked questions had no styling at all, which perf-audit caught
   before it shipped: three bare h2s that colors_and_type.css would have
   sized at up to 128px.
   ========================================================================= */

.fq-wrap { max-width: 860px; margin: 0 auto; padding: 34px 24px 0; }
.fq-group-h {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 4vw, 40px); line-height: 1.05;
  text-transform: uppercase; color: var(--brown); margin: 38px 0 6px;
}
.fq-group-blurb { font-size: 15px; line-height: 1.6; color: var(--brown-soft); margin: 0 0 18px; }
/* The "not medical advice" note above the contact block. Classes, not inline
   style, because tools/prerender.py bakes the same note into faq.html and a
   baked element must be styled by a stylesheet (S6-07). */
.fq-note { max-width: 1320px; margin: 56px auto 0; padding: 0 36px; }
.fq-note-box {
  background: rgba(61,47,35,0.05); border: 1.5px dashed rgba(61,47,35,0.22);
  border-radius: 14px; padding: 18px 20px; font-size: 13.5px; line-height: 1.6;
  color: var(--brown-soft); font-family: var(--font-body); max-width: 860px;
}
.fq-note-box strong { color: var(--brown); }
.fq-note-box a { color: var(--orange); }
.fq-note-th { font-family: var(--font-thai); }

.fq-item {
  border-bottom: 1.5px solid rgba(61, 47, 35, 0.12);
  padding: 16px 0;
}
.fq-q {
  font-family: var(--font-body); font-weight: 800; font-size: 16px;
  line-height: 1.45; color: var(--brown); cursor: pointer;
}
.fq-a {
  font-size: 15px; line-height: 1.7; color: var(--brown-soft);
  margin-top: 12px;
}
.fq-a a { color: var(--orange); }