/* A Lo Cubano Boulder Fest - Theme Toggle Component
   Elegant three-button segmented control for theme switching
   Compatible with Cuban salsa festival aesthetic */

/* =================================================================
   THEME TOGGLE DESIGN SYSTEM
   ================================================================= */

:root {
  /* Theme Toggle Specific Variables */
  --theme-toggle-width: 140px;
  --theme-toggle-height: 44px;
  --theme-toggle-padding: 3px;
  --theme-toggle-border-radius: var(--radius-lg);
  --theme-toggle-backdrop-blur: 16px;
  --theme-toggle-shadow: var(--shadow-md);
  --theme-toggle-shadow-active: var(--shadow-lg);
  --theme-toggle-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Icon sizing */
  --theme-toggle-icon-size: 20px;
  --theme-toggle-button-size: 44px;

  /* Icon filter values as CSS variables for maintainability */
  --theme-toggle-filter-light-default: brightness(0.4);
  --theme-toggle-filter-light-hover: brightness(0.6);
  --theme-toggle-filter-dark-invert: invert(1);
  --theme-toggle-filter-dark-brightness: brightness(0.8);
  --theme-toggle-filter-dark-hover: brightness(1);
  
  /* Colors and opacity for elegance */
  --theme-toggle-bg: rgba(255, 255, 255, 0.85);
  --theme-toggle-bg-active: var(--color-primary);
  --theme-toggle-border: rgba(0, 0, 0, 0.1);
  --theme-toggle-text: var(--color-text-secondary);
  --theme-toggle-text-active: var(--color-white);
  
  /* Positioning */
  --theme-toggle-top: var(--space-lg);
  --theme-toggle-right: var(--space-xl);
  --theme-toggle-z-index: calc(var(--z-fixed) + 10);
  
  /* Warm Cuban-inspired glow */
  --theme-toggle-glow: 0 0 20px rgba(91, 107, 181, 0.3);
  --theme-toggle-glow-active: 0 0 25px rgba(91, 107, 181, 0.4);
}

/* Dark mode theme toggle overrides */
[data-theme="dark"] {
  --theme-toggle-bg: rgba(17, 17, 17, 0.9);
  --theme-toggle-border: rgba(255, 255, 255, 0.15);
  --theme-toggle-text: var(--color-gray-300);
  --theme-toggle-glow: 0 0 20px rgba(204, 41, 54, 0.2);
  --theme-toggle-glow-active: 0 0 25px rgba(204, 41, 54, 0.3);
}

/* System theme support */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --theme-toggle-bg: rgba(17, 17, 17, 0.9);
    --theme-toggle-border: rgba(255, 255, 255, 0.15);
    --theme-toggle-text: var(--color-gray-300);
    --theme-toggle-glow: 0 0 20px rgba(204, 41, 54, 0.2);
    --theme-toggle-glow-active: 0 0 25px rgba(204, 41, 54, 0.3);
  }
}

/* =================================================================
   THEME TOGGLE CONTAINER
   ================================================================= */

.theme-toggle {
  position: fixed;
  top: var(--theme-toggle-top);
  right: var(--theme-toggle-right);
  z-index: var(--theme-toggle-z-index);

  /* Minimal container - just for positioning */
  display: inline-flex;
  gap: var(--space-md);

  /* Remove all container styling */
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  /* Smooth transitions */
  transition: var(--theme-toggle-transition);

  /* Accessibility */
  user-select: none;
}

/* =================================================================
   THEME TOGGLE BUTTONS
   ================================================================= */

.theme-option {
  display: flex;
  align-items: center;
  justify-content: center;

  /* Sizing for touch targets */
  min-width: var(--theme-toggle-button-size);
  height: var(--theme-toggle-button-size);

  /* No background or border - just the icon */
  background: transparent;
  border: none;
  padding: 0;

  /* Typography */
  color: var(--theme-toggle-text);
  font-family: var(--font-sans);

  /* Smooth interactions */
  cursor: pointer;
  transition: var(--theme-toggle-transition);

  /* Touch optimization */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;

  /* Icon container properties */
  position: relative;
}

.theme-option:focus {
  outline: none;
  /* Add subtle opacity change for accessibility */
  opacity: 0.8;
}

.theme-option:focus-visible {
  /* Show very subtle outline only for keyboard navigation */
  outline: none;
  /* Use opacity change instead of outline for cleaner look */
  opacity: 0.7;
}

.theme-option:hover {
  /* Scale up icon slightly on hover */
  transform: scale(1.1);
}

[data-theme="dark"] .theme-option:hover {
  /* Scale up icon slightly on hover */
  transform: scale(1.1);
}

/* =================================================================
   ACTIVE STATE STYLING
   ================================================================= */

/* Visible selected state for accessibility and user feedback */
.theme-option.active {
  /* Add visual distinction for selected option */
  background-color: var(--color-primary-hover);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 2px var(--color-primary);
  transform: scale(1.05);
}

.theme-option.active::before {
  /* Make active icon more prominent */
  filter: var(--theme-toggle-filter-light-default) !important;
  opacity: 1;
}

[data-theme="dark"] .theme-option.active {
  /* Dark mode active state */
  background-color: rgba(91, 107, 181, 0.2);
  box-shadow: 0 0 0 2px var(--color-blue);
}

[data-theme="dark"] .theme-option.active::before {
  /* Dark mode active icon */
  filter: var(--theme-toggle-filter-dark-invert) var(--theme-toggle-filter-dark-hover) !important;
}

/* =================================================================
   SVG ICONS - EMBEDDED FOR PERFORMANCE
   ================================================================= */

.theme-option svg {
  width: var(--theme-toggle-icon-size);
  height: var(--theme-toggle-icon-size);
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
  transition: var(--theme-toggle-transition);
}

/* System Theme Icon (Monitor/Computer) */
.theme-option[data-theme="system"] svg {
  /* Custom monitor icon - clean and recognizable */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Light Theme Icon (Sun) */
.theme-option[data-theme="light"] svg {
  /* Custom sun icon with rays */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cline x1='12' y1='1' x2='12' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='23'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'/%3E%3Cline x1='1' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Dark Theme Icon (Moon Crescent) */
.theme-option[data-theme="dark"] svg {
  /* Custom moon icon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Alternative approach using pseudo-elements for better control */
.theme-option::before {
  content: '';
  width: var(--theme-toggle-icon-size);
  height: var(--theme-toggle-icon-size);
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: none;
  transition: var(--theme-toggle-transition);
}

/* System icon - monitor/computer */
.theme-option[data-theme="system"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='1.5'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E");
}

/* Light icon - sun with black stroke for light mode visibility */
.theme-option[data-theme="light"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cline x1='12' y1='1' x2='12' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='23'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'/%3E%3Cline x1='1' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'/%3E%3C/svg%3E");
  filter: var(--theme-toggle-filter-light-default);
}

/* Dark icon - moon with black stroke for light mode visibility */
.theme-option[data-theme="dark"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.5'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
  filter: var(--theme-toggle-filter-light-default);
}

/* Dark theme icon adjustments - invert black to white */
[data-theme="dark"] .theme-option[data-theme="light"]::before,
[data-theme="dark"] .theme-option[data-theme="dark"]::before {
  filter: var(--theme-toggle-filter-dark-invert) var(--theme-toggle-filter-dark-brightness);
}

/* Active state icon colors */
/* Active state icon colors removed - icons remain the same color */

/* Hover state icon brightness */
.theme-option:hover::before {
  /* Increase brightness on hover in light mode */
  filter: var(--theme-toggle-filter-light-hover);
}

[data-theme="dark"] .theme-option:hover::before {
  /* Maintain invert and increase brightness in dark mode */
  filter: var(--theme-toggle-filter-dark-invert) var(--theme-toggle-filter-dark-hover);
}

/* SVG elements are handled via pseudo-elements */
.theme-option svg {
  /* Keep SVG in DOM for accessibility but visually hide via size */
  width: 0;
  height: 0;
  overflow: hidden;
}

/* =================================================================
   MOBILE RESPONSIVE DESIGN
   ================================================================= */

@media (max-width: 768px) {
  .theme-toggle {
    /* Move to top-left on mobile to avoid hamburger menu conflict */
    top: var(--space-md);
    left: var(--space-md);
    right: auto;

    /* Stack horizontally to save vertical space */
    flex-direction: row;
    gap: var(--space-sm);

    /* Maintain same size for touch targets */
    width: auto;
    height: var(--theme-toggle-height);

    /* Ensure it doesn't interfere with mobile menu */
    z-index: calc(var(--z-fixed) + 5);
  }

  /* Ensure buttons maintain 44px minimum touch target */
  .theme-option {
    min-width: var(--theme-toggle-button-size);
    min-height: var(--theme-toggle-button-size);
  }
}

@media (max-width: 480px) {
  .theme-toggle {
    /* Keep on left side for small screens */
    left: var(--space-sm);
    top: var(--space-sm);

    /* Maintain horizontal layout */
    width: auto;
    height: var(--theme-toggle-height);
  }

  .theme-option {
    /* Maintain 44px minimum even on small screens */
    min-width: var(--theme-toggle-button-size);
    min-height: var(--theme-toggle-button-size);
  }

  .theme-option::before {
    /* Slightly smaller icons on mobile */
    width: 18px;
    height: 18px;
  }
}

/* =================================================================
   HIGH CONTRAST MODE SUPPORT
   ================================================================= */

@media (prefers-contrast: high) {
  .theme-toggle {
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .theme-option {
    color: var(--color-text-primary);
    border: none;
  }

  /* Active state removed for high contrast mode */

  .theme-option:focus {
    border: none;
    outline: none;
  }
}

/* =================================================================
   REDUCED MOTION ACCESSIBILITY
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-option,
  .theme-option::before {
    transition: none;
    animation: none;
  }
  
  .theme-toggle:hover {
    transform: none;
  }
  
  .theme-option:hover {
    transform: none;
  }
  
  /* Active state removed */
}

/* =================================================================
   INTEGRATION WITH NAVIGATION HEADER
   ================================================================= */

/* Ensure theme toggle doesn't interfere with navigation */
@media (min-width: 769px) {
  /* Adjust header grid to accommodate theme toggle */
  .typographic .header .grid {
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--space-lg);
  }
  
  /* Add a specific area for theme toggle in header if needed */
  .header-right {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
  }
}

/* =================================================================
   ANIMATION FOR THEME TRANSITIONS
   ================================================================= */

/* Subtle animation when theme changes */
@keyframes themeTransition {
  0% {
    opacity: 0.8;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Apply animation to the entire toggle when theme changes */
.theme-toggle.theme-changing {
  animation: themeTransition 0.3s ease-out;
}

/* =================================================================
   PERFORMANCE OPTIMIZATIONS
   ================================================================= */

/* GPU acceleration for smooth animations - Applied conditionally */
.theme-toggle {
  transform: translateZ(0); /* Force GPU layer */
  /* will-change applied only during interactions */
}

.theme-option {
  transform: translateZ(0); /* Force GPU layer */
  /* will-change applied only during hover/active states */
}

.theme-option::before {
  transform: translateZ(0); /* Force GPU layer */
}

/* Apply will-change only during interactions for better performance */
.theme-toggle:hover {
  will-change: transform;
}

.theme-option:hover,
.theme-option:active,
.theme-option:focus {
  will-change: transform, background-color, color;
}

.theme-option:hover::before {
  will-change: transform, filter;
}

/* Cleanup will-change after interactions to free GPU memory */
.theme-toggle:not(:hover) {
  will-change: auto;
}

.theme-option:not(:hover):not(:active):not(:focus) {
  will-change: auto;
}

/* CSS Containment for better performance */
.theme-toggle {
  contain: layout style;
}

.theme-option {
  contain: layout;
}

/* =================================================================
   SCREEN READER ACCESSIBILITY
   ================================================================= */

/* Hidden labels for screen readers */
.theme-option .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus visible improvements */
.theme-option:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: none;
}

/* =================================================================
   CUBAN FESTIVAL THEMING TOUCHES
   ================================================================= */

/* Subtle warmth and festival spirit are integrated into main .theme-toggle rule above */

/* Festive glow active state removed */

/* Festive glow removed for cleaner appearance */

/* =================================================================
   FOOTER THEME TOGGLE POSITIONING
   ================================================================= */

/* Footer-specific positioning for theme toggle */
.footer-theme-toggle .theme-toggle {
  /* Override fixed positioning for footer placement */
  position: relative;
  top: auto;
  right: auto;
  
  /* No margin needed - positioning handled by container */
  margin: 0;
  display: flex;
  
  /* Seamless integration - remove container styling */
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  
  /* Adjust z-index for footer context */
  z-index: var(--z-base);
}

/* Position theme toggle in bottom-right of footer */
.footer-theme-toggle {
  position: absolute;
  bottom: var(--space-lg);
  right: var(--space-lg);
}

/* Mobile adjustments for footer theme toggle */
@media (max-width: 768px) {
  .footer-theme-toggle {
    bottom: var(--space-md);
    right: var(--space-md);
  }
}

@media (max-width: 480px) {
  .footer-theme-toggle {
    bottom: var(--space-sm);
    right: var(--space-sm);
  }
  
  .footer-theme-toggle .theme-toggle {
    width: calc(var(--theme-toggle-width) - 10px);
  }
}

/* =================================================================
   FOOTER THEME TOGGLE HOVER STATES
   ================================================================= */

/* Remove container hover effects for seamless integration */
.footer-theme-toggle .theme-toggle:hover {
  transform: none;
  box-shadow: none;
}

/* Enhanced button hover states for footer context */
.footer-theme-toggle .theme-option:hover {
  /* Very subtle hover feedback */
  opacity: 0.7;
}

/* Dark theme footer hover adjustments */
[data-theme="dark"] .footer-theme-toggle .theme-option:hover {
  opacity: 0.7;
}

/* Focus states for accessibility in footer */
.footer-theme-toggle .theme-option:focus {
  outline: none;
  outline-offset: 0;
}

/* Enhanced icon visibility for footer context - show all three icons */
.footer-theme-toggle .theme-option[data-theme="system"] {
  /* Show system icon in footer for consistency */
  display: flex;
}

.footer-theme-toggle .theme-option[data-theme="light"]::before {
  /* Sun icon using same style as main toggle */
  filter: var(--theme-toggle-filter-light-hover);
}

.footer-theme-toggle .theme-option[data-theme="dark"]::before {
  /* Moon icon using same style as main toggle */
  filter: var(--theme-toggle-filter-light-hover);
}

/* Dark theme footer icon adjustments */
[data-theme="dark"] .footer-theme-toggle .theme-option[data-theme="light"]::before,
[data-theme="dark"] .footer-theme-toggle .theme-option[data-theme="dark"]::before {
  filter: var(--theme-toggle-filter-dark-invert) brightness(0.7);
}

/* Hover state for footer icons */
.footer-theme-toggle .theme-option:hover::before {
  /* Subtle brightness increase */
  filter: brightness(1.2);
}

/* Make footer toggle completely seamless */
.footer-theme-toggle .theme-toggle {
  /* Remove all padding for minimal footprint */
  padding: 0;
  width: auto;
  gap: var(--space-md);
}

.footer-theme-toggle .theme-option {
  /* Make buttons completely transparent */
  background: transparent !important;
  border: none !important;
  padding: var(--space-xs);
}

/* Active state brightness removed */