/* ============================================================
   Spacing & sizing scale
   Single source of truth so box padding/margins stay consistent
   across templates instead of each class inventing its own numbers.
   ============================================================ */
:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;

  --font-caption: 15px;
  --font-citation: 12px;
  --font-body: 18px;
  --font-list: 13px;
  --font-title: 30px;
  --font-title-lg: 40px;
  --font-subtitle: 28px;
}

/* ============================================================
   Images
   object-fit: contain already prevents cropping/overflow for any
   aspect ratio, so this part of the system was already sound.
   ============================================================ */
.fit-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* The .fit-image class above is kept for compatibility but the plugin
   never actually attaches it to the <img> tag (a class set via a
   trailing "<!-- element class -->" comment on templated content is
   unreliable in this rendering pipeline - see the content-aware text
   box comment below for why). These descendant selectors give every
   <img> the same sizing behavior directly through its container class,
   which DOES reliably attach since it's a real attribute on the <grid>
   tag rather than a comment annotation. */
.slide-image img,
.right-box img,
.caption-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.slide-image {
  padding: var(--space-sm);
  text-align: center;
}

.presentation-image {
  padding: var(--space-sm);
  text-align: center;
}

.slide-graphic {
  padding: var(--space-xs);
  text-align: center;
  font-size: var(--font-list);
}
.slide-graphic:has(> :nth-child(5)) {
  font-size: 11px;
}

/* ============================================================
   Titles, subtitle, date, footers
   Mostly fixed-length content by convention, so these get a
   safety overflow rather than shrink tiers.
   ============================================================ */
.slide-title {
  background: #ffffffBF;
  text-align: left;
  padding: 0 var(--space-md);
  width: 100%;
  font-weight: 800;
  font-size: var(--font-title);
}

.presentation-title {
  background: #ffffffBF;
  text-align: left;
  padding: 0 var(--space-md);
  font-weight: 800;
  font-size: var(--font-title-lg);
}

.presentation-subtitle {
  background: #ffffffBF;
  text-align: left;
  padding: 0 var(--space-lg);
  margin: 0 var(--space-sm);
  width: 100%;
  max-height: 80px;
  overflow-y: auto;
  font-weight: 600;
  font-size: var(--font-subtitle);
}

.presentation-date {
  text-align: right;
  font-weight: 500;
  padding: 2px var(--space-lg);
  margin: 0 var(--space-lg);
  font-size: 20px;
}

.footer-copyrite {
  font-weight: 300;
  text-align: right;
  padding: 2px var(--space-lg);
  margin-top: var(--space-md);
}

.footer-course {
  text-align: left;
  font-weight: 500;
  padding: 0 var(--space-lg);
  margin-top: var(--space-md);
  border-top: 2px dotted gray;
  border-bottom: 2px dotted gray;
}

.horizontal_dotted_line {
  border-bottom: 2px dotted gray;
}

/* ============================================================
   Content-aware text boxes
   ============================================================
   Reveal renders each Markdown block (heading, paragraph, list)
   as one direct child of the box. A long bullet list is still
   only ONE child though, so two kinds of check are combined:
     - :has(> :nth-child(n))   -> n or more separate blocks
     - :has(li:nth-child(n))   -> n or more items in any one list
   Once a threshold is crossed, font-size/line-height/padding step
   down a tier. If content still doesn't fit, overflow-y: auto lets
   the box scroll instead of clipping text or breaking the layout.

   NOTE: There's no reliable CSS-only way to shrink font size in
   exact proportion to content length (that needs JavaScript, which
   the Advanced Slides plugin doesn't support loading). These tier
   thresholds (4/6 blocks, 6/9 list items, etc.) are starting points
   - watch a few dense real slides and adjust the numbers to match
   what actually overflows for you.
   ============================================================ */

.text-box {
  background: #ffffffBF;
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-body);
  line-height: 1.5;
  text-align: left;
  overflow-y: auto;
}
.text-box:has(> :nth-child(4)),
.text-box:has(li:nth-child(6)) {
  font-size: 16px;
  line-height: 1.35;
}
.text-box:has(> :nth-child(6)),
.text-box:has(li:nth-child(9)) {
  font-size: 14px;
  line-height: 1.25;
  padding: var(--space-sm) var(--space-lg);
}

/* .right-text's rules are folded directly into .right-box below,
   rather than kept as a separate class, since tpl-fig-boxright.md
   has no reliable way to attach a second class to the templated
   <% right %> content (see the fit-image note above) - .right-box
   itself always attaches fine because it's set on the <grid> tag. */
.right-box {
  background: white;
  border-radius: 15px;
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-list);
  line-height: 1.4;
  overflow-y: auto;
}
.right-box:has(> :nth-child(4)),
.right-box:has(li:nth-child(5)) {
  font-size: 12px;
  line-height: 1.3;
}
.right-box:has(> :nth-child(6)),
.right-box:has(li:nth-child(8)) {
  font-size: 11px;
  line-height: 1.2;
  padding: var(--space-xs) var(--space-sm);
}

.right-list {
  overflow-y: auto;
}
.right-list > ul {
  padding-left: 1em;
  font-size: var(--font-list);
  line-height: 1.4;
  text-align: left;
}
.right-list:has(li:nth-child(6)) > ul {
  font-size: 11px;
  line-height: 1.25;
}
.right-list:has(li:nth-child(9)) > ul {
  font-size: 10px;
  line-height: 1.15;
}

/* .feature-caption's rules are folded directly into .caption-box below
   for the same reason as .right-text above - the templated caption
   content has no reliable way to carry its own class. */
.caption-box {
  background: #ffffffBF;
  border-radius: 5px;
  text-align: left;
  font-size: var(--font-caption);
  padding: var(--space-sm) var(--space-md);
  overflow-y: auto;
}
.caption-box:has(> :nth-child(2)) {
  font-size: 13px;
}

.video-caption {
  text-align: left;
  padding: var(--space-xs);
  border-radius: 5px;
  background: #ffffffBF;
  font-weight: 500;
  margin-bottom: var(--space-xl);
  overflow-y: auto;
}

.citation {
  font-size: var(--font-citation);
  font-weight: 300;
}

.feature {
  border-width: 1px 1px 1px 4px;
  border-style: solid;
  border-color: black;
  background: #b4a7d680;
  padding: var(--space-sm);
  font-weight: 600;
  margin-bottom: var(--space-xl);
  text-align: left;
}


.question-box {
  border-radius: 5px;
  background: #c3979780;
  box-shadow: 10px 10px 5px black;
  padding: 60px;
  font-weight: 500;
  font-style: oblique;
  font-size: var(--font-title);
  margin: 100px;
  text-align: left;
  vertical-align: middle;
}

/* ============================================================
   Video embed
   ============================================================ */

.video-container {
  width: 100%;
  margin: 0 auto;   /* Optional: Centers the video container */
}

.video-container iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
}