/**
 * Provides consistent, accessible text selection styling
 * across all pages using the brand's primary purple theme.
 *
 * @version 1.0.0
 * @author Infitek
 */

/* ==========================================================================
   CSS Custom Properties (CSS Variables)
   ========================================================================== */

:root {
  /* Primary selection colors derived from brand theme */
  --selection-bg-primary: #5f2dee;           /* Brand primary purple */
  --selection-bg-light: rgba(95, 45, 238, 0.2);  /* Light overlay for accessibility */
  --selection-text-primary: #ffffff;         /* High contrast white text */
  --selection-text-dark: #1a1a1a;           /* Dark text for light backgrounds */

  /* Alternative selection colors for different contexts */
  --selection-bg-secondary: rgba(95, 45, 238, 0.15);
  --selection-bg-hover: rgba(95, 45, 238, 0.3);
}

/* ==========================================================================
   Universal Text Selection
   ========================================================================== */

/**
 * Primary text selection styling
 * Applied to all selectable text elements
 */
::selection {
  background-color: var(--selection-bg-primary);
  color: var(--selection-text-primary);
  text-shadow: none;
}

/**
 * Firefox-specific text selection styling
 * Ensures cross-browser compatibility
 */
::-moz-selection {
  background-color: var(--selection-bg-primary);
  color: var(--selection-text-primary);
  text-shadow: none;
}

/* ==========================================================================
   Context-specific Selection Styling
   ========================================================================== */

/**
 * Light backgrounds - use standard purple selection
 */
body ::selection,
.content ::selection,
.main ::selection {
  background-color: var(--selection-bg-primary);
  color: var(--selection-text-primary);
}

body ::-moz-selection,
.content ::-moz-selection,
.main ::-moz-selection {
  background-color: var(--selection-bg-primary);
  color: var(--selection-text-primary);
}

/**
 * Dark backgrounds - use lighter purple with dark text
 * for better contrast and readability
 */
.dark-theme ::selection,
.bg-dark ::selection,
footer ::selection,
header ::selection {
  background-color: var(--selection-bg-light);
  color: var(--selection-text-dark);
}

.dark-theme ::-moz-selection,
.bg-dark ::-moz-selection,
footer ::-moz-selection,
header ::-moz-selection {
  background-color: var(--selection-bg-light);
  color: var(--selection-text-dark);
}

/**
 * Input fields and form elements
 * Maintains usability while staying on-brand
 */
input[type="text"]::selection,
input[type="email"]::selection,
input[type="tel"]::selection,
input[type="url"]::selection,
input[type="search"]::selection,
textarea::selection {
  background-color: var(--selection-bg-secondary);
  color: var(--selection-text-dark);
}

input[type="text"]::-moz-selection,
input[type="email"]::-moz-selection,
input[type="tel"]::-moz-selection,
input[type="url"]::-moz-selection,
input[type="search"]::-moz-selection,
textarea::-moz-selection {
  background-color: var(--selection-bg-secondary);
  color: var(--selection-text-dark);
}

/**
 * Code elements and preformatted text
 * Ensures readability in technical content
 */
code::selection,
pre::selection,
.code ::selection,
.highlight ::selection {
  background-color: var(--selection-bg-light);
  color: var(--selection-text-dark);
}

code::-moz-selection,
pre::-moz-selection,
.code ::-moz-selection,
.highlight ::-moz-selection {
  background-color: var(--selection-bg-light);
  color: var(--selection-text-dark);
}

/**
 * Special elements that need reduced opacity
 * for better visual hierarchy
 */
.muted ::selection,
.text-muted ::selection,
.secondary ::selection {
  background-color: var(--selection-bg-secondary);
  color: var(--selection-text-primary);
}

.muted ::-moz-selection,
.text-muted ::-moz-selection,
.secondary ::-moz-selection {
  background-color: var(--selection-bg-secondary);
  color: var(--selection-text-primary);
}

/* ==========================================================================
   Accessibility Enhancements
   ========================================================================== */

/**
 * High contrast mode support
 * Ensures accessibility compliance
 */
@media (prefers-contrast: high) {
  ::selection {
    background-color: var(--selection-bg-primary);
    color: var(--selection-text-primary);
    outline: 1px solid currentColor;
  }

  ::-moz-selection {
    background-color: var(--selection-bg-primary);
    color: var(--selection-text-primary);
  }
}

/**
 * Reduced motion preference
 * Respects user accessibility preferences
 */
@media (prefers-reduced-motion: reduce) {
  ::selection,
  ::-moz-selection {
    transition: none;
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

/**
 * Print-friendly selection styling
 * Ensures proper contrast in print media
 */
@media print {
  ::selection {
    background-color: transparent;
    color: inherit;
    text-shadow: none;
  }

  ::-moz-selection {
    background-color: transparent;
    color: inherit;
    text-shadow: none;
  }
}

/* ==========================================================================
   Legacy Browser Support
   ========================================================================== */

/**
 * Fallback for browsers that don't support CSS custom properties
 * Maintains brand consistency across all browsers
 */
@supports not (color: var(--selection-bg-primary)) {
  ::selection {
    background-color: #5f2dee;
    color: #ffffff;
  }

  ::-moz-selection {
    background-color: #5f2dee;
    color: #ffffff;
  }
}