/* UMBC Digital Accessibility Styles */
/* Following WCAG 2.1 Level AA guidelines */

/* Skip Navigation Link */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: #1e3a8a;
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  font-weight: 600;
  z-index: 100;
  border-radius: 0 0 4px 0;
}

.skip-to-content:focus {
  top: 0;
  outline: 3px solid #fbbf24;
  outline-offset: 2px;
}

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus Visible Styles for Keyboard Navigation */
*:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}

/* Remove outline for mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}

/* High Contrast Link Styles */
a {
  text-decoration-skip-ink: auto;
}

a:hover,
a:focus {
  text-decoration: underline;
}

/* Form Accessibility */
input[required],
textarea[required],
select[required] {
  /* Visual indicator handled by required attribute */
}

input:invalid,
textarea:invalid {
  border-color: #dc2626;
}

input:valid,
textarea:valid {
  border-color: #10b981;
}

/* Button Accessibility */
button:disabled,
input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Image Accessibility - ensure decorative images are ignored by screen readers */
img[alt=""],
img[alt=" "] {
  /* Decorative images should have empty alt */
}

/* Table Accessibility */
table {
  border-collapse: collapse;
}

th {
  text-align: left;
  font-weight: 600;
}

/* Video/Media Accessibility */
video,
audio {
  /* Ensure controls are keyboard accessible */
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  * {
    border-color: currentColor;
  }
}

/* Focus Trap for Modals */
.modal-open {
  overflow: hidden;
}

.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Accessible Hiding */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Language Indicator */
[lang] {
  /* Proper language tags for screen readers */
}

/* Error Messages */
.error-message {
  color: #dc2626;
  font-weight: 600;
  margin-top: 4px;
}

.success-message {
  color: #10b981;
  font-weight: 600;
  margin-top: 4px;
}

/* Loading States */
[aria-busy="true"] {
  cursor: wait;
  opacity: 0.6;
}

/* Live Regions */
[aria-live="polite"],
[aria-live="assertive"] {
  /* Screen reader announcements */
}

/* Landmark Regions */
main[role="main"],
nav[role="navigation"],
header[role="banner"],
footer[role="contentinfo"],
aside[role="complementary"],
section[role="region"] {
  /* Proper landmark roles for navigation */
}

/* Heading Hierarchy */
h1 {
  /* Page title - should be unique per page */
}

/* Color Contrast - Minimum WCAG AA */
.text-contrast {
  color: #1f2937; /* Dark gray on white background */
}

.bg-contrast {
  background-color: #ffffff;
  color: #1f2937;
}

/* Link Contrast */
a.text-link {
  color: #1e40af;
  text-decoration: underline;
}

a.text-link:hover,
a.text-link:focus {
  color: #1e3a8a;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Interactive Element Sizing - Minimum 44x44px touch target */
button,
a,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  min-height: 44px;
  min-width: 44px;
}

/* Print Accessibility */
@media print {
  .no-print {
    display: none !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }
}