/* ==========================================================================
   uow-theme.css  —  University of Winchester reveal.js teaching theme
   Built from the UoW Corporate Brand Guidelines (the essentials).

   Fonts : free look-alikes for the commercial brand fonts —
             Headlines : Playfair Display  (stand-in for Ivy Presto Display)
             Body      : Figtree           (the real, free brand body font)
           Both are loaded from Google Fonts in index.html.

   Palette of a slide is controlled with reveal attributes, e.g.
     <!-- .slide: data-background-color="#291647" data-state="dark" -->
   Use data-state="dark" on any deep-purple slide so the logo + chrome flip.
   ========================================================================== */

:root {
  --uow-deep-purple:   #291647;
  --uow-bright-purple: #C68EFD;
  --uow-bright-green:  #D4EF70;
  --uow-deep-grey:     #56565A;
  --uow-light-grey:    #E6EBEB;
  --uow-green-ink:     #6F8A1E;   /* accessible green for text on white      */
  --uow-motif:         #352052;   /* subtle tonal motif on deep purple       */
  --uow-code-bg:       #F4F1F8;

  --r-main-font: "Figtree", system-ui, -apple-system, sans-serif;
  --r-heading-font: "Playfair Display", Georgia, serif;
}

/* ---- Base deck ----------------------------------------------------------- */
.reveal {
  font-family: var(--r-main-font);
  font-size: 28px;
  font-weight: 400;
  color: var(--uow-deep-purple);
}
.reveal .slides { text-align: left; }
/* Sections stay transparent so data-background-color (dark slides) shows through;
   the white comes from the viewport below. */
.reveal .slides section { background: transparent; }

/* Default (content) slides are white */
.reveal-viewport { background: #ffffff; }

/* ---- Headings ------------------------------------------------------------ */
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4 {
  font-family: var(--r-heading-font);
  color: var(--uow-deep-purple);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0 0 0.5em 0;
}
.reveal h1 { font-size: 1.9em; }
.reveal h2 { font-size: 1.45em; }
.reveal h3 { font-size: 1.15em; }

/* Content-slide title gets a short bright-green underline rule */
.reveal section > h2:first-child::after,
.reveal section > h1:first-child::after {
  content: "";
  display: block;
  width: 2.2em;
  height: 4px;
  margin-top: 0.25em;
  background: var(--uow-bright-green);
}

/* ---- Body text ----------------------------------------------------------- */
.reveal p { line-height: 1.4; margin: 0 0 0.6em 0; }
.reveal strong { color: var(--uow-deep-purple); font-weight: 800; }
.reveal em { font-style: italic; }
.reveal a { color: var(--uow-green-ink); text-decoration: none; border-bottom: 1px solid currentColor; }
.reveal a:hover { color: var(--uow-bright-purple); }

.reveal .highlight { color: var(--uow-bright-purple); font-weight: 800; }   /* keyword call-out */

/* ---- Lists --------------------------------------------------------------- */
.reveal ul { list-style: none; margin-left: 1em; }
.reveal ul li { position: relative; margin: 0.35em 0; }
.reveal ul li::before {
  content: "\25B6";                 /* brand triangle bullet */
  color: var(--uow-bright-purple);
  position: absolute;
  left: -1em;
  font-size: 0.7em;
  top: 0.18em;
}
.reveal ul ul li::before { color: var(--uow-bright-green); }
.reveal ol { margin-left: 1.2em; }
.reveal ol li { margin: 0.35em 0; }
.reveal ol li::marker { color: var(--uow-deep-purple); font-weight: 700; }

/* ==========================================================================
   Title slide  (give the opening section  class="uow-title" + data-state="dark")
   ========================================================================== */
.reveal section.uow-title {
  text-align: left;
  padding-top: 1.2em;
  /* Fill the whole slide, so the motif <svg> (position:absolute; inset:0) shows the
     full 1280x720 artwork, not a strip the height of the title text. reveal.js sets
     --slide-height; using it (not 100%) also keeps the PDF page's margins even. */
  height: var(--slide-height, 720px);
  box-sizing: border-box;
}
.reveal section.uow-title h1 {
  color: #ffffff;
  font-size: 1.7em;
  max-width: 18em;
}
.reveal section.uow-title .subtitle {
  color: var(--uow-bright-green);
  font-style: italic;
  font-family: var(--r-heading-font);
  font-size: 0.5em;
  font-weight: 600;
  line-height: 1.2;
  display: block;
  margin-top: 0.35em;
}
.reveal section.uow-title h1::after { content: none; }   /* no green rule here */
.reveal section.uow-title .meta {
  color: var(--uow-light-grey);
  font-size: 0.7em;
  margin-top: 1.4em;
  line-height: 1.5;
}
.reveal section.uow-title .meta .author { color: #ffffff; font-weight: 600; }

/* ==========================================================================
   Section divider  (class="uow-section" + data-state="dark")
   ========================================================================== */
.reveal section.uow-section { text-align: left; padding-top: 1.6em; }
.reveal section.uow-section .kicker {
  color: var(--uow-bright-green);
  font-size: 0.8em;
  letter-spacing: 0.04em;
}
.reveal section.uow-section h1,
.reveal section.uow-section h2 {
  color: #ffffff;
  font-size: 2.1em;
  margin-bottom: 0;
}
/* optional green-italic subtitle under the divider title */
.reveal section.uow-section .dsubtitle {
  color: var(--uow-bright-green);
  font-family: var(--r-heading-font);
  font-style: italic;
  font-size: 1.05em;
  margin-top: 0.25em;
}
/* green rule sits at the end — after the subtitle if present, else the title */
.reveal section.uow-section h1::after,
.reveal section.uow-section h2::after { content: none; }
.reveal section.uow-section::after {
  content: "";
  display: block;
  width: 2.6em; height: 4px;
  margin-top: 0.5em;
  background: var(--uow-bright-green);
}

/* ==========================================================================
   Closing slide  (class="uow-closing" + data-state="dark")
   ========================================================================== */
.reveal section.uow-closing { text-align: center; padding-top: 2.2em; }
.reveal section.uow-closing h1 {
  color: #ffffff;
  font-size: 2.6em;
}
.reveal section.uow-closing h1::after { content: none; }
.reveal section.uow-closing .contact {
  color: var(--uow-bright-green);
  font-size: 0.7em;
  margin-top: 0.6em;
}

/* ==========================================================================
   Callout boxes  — definition / theorem / example / key idea
   Use in markdown as fenced HTML, e.g.
     <div class="box definition"><h4>Definition</h4> ... </div>
   ========================================================================== */
.reveal .box {
  border-radius: 6px;
  padding: 0.7em 0.9em;
  margin: 0.6em 0;
  border-left: 6px solid var(--uow-deep-purple);
  font-size: 0.9em;
}
.reveal .box h4 {
  margin: 0 0 0.3em 0;
  font-family: var(--r-main-font);
  font-weight: 800;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.reveal .box.definition { background: rgba(198,142,253,0.14); border-color: var(--uow-deep-purple); }
.reveal .box.definition h4 { color: var(--uow-deep-purple); }
.reveal .box.theorem    { background: rgba(230,235,235,0.6); border-color: var(--uow-deep-purple); }
.reveal .box.theorem h4 { color: var(--uow-deep-purple); }
.reveal .box.example    { background: rgba(212,239,112,0.22); border-color: var(--uow-green-ink); }
.reveal .box.example h4 { color: var(--uow-green-ink); }
.reveal .box.keyidea    { background: var(--uow-deep-purple); border-color: var(--uow-bright-green); color: #fff; }
.reveal .box.keyidea h4 { color: var(--uow-bright-green); }
.reveal .box.keyidea a  { color: var(--uow-bright-green); }

/* ---- Code ---------------------------------------------------------------- */
.reveal pre {
  width: 100%;
  box-shadow: none;
  font-size: 0.6em;
  margin: 0.6em 0;
}
.reveal pre code {
  background: var(--uow-code-bg);
  border-left: 4px solid var(--uow-bright-purple);
  border-radius: 4px;
  padding: 0.8em 1em;
  max-height: 520px;
}
.reveal code { font-family: "SFMono-Regular", "Consolas", monospace; }
.reveal :not(pre) > code {       /* inline code */
  background: var(--uow-code-bg);
  color: var(--uow-deep-purple);
  padding: 0.1em 0.35em;
  border-radius: 3px;
  font-size: 0.9em;
}

/* ---- Tables -------------------------------------------------------------- */
.reveal table { margin: 0.6em 0; border-collapse: collapse; font-size: 25px; }
.reveal table th {
  background: var(--uow-deep-purple);
  color: #fff;
  font-weight: 700;
  padding: 0.35em 0.7em;
  text-align: left;
  border: none;
}
.reveal table td {
  padding: 0.3em 0.7em;
  border-bottom: 1px solid var(--uow-light-grey);
}
.reveal table tr:nth-child(even) td { background: rgba(230,235,235,0.45); }

/* ---- Blockquote / pull quote --------------------------------------------- */
.reveal blockquote {
  background: none;
  border: none;
  box-shadow: none;
  font-family: var(--r-heading-font);
  font-style: italic;
  color: var(--uow-deep-purple);
  font-size: 1.05em;
  padding-left: 1.2em;
  position: relative;
}
.reveal blockquote::before {
  content: "\201C";
  color: var(--uow-bright-purple);
  font-size: 2em;
  position: absolute;
  left: -0.1em; top: -0.2em;
}

/* ---- Math (KaTeX) -------------------------------------------------------- */
.reveal .katex { color: inherit; font-size: 1.0em; }

/* ---- Progress bar / controls -------------------------------------------- */
.reveal .progress { color: var(--uow-bright-green); height: 4px; }
.reveal .controls { color: var(--uow-bright-purple); }

/* ==========================================================================
   Persistent chrome (drawn outside .slides in index.html)

   Content (light) slides  ->  deep-purple footer BAND:
       crest (left) · running title (centre) · slide number (right)
   Title / divider / closing (dark) slides  ->  full white logo, bigger,
       and the band is hidden.
   ========================================================================== */
:root { --uow-band-h: 60px; --uow-band-pad: 26px; }

/* --- the band --- */
.uow-band {
  position: fixed; left: 0; bottom: 0;
  width: 100%; height: var(--uow-band-h);
  background: var(--uow-deep-purple);
  z-index: 30; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.uow-band .crest {
  position: absolute; left: var(--uow-band-pad);
  height: 46px;
}
.uow-band .ftitle {
  color: var(--uow-light-grey);
  font-family: var(--r-main-font);
  font-size: 17px; font-weight: 500;
  white-space: nowrap;
}

/* reveal's built-in slide number, repositioned into the band on the right
   (vertically centred in the band; underline/link colour stripped) */
.reveal .slide-number {
  position: fixed; right: var(--uow-band-pad); bottom: 19px; left: auto; top: auto;
  padding: 0; background: transparent; color: #fff;
  font-family: var(--r-main-font); font-size: 17px; font-weight: 500;
  z-index: 31;
}
.reveal .slide-number a,
.reveal .slide-number a:hover { color: #fff; text-decoration: none; border-bottom: none; }

/* --- full logo for dark slides --- */
.uow-fulllogo {
  position: fixed; left: var(--uow-band-pad); bottom: 24px;
  height: 52px; z-index: 31; pointer-events: none;
  display: none;
}

/* dark slides: show the big full logo, hide the band + number.
   reveal sets the slide number's display inline via JS, so !important is needed. */
html.dark .uow-fulllogo  { display: block; }
html.dark .uow-band      { display: none; }
html.dark .reveal .slide-number { display: none !important; }

/* ==========================================================================
   Pen-annotation toolbar (drives the chalkboard plugin; Pencil / touch / mouse)
   ========================================================================== */
.uow-pen {
  position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%);
  z-index: 9999;
  display: flex; gap: 3px;
  padding: 5px 6px; border-radius: 26px;
  background: rgba(41,22,71,0.92);
  box-shadow: 0 2px 12px rgba(0,0,0,0.28);
  opacity: 0.55; transition: opacity 0.15s ease;
}
.uow-pen:hover { opacity: 1; }
.uow-pen button {
  font-family: var(--r-main-font); font-size: 15px; line-height: 1;
  color: #fff; background: transparent; border: 0; border-radius: 20px;
  padding: 9px 14px; min-height: 40px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.uow-pen button:hover { background: rgba(255,255,255,0.16); }
.uow-pen .swatch {
  width: 28px; height: 28px; min-height: 0; padding: 0; margin: 0 3px;   /* large enough for a fingertip */
  border-radius: 50%; background: var(--c);
  border: 2px solid rgba(255,255,255,0.45); align-self: center;
}
.uow-pen .swatch:hover { background: var(--c); border-color: #fff; }
.uow-pen .swatch.active {
  background: var(--c);            /* keep own colour; beats the generic .active green */
  border-color: #fff; box-shadow: 0 0 0 2px var(--uow-bright-green);
}
.uow-pen .swatches { display: flex; align-items: center; padding: 0 4px; }
.uow-pen button.active {
  background: var(--uow-bright-green); color: var(--uow-deep-purple); font-weight: 700;
}
/* Collapsed when idle: only "✎ Draw" and "Board" show, so the toolbar covers less of
   the slide. The colours, Erase and Save appear while drawing on a slide or while the
   board is open. The chalkboard plugin keeps that state in inline styles (#notescanvas
   gets pointer-events: auto while drawing; #chalkboard gets visibility: visible while
   the board is open), so this follows the buttons and the C / B keys alike and needs
   no change to any deck. Browsers without :has() drop these rules and show the full
   toolbar, as before. */
body:not(:has(#notescanvas[style*="pointer-events: auto"], #chalkboard[style*="visibility: visible"])) .uow-pen .swatches,
body:not(:has(#notescanvas[style*="pointer-events: auto"], #chalkboard[style*="visibility: visible"])) .uow-pen [data-act="erase"],
body:not(:has(#notescanvas[style*="pointer-events: auto"], #chalkboard[style*="visibility: visible"])) .uow-pen [data-act="save"] {
  display: none;
}
body:has(#notescanvas[style*="pointer-events: auto"], #chalkboard[style*="visibility: visible"]) .uow-pen { opacity: 1; }
/* The collapsed toolbar (about 160px) sits centred and opens to the right, with Board
   moved next to Draw, so both stay under the pen instead of jumping as it grows. */
@supports selector(:has(a)) {
  .uow-pen { left: calc(50% - 80px); transform: none; }
  .uow-pen [data-act="draw"]  { order: -2; }
  .uow-pen [data-act="board"] { order: -1; }
}
/* Board lights up like Draw while the board is showing */
body:has(#chalkboard[style*="visibility: visible"]) .uow-pen [data-act="board"] {
  background: var(--uow-bright-green); color: var(--uow-deep-purple); font-weight: 700;
}
/* When exporting to PDF (?print-pdf) hide the live-teaching chrome. It's driven by
   JS that doesn't re-run per printed page, so it would render wrong; the slides
   themselves stay on-brand (colours, fonts, boxes, dark backgrounds). */
@media print {
  .uow-pen,
  .uow-band,
  .uow-fulllogo,
  .reveal .slide-number,
  .reveal aside.notes,           /* speaker notes NEVER go into student handouts */
  .reveal .speaker-notes { display: none !important; }
  /* don't clip tall code / run-output (plots) in the printed handout */
  .reveal pre code,
  .reveal .run-output { max-height: none !important; overflow: visible !important; }
  /* handouts always include the code, even if it was folded away on screen */
  .reveal pre.run-code-hidden { display: block !important; }
}
/* Handouts still get a small page number at the bottom right, so students can find
   "slide 13". reveal adds one .slide-number-pdf to each printed page and numbers the
   pages 1, 2, 3 ..., which matches the live slide number when pdfSeparateFragments
   is false. Light on dark pages; none on the title slide. */
html.reveal-print .reveal .slide-number.slide-number-pdf {
  display: block !important;
  right: var(--uow-band-pad); bottom: 16px; left: auto; top: auto;
  padding: 0; background: transparent; color: var(--uow-deep-grey);
  font-family: var(--r-main-font); font-size: 15px; font-weight: 500;
}
html.reveal-print .reveal .pdf-page:has(> section.uow-section, > section.uow-closing, > section.uow-statement) .slide-number-pdf {
  color: rgba(255,255,255,0.65);
}
html.reveal-print .reveal .pdf-page:has(> section.uow-title) .slide-number-pdf { display: none !important; }

/* ==========================================================================
   Executable code cells (Pyodide / WebR) — Run button + output panel
   ========================================================================== */
.reveal .run-bar {
  display: flex; align-items: center; gap: 12px;
  margin: -0.2em 0 0.3em 0;
}
.reveal .run-btn,
.reveal .run-toggle {
  font-family: var(--r-main-font); font-size: 0.5em; font-weight: 700;
  color: #fff; background: var(--uow-deep-purple);
  border: 0; border-radius: 6px; padding: 0.45em 0.9em; cursor: pointer;
}
.reveal .run-btn:hover { background: var(--uow-green-ink); }
.reveal .run-btn:disabled { opacity: 0.55; cursor: progress; }
.reveal .run-toggle {
  color: var(--uow-deep-purple); background: transparent;
  box-shadow: inset 0 0 0 2px var(--uow-deep-purple);
}
.reveal .run-toggle:hover { background: var(--uow-light-grey); }
/* after a run that draws a plot the code folds away ("Show code" brings it back),
   and the output panel takes the freed height so the plot fits on the slide */
.reveal pre.run-code-hidden { display: none; }
.reveal .run-output.run-output-tall { max-height: 480px; }
.reveal .run-output.run-output-tall .run-img { max-height: 400px; width: auto; }
.reveal .run-status {
  font-family: var(--r-main-font); font-size: 0.42em; color: var(--uow-deep-grey);
}
.reveal .run-output {
  display: none;
  margin: 0.2em 0 0.4em 0;
  border-left: 4px solid var(--uow-bright-green);
  background: var(--uow-code-bg);
  border-radius: 4px;
  padding: 0.5em 0.8em;
  max-height: 360px; overflow: auto;
}
.reveal .run-output .run-text {
  font-family: "SFMono-Regular", "Consolas", monospace;
  font-size: 0.5em; line-height: 1.35; white-space: pre-wrap;
  color: var(--uow-deep-purple); margin: 0; background: none; box-shadow: none;
}
.reveal .run-output .run-error { color: #B5260B; }
.reveal .run-output .run-muted { color: var(--uow-deep-grey); }
.reveal .run-output .run-img {
  display: block; max-width: 100%; margin: 0.4em 0 0.2em 0;
  background: #fff; border-radius: 4px;
}

/* ==========================================================================
   Extra content layouts
   ========================================================================== */
/* --- two columns:  <div class="cols"><div class="col">…</div><div class="col">…</div></div> --- */
.reveal .cols { display: flex; gap: 0; align-items: stretch; }
.reveal .cols .col { flex: 1; min-width: 0; padding: 0 1.2em 0 0; }
.reveal .cols .col + .col {
  border-left: 3px solid #DFC0FE;                   /* column divider: Bright Purple tinted ~44% toward white */
  padding: 0 0 0 1.2em;
}
.reveal .cols.nodivider .col + .col { border-left: 0; }
.reveal .cols .col.narrow { flex: 0 0 38%; }

/* --- full-bleed statement slide:  section class="uow-statement" (dark) ---
   reveal sets display:block inline on the active slide, so flex centring is
   overridden; we centre with padding instead. */
.reveal section.uow-statement {
  text-align: center;
  padding-top: 215px;
}
.reveal section.uow-statement h1,
.reveal section.uow-statement h2 {
  color: #ffffff; font-size: 2.5em; max-width: 15em; margin: 0 auto;
}
.reveal section.uow-statement h1::after,
.reveal section.uow-statement h2::after { content: none; }
.reveal section.uow-statement .accent { color: var(--uow-bright-green); }

/* --- big pull-quote slide:  section class="uow-quote" --- */
.reveal section.uow-quote { padding-top: 0.8em; }
.reveal section.uow-quote blockquote { font-size: 1.5em; max-width: 19em; }
.reveal section.uow-quote .attribution {
  display: block; margin-top: 0.8em;
  font-family: var(--r-main-font); font-style: normal;
  color: var(--uow-deep-grey); font-size: 0.5em;
}