/* User Provided Stylesheet */

:root {
  --book-accent: #5b4bb7;
}

a {
  text-underline-offset: 0.15em;
}

/* Keep long calculations readable on narrow screens. */
.math-display {
  overflow-x: auto;
  overflow-y: hidden;
}

/*
 * Styles for interactive-media directives: {simulation}, {openlyceum}, and
 * {phet} from plugins/simulation.mjs, {animation} from plugins/animation.mjs,
 * {video} from plugins/video.mjs, and {h5p} from plugins/h5p.mjs. Merged here
 * rather than kept as a separate stylesheet because `site.options.style`
 * accepts only one file.
 *
 * Each directive emits an iframe *and* a screenshot (or, for h5p, an ungraded
 * static version) as siblings of one figure, because no single node type
 * survives every MyST output format. On the website both would be visible,
 * so this hides the screenshot and flips the pair back around for print.
 */

/* The static fallback exists for PDF, DOCX, Markdown, and print. */
.simulation-placeholder,
.animation-placeholder,
.video-placeholder {
  display: none;
}

/*
 * The MyST theme wraps every iframe in a div carrying an inline
 * `padding-bottom: 60%`, which is the aspect ratio. 60% matches the
 * SceneryStack 1024x618 frame almost exactly, so only other ratios need a
 * rule here -- and each one has to win against an inline style.
 */
.simulation-aspect-768x504 > div {  /* PhET */
  padding-bottom: 65.63% !important;
}

.simulation-aspect-16x9 > div {
  padding-bottom: 56.25% !important;
}

.simulation-aspect-4x3 > div {
  padding-bottom: 75% !important;
}

.simulation-aspect-1x1 > div {
  padding-bottom: 100% !important;
}

.animation-aspect-2x1 > div {
  padding-bottom: 50% !important;
}

.animation-aspect-1x1 > div {
  padding-bottom: 100% !important;
}

.animation-aspect-4x3 > div,
.video-aspect-4x3 > div {
  padding-bottom: 75% !important;
}

.video-aspect-16x9 > div {
  padding-bottom: 56.25% !important;
}

/* The caption line that links to the live simulation or video. */
.simulation-link,
.video-link {
  font-size: 0.9em;
}

.video-link a {
  font-weight: 600;
}

/* H5P question sets use a fixed viewport rather than a video aspect ratio. */
.h5p-frame > div {
  height: 30rem;
  padding-bottom: 0 !important;
}

.h5p-frame iframe {
  height: 30rem;
}

.h5p-fallback {
  display: none;
}

/*
 * Printing from the browser is a fourth static path, alongside PDF, DOCX,
 * and Markdown. An iframe prints as a blank rectangle at best, so swap in
 * the screenshot the exports already use.
 */
@media print {
  .simulation-frame,
  .animation-frame,
  .video-frame,
  .h5p-frame {
    display: none;
  }

  .simulation-placeholder,
  .animation-placeholder,
  .video-placeholder {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }

  .h5p-fallback {
    display: block;
  }
}