/* ============================================
   High Contrast Mode Styles
   Automatically applied when user has high contrast preference
   ============================================ */

@media (prefers-contrast: high) {
  :root {
    --color-text: #000000;
    --color-bg: #ffffff;
    --color-link: #0000ee;
    --color-link-visited: #551a8b;
    --color-link-hover: #0000cc;
    --color-focus: #ffff00;
    --color-border: #000000;
    --color-muted: #000000;
    
    --color-primary: #0000cc;
    --color-primary-hover: #000099;
    --color-bg-alt: #ffffff;
    --color-bg-accent: #ffffff;
  }
  
  /* Ensure all text has maximum contrast */
  body,
  p,
  li,
  td,
  th,
  label {
    color: #000000;
  }
  
  /* Stronger underlines on links */
  a,
  button,
  summary {
    text-decoration: underline;
    text-decoration-thickness: 3px;
  }
  
  /* More visible borders */
  input,
  textarea,
  select,
  .video-card,
  details,
  .step,
  .pipeline-stage,
  .cta-card {
    border-width: 3px;
    border-color: #000000;
  }
  
  /* Ensure buttons are clearly visible */
  .button {
    border-width: 3px;
  }
  
  .button-primary {
    background-color: #000000;
    color: #ffffff;
    border-color: #000000;
  }
  
  .button-primary:hover {
    background-color: #333333;
    border-color: #333333;
  }
  
  .button-secondary {
    background-color: #ffffff;
    color: #000000;
    border-color: #000000;
  }
  
  /* Focus indicators */
  *:focus,
  *:focus-visible {
    outline: 4px solid #ffff00;
    outline-offset: 2px;
    background-color: #ffff00;
    color: #000000;
  }
  
  /* Skip links */
  .skip-link {
    background-color: #ffff00;
    color: #000000;
    border: 3px solid #000000;
  }
  
  /* Badges */
  .badge {
    border: 2px solid #000000;
    background-color: #ffffff;
    color: #000000;
  }
  
  /* Alerts */
  .alert {
    border-width: 3px;
    background-color: #ffffff;
  }
  
  .alert-success {
    border-color: #000000;
  }
  
  .alert-error {
    border-color: #000000;
  }
  
  /* Navigation current page */
  nav a[aria-current="page"] {
    background-color: #000000;
    color: #ffffff;
    border: 2px solid #000000;
  }
  
  /* Step numbers */
  .step-number,
  .stage-number {
    background-color: #000000;
    color: #ffffff;
    border: 2px solid #000000;
  }
  
  /* Header and footer */
  header[role="banner"],
  footer[role="contentinfo"] {
    background-color: #ffffff;
    border-color: #000000;
    border-width: 3px;
  }
  
  /* Hero section */
  .hero {
    background-color: #ffffff;
    border: 3px solid #000000;
  }
  
  /* Summary/details */
  summary {
    background-color: #ffffff;
    border-bottom-width: 3px;
  }
  
  /* Remove any semi-transparent elements */
  *::before,
  *::after {
    opacity: 1;
  }
}

/* Forced colors mode (Windows High Contrast) */
@media (forced-colors: active) {
  /* Let the system handle colors */
  .button-primary,
  .button-secondary,
  .step-number,
  .stage-number,
  nav a[aria-current="page"] {
    forced-color-adjust: none;
  }
  
  /* Ensure focus is visible */
  *:focus {
    outline: 3px solid CanvasText;
  }
}