/* Enhanced Dark/Light Theme Toggle Styling for Quarto */

/* Make the theme toggle smaller and position it near the title */
.quarto-color-scheme-toggle {
  position: absolute !important;
  top: 12px !important;
  right: 10px !important;
  width: 25px !important;
  height: 25px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important; /* Default dark background */
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  font-size: 1em !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s ease !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  opacity: 0.9 !important;
}

/* Hover effects */
.quarto-color-scheme-toggle:hover {
  transform: scale(1.15) !important;
  opacity: 1 !important;
}

/* Active state */
.quarto-color-scheme-toggle:active {
  transform: scale(0.95) !important;
}

/* Different styles for light and dark modes with better contrast */
.quarto-color-scheme-toggle:not(.alternate) {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important; /* Dark background for moon emoji */
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.quarto-color-scheme-toggle:not(.alternate):hover {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4) !important;
}

.quarto-color-scheme-toggle.alternate {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important; /* Bright background for sun emoji */
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

.quarto-color-scheme-toggle.alternate:hover {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Icon styling - Hide default Bootstrap icons and use emojis instead */
.quarto-color-scheme-toggle i {
  display: none !important; /* Hide the Bootstrap icons */
}

/* Add emoji content based on theme state */
.quarto-color-scheme-toggle::before {
  content: "🌙" !important; /* Moon emoji for light mode (clicking will switch to dark) */
  font-size: 14px !important;
  line-height: 1 !important;
}

.quarto-color-scheme-toggle.alternate::before {
  content: "☀️" !important; /* Sun emoji for dark mode (clicking will switch to light) */
  font-size: 14px !important;
  line-height: 1 !important;
}

/* Add a subtle animation */
@keyframes gentle-pulse {
  0% {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  }
  100% {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
}

.quarto-color-scheme-toggle {
  animation: gentle-pulse 4s infinite !important;
}

/* Stop animation on hover */
.quarto-color-scheme-toggle:hover {
  animation: none !important;
}

/* Position toggle relative to the title area */
.quarto-title-banner {
  position: relative !important;
}

.quarto-title {
  position: relative !important;
}

/* Responsive design for mobile and different screen sizes */
@media (max-width: 1200px) {
  .quarto-color-scheme-toggle {
    right: -10px !important;
    top: 10px !important;
  }
}

@media (max-width: 768px) {
  .quarto-color-scheme-toggle {
    width: 28px !important;
    height: 28px !important;
    top: 8px !important;
    right: -8px !important;
    font-size: 0.8em !important;
  }
  
  .quarto-color-scheme-toggle::before {
    font-size: 12px !important;
  }
}

/* Alternative style: Rectangular button with emoji and text (uncomment to use) */
/*
.quarto-color-scheme-toggle {
  width: auto !important;
  height: auto !important;
  padding: 6px 12px !important;
  border-radius: 15px !important;
  font-size: 0.85em !important;
  font-weight: 600 !important;
}

.quarto-color-scheme-toggle::before {
  content: "🌙 Dark" !important;
  font-size: 12px !important;
}

.quarto-color-scheme-toggle.alternate::before {
  content: "☀️ Light" !important;
  font-size: 12px !important;
}
*/

/* Make sure the toggle is always visible above other elements */
.quarto-color-scheme-toggle {
  z-index: 10000 !important;
}

/* Ensure it doesn't interfere with scroll */
body {
  padding-top: 0 !important;
}

/* Style for when the toggle is near the title */
.top-right.quarto-color-scheme-toggle {
  position: absolute !important;
  top: 10px !important;
  right: -10px !important;
}

/* Ensure proper positioning within title area */
.quarto-title-block .quarto-color-scheme-toggle {
  position: absolute !important;
  top: 10px !important;
  right: -10px !important;
}