/* ===========================================
   ACCESSIBILITY STYLES
   Styles for accessibility menu functionality
   =========================================== */

/* HIGH CONTRAST MODE */
.high-contrast {
  /* Override background colors for better contrast */
  background-color: #000 !important;
  color: #fff !important;
  
  /* Ensure all text has high contrast */
  * {
    background-color: #000 !important;
    color: #fff !important;
  }
  
  /* Links with high contrast */
  a {
    color: #ffff00 !important;
    text-decoration: underline !important;
    
    &:hover, &:focus {
      color: #00ffff !important;
      background-color: #333 !important;
    }
  }
  
  /* Buttons with high contrast */
  button, .btn {
    background-color: #fff !important;
    color: #000 !important;
    border: 2px solid #fff !important;
    
    &:hover, &:focus {
      background-color: #ffff00 !important;
      color: #000 !important;
    }
  }
  
  /* Form elrements */
  input, textarea, select {
    background-color: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
    
    &:focus {
      background-color: #333 !important;
      border-color: #ffff00 !important;
      outline: 2px solid #ffff00 !important;
    }
  }
  
  /* Navigation elrements */
  .navbar, .nav, .menu-itrem {
    background-color: #000 !important;
    
    a {
      color: #fff !important;
      
      &:hover, &:focus {
        background-color: #333 !important;
        color: #ffff00 !important;
      }
    }
  }
  
  /* Cards and containers */
  .card, .container, .row, .col {
    background-color: #000 !important;
    border-color: #fff !important;
  }
  
  /* Images with borders for visibility */
  img {
    border: 2px solid #fff !important;
  }
  
  /* Focus indicators */
  *:focus {
    outline: 2px solid #ffff00 !important;
    outline-offset: 2px !important;
  }
}

/* LARGE FONT MODE */
.large-font {
  /* Base font size increase */
  font-size: 125% !important;
  
  /* Scale all text elrements */
  h1 { font-size: 2.5rem !important; }
  h2 { font-size: 2.2rem !important; }
  h3 { font-size: 2rem !important; }
  h4 { font-size: 1.8rem !important; }
  h5 { font-size: 1.6rem !important; }
  h6 { font-size: 1.4rem !important; }
  
  p, li, span, div, a, button, input, textarea, select {
    font-size: 1.25rem !important;
  }
  
  /* Navigation itrems */
  .nav-link, .menu-itrem {
    font-size: 1.3rem !important;
  }
  
  /* Buttons */
  .btn, button {
    font-size: 1.3rem !important;
  }
  
  /* Form elrements */
  input, textarea, select {
    font-size: 1.25rem !important;
    padding: 12px !important;
  }
  
  /* Cards and content */
  .card-title {
    font-size: 1.5rem !important;
  }
  
  .card-text {
    font-size: 1.25rem !important;
    line-height: 1.6 !important;
  }
}

/* INCREASED SPACING MODE */
.increased-spacing {
  /* Letter spacing for better readability */
  letter-spacing: 0.1rem !important;
  
  /* Word spacing */
  word-spacing: 0.2rem !important;
  
  /* Line height for better readability */
  line-height: 2 !important;
  
  /* Paragraph spacing */
  p {
    margin-bottom: 2rem !important;
  }
  
  /* List spacing */
  ul, ol {
    margin: 2rem 0 !important;
  }
  
  li {
    margin-bottom: 1rem !important;
  }
  
  /* Heading spacing */
  h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1.5rem !important;
    margin-top: 2rem !important;
  }
  
  /* Card spacing */
  .card {
    margin-bottom: 3rem !important;
    padding: 2rem !important;
  }
  
  /* Section spacing */
  section {
    padding: 4rem 0 !important;
  }
  
  /* Container spacing */
  .container {
    padding: 2rem !important;
  }
  
  /* Button spacing */
  .btn, button {
    margin: 0.5rem !important;
    padding: 1rem 2rem !important;
  }
  
  /* Form spacing */
  .form-group {
    margin-bottom: 2rem !important;
  }
  
  input, textarea, select {
    margin-bottom: 1rem !important;
    padding: 1rem !important;
  }
}

/* ===========================================
   KEYBOARD NAVIGATION STYLES
   =========================================== */

/* Focus indicators for keyboard navigation */
*:focus-visible {
  outline: 2px solid #0065C3 !important;
  outline-offset: 2px !important;
}

/* Skip links for keyboard navigation */
.skip-link {
  position: absolute !important;
  top: -40px !important;
  left: 0 !important;
  background: #000 !important;
  color: #fff !important;
  padding: 8px !important;
  text-decoration: none !important;
  z-index: 1000 !important;
  
  &:focus {
    top: 0 !important;
  }
}

/* Ensure interactive elrements are keyboard accessible */
a, button, input, textarea, select, [tabindex] {
  &:focus {
    outline: 2px solid #0065C3 !important;
    outline-offset: 2px !important;
  }
}

/* Hover and focus states for better visibility */
a:hover, a:focus,
button:hover, button:focus,
.btn:hover, .btn:focus {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Ensure sufficient touch targets for mobile */
@media (max-width: 768px) {
  a, button, .btn {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px !important;
  }
}

/* ===========================================
   ACCESSIBILITY MENU COMPATIBILITY
   =========================================== */

/* Ensure accessibility menu works with our styles */
.accessibility-button {
  z-index: 1000 !important;
}

.accessibility-menu {
  z-index: 1001 !important;
}

/* High contrast compatibility for accessibility menu */
.high-contrast {
  .accessibility-button {
    background-color: #fff !important;
    border-color: #000 !important;
    
    &:hover, &:focus {
      background-color: #ffff00 !important;
    }
  }
  
  .accessibility-menu {
    background-color: #000 !important;
    border-color: #fff !important;
    
    h2 {
      color: #fff !important;
    }
    
    .accessibility-menu__option {
      background-color: #000 !important;
      border-color: #fff !important;
      color: #fff !important;
      
      &:hover, &:focus {
        background-color: #333 !important;
      }
      
      &[aria-pressed="true"] {
        background-color: #555 !important;
      }
    }
  }
}

/* Large font compatibility */
.large-font {
  .accessibility-menu {
    width: 400px !important;
    
    h2 {
      font-size: 1.8rem !important;
    }
    
    .accessibility-menu__option {
      font-size: 1.4rem !important;
    }
  }
}

/* Increased spacing compatibility */
.increased-spacing {
  .accessibility-menu {
    .accessibility-menu__option {
      margin-bottom: 1rem !important;
      padding: 0 !important;
    }
  }
}