/* Theme toggle CSS
   - Light: light grey background + black text
   - Dark: true black background + white text
*/
:root{
  /* light theme: background and font per user */
  --bg-light: #ffffff; /* Changed to pure white */
  --fg-light: #030303; /* user: 030303 */
  --link-light: #0b5fff;

  /* dark theme: background and font per user */
  --bg-dark: #292d3e; /* user: 292d3e */
  --fg-dark: #ffffff; /* user: ffffff */
  --link-dark: #9ecbff; /* light blue accent */
}

/* Default to light theme variables */
:root{
  --bg: var(--bg-light);
  --fg: var(--fg-light);
  --link: var(--link-light);
}

html.dark-theme{
  --bg: var(--bg-dark);
  --fg: var(--fg-dark);
  --link: var(--link-dark);
}

/* Apply colors to Reveal elements with higher specificity */
.reveal,
.reveal .slides,
.reveal .slides section{
  background-color: var(--bg) !important;
  color: var(--fg) !important;
}

.reveal a{ color: var(--link) !important }

/* Ensure backgrounds for slide backgrounds and fragments follow theme */
.reveal .slide-background{ background-color: transparent !important }

/* Code blocks and inline code */
.reveal code, .reveal pre, .reveal .highlight{
  background-color: rgba(0,0,0,0.06); /* subtle default */
  color: var(--fg) !important;
}
html.dark-theme .reveal code,
html.dark-theme .reveal pre,
html.dark-theme .reveal .highlight{
  background-color: rgba(255,255,255,0.04);
  color: var(--fg) !important;
}

/* Controls, menu, and progress bar */
.reveal .controls, .reveal .progress, .reveal .slide-number{
  color: var(--fg) !important;
}

/* Theme toggle button positioning and style */
#theme-toggle-container{position:fixed;top:12px;right:12px;z-index:9999}
#theme-toggle{
  background: rgba(0,0,0,0.06);
  border: 0;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--fg);
}

/* Button contrast when dark theme active */
html.dark-theme #theme-toggle{ background: rgba(255,255,255,0.06); color: var(--fg) }

/* Caption container styling (override inline styles from caption-manager) */
#caption-container{
  background: #7052aa !important; /* user-specified */
  color: #ffffff !important; /* user-specified */
  padding: 10px 20px !important;
  border-radius: 5px !important;
  font-size: 18px !important;
  font-family: Arial, sans-serif !important;
  text-align: center !important;
  max-width: 80% !important;
  z-index: 1000 !important;
}

/* Make sure caption text is readable when dark-theme toggled */
html.dark-theme #caption-container{ color: #ffffff !important }

/* Slide title color override (use user-provided 89deff) */
.reveal .slides section h1,
.reveal .slides section h2,
.reveal .slides section h3,
.reveal h1, .reveal h2, .reveal h3 {
  color: #89deff !important;
}

/* If the theme uses .title or .slide-title classes, ensure they also follow the color */
.reveal .title, .reveal .slide-title {
  color: #89deff !important;
}

/* Light theme only: force titles to black (user requested) */
html:not(.dark-theme) .reveal .slides section h1,
html:not(.dark-theme) .reveal .slides section h2,
html:not(.dark-theme) .reveal .slides section h3,
html:not(.dark-theme) .reveal h1,
html:not(.dark-theme) .reveal h2,
html:not(.dark-theme) .reveal h3,
html:not(.dark-theme) .reveal .title,
html:not(.dark-theme) .reveal .slide-title {
  color: #030303 !important;
}