/* Custom stylesheet for my TSP lectures.
 * Base sheet is RevealJS's white theme. */

/* Configuration variables for the theme. */

:root {
    --r-main-font-size: large;
    --r-heading-font: 'Century Schoolbook L', serif;
    --r-heading-line-height: 1.1;
    --r-heading1-size: xxx-large;
    --r-heading2-size: xx-large;
    --r-heading3-size: x-large;
    --r-heading4-size: large;
    --r-heading1-text-shadow: 2px 2px 2px #888;
    --r-heading-text-shadow: 2px 2px 2px #888;
    --r-heading-text-transform: none;
    --r-code-font: 'Fira Code', monospace;
}

/* General visual changes. */

.reveal strong {
    color: #c5000b;
}

.reveal a {
    font-family: var(--r-code-font);
}

.reveal li::marker {
    color: gray;
}

.reveal code {
    color: #004586;
    tab-size: 4;
    font-size: 0.75em;
}

/* Fix pre blocks from the theme:
 * * reset font size (it it set on code blocks)
 * * reset line height
 * * reset width
 */
.reveal pre {
    font-size: inherit;
    line-height: inherit;
    width: 100%;
}

.reveal h3 {
    padding-top: 1em;
}

.reveal span.author {
    font-size: x-large;
}

.reveal span.email {
    font-family: var(--r-code-font);
}

.reveal span.institute {
    font-style: italic;
}

.reveal .columns.title {
    margin-top: auto;
}

.reveal p.reference {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: auto;
}

.reveal span.course {
    margin-left: auto;
    margin-right: auto;
}

.reveal span.math {
    /* Display math as it was currently being typeset (i.e., inline in a line, as a block if written as a lone paragraph). */
    display: initial;
}

/* Structural changes for better responsive design. */

/* Allow columns (i.e., groups of columns) to shrink vertically.
 * Don't make this flex! It doesn't have to grow or shrink, the inner column's do. */
.reveal .columns {
    min-height: calc(var(--slide-height) * 0.1);
}

/* Make column's (i.e., the div that contain content) to display flex vertically. */
.reveal .column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.reveal #title-column {
    /* Override text alignment in the column that hold the chapter's title on the first slide. */
    text-align: center;
}

/* div.sourceCode pre.sourceCode code.sourceCode
 * But class sourceCode is from Pandoc (I think).
 * reveal.js themes only consider: pre code */

/* * ensure height as big as content height, to make sure it always displays in full in PDF.
 */
.reveal pre.sourceCode code.sourceCode {
    max-height: max-content;
}
/* Allow code blocks to shrink. */
/* .reveal pre.sourceCode {
    margin: 0 0 0.5em 0;
    min-height: calc(var(--slide-height) * 0.1);
} */

/* .reveal div.sourceCode code.sourceCode {
    overflow: auto;
    width: auto;
    height: 100%;
    box-sizing: border-box;
} */

/* section:not(.stack) selects a section tag that is the direct parent of the content.
 * For a slide stack, there is a parent section of all sections in the stack. */
.reveal .slides section:not(.stack) {
    /* Assume slides are built with RevealJS configuration display: flex. */
    /* display: flex !important; */
    flex-direction: column;
    /* safe keyword fixes scrolling with centered content in a flex container. */
    align-items: safe center;
    justify-content: safe center;
    height: 100%;
    /* Fix sizing to include padding. */
    box-sizing: border-box;
    padding: 1em;
    /* Make slides scrollable. */
    /* overflow: auto; */
}

.reveal .slides {
    /* Fix the size of the slides at the level of the slide, to allow for flex content. */
    max-height: var(--slide-height);
    max-width: var(--slide-width);
    /* Set to display: flex to center the slides (the section's) in the viewport. */
    display: flex;
    /* Align along the flex direction (horizontally by default). */
    justify-content: center;
    /* Align cross the flex direction (vertically by default). */
    align-items: center;
}

.reveal figure {
    /* Set a min-height to roughly include the child img and its caption. */
    min-height: calc(var(--slide-height) * 0.1 + 2em);
    /* Set to display: flex to make the inner img resize. */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Vertically align img and figurecaption to the bottom of the figure container. */
    justify-content: end;
    /* Set figure margin to the configured block margin.
     * The base theme sets the margin to the img, but this is wrong in figures because of the caption. */
margin: var(--r-block-margin) 0;
}

.reveal #title-illustration, .reveal figure img {
    /* Resize the img while keeping the ratio. */
    object-fit: contain;
    /* Allow the img to shrink. */
    min-height: calc(var(--slide-height) * 0.1);
    /* Remove the margin on the img in a figure (it is set by the base theme). */
    margin: 0px;
}

.reveal figure figcaption {
    /* Add some spacing above the caption, between it and the img. */
    padding-top: 0.5em;
}

/* Missing Pandoc features. */

/* Until https://github.com/jgm/pandoc/issues/673 is solved: append caption to source code blocks. */
.reveal div.sourceCode[data-caption]::after {
    content: attr(data-caption);
}