/* === CSS CUSTOM PROPERTIES === */
:root {
    --border-color: #666;
    --highlight-bg: #d3d8f7;
    --frame-bg: color-mix(in srgb, #fcfaeb 80%, transparent);
    --callout-bg: white;
    --shadow-gray: gray;
    --shadow-dark: color-mix(in srgb, black 60%, transparent);
    --indent-spacing: 20px;
    --list-margin: 50px;
    --img-spacing: 40px;
}

/* === BASE === */
/* Base HTML background inheritance */
html { background-color: inherit; }
/*https://github.com/hakimel/reveal.js/issues/668*/

/* === BASE TYPOGRAPHY AND SIZING === */
.reveal { font-size: 36px; }

section.level1 { font-size: 125%; }

section.highlight h2,
span.highlight { background-color: var(--highlight-bg); }

/* Reset fit-text sections to default styles */
section.r-fit-text { all: revert; }

/* Lowercase letters for alphabetic ordered lists */
ol[type="a"] { list-style-type: lower-alpha; }

/* === BLOCK QUOTES === */
:root {
    --quote-border-color: #2a76dd;
    --quote-bg: color-mix(in srgb, var(--quote-border-color) 5%, transparent);
    --quote-corner-size: 50px;
    --quote-border-width: 3px;
}

.reveal blockquote {
  position: relative;
  font-style: normal;
  font-size: 95%;
  background: var(--quote-bg);
  padding:0.2em 0.6em;
}

.reveal blockquote::before,
.reveal blockquote::after {
  content: '';
  position: absolute;
  width: var(--quote-corner-size);
  height: var(--quote-corner-size);
}

.reveal blockquote::before {
  top: 0;
  left: 0;
  border-top: var(--quote-border-width) solid var(--quote-border-color);
  border-left: var(--quote-border-width) solid var(--quote-border-color);
}

.reveal blockquote::after {
  bottom: 0;
  right: 0;
  border-bottom: var(--quote-border-width) solid var(--quote-border-color);
  border-right: var(--quote-border-width) solid var(--quote-border-color);
}

/* === DEFINITION LISTS === */
.reveal dl { text-align: left; }
.reveal dd { margin-left: 2em; }

/* === TABLES === */
/* Center tables with gray borders */
.reveal table {
    /*width: 98%;*/
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--border-color);
}

/*.reveal table th {text-transform:uppercase;}*/
/* Table cells with borders, padding, and top alignment */
.reveal table td,
.reveal table th {
    border: 1px solid var(--border-color);
    padding: 0px 4px 0px 16px;
    vertical-align: top;
}

/* === FRAGMENT ANIMATIONS === */
/* Allow spans to grow and shrink without transform effects
    https://github.com/hakimel/reveal.js/issues/2126
*/

/* Grow fragments: bold and 130% size without transform */
.reveal .slides section span.fragment.grow.visible {
    font-weight: bold;
    font-size: 130%;
    transform: none;
}

/* Shrink fragments: lighter and 70% size without transform */
.reveal .slides section span.fragment.shrink.visible {
    font-weight: lighter;
    font-size: 70%;
    transform: none;
}

/* === LIST FORMATTING === */
/* Make loose lists appear like tight lists */
.reveal ul li p,
.reveal ol li p {
    margin: 0;
    display: inline;
}

/* Format blockquotes within list items */
.reveal ul li blockquote,
.reveal ol li blockquote {
    margin: 0.5em 0 0 1.5em;
    padding: 0 1em 0 0;
    font-style: italic;
    width: calc(100% - 1.5em);
    box-sizing: border-box;
}

.reveal ul li blockquote p {
    margin: 0;
    display: inline;
}

/* Fix column layout for lists
   https://github.com/hakimel/reveal.js/issues/2892 */
div[style*="column-count"] ul,
div[style*="column-count"] ol {
    display: block;
}

/* Left-align line blocks (poetry/verse) */
div.line-block { text-align: left; }

/* === HEADINGS === */
.reveal h1 {
    text-shadow: none;
    line-height: 1;
}

.reveal h3 {
    margin: 35px 0 10px 0;
}

/* === IMAGES === */
/* Constrain image height with responsive calculation */
.reveal section img {
    max-height: calc(480px + 1vh);
    width: auto;
}

/* Remove default image styling
   http://stackoverflow.com/questions/23082660/how-to-style-images-in-reveal-js */
.reveal section img {
    background: none;
    border: none;
    box-shadow: none;
}

/* === BACKGROUNDS === */
/*
I have two CSS classes blur_on_bg and frame_on_bg that I use to make text on a revealjs slide standout and be seen if there's a busy image background behind the text. The CSS is below. However, neither is perfect. blur_on_bg makes the text look too dark and fuzzy; frame on background can still be ugly if there's a lot of text behind. Use modern CSS, what solutions would you offer to have text with something behind it be legible, whether it is in front of a gradient, solid color, dark or light color, black or white, text, or busy image? Is there a single solution that can do all of this, or do I need a light and dark background variations?
AI: had no good solutions as of 2025-04-02
*/

/* Text shadow for legibility on busy backgrounds */
.reveal .blur_on_bg {
    text-shadow: 2px 1px 6px silver,
                 2px 1px 8px black;
}

/* Special list formatting for framed background sections */
.reveal section.frame_on_bg :is(ul, ol) > li {
    list-style-position: inside;
    margin-left: 70px;
    text-indent: -50px;
}

/* Make headings and paragraphs inline to prevent full-width highlighting */
.reveal section.frame_on_bg > :is(h2, p) {
    display: inline; /* otherwise highlight width = 100% */
}

/* Semi-transparent cream background for all direct children */
.reveal section.frame_on_bg > * {
    background: var(--frame-bg);
}

/* Dim slide backgrounds when HTML has dim_background class */
html.dim_background .slide-background {
    opacity: 0.7 !important;
}

/* === IMAGE LAYOUT SECTIONS === */
/* Common styles for both left and right image sections */
section:is(.img_left, .img_right) blockquote {
    z-index: -1;
}

section:is(.img_left, .img_right) blockquote p {
    display: inline !important;
}

section:is(.img_left, .img_right) ul,
section:is(.img_left, .img_right) ol {
    display: inline !important;
    list-style-position: inside;
    list-style: none;
}

section:is(.img_left, .img_right) ul li,
section:is(.img_left, .img_right) ol li {
    text-indent: calc(var(--indent-spacing) * -1);
    margin-left: var(--list-margin);
}

/* === LEFT-FLOATED IMAGE SECTIONS === */
section.img_left img,
section.img_left figure,
section.img_left a:has(img) {
    float: left;
    margin-right: var(--img-spacing);
}

/* Keep shadow only on img, not anchor */
section.img_left img {
    box-shadow: -5px 5px 10px 2px var(--shadow-gray);
}

section.img_left blockquote p {
    text-align: right;
}

/* Counter setup for left section */
section.img_left ul,
section.img_left ol {
    counter-reset: imgleft;
}

section.img_left ul li::before {
    content: "•";
    padding-right: 7px;
    margin-left: -11px;
}

section.img_left ol li {
    counter-increment: imgleft;
}

section.img_left ol li::before {
    content: counter(imgleft, decimal) ". ";
    padding-right: 5px;
    margin-left: -11px;
}

/* === RIGHT-FLOATED IMAGE SECTIONS === */
/* === RIGHT-FLOATED IMAGE SECTIONS === */
section.img_right img,
section.img_right figure,
section.img_right a:has(img) {
    float: right;
    margin-left: 20px;
}

section.img_right img {
    box-shadow: 5px 5px 10px 2px var(--shadow-gray);
}

/* Counter setup for right section */
section.img_right ul,
section.img_right ol {
    counter-reset: imgright;
}

section.img_right ul li::before {
    content: "•";
    padding-right: 10px;
    margin-left: -11px;
}

section.img_right ol li {
    counter-increment: imgright;
}

section.img_right ol li::before {
    content: counter(imgright, decimal) ". ";
    padding-right: 5px;
    margin-left: -11px;
}

/* === FIGURE CAPTIONS === */
/* Constrain image height with responsive calculation */
.reveal section img {
    max-height: calc(480px + 1vh);
    width: auto;
}

/* Smaller max-height for images with captions */
.reveal section figure img {
    max-height: calc(420px + 1vh);
}

/* === FIGURE CAPTIONS === */
.reveal figure {
    margin-bottom: 1em;
}

.reveal figcaption {
    font-size: 75%;
}

/* Pandoc does create figures/captions in a link, so emulate */
a[title]:has(img)::after {
  content: attr(title);
  display: block;
  text-align: center;
  font-size: 75%;
}

/* === TOOLTIP HOVER === */

/* Style spans with titles to indicate they're hoverable */
span[title] {
  border-bottom: 1px dotted #666;
  cursor: help;
  position: relative;
  background-color: color-mix(in srgb, yellow 20%, transparent);
  padding: 0.1em 0.2em;
  border-radius: 3px;
}

/* Nested spans will compound the background, showing darker */
span[title] span[title] {
  background-color: color-mix(in srgb, orange 25%, transparent);
}

/* Third level nesting (rare but possible) */
span[title] span[title] span[title] {
  background-color: color-mix(in srgb, darkorange 30%, transparent);
}

/* Create custom tooltip */
span[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5em 0.75em;
  background: #333;
  color: white;
  font-size: 0.7em;
  white-space: nowrap;
  border-radius: 4px;
  margin-bottom: 0.5em;
  z-index: 1000;
  box-shadow: 0 2px 8px color-mix(in srgb, black 30%, transparent);
}

/* Tooltip arrow */
span[title]:hover::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #333;
  z-index: 1000;
}

/* === CALLOUT/TOOLTIP BOXES === */
/* Expandable callout box with thinking emoji */
div.call {
    position: absolute;
    /*bug: fixed: bounce to the top */
    z-index: 2;
    top: 50px;
    right: 10px;
    height: 1.5em;
    width: 4em;
    /*border: dashed;*/
    overflow: hidden;
    transition: transform 1.2s;
}

/* Thinking emoji indicator (grayscale) */
div.call::before {
    content: "🤔";
    opacity: 1.0;
    filter: grayscale(80%);
}

/* Callout text formatting */
div.call p,
div.call ul {
    list-style: inside;
    font-size: 90%;
}

/* Expanded callout box on hover */
div.call:hover {
    overflow: auto;
    transform: scale(1.1);
    width: auto;
    height: auto;
    max-width: 600px;
    max-height: 300px;
    background-color: var(--callout-bg);
    padding: 10px;
    padding-right: 25px;
    border: solid 1px #555;
    box-shadow: 10px 10px 5px var(--shadow-dark);
    border-radius: 25px;
}

/* === ACCESSIBILITY === */
/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}