/**
 * High Contrast Mode CSS
 * Provides enhanced contrast for users who need better visibility
 * Activated via toggle button in header
 */

/* High contrast mode styles */
.high-contrast {
  /* Background and text contrast */
  --contrast-bg: #000000;
  --contrast-text: #ffffff;
  --contrast-link: #ffff00;
  --contrast-link-visited: #ff00ff;
  --contrast-link-hover: #00ffff;
  --contrast-border: #ffffff;
  --contrast-button-bg: #ffffff;
  --contrast-button-text: #000000;
  --contrast-button-hover-bg: #ffff00;
  --contrast-button-hover-text: #000000;
  --contrast-focus: #ffff00;
  --contrast-accent: #00ff00;
}

/* Apply high contrast styles when .high-contrast class is on body */
body.high-contrast {
  background: var(--contrast-bg) !important;
  color: var(--contrast-text) !important;
}

/* Headers and text */
body.high-contrast h1,
body.high-contrast h2,
body.high-contrast h3,
body.high-contrast h4,
body.high-contrast h5,
body.high-contrast h6 {
  color: var(--contrast-text) !important;
  background: var(--contrast-bg) !important;
}

body.high-contrast p,
body.high-contrast span,
body.high-contrast div,
body.high-contrast li,
body.high-contrast td,
body.high-contrast th {
  color: var(--contrast-text) !important;
  background: transparent !important;
}

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

body.high-contrast a:visited {
  color: var(--contrast-link-visited) !important;
}

body.high-contrast a:hover,
body.high-contrast a:focus {
  color: var(--contrast-link-hover) !important;
  background: var(--contrast-bg) !important;
  outline: 2px solid var(--contrast-focus) !important;
}

/* Buttons */
body.high-contrast button,
body.high-contrast .btn,
body.high-contrast input[type="submit"],
body.high-contrast input[type="button"] {
  background: var(--contrast-button-bg) !important;
  color: var(--contrast-button-text) !important;
  border: 2px solid var(--contrast-border) !important;
  font-weight: bold !important;
}

body.high-contrast button:hover,
body.high-contrast .btn:hover,
body.high-contrast input[type="submit"]:hover,
body.high-contrast input[type="button"]:hover {
  background: var(--contrast-button-hover-bg) !important;
  color: var(--contrast-button-hover-text) !important;
  border: 2px solid var(--contrast-button-hover-text) !important;
}

/* Form elements */
body.high-contrast input,
body.high-contrast textarea,
body.high-contrast select {
  background: var(--contrast-button-bg) !important;
  color: var(--contrast-button-text) !important;
  border: 2px solid var(--contrast-border) !important;
}

body.high-contrast input:focus,
body.high-contrast textarea:focus,
body.high-contrast select:focus {
  outline: 3px solid var(--contrast-focus) !important;
  background: var(--contrast-bg) !important;
  color: var(--contrast-text) !important;
}

/* Labels */
body.high-contrast label {
  color: var(--contrast-text) !important;
  font-weight: bold !important;
}

/* Cards and containers */
body.high-contrast .bg-white,
body.high-contrast .bg-gray-50,
body.high-contrast .bg-gray-100,
body.high-contrast .bg-blue-50,
body.high-contrast article,
body.high-contrast .card,
body.high-contrast .container {
  background: var(--contrast-bg) !important;
  color: var(--contrast-text) !important;
  border: 2px solid var(--contrast-border) !important;
}

/* Navigation */
body.high-contrast nav,
body.high-contrast header,
body.high-contrast footer {
  background: var(--contrast-bg) !important;
  color: var(--contrast-text) !important;
  border: 2px solid var(--contrast-border) !important;
}

/* Tables */
body.high-contrast table {
  border: 2px solid var(--contrast-border) !important;
  background: var(--contrast-bg) !important;
}

body.high-contrast th,
body.high-contrast td {
  border: 1px solid var(--contrast-border) !important;
  background: var(--contrast-bg) !important;
  color: var(--contrast-text) !important;
}

body.high-contrast th {
  background: var(--contrast-text) !important;
  color: var(--contrast-bg) !important;
  font-weight: bold !important;
}

/* Images */
body.high-contrast img {
  border: 2px solid var(--contrast-border) !important;
  filter: contrast(150%) brightness(110%) !important;
}

/* Focus indicators */
body.high-contrast *:focus {
  outline: 3px solid var(--contrast-focus) !important;
  outline-offset: 2px !important;
}

/* Remove gradients and shadows */
body.high-contrast * {
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Special elements */
body.high-contrast .text-gray-500,
body.high-contrast .text-gray-600,
body.high-contrast .text-gray-400,
body.high-contrast .text-blue-600,
body.high-contrast .text-blue-700 {
  color: var(--contrast-text) !important;
}

/* Brand colour overrides */
body.high-contrast .text-\[#585878\] {
  color: var(--contrast-text) !important;
}

/* Menu and dropdowns */
body.high-contrast .dropdown-menu,
body.high-contrast .menu {
  background: var(--contrast-bg) !important;
  border: 2px solid var(--contrast-border) !important;
}

body.high-contrast .dropdown-item,
body.high-contrast .menu-item {
  color: var(--contrast-text) !important;
}

body.high-contrast .dropdown-item:hover,
body.high-contrast .menu-item:hover {
  background: var(--contrast-button-hover-bg) !important;
  color: var(--contrast-button-hover-text) !important;
}

/* Accessibility toggle button styling - EU Accessibility Act compliant */
.high-contrast-toggle {
  position: static;
  background: rgba(255, 255, 255, 0.9);
  color: #000000;
  border: 1px solid rgba(0, 0, 0, 0.3);
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: normal;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}

.high-contrast-toggle:hover {
  background: #ffffff;
  color: #000000;
  border-color: rgba(0, 0, 0, 0.5);
  transform: translateY(-1px);
}

.high-contrast-toggle:focus {
  outline: 2px solid #000000;
  outline-offset: 2px;
  background: #ffffff;
}

/* When high contrast is active, style the toggle button */
body.high-contrast .high-contrast-toggle {
  background: var(--contrast-button-hover-bg) !important;
  color: var(--contrast-button-hover-text) !important;
  border: 2px solid var(--contrast-border) !important;
}

body.high-contrast .high-contrast-toggle:hover {
  background: var(--contrast-button-bg) !important;
  color: var(--contrast-button-text) !important;
}

/* Screen reader announcements */
.contrast-announcement {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Mobile adjustments - maintain 44px minimum touch target */
@media screen and (max-width: 768px) {
  .high-contrast-toggle {
    padding: 8px 10px;
    font-size: 11px;
    gap: 3px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* Print styles - disable high contrast for printing */
@media print {
  body.high-contrast {
    background: white !important;
    color: black !important;
  }
  
  body.high-contrast * {
    background: white !important;
    color: black !important;
    border: 1px solid black !important;
  }
  
  .high-contrast-toggle {
    display: none !important;
  }
}