/* ============================================================
   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: 8px;
  --font-body: 18px;
  --font-list: 15px;
  --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;
  padding: 0px;
  margin: 0px;
}

/* 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: 8px;
  text-align: center;
}

.presentation-image {
  padding: 8px;
  text-align: center;
}

.slide-graphic {
  padding: 4px;
  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;
}

.divider {
  font-size: 20px;
  font-weight: 600;
  font-variant: small-caps;
  display: flex;
  align-items: center;
}

.divider::before {
  flex: 0.1;
  content: '';
  padding: 2px;
  background-color: #133337;
  margin: 5px;
}

.divider::after {
  flex: 1;
  content: '';
  padding: 2px;
  background-color: #133337;
  margin: 5px;
}

.divider-rows {
  overflow-y: auto;
}

.answers {
  list-style-type: upper-alpha;
  font-size: var(--font-subtitle);
  line-height: 1.2;
  text-align: left;
  vertical-align: text-top;
  width: 95%;
  background-color: #ffffffBF;
  padding: 10px 50px;
}

.answers > ol {
  list-style-type: upper-alpha;
  font-size: var(--font-subtitle);
  line-height: 1.2;
  text-align: justify;
  width: 95%;
  background-color: #ffffffBF;
}

.divider-rows > ul {
  list-style-type: none;
  border-left: 3px solid #133337;
  border-bottom: 3px solid #133337;
  padding: 0 0 0 1em;
  margin: -1em 0em 0em 0em;
  font-size: var(--font-list);
  line-height: 1;
  text-align: justify;
  width: 95%;
}

.divider-rows li {
  padding: 0px 8px;
  margin-top: -1px; /* Prevent double borders */
}

.divider-rows li:first-child {
  font-size: var(--font-body);
  font-weight: 600;
  margin-top: -1px; /* Prevent double borders */
}

.divider-rows li:last-child {
  margin-top: -1px; /* Prevent double borders */
  padding-bottom: 10px;
}

.divider-list {
  overflow-y: auto;
}
.divider-list > ul {
  list-style-type: square;
  border-left: 3px solid #133337;
  border-bottom: 3px solid #133337;
  padding: 0em 2em 0em 2em;
  margin: -1em 0em 0em 4px;
  font-size: var(--font-list);
  line-height: 1.1;
  text-align: left;
  width: 85%;
}

.divider-list li {
  padding: 3px 8px;
}

.divider-list li:last-child {
  padding-bottom: 10px;
}

.def-list {
  overflow-y: auto;
}

.def-list > ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.def-list li {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
}

/* Style badges inside the list group */
.def-list .badge {
  background-color: red;
  color: #fff;
  font-weight: bold;
  border-radius: 50%;
  padding: 5px 10px;
  text-align: center;
  margin-left: 5px;
}

/* ============================================================
   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: white;
  border-radius: 5px;
  text-align: center;
  font-style: italic;
  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-width: 1px 1px 1px 1px;
  border-style: solid;
  border-color: black;
  background: #ffffffBF;
  font-weight: 500;
  margin-bottom: var(--space-xl);
  overflow-y: auto;
}

.citation {
  font-size: 0.6rem;
  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-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;
  font-size: var(--font-subtitle);
}

.sc-lead {
  font-size: 20px;
  font-weight: 600;
  font-variant: small-caps;
  border-width: 1px 1px 1px 4px;
  border-style: solid;
  border-color: black;
  background: #13333780;
  padding: var(--space-sm);
  margin-bottom: var(--space-xl);
  text-align: left;
}

/* ============================================================
   Video embed
   ============================================================ */
.video-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
iframe[src*="youtube.com"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}


/* ============================================================
   URL embed
   ============================================================ */

/* target the plugin's built-in grid element */
.slide-iframe-container {
    display: flex !important;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    width: 100% !important;
    height: 100% !important;
    border: none;
    flex-grow: 1;
}

/* Force the embedded iframe to scale completely inside the grid block */
.slide-iframe-container iframe {
    width: 100% !important;
    height: 100% !important;
    border: none;
    flex-grow: 1;
}



/* ============================================================
   Text Styling
   ============================================================ */

.text-aside {
  font-size: 18px;
  font-style: oblique;
  color: #5b5b5b;
}

.text-row {
  font-size:16px;
  font-style:oblique;
  color:gray;
  font-weight:500;
  background: #ffffffBF;
  padding: 0px 1px 1px 20px;
}

.source {
  font-size:10px;
  font-style:oblique;
  padding: 2px 1px 1px 20px;
  margin: 0px;
}

/* ============================================================
   Callouts
   ============================================================ */

/*
UPDATED FOR OBSIDIAN SLIDES EXTENDED
Targets native Obsidian preview AND the compiled Reveal.js slide layouts
*/

.reveal .slides .callout[data-callout-metadata*="label"],
.reveal .slides div[data-callout-metadata*="label"],
.callout[data-callout-metadata*="label"] {
  --block-spacing: 1rem;
  --speaker-block-width: 20%;
  margin: 0px !important;
  padding: 0px !important;
  display: grid !important;
  grid-template-columns: var(--speaker-block-width) calc(100% - var(--speaker-block-width)) !important;
  background-color: var(--background-primary, #ffffff) !important;
  border: none !important;
}

.reveal .slides .callout[data-callout-metadata*="label"] .callout-title,
.reveal .slides div[data-callout-metadata*="label"] .callout-title,
.callout[data-callout-metadata*="label"] .callout-title {
  display: inline-block !important;
  height: calc(100% - var(--block-spacing)) !important;
  text-align: right !important;
  border-right: 3px solid !important;
  padding-right: var(--block-spacing) !important;
}