/**
 * VIT Bargarh - Accessibility Utilities
 * Version: 2.0.0
 *
 * WCAG 2.1 AA compliant accessibility utilities
 */

/* ================================================
   SKIP LINKS
   ================================================ */

.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: var(--vit-dark);
  color: var(--vit-white);
  padding: var(--space-3) var(--space-6);
  text-decoration: none;
  font-weight: var(--font-semibold);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: top var(--duration-200) var(--ease-in-out);
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--vit-gold);
  outline-offset: 2px;
}

/* ================================================
   SCREEN READER ONLY
   ================================================ */

.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

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

/* Global focus outline */
:focus {
  outline: 2px solid var(--vit-primary);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--vit-primary);
  outline-offset: 2px;
}

/* High contrast focus for dark backgrounds */
.site-footer :focus-visible,
.header-top :focus-visible,
.page-hero :focus-visible {
  outline-color: var(--vit-gold);
}

/* Button focus ring */
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--vit-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(var(--vit-primary-rgb), 0.25);
}

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

@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;
  }

  /* Keep focus transitions */
  :focus {
    transition: outline-offset 0.1s ease;
  }
}

/* ================================================
   HIGH CONTRAST MODE
   ================================================ */

@media (prefers-contrast: more) {
  :root {
    --vit-primary: #003366;
    --vit-dark: #000000;
    --vit-white: #ffffff;
  }

  body {
    background: #ffffff;
    color: #000000;
  }

  a {
    text-decoration: underline;
  }

  button,
  .btn {
    border: 2px solid currentColor;
  }

  img {
    border: 1px solid #000000;
  }
}

/* ================================================
   COLOR CONTRAST UTILITIES
   ================================================ */

/* Minimum contrast text on light background */
.text-low-contrast {
  color: var(--vit-dark-gray);
}

/* High contrast text */
.text-high-contrast {
  color: var(--vit-dark);
}

/* ================================================
   INTERACTIVE ELEMENT INDICATORS
   ================================================ */

/* Indicate clickable elements */
[role="button"],
button,
a,
input[type="submit"],
input[type="button"],
.clickable {
  cursor: pointer;
}

/* Disabled states */
[disabled],
.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ================================================
   LANDMARK REGIONS
   ================================================ */

[role="banner"],
[role="navigation"],
[role="main"],
[role="complementary"],
[role="contentinfo"] {
  /* Ensure landmarks are properly styled */
  display: block;
}

/* ================================================
   FORM ACCESSIBILITY
   ================================================ */

/* Required field indicator */
.required::after {
  content: ' *';
  color: var(--vit-error);
}

/* Error states */
.form-control.is-invalid,
.form-control[aria-invalid="true"] {
  border-color: var(--vit-error);
  background-image: none;
}

.form-control.is-invalid:focus,
.form-control[aria-invalid="true"]:focus {
  border-color: var(--vit-error);
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
}

/* Error messages */
.error-message,
[role="alert"] {
  color: var(--vit-error);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}

/* Success states */
.form-control.is-valid,
.form-control[aria-invalid="false"] {
  border-color: var(--vit-success);
}

/* ================================================
   LIVE REGIONS
   ================================================ */

[aria-live="polite"],
[aria-live="assertive"] {
  position: relative;
}

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

/* ================================================
   TEXT READABILITY
   ================================================ */

/* Minimum touch target size (44x44px) */
.touch-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Line height for readability */
.readable-text {
  line-height: 1.6;
  letter-spacing: 0.01em;
}

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

@media print {
  /* Show link URLs in print */
  a[href^="http"]:not([href*="vitbargarh.ac.in"])::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    word-wrap: break-word;
  }

  /* Hide decorative elements */
  [aria-hidden="true"],
  .decorative {
    display: none !important;
  }

  /* Ensure text is black for readability */
  body {
    color: #000 !important;
    background: #fff !important;
  }

  /* Remove backgrounds that waste ink */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* ================================================
   DYSLEXIA-FRIENDLY OPTIONS
   ================================================ */

.dyslexia-friendly {
  font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif;
  letter-spacing: 0.05em;
  word-spacing: 0.1em;
  line-height: 1.8;
}

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

.text-larger {
  font-size: 1.15em;
  line-height: 1.7;
}

.text-largest {
  font-size: 1.3em;
  line-height: 1.8;
}

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

/* Tab order indicators for development */
.debug-tab-order [tabindex]:focus::before {
  content: attr(tabindex);
  position: absolute;
  top: -20px;
  left: 0;
  background: var(--vit-primary);
  color: white;
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 4px;
}