/* Accessibility and SEO Enhancements */

/* Improved focus styles for keyboard users */
:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Skip links for keyboard navigation */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 8px;
  background-color: #007bff;
  color: white;
  z-index: 10000;
  transition: top 0.3s;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

/* Improved color contrast for better readability */
.text-muted {
  color: #6c757d !important; /* Ensure WCAG 2.1 AA compliance */
}

/* Ensure proper heading hierarchy */
h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

/* Improved form accessibility */
.required-label::after {
  content: "*";
  color: red;
  margin-left: 4px;
}

/* Improved focus for form elements */
input:focus, 
textarea:focus, 
select:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Ensure buttons have proper focus */
.btn:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Text spacing for readability */
p, li, td, th {
  line-height: 1.5;
}

/* Ensure touch targets are at least 44px */
.nav-link, .btn, .navbar-toggler, input[type="checkbox"], input[type="radio"] {
  min-height: 44px;
  min-width: 44px;
}

/* Ensure mobile-friendly tap targets */
.nav-item, .navbar-toggler, .btn {
  padding: 8px;
  margin: 2px;
}

/* High contrast mode support */
@media (forced-colors: active) {
  .btn {
    border: 2px solid;
  }
  
  a {
    text-decoration: underline;
  }
  
  .card {
    border: 1px solid;
  }
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print styles for better page printing */
@media print {
  .navbar, .footer, .btn {
    display: none !important;
  }
  
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
  
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  
  body {
    font-size: 12pt;
    line-height: 1.4;
    color: #000;
    background: #fff;
  }
  
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    page-break-inside: avoid;
  }
  
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }
  
  table {
    page-break-inside: avoid;
  }
}