/* Custom CSS for Academic Figures Presentation */

/* Reduce base font size for all text */
.reveal {
  font-size: 28px;
}

/* Center title slide content */
.reveal .title-slide {
  text-align: center;
}

.reveal .title-slide h1 {
  font-size: 2.2em;
  margin-bottom: 0.5em;
}

.reveal .title-slide .fragment {
  font-size: 1.2em;
  font-style: italic;
  color: #bbb;
  margin-top: 0.5em;
  margin-bottom: 1em;
}

/* Reduce heading sizes */
.reveal h1 {
  font-size: 2.0em;
}

.reveal h2 {
  font-size: 1.5em;
}

.reveal h3 {
  font-size: 1.2em;
}

/* Reduce code block font size */
.reveal pre {
  font-size: 0.55em;
  line-height: 1.3;
}

/* Code blocks that clip overflow without scrollbar */
.reveal pre.code-clip,
.reveal pre.code-clip code {
  overflow: hidden;
}

.reveal code {
  font-size: 0.85em;
}

/* Reduce inline code size */
.reveal p code,
.reveal li code {
  font-size: 0.85em;
}

/* Adjust list item spacing and size */
.reveal ul,
.reveal ol {
  font-size: 0.9em;
}

/* Reduce callout box text */
.reveal .callout {
  font-size: 0.85em;
}

/* Reduce table text */
.reveal table {
  font-size: 0.75em;
}

/* Rotated table column headers */
.reveal table.rotated-headers {
  border-collapse: collapse;
}

.reveal table.rotated-headers thead {
  border-bottom: 1px solid #666;
}

.reveal table.rotated-headers th.rotate {
  height: 100px;
  white-space: nowrap;
  vertical-align: bottom;
  padding: 0;
}

.reveal table.rotated-headers th.rotate > div {
  transform: rotate(-45deg);
  width: 30px;
  transform-origin: center bottom;
  margin: 0 auto;
}

.reveal table.rotated-headers th.rotate > div > span {
  padding: 5px 10px;
  display: block;
}

.reveal table.rotated-headers th.row-header {
  text-align: left;
  font-weight: bold;
  padding-right: 1em;
}

.reveal table.rotated-headers td {
  text-align: center;
  padding: 0.3em 0.5em;
  min-width: 40px;
}

/* Adjust fragment text */
.reveal .fragment {
  font-size: inherit;
}

/* Reduce text in columns */
.reveal .columns {
  font-size: 0.9em;
}














/* Both containers have the same width and alignment */
/* Use --max-width CSS variable to set max-width dynamically, default 1200px */
.image-container {
  width: 80vw;       /* full container width */
  max-width: var(--max-width, 1200px);
  overflow: hidden;
  margin: auto;      /* center container on slide */
  text-align: left;  /* important for cropped image */
}

/* Cropped container shows only part of the image */
/* Use --crop-width CSS variable to set width dynamically, default 62% */
.cropped {
  width: var(--crop-width, 62%);
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
}

/* Keep image at natural size, scale to fit viewport if needed */
/* Use --img-scale CSS variable to set scale dynamically, default 0.7 */
.image-container img {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  object-fit: none !important;
  object-position: left top;
  transform: scale(var(--img-scale, 0.7));
  transform-origin: top left;
}