/* Reveal.js embedded slide overrides
   Tames the default white theme for the embedded container */

/* --- Adaptive container height ---
   The wrapper height is driven by a CSS variable that
   docs/javascripts/revealjs-help.js updates on every `slidechanged`
   event, sizing each slide's container to its actual content height
   (clamped between min and max bounds). Sparse slides shrink to
   eliminate empty whitespace; dense slides like the AlphaFold
   container example grow to fit naturally without scrolling.

   Trade-off: the page reflows slightly as you navigate slides of
   different lengths. Picked over fixed-height + vertical centering
   because the latter still has perceptual issues (content "jumps"
   around in the deck) and the page-reflow cost is low for our
   single-deck-per-page layout.

   Initial default of 700px applies before JS runs (e.g., during
   page load / no-JS reads) so there's no flash of zero-height. */
.mkdocs-revealjs-wrapper,
.mkdocs-revealjs-wrapper .reveal {
  height: var(--slide-deck-height, 700px) !important;
}

/* --- Tighten the gap between the page H1 and the embedded deck.
   The mkdocs-revealjs plugin emits inline `margin:1.5rem 0;` on the
   wrapper. mkdocs-material's default H1 bottom margin adds another
   ~1rem on top of that. Combined that's ~40px of vertical whitespace
   between the page title and the first slide's content — and at a
   700px deck height every reclaimed pixel of slide space is one less
   pixel that gets cut off below the fold. We override the wrapper's
   inline margin to a much smaller top value while keeping the bottom
   margin generous so the hint bar still has visual breathing room. */
.mkdocs-revealjs-wrapper {
  margin: 0.25rem 0 1rem 0 !important;
}

/* mkdocs-material's article H1 carries a chunky bottom margin by
   default. When the H1 is followed by a deck, we don't need it. */
.md-content article > h1:first-child {
  margin-bottom: 0.4rem;
}

/* --- Slide sections size to content, not to the .slides container ---
   Reveal.js default sets `min-height: 100%` on slide sections so they
   fill the parent .slides element. That forces every slide to be the
   full deck height regardless of content, and breaks our adaptive
   sizing strategy (scrollHeight returns the deck height, not the
   actual content height). Override so each section sizes to its
   own content, and the deck wrapper sizes to match.

   `display: block` (instead of reveal's default flex with
   justify-content: center) keeps content top-aligned so adaptive
   measurement reads the right number. */
.reveal .slides section {
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  overflow-y: auto;
}

/* --- Slide section padding: tighter sides, small top/bottom ---
   Every pixel of horizontal real estate matters for avoiding
   right-edge overflow on long bash lines. 25px side padding (was
   40px) gives back ~30px per slide without hurting readability. */

/* --- Base font and alignment --- */
.reveal {
  --r-main-font-size: 28px;
  --r-heading-text-transform: none;
  --r-heading1-size: 1.8em;
  --r-heading2-size: 1.3em;
  --r-heading3-size: 1.1em;
  --r-heading4-size: 1em;
  --r-heading-margin: 0 0 0.4em 0;
  --r-block-margin: 12px;
}

.reveal .slides section {
  text-align: left;
  /* Top padding deliberately small — first headings already have
     margin-top:0 below, and we want every pixel of vertical real
     estate for actual content. Sides tightened to 25px (was 40px)
     to reclaim ~30px of line width for long code blocks.
     Bottom keeps a small breathing margin. */
  padding: 6px 25px 10px 25px;
}

/* --- Headings --- */
/* h1/h2 are slide titles — centered */
.reveal .slides section h1,
.reveal .slides section h2 {
  text-align: center;
}

/* h3/h4 are content subheadings — left-aligned with body text */
.reveal .slides section h3,
.reveal .slides section h4 {
  text-align: left;
}

/* First heading on a slide — reduce top gap */
.reveal .slides section h1:first-child,
.reveal .slides section h2:first-child {
  margin-top: 0;
}

/* --- Tables --- */
.reveal .slides section table {
  font-size: 0.75em;
  margin: 0.5em auto;
  width: auto;
  max-width: 95%;
}

.reveal .slides section table th,
.reveal .slides section table td {
  padding: 0.3em 0.6em;
}

/* --- Code blocks ---
   font-size: 0.55em (was 0.65em) shrinks line width by ~15%,
   eliminating most right-edge overflow findings on dense bash
   examples. width: 100% (was 95%) reclaims the remaining section
   padding for usable code area. */
.reveal .slides section pre {
  font-size: 0.55em;
  width: 100%;
  margin: 0.4em auto;
}

.reveal .slides section code {
  font-size: 0.9em;
}

/* Code block overflow strategy:
   - VERTICAL: code grows naturally, no internal scrollbar. The slide's
     overflow-y: auto handles tall decks. This avoids the
     AlphaFold-block-cut-off bug where reveal.js's default
     max-height:400px on <code> hid top content.
   - HORIZONTAL: long bash lines scroll horizontally within <pre>.
     Without this, a long line extends past the slide's right edge
     and triggers the right-overflow validation check. Horizontal
     scrolling inside code is the standard web idiom and doesn't hide
     content from the reader (the scrollbar makes it obviously
     continuable). */
.reveal .slides section pre {
  overflow-x: auto;
  overflow-y: visible;
}
.reveal .slides section pre code {
  max-height: none !important;
  white-space: pre !important;
}

/* --- Lists --- */
.reveal .slides section ul,
.reveal .slides section ol {
  display: block;
  text-align: left;
  margin-left: 1em;
  font-size: 0.9em;
}

.reveal .slides section li {
  margin-bottom: 0.2em;
}

/* --- Paragraphs --- */
.reveal .slides section p {
  line-height: 1.4;
  margin: 0.3em 0;
}

/* --- Blockquote callouts (deployment notes, warnings, etc.) ---
   Training slides carry `> **On-Prem Note:** ...` / `> **PCS Note:** ...`
   callouts; many slides stack 2-4 of them, and at the default body
   font-size they visually outweigh the primary slide content being
   taught. Shrink to 0.8em + tighter margins so they remain legible
   as secondary context without dominating the slide. We intentionally
   don't touch mkdocs-material's post-slide page blockquote styling —
   only in-deck renders are shrunk. */
.reveal .slides section blockquote {
  font-size: 0.8em;
  line-height: 1.35;
  margin: 0.4em 0;
  padding: 0.35em 0.7em;
}
.reveal .slides section blockquote p {
  margin: 0.15em 0;
}

/* --- Fullscreen: restore larger sizes --- */
:fullscreen .reveal,
:-webkit-full-screen .reveal {
  --r-main-font-size: 36px;
  --r-heading1-size: 2.2em;
  --r-heading2-size: 1.5em;
  --r-heading3-size: 1.2em;
}