/* Theme Transition CSS */

/* Define transition duration */
:root {
  --theme-transition-duration: 0.5s;
}

/* Apply transitions to color-changing elements */
.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
  transition: background-color var(--theme-transition-duration) ease,
              color var(--theme-transition-duration) ease,
              border-color var(--theme-transition-duration) ease,
              box-shadow var(--theme-transition-duration) ease !important;
}

/* Dark theme colors - these will be applied via JS but defined here for reference */
[data-theme="dark"] {
  --temp-bg: var(--background);
  --temp-primary: var(--primary);
  --background: #1f2937;
  --primary: #f5f5f5;
  --white: #2d3748;
  --light-gray: #4a5568;
  --dark-text: #e5e5e5;
  --dark-card-bg: #374151;
  --dark-btn-text: #1f2937;
}

/* Theme switch animation */
.theme-switch {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--primary);
  color: var(--background);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.theme-switch:hover {
  transform: translateY(-3px);
}

.theme-switch.dark {
  background-color: var(--accent);
}

.theme-switch.switched {
  animation: rotate 0.5s ease;
}

@keyframes rotate {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

/* Fix for contrast in dark mode */
[data-theme="dark"] .header {
  background-color: #374151;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .footer {
  background-color: #111827;
}

/* Ensure testimonials remain visible in dark mode */
[data-theme="dark"] .testimonial-content {
  background-color: #374151;
}

[data-theme="dark"] .testimonial-author-name,
[data-theme="dark"] .testimonial-author-title {
  color: #e5e5e5;
}

/* Ensure stats are visible in dark mode */
[data-theme="dark"] .stat-number {
  color: var(--accent);
}

/* Dark mode image adjustments */
[data-theme="dark"] img.logo {
  filter: brightness(0) invert(1);
}

/* Media query for mobile */
@media (max-width: 768px) {
  .theme-switch {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
}