/* Audio Footer Bar Styles */
#audio-footer-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 40px !important; /* Reduced from 60px to 40px */
  background: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.95)) !important;
  backdrop-filter: blur(10px) !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  z-index: 10000 !important;
  display: none;
  align-items: center !important;
  padding: 0 15px !important; /* Reduced padding from 20px to 15px */
  gap: 12px !important; /* Reduced gap from 15px to 12px */
  font-family: Arial, sans-serif !important;
  color: white !important;
  box-sizing: border-box !important;
}

/* Caption container positioning when footer bar is present */
#caption-container {
  z-index: 10001 !important;
  bottom: 60px !important; /* 40px footer + 20px margin */
}

/* Override JavaScript-set caption background with light gray */
div#caption-container[style] {
  background: rgba(211, 211, 211, 0.9) !important; /* Light gray background */
  backdrop-filter: blur(8px) !important; /* Add blur for better readability */
  border: 1px solid rgba(169, 169, 169, 0.8) !important; /* Darker gray border */
  color: #000000 !important; /* Black text */
  text-shadow: none !important; /* Remove text shadow */
}

/* Dark theme caption styling (when body has dark-theme class) */
html.dark-theme div#caption-container[style] {
  color: #000000 !important; /* Black text for light gray background */
  text-shadow: none !important; /* Remove text shadow */
  background: rgba(211, 211, 211, 0.9) !important; /* Light gray background */
  border: 1px solid rgba(169, 169, 169, 0.8) !important;
}

/* Light theme caption styling (default or when body has light-theme class) */
html:not(.dark-theme) div#caption-container[style],
html.light-theme div#caption-container[style] {
  color: #000000 !important; /* Black text */
  text-shadow: none !important; /* Remove text shadow */
  background: rgba(211, 211, 211, 0.9) !important; /* Light gray background */
  border: 1px solid rgba(169, 169, 169, 0.8) !important;
}

/* Adjust caption container when no footer bar */
body:not(.audio-footer-visible) #caption-container {
  bottom: 20px !important;
}

/* Hide all audio elements - they're controlled by the footer bar */
audio.audio-source {
  display: none !important;
}

/* Remove all browser audio controls */
audio.audio-source::-webkit-media-controls {
    display: none !important;
}

audio.audio-source::-webkit-media-controls-panel {
    display: none !important;
}

audio.audio-source::-webkit-media-controls-play-button {
    display: none !important;
}

audio.audio-source::-webkit-media-controls-timeline {
    display: none !important;
}

audio.audio-source::-webkit-media-controls-current-time-display {
    display: none !important;
}

audio.audio-source::-webkit-media-controls-time-remaining-display {
    display: none !important;
}

audio.audio-source::-webkit-media-controls-mute-button {
    display: none !important;
}

audio.audio-source::-webkit-media-controls-volume-slider {
    display: none !important;
}

/* Firefox controls removal */
audio.audio-source::-moz-media-controls {
    display: none !important;
}

/* Ensure footer bar is above all content */
body {
  padding-bottom: 0 !important;
}

/* Adjust slide content to not overlap with footer when it's showing */
.reveal .slides {
  padding-bottom: 0 !important;
}

/* Make sure footer bar appears above Reveal.js controls */
.reveal .controls {
  z-index: 9999 !important;
}

#audio-footer-bar {
  z-index: 10000 !important;
}