/* Document content (STEM pages). Shared by the public page and the admin editor, so the
   editor shows exactly what visitors will see. Colours follow the site theme when present. */

.rt-content {
  --rt-text: var(--colour-text, #08101F);
  --rt-muted: var(--colour-text-muted, #3A506B);
  --rt-accent: var(--colour-accent, #B36A89);
  --rt-accent-light: var(--colour-accent-light, #F0D8E1);
  --rt-border: var(--colour-border, #A1B5CC);
  --rt-surface: var(--colour-surface, #FFFFFF);
  color: var(--rt-text);
  font-family: var(--font-body, 'Outfit', system-ui, sans-serif);
  font-size: 1.075rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.rt-content::after { content: ""; display: block; clear: both; }      /* contain floated pictures */

.rt-content > :first-child { margin-top: 0; }
.rt-content p { margin: 0 0 1em; }
.rt-content h2, .rt-content h3, .rt-content h4 {
  font-family: var(--font-display, 'Libre Baskerville', Georgia, serif);
  line-height: 1.3; color: var(--rt-text); margin: 1.6em 0 0.6em; font-weight: 700;
}
.rt-content h2 { font-size: 1.65em; }
.rt-content h3 { font-size: 1.3em; }
.rt-content h4 { font-size: 1.08em; letter-spacing: .01em; }
.rt-content a { color: var(--rt-accent); text-decoration: underline; text-underline-offset: 2px; }
.rt-content strong, .rt-content b { font-weight: 600; }
.rt-content ul, .rt-content ol { margin: 0 0 1em; padding-left: 1.6em; }
.rt-content ul { list-style: disc; }
.rt-content ul ul { list-style: circle; }
.rt-content ol { list-style: decimal; }
.rt-content li::marker { color: var(--rt-accent); }
.rt-content li { margin: .25em 0; }
.rt-content li > p { margin: 0; }
.rt-content blockquote {
  margin: 1.4em 0; padding: .6em 1.2em; border-left: 4px solid var(--rt-accent);
  background: color-mix(in srgb, var(--rt-accent-light) 45%, transparent);
  font-style: italic; color: var(--rt-muted); border-radius: 0 6px 6px 0;
}
.rt-content blockquote p:last-child { margin-bottom: 0; }
.rt-content hr { border: 0; border-top: 1px solid var(--rt-border); margin: 2em 0; clear: both; }
.rt-content mark { background: #fff1a8; padding: 0 .15em; }
.rt-content .rt-lead { font-size: 1.2em; color: var(--rt-muted); }

/* ---------- pictures: position (rt-left/right/center/full) × width (rt-w25…rt-w100) ---------- */
.rt-content figure.rt-img { margin: .4em 0 1.2em; max-width: 100%; }
.rt-content figure.rt-img img { display: block; width: 100%; height: auto; border-radius: 6px; }
.rt-content figure.rt-img figcaption {
  font-size: .86em; color: var(--rt-muted); margin-top: .45em; line-height: 1.45; text-align: center;
}
.rt-content figure.rt-center { margin-left: auto; margin-right: auto; }
.rt-content figure.rt-left  { float: left;  margin: .35em 1.6em 1em 0; }
.rt-content figure.rt-right { float: right; margin: .35em 0 1em 1.6em; }
.rt-content figure.rt-full  { width: 100% !important; clear: both; }
.rt-content figure.rt-w25  { width: 25%; }
.rt-content figure.rt-w33  { width: 33.333%; }
.rt-content figure.rt-w50  { width: 50%; }
.rt-content figure.rt-w75  { width: 75%; }
.rt-content figure.rt-w100 { width: 100%; }
.rt-content figure.rt-left.rt-w100, .rt-content figure.rt-right.rt-w100 { float: none; margin-left: 0; margin-right: 0; }

/* ---------- columns ---------- */
.rt-content .rt-cols { display: grid; gap: 1.8em; margin: 1.2em 0 1.4em; clear: both; }
.rt-content .rt-cols-2 { grid-template-columns: 1fr 1fr; }
.rt-content .rt-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.rt-content .rt-col { min-width: 0; }
.rt-content .rt-col > :last-child { margin-bottom: 0; }
.rt-content .rt-col figure.rt-img { width: 100%; float: none; margin: 0 0 .8em; }

/* ---------- highlight box ---------- */
.rt-content .rt-box {
  margin: 1.4em 0; padding: 1.1em 1.4em; border-radius: 10px; clear: both;
  background: color-mix(in srgb, var(--rt-accent-light) 55%, var(--rt-surface));
  border: 1px solid color-mix(in srgb, var(--rt-accent) 30%, transparent);
}
.rt-content .rt-box > :last-child { margin-bottom: 0; }

/* ---------- tables ---------- */
.rt-content table { width: 100%; border-collapse: collapse; margin: 1.2em 0 1.6em; font-size: .95em; clear: both; }
.rt-content th, .rt-content td { border: 1px solid var(--rt-border); padding: .55em .75em; vertical-align: top; text-align: left; }
.rt-content th, .rt-content thead td { background: color-mix(in srgb, var(--rt-accent-light) 60%, var(--rt-surface)); font-weight: 600; }
.rt-content td > p:last-child, .rt-content th > p:last-child { margin-bottom: 0; }
/* widths set in the editor: columns from <colgroup> (percentages), rows from their height */
.rt-content table.rt-fixed { table-layout: fixed; }
.rt-content table.rt-fixed td, .rt-content table.rt-fixed th { overflow-wrap: anywhere; }

/* ---------- video ---------- */
.rt-content .rt-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 1.2em 0 1.6em; clear: both;
  border-radius: 8px; overflow: hidden; background: #000; }
.rt-content .rt-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Phones: pictures stop wrapping text and columns stack */
@media (max-width: 640px) {
  .rt-content figure.rt-left, .rt-content figure.rt-right { float: none; width: 100% !important; margin: .4em 0 1.2em; }
  .rt-content figure.rt-w25, .rt-content figure.rt-w33 { width: 60%; }
  .rt-content figure.rt-center.rt-w25, .rt-content figure.rt-center.rt-w33 { width: 60%; }
  .rt-content .rt-cols-2, .rt-content .rt-cols-3 { grid-template-columns: 1fr; }
  .rt-content table:not(.rt-fixed) { display: block; overflow-x: auto; }
  .rt-content table.rt-fixed { width: 100% !important; }    /* sized tables fit the phone's width */
}