/**
 * Neighbours on Patrol Canada (NOPCA) - Accessibility Stylesheet
 * 
 * This stylesheet provides additional accessibility enhancements
 * to ensure the NOPCA website is usable by everyone.
 */

/* ===== FOCUS STYLES ===== */

/* Enhanced focus styles for keyboard navigation */
:focus {
  outline: 3px solid #1e4b94 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(30, 75, 148, 0.4) !important;
}

/* Special focus styles for dark backgrounds */
.footer :focus,
.hero :focus,
[style*="background-color: #1e4b94"] :focus,
.bg-primary :focus {
  outline-color: #f0c808 !important;
  box-shadow: 0 0 0 3px rgba(240, 200, 8, 0.6) !important;
}

/* Skip to main content link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #1e4b94;
  color: white;
  padding: 8px;
  z-index: 9999;
  transition: top 0.3s ease;
}

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

/* ===== REDUCED MOTION ===== */

/* Respect user preferences for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Alternative styles for elements that rely on animation */
  .hero {
    opacity: 1 !important;
    transform: none !important;
  }
  
  .chapter-card:hover,
  .case-item:hover,
  .team-member:hover {
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
  }
}

/* ===== TEXT ADJUSTMENTS ===== */

/* Improved line height for readability */
p, li, td, th, input, select, textarea, button {
  line-height: 1.6;
}

/* Ensure text remains visible during webfont load */
html {
  font-display: swap;
}

/* Minimum text size to ensure readability */
body {
  font-size: max(16px, 1rem);
}

/* ===== COLOR & CONTRAST ===== */

/* High contrast mode adjustments */
@media (forced-colors: active) {
  /* Ensure buttons have borders */
  .btn {
    border: 2px solid ButtonText;
  }
  
  /* Ensure form fields have visible boundaries */
  input, select, textarea {
    border: 1px solid ButtonText;
  }
  
  /* Ensure links are underlined */
  a {
    text-decoration: underline;
  }
}

/* ===== FORM ENHANCEMENTS ===== */

/* Larger click/tap targets for form elements */
input, select, textarea, button, .btn {
  min-height: 44px;
  min-width: 44px;
}

/* Better checkbox and radio button styles */
input[type="checkbox"],
input[type="radio"] {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
}

/* Form validation messages */
.form-error {
  color: #d62839;
  font-weight: bold;
  margin-top: 5px;
}

/* Required field indicators */
.required-field::after {
  content: " *";
  color: #d62839;
  font-weight: bold;
}

/* Form field descriptions */
.field-description {
  font-size: 0.9rem;
  color: #4a4a4a;
  margin-top: 5px;
}

/* ===== TABLE ACCESSIBILITY ===== */

/* Ensure tables are accessible */
table {
  border-collapse: collapse;
  width: 100%;
}

th {
  text-align: left;
  background-color: #f5f5f5;
}

th, td {
  padding: 12px;
  border: 1px solid #d4d4d4;
}

/* Zebra striping for better readability */
tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* ===== SCREEN READER UTILITIES ===== */

/* Hide elements visually but keep them accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Make elements visible on focus for keyboard users */
.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ===== ARIA SUPPORT ===== */

/* Ensure ARIA hidden elements are truly hidden */
[aria-hidden="true"] {
  display: none !important;
}

/* Style for current page in navigation */
[aria-current="page"] {
  font-weight: bold;
  text-decoration: underline;
}

/* ===== CONTENT WARNINGS ===== */

/* Warning for potentially sensitive content */
.content-warning {
  background-color: #fff9e6;
  border-left: 4px solid #faad14;
  padding: 15px;
  margin-bottom: 20px;
}

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

/* Ensure interactive elements have visible focus styles */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
  outline: 3px solid #1e4b94;
  outline-offset: 2px;
}

/* ===== PRINT ACCESSIBILITY ===== */

/* Ensure print version is accessible */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
  }
  
  /* Ensure links are understandable in print */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  
  /* Don't print URLs for internal links */
  a[href^="#"]:after {
    content: "";
  }
}

/* ===== MOBILE ACCESSIBILITY ===== */

@media (max-width: 768px) {
  /* Larger touch targets on mobile */
  a, button, .btn, .nav-link {
    padding: 12px;
    margin: 4px 0;
  }
  
  /* Increase spacing between interactive elements */
  li, .nav-item {
    margin-bottom: 8px;
  }
  
  /* Ensure text is readable on small screens */
  body {
    font-size: 16px;
  }
  
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.75rem;
  }
  
  h3 {
    font-size: 1.5rem;
  }
}

/* ===== ANIMATIONS & TRANSITIONS ===== */

/* Ensure animations don't flash or blink rapidly */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

/* ===== DARK MODE SUPPORT ===== */

@media (prefers-color-scheme: dark) {
  /* These styles will only apply if the user has dark mode enabled */
  /* This is just a basic example - a full dark mode would require more comprehensive styling */
  
  body.dark-mode-support {
    background-color: #121212;
    color: #f5f5f5;
  }
  
  .dark-mode-support a {
    color: #90caf9;
  }
  
  .dark-mode-support .card,
  .dark-mode-support .navbar,
  .dark-mode-support .form-control {
    background-color: #1e1e1e;
    border-color: #333;
  }
}