/*
 * Canonical question typography, shared by the editor, the live preview, and the
 * screenshot-engine. The capture surface must load this exact file so the saved PNG
 * matches the editor preview (same font family, size, and math container rules).
 *
 * Framework-agnostic plain CSS: the React app references it; the screenshot-engine
 * copies it verbatim (see ./README.md). No CSS-Modules, no PostCSS-only syntax.
 *
 * Font: self-hosted Be Vietnam Pro (SIL OFL, full Vietnamese coverage). Never load
 * from a CDN at capture time - a missing font silently substitutes and breaks
 * fidelity. Place the WOFF2 at the path below (user-provided).
 */

@font-face {
  font-family: 'Be Vietnam Pro';
  src: url('/assets/fonts/BeVietnamPro-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block; /* block, not swap: avoid capturing a fallback font mid-load */
}

@font-face {
  font-family: 'Be Vietnam Pro';
  src: url('/assets/fonts/BeVietnamPro-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

/* House typography. One family and base size everywhere a question is rendered. */
.questionRender {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 19px;
  line-height: 2;
  color: #000;
  word-wrap: break-word;
}

.questionRender p {
  margin: 0 0 12px;
}

.questionRender p:last-child {
  margin-bottom: 0;
}

/* Images render at the size the admin set in the editor; never forced to a box. */
.questionRender img {
  max-width: 100%;
  height: auto;
}

/* Math nodes inherit the house font for surrounding text; MathJax styles the math.
   vertical-align: middle centres tall SVG fractions on the text baseline so they
   don't push adjacent lines apart asymmetrically. */
.questionRender .math-render {
  display: inline-block;
  vertical-align: middle;
}