/* PT Sans */

@font-face {
  font-family: 'PT Sans';
  font-display: swap;
  font-weight: 400;
  src: url('./assets/pt-sans-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'PT Sans';
  font-display: swap;
  font-weight: 400;
  font-style: italic;
  src: url('./assets/pt-sans-latin-400-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'PT Sans';
  font-display: swap;
  font-weight: 700;
  src: url('./assets/pt-sans-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'PT Sans';
  font-display: swap;
  font-weight: 700;
  font-style: italic;
  src: url('./assets/pt-sans-latin-700-italic.woff2') format('woff2');
}

/* 2MASS J1808 */

@font-face {
  font-family: '2MASS J1808';
  font-display: swap;
  font-weight: normal;
  src: url('./assets/2MASSJ1808-Normal.woff2') format('woff2');
}

@font-face {
  font-family: '2MASS J1808';
  font-display: swap;
  font-weight: 900;
  src: url('./assets/2MASSJ1808-Heavy.woff2') format('woff2');
}

/* Fira Code (variable weight) */

@font-face {
  font-family: 'Fira Code';
  font-display: swap;
  font-weight: 1 1000;
  src: url('./assets/fira-code-latin-wght-normal.woff2') format('woff2');
}

/*********************************************
 * THEME VARIABLES
 *********************************************/

:root {
  /* Brand colors */
  --theme-primary: #539350;
  --theme-primary-alt: #8bca88;
  --theme-secondary: #fa5100;
  --theme-background-gray: #eeeeee;

  /* Background of the presentation */
  --r-background: #ffffff;
  --r-background-color: #000000;

  /* Primary/body text */
  --r-main-font: 'PT Sans', sans-serif;
  --r-main-color: #2b2b2b;

  /* Margins */
  --r-margin-after: 0.5em;

  /* Headings */
  --r-heading-margin: 0;
  --r-heading-margin-after: var(--r-margin-after);
  --r-heading-font: '2MASS J1808', sans-serif;
  --r-heading-color: var(--theme-primary);
  --r-heading-text-transform: none;
  --r-heading-font-weight: bold;

  --r-heading1-size: 1.556em;
  --r-heading2-size: 1.333em;
  --r-heading3-size: 1.111em;
  --r-heading4-size: 1em;

  --r-code-font: 'Fira Code', monospace;

  /* Links and actions */
  --r-link-color: var(--theme-secondary);
  --r-link-color-dark: #d34500;
  --r-link-color-hover: #ff7d3d;
}

/*********************************************
 * BASE (reveal.js core CSS ships no theme rules;
 * this is the minimum a theme must provide)
 *********************************************/

.reveal .controls {
  color: var(--r-link-color);
}

.reveal-viewport {
  background-color: var(--r-background-color);
}

.reveal {
  font-size: 1.6em;
  font-family: var(--r-main-font);
  font-weight: normal;
  color: var(--r-main-color);
}

.reveal ::selection,
.reveal ::-moz-selection {
  color: #ffffff;
  background: var(--theme-primary-alt);
  text-shadow: none;
}

.reveal .slides section,
.reveal .slides section>section {
  line-height: 1.3;
  font-weight: inherit;
}

.reveal img,
.reveal video,
.reveal iframe {
  max-width: 95%;
  max-height: 95%;
}

.reveal img {
  margin: var(--r-block-margin) 0;
}

.reveal strong,
.reveal b {
  font-weight: bold;
}

.reveal em {
  font-style: italic;
}

.reveal a {
  color: var(--r-link-color);
  text-decoration: none;
  transition: color 0.15s ease;
}

.reveal a:hover {
  color: var(--r-link-color-hover);
  text-shadow: none;
}

.reveal ol,
.reveal ul,
.reveal dl {
  display: inline-block;
  text-align: left;
  margin: 0 0 0 1em;
}

.reveal ol {
  list-style-type: decimal;
}

.reveal ul {
  list-style-type: disc;
}

.reveal ul ul {
  list-style-type: square;
}

.reveal ul ul ul {
  list-style-type: circle;
}

.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
  display: block;
  margin-inline-start: 1em;
}

.reveal table {
  margin: auto;
  border-collapse: collapse;
  border-spacing: 0;
}

.reveal table th,
.reveal table td {
  text-align: left;
  border-bottom: 1px solid;
}

.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
  border-bottom: none;
}

/*********************************************
 * HEADINGS
 *********************************************/

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  margin: var(--r-heading-margin);
  margin-block-end: var(--r-heading-margin-after);
  color: var(--r-heading-color);
  font-family: var(--r-heading-font);
  font-weight: var(--r-heading-font-weight);
  text-transform: var(--r-heading-text-transform);
  word-wrap: break-word;
}

.reveal h1 {
  font-size: var(--r-heading1-size);
}

.reveal h2 {
  font-size: var(--r-heading2-size);
}

.reveal h3 {
  font-size: var(--r-heading3-size);
}

.reveal h4 {
  font-size: var(--r-heading4-size);
}

/* h5/h6 have no dedicated reveal.js size variable */
.reveal h5 {
  font-size: 0.889em;
}

.reveal h6 {
  font-size: 0.778em;
}

.reveal h1:last-child,
.reveal h2:last-child,
.reveal h3:last-child,
.reveal h4:last-child,
.reveal h5:last-child,
.reveal h6:last-child {
  margin-block-end: 0;
}

/* subtitle line directly under a title */
.reveal .slides section h1+h2 {
  color: var(--theme-primary-alt);
  font-size: 1em;
}

/*********************************************
 * TEXT & LISTS
 *********************************************/

.reveal p {
  margin-block: var(--r-block-margin);
  margin-inline: 0;
}

.reveal .slides section p,
.reveal .slides section li {
  line-height: 1.8;
}

.reveal .slides section ::marker {
  font-family: monospace;
  font-weight: bold;
}

.reveal .slides section ul li::marker {
  content: '> ';
}

.reveal .slides section ul li li::marker {
  content: '- ';
}

.reveal .slides section ul,
.reveal .slides section ol,
.reveal .slides section dl {
  margin: 0;
}

.reveal .slides section li ul,
.reveal .slides section li ol,
.reveal .slides section li dl {
  margin-block-start: 0;
}

.reveal .slides section li {
  margin-inline-start: 2em;
}

.reveal .slides section li li {
  margin-inline-start: 1em;
}

.reveal .slides section code {
  font-family: var(--r-code-font);
  background-color: var(--theme-background-gray);
  font-size: 0.9em;
  padding: 0.1em 0.3em;
  border-radius: 0.2em;
}

.reveal .slides section .code-wrapper {
  line-height: 1.6;
  margin-block-end: var(--r-margin-after);
  font-size: 0.7em;

  >* {
    padding: 1em;
  }
}

/*********************************************
 * SLIDE LAYOUT & WATERMARK
 *********************************************/

.reveal .slides section {
  height: 100%;
  box-sizing: border-box;
  padding: 2em;
}

/* watermark lives on the fixed-size slide canvas, not the auto-height section */
.reveal .slides {
  text-align: initial;
  background-color: var(--r-background);
  background-repeat: no-repeat;
  background-image: url('./assets/brand-aslant-light.svg'), url('./assets/divider-bottom.svg');
  background-position: calc(100% - 3em) calc(100% - 1.2em), bottom;
  background-size: 7.5em, 110%;
}

/*********************************************
 * TABLES
 *********************************************/

.reveal .slides section th {
  font-weight: bold;
  padding: 0.3em;
  background-color: var(--theme-background-gray);
}

.reveal .slides section th:empty {
  background-color: transparent;
}

.reveal .slides section td:not(.code-wrapper td) {
  padding: 0.3em;
}

/*********************************************
 * TWO-COLUMN UTILITIES
 *********************************************/

.two-cols,
.two-cols-header {
  display: grid;
  gap: 0.25em 1em;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.two-cols-header {
  grid-template-rows: repeat(2, min-content);
}

.two-cols-header>div {
  margin: 0;
}

/*********************************************
 * LAYOUTS
 *********************************************/

.title-layout {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/*********************************************
 * DARK MODE (declared last so it wins the cascade
 * over the light-mode rules above)
 *********************************************/

@media (prefers-color-scheme: dark) {
  /*

  TODO

  :root {
    --theme-background-gray: #2e2e2e;
  }

  .reveal .slides {
    background-image: url('./assets/brand-aslant-dark.svg'), url('./assets/divider-bottom.svg');
  }

  */
}