/* =====================================================================
   main.css  —  ONE stylesheet for the whole UMD Biostatistics site.
   Loaded globally via _quarto.yml:  css: /css/main.css

   Font: Atkinson Hyperlegible (set in theme.scss / theme-dark.scss via
         Google Fonts import; this file just enforces it everywhere as a
         fallback so slides never fall back to Times New Roman).

   Brand colors:
     --umd-navy:   #002147   (headings, body text)
     --umd-gold:   #F4CD54   (accent only, e.g. slide title bar text)
     --umd-slate:  #4a4a4a   (secondary/muted)

   Sections:
     A — shared (boxes, inline code, columns, tables)
     B — SLIDES only   (.reveal)
     C — DOCUMENTS + website  (body:not(.reveal))
     D — laboratory.css replacement (opt-in via class, not a separate file)

   NOTE ON DARK MODE:
     The colors in Section C are LIGHT-mode ink and apply in every mode.
     Dark-mode text colors are handled entirely in theme-dark.scss (which
     Quarto only loads when the reader is in dark mode). Keep dark colors
     THERE, not here — this file stays mode-agnostic.
   ===================================================================== */

/* ── font enforcement (fallback if the SCSS import is slow / cached) ── */
*, *::before, *::after {
  font-family: "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
}

:root {
  --umd-navy:   #002147;
  --umd-gold:   #F4CD54;
  --umd-slate:  #4a4a4a;
}

/* =====================================================================
   SECTION A · SHARED EVERYWHERE
   ===================================================================== */

/* Inline code — dark text on light grey chip (dark mode overrides in theme-dark.scss) */
code {
  color: #212529;
  background-color: #f1f3f5;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.88em;
}

/* Two-column layout (Quarto writes width as inline style; flex respects it) */
.columns {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 1em;
}
.column {
  flex: 0 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
}
.column img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .columns { flex-direction: column; }
  .column  { width: 100% !important; margin-bottom: 15px; }
}

/* ── Colored callout / help boxes ──────────────────────────────────── */
/* Usage in .qmd:
     ::: {.tryit}
     **🖐 Try it yourself**   ← the title line (plain text, survives Word)
     Run `str(tree_df)` …
     :::
   Dark mode keeps these light-backed boxes readable via theme-dark.scss.
*/
.excelbox, .tryit, .vocab, .watchout, .keypoint {
  border-radius: 8px;
  padding: 0.5em 0.85em 0.6em;
  margin: 0.75em 0;
  border-left: 6px solid;
  box-sizing: border-box;
}
.excelbox > p:first-child, .tryit > p:first-child,
.vocab > p:first-child, .watchout > p:first-child,
.keypoint > p:first-child { margin-bottom: 4px; }

.excelbox { background: #f5f0ff; border-color: #7c3aed; }  /* Excel users   */
.tryit    { background: #ecfeff; border-color: #0891b2; }  /* Try it        */
.vocab    { background: #fffbeb; border-color: #f59e0b; }  /* New word      */
.watchout { background: #fff1f2; border-color: #ef4444; }  /* Watch out!    */
.keypoint { background: #f0fdf4; border-color: #16a34a; }  /* Key idea      */

.excelbox code, .tryit code, .vocab code,
.watchout code, .keypoint code {
  background: rgba(255,255,255,0.65);
}

/* ── Shared table look ─────────────────────────────────────────────── */
.reveal table, body table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
  color: var(--umd-navy);
}
.reveal table th, .reveal table td,
body table th, body table td {
  border: 1px dotted #cccccc;
  padding: 8px 12px;
  text-align: left;
  font-size: inherit;
}
.reveal table th, body table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

/* =====================================================================
   SECTION B · SLIDES ONLY  (.reveal)

   RevealJS heading convention used by these slides:
     # H1  → slide separator  (rendered as a dark bar with gold text)
     ## H2 → ALSO a slide separator in RevealJS — avoid as a sub-heading!
              Use ### H3 or #### H4 for in-slide sub-headings instead.
   ===================================================================== */

/* Top-align slide content */
.reveal .slides section {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  height: auto !important;
  min-height: 100% !important;
  padding: 0 !important;
  text-align: left !important;
  overflow-y: visible !important;
}
.reveal .slides section > * {
  position: static !important;
  margin: 0 0 12px 0 !important;
  width: 100% !important;
}
.reveal .slides h1,
.reveal .slides h2  { order: -1 !important; transform: none !important; }
.reveal .slides p,
.reveal .slides ul,
.reveal .slides ol,
.reveal .slides h3,
.reveal .slides h4,
.reveal .slides h5  { order: 0 !important; margin-top: 0 !important; }

/* H1 — slide-separator title bar: dark background, gold text */
.reveal h1 {
  font-size: 34px !important;
  font-family: "Atkinson Hyperlegible", sans-serif !important;
  background-color: #1a1a2e !important;   /* deep navy — no burgundy */
  color: var(--umd-gold) !important;
  padding: 10px 20px !important;
  margin: 0 0 18px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
}

/* H2 — also a RevealJS slide separator; style same as H1 so it's clear */
.reveal h2 {
  font-size: 30px !important;
  font-family: "Atkinson Hyperlegible", sans-serif !important;
  background-color: #1a1a2e !important;
  color: var(--umd-gold) !important;
  padding: 8px 20px !important;
  margin: 0 0 16px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* H3 / H4 / H5 — IN-SLIDE sub-headings (use these, not H2!) */
.reveal h3 {
  font-size: 24px !important;
  font-family: "Atkinson Hyperlegible", sans-serif !important;
  color: var(--umd-navy) !important;
  border-bottom: 2px solid var(--umd-navy);
  padding-bottom: 4px !important;
  margin: 4px 0 10px 0 !important;
}
.reveal h4 {
  font-size: 20px !important;
  font-family: "Atkinson Hyperlegible", sans-serif !important;
  color: var(--umd-navy) !important;
  margin: 4px 0 8px 0 !important;
}
.reveal h5 {
  font-size: 18px !important;
  font-family: "Atkinson Hyperlegible", sans-serif !important;
  color: var(--umd-slate) !important;
  margin: 4px 0 6px 0 !important;
}

/* Slide body text */
.reveal p {
  font-size: 20px !important;
  font-family: "Atkinson Hyperlegible", sans-serif !important;
  color: var(--umd-navy) !important;
  line-height: 1.45 !important;
}
.reveal ul,
.reveal ol {
  font-size: 20px !important;
  font-family: "Atkinson Hyperlegible", sans-serif !important;
  color: var(--umd-navy) !important;
  line-height: 1.4 !important;
  padding-left: 28px !important;
}
.reveal ul li,
.reveal ol li     { font-size: 20px !important; margin-bottom: 4px !important; }
.reveal ul ul li,
.reveal ol ol li  { font-size: 18px !important; }
.reveal ul ul ul li { font-size: 16px !important; }

/* Slide code — compact and scrollable */
.reveal pre,
.reveal code,
.reveal .sourceCode,
.reveal div.sourceCode,
.reveal div.sourceCode pre {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  max-height: 380px !important;
  overflow-y: auto !important;
  background-color: #f5f5f5 !important;
  border: 1px solid #ddd !important;
  border-radius: 3px !important;
  padding: 6px !important;
}
.reveal .cell-output,
.reveal .cell-output-stdout pre,
.reveal .cell-output-stderr pre {
  font-size: 12px !important;
  line-height: 1.2 !important;
  background-color: #f8f8f8 !important;
  padding: 4px !important;
}
.reveal pre code { white-space: pre-wrap !important; max-width: 100% !important; tab-size: 2 !important; }

/* Slide table — keep same font-size scaling */
.reveal .cell-output-display table,
.reveal .cell-output table,
.reveal .cell-output th,
.reveal .cell-output td { font-size: 11px !important; padding: 2px 4px !important; }

/* Syntax highlighting */
.reveal .sourceCode .kw { color: #007020; font-weight: bold; }
.reveal .sourceCode .dt { color: #902000; }
.reveal .sourceCode .dv,
.reveal .sourceCode .bn,
.reveal .sourceCode .fl { color: #40a070; }
.reveal .sourceCode .ch,
.reveal .sourceCode .st,
.reveal .sourceCode .sc,
.reveal .sourceCode .vs { color: #4070a0; }
.reveal .sourceCode .co { color: #60a0b0; font-style: italic; }
.reveal .sourceCode .ot { color: #007020; }
.reveal .sourceCode .fu { color: #06287e; }
.reveal .sourceCode .cn { color: #880000; }

/* =====================================================================
   SECTION C · DOCUMENTS + WEBSITE  (body:not(.reveal))
   Clean, readable, all-sans headings.  NO title bars here.
   These are LIGHT-mode colors; dark mode is re-colored in theme-dark.scss.
   ===================================================================== */

body:not(.reveal) {
  font-family: "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
}

body:not(.reveal) h1 {
  font-size: 1.75rem;
  color: #111111;
  font-weight: 700;
  border-bottom: 3px solid var(--umd-navy);
  padding-bottom: 6px;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}
body:not(.reveal) h2 {
  font-size: 1.4rem;
  color: var(--umd-navy);
  font-weight: 600;
  border-bottom: 1px solid #cccccc;
  padding-bottom: 4px;
  margin-top: 1.25rem;
  margin-bottom: 0.6rem;
}
body:not(.reveal) h3 {
  font-size: 1.15rem;
  color: var(--umd-navy);
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
body:not(.reveal) h4,
body:not(.reveal) h5,
body:not(.reveal) h6 {
  font-size: 1rem;
  color: var(--umd-slate);
  font-weight: 600;
  margin-top: 0.75rem;
  margin-bottom: 0.4rem;
}

body:not(.reveal) p,
body:not(.reveal) ul,
body:not(.reveal) ol,
body:not(.reveal) li {
  font-size: 1rem;
  color: #222222;
  line-height: 1.65;
}

/* Document / website code blocks */
body:not(.reveal) pre,
body:not(.reveal) div.sourceCode,
body:not(.reveal) div.sourceCode pre {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.8rem;
  line-height: 1.25;
  max-height: 420px;
  overflow-y: auto;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px 12px;
}
body:not(.reveal) .cell-output,
body:not(.reveal) .cell-output-stdout pre,
body:not(.reveal) .cell-output-stderr pre {
  font-size: 0.8rem;
  line-height: 1.25;
  background-color: #f8f8f8;
  padding: 6px 10px;
}

@media (max-width: 767px) {
  body:not(.reveal) pre,
  body:not(.reveal) code { font-size: 0.75rem; }
}

/* =====================================================================
   SECTION D · LABORATORY HANDOUT look (opt-in, not global)
   Add  class: lab-report  to a page's YAML instead of a separate CSS file:
       format:
         html:
           css: /css/main.css
           body-classes: "lab-report"
   ===================================================================== */

body.lab-report {
  font-family: "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.65;
}
body.lab-report h1,
body.lab-report h2,
body.lab-report h3 {
  font-weight: bold;
  color: #111111;
  border-bottom: 2px solid #212529;
  padding-bottom: 4px;
}
body.lab-report table { width: 100%; border-collapse: collapse; }
body.lab-report th,
body.lab-report td { border: 1px solid #333333; padding: 8px 10px; }
body.lab-report a { color: #0056b3; }
body.lab-report a:hover { color: #003d82; text-decoration: underline; }