/**
 * Accessibility CSS file - High Contrast Mode
 * This style is loaded when the user activates accessibility mode
 */

/* High-contrast colors */
:root {
  --a11y-bg-primary: #000000;
  --a11y-bg-secondary: #1a1a1a;
  --a11y-bg-tertiary: #333333;
  --a11y-text-primary: #ffffff;
  --a11y-text-secondary: #ffff00;
  --a11y-accent: #00ccff;
  --a11y-error: #ff6666;
  --a11y-success: #66ff66;
  --a11y-link: #55aaff;
  --a11y-focus: #ffff33;
}

/* Global styles */
body.accessibility-mode {
  background-color: var(--a11y-bg-primary) !important;
  color: var(--a11y-text-primary) !important;
  font-size: 110% !important;
  line-height: 1.6 !important;
}

/* Focus styles */
body.accessibility-mode *:focus {
  outline: 3px solid var(--a11y-focus) !important;
  outline-offset: 3px !important;
}

/* Header styles */
body.accessibility-mode header {
  background-color: var(--a11y-bg-tertiary) !important;
  border-bottom: 2px solid var(--a11y-accent) !important;
}

body.accessibility-mode header a,
body.accessibility-mode header button {
  color: var(--a11y-text-primary) !important;
}

body.accessibility-mode header .text-gray-700,
body.accessibility-mode header .text-gray-600 {
  color: var(--a11y-text-primary) !important;
}

/* Card and container styles */
body.accessibility-mode .bg-white,
body.accessibility-mode .card,
body.accessibility-mode .container {
  background-color: var(--a11y-bg-secondary) !important;
  border-color: var(--a11y-accent) !important;
}

/* Form elements */
body.accessibility-mode input,
body.accessibility-mode textarea,
body.accessibility-mode select {
  background-color: var(--a11y-bg-primary) !important;
  color: var(--a11y-text-primary) !important;
  border: 2px solid var(--a11y-accent) !important;
  border-radius: 4px;
  padding: 0.75rem 1rem !important;
}

body.accessibility-mode input:focus,
body.accessibility-mode textarea:focus,
body.accessibility-mode select:focus {
  border-color: var(--a11y-focus) !important;
  box-shadow: 0 0 0 3px var(--a11y-focus) !important;
}

body.accessibility-mode input::placeholder,
body.accessibility-mode textarea::placeholder {
  color: #aaaaaa !important;
}

/* Buttons */
body.accessibility-mode .btn,
body.accessibility-mode button {
  background-color: var(--a11y-bg-tertiary) !important;
  color: var(--a11y-text-primary) !important;
  border: 2px solid var(--a11y-text-primary) !important;
  border-radius: 4px !important;
  font-weight: bold !important;
  padding: 0.75rem 1.25rem !important;
}

body.accessibility-mode .btn-primary,
body.accessibility-mode button.bg-accent-color {
  background-color: var(--a11y-accent) !important;
  color: var(--a11y-bg-primary) !important;
  border-color: var(--a11y-accent) !important;
}

body.accessibility-mode .btn:hover,
body.accessibility-mode button:hover {
  filter: brightness(120%) !important;
}

body.accessibility-mode .btn:focus,
body.accessibility-mode button:focus {
  outline: 3px solid var(--a11y-focus) !important;
}

/* Links */
body.accessibility-mode a {
  color: var(--a11y-link) !important;
  text-decoration: underline !important;
}

body.accessibility-mode a:hover {
  filter: brightness(120%) !important;
}

/* Specific text colors */
body.accessibility-mode .text-gray-500,
body.accessibility-mode .text-gray-600,
body.accessibility-mode .text-gray-700,
body.accessibility-mode .text-gray-800,
body.accessibility-mode .text-gray-900 {
  color: var(--a11y-text-primary) !important;
}

/* Tables */
body.accessibility-mode table {
  border: 2px solid var(--a11y-accent) !important;
}

body.accessibility-mode th {
  background-color: var(--a11y-bg-tertiary) !important;
  color: var(--a11y-text-primary) !important;
  border-bottom: 2px solid var(--a11y-accent) !important;
}

body.accessibility-mode tr {
  border-bottom: 1px solid var(--a11y-bg-tertiary) !important;
}

body.accessibility-mode tr:hover {
  background-color: var(--a11y-bg-tertiary) !important;
}

/* Custom form styles */
body.accessibility-mode .question-card {
  background-color: var(--a11y-bg-secondary) !important;
  border: 2px solid var(--a11y-accent) !important;
  margin-bottom: 1.5rem !important;
  padding: 1.25rem !important;
}

/* Notifications */
body.accessibility-mode .bg-green-50 {
  background-color: var(--a11y-bg-secondary) !important;
  border-left: 4px solid var(--a11y-success) !important;
}

body.accessibility-mode .bg-red-50 {
  background-color: var(--a11y-bg-secondary) !important;
  border-left: 4px solid var(--a11y-error) !important;
}

body.accessibility-mode .text-green-700 {
  color: var(--a11y-success) !important;
}

body.accessibility-mode .text-red-700 {
  color: var(--a11y-error) !important;
}

/* Skip to content link */
body.accessibility-mode .skip-to-content {
  position: absolute;
  top: -50px;
  left: 0;
  background: var(--a11y-accent);
  color: var(--a11y-bg-primary);
  padding: 10px;
  z-index: 999;
  transition: top 0.3s ease;
}

body.accessibility-mode .skip-to-content:focus {
  top: 0;
}

/* Screen reader specific classes */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Accessibility toggle button active state */
body.accessibility-mode #accessibility-toggle {
  background-color: var(--a11y-accent) !important;
  color: var(--a11y-bg-primary) !important;
}

/* Increased spacing */
body.accessibility-mode * + * {
  margin-top: 0.25rem;
}

body.accessibility-mode main {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Speech recognition visual indicators */
body.accessibility-mode .mic-active {
  animation: pulse 1.5s infinite;
  border: 3px solid var(--a11y-accent) !important;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 204, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 204, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 204, 255, 0);
  }
}