/**
 * Accessibility Enhancements for WCAG 2.1 AA Compliance
 * This file contains accessibility improvements for the egrbs5 theme
 */

/* ==========================================================================
   Focus Indicators - Keyboard Only (Focus-Visible)
   ========================================================================== */

/* Remove default focus outline for all elements */
*:focus {
  outline: none;
}

/* Remove focus outline from paragraph components */
.paragraph:focus,
.paragraph:focus-visible,
[class*="paragraph--"]:focus,
[class*="paragraph--"]:focus-visible,
.paragraph *:focus,
.paragraph *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Remove focus from all paragraph types and their wrappers */
.paragraph,
.paragraph *,
[class*="paragraph--"],
[class*="paragraph--"] *,
.paragraph-wrapper,
.paragraph-wrapper *,
.field--type-entity-reference-revisions,
.field--type-entity-reference-revisions * {
  outline: none !important;
}

/* Remove focus on click for all paragraph elements */
.paragraph:focus:not(:focus-visible),
.paragraph *:focus:not(:focus-visible),
[class*="paragraph--"]:focus:not(:focus-visible),
[class*="paragraph--"] *:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Specifically remove focus from egr-menu links within paragraphs */
.paragraph .egr-menu__link:focus,
.paragraph .egr-menu__link:focus-visible,
.paragraph .egr-menu__item a:focus,
.paragraph .egr-menu__item a:focus-visible,
.paragraph .egr-menu a:focus,
.paragraph .egr-menu a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Remove any component-specific focus styles */
.egr-menu:focus,
.egr-menu:focus-visible,
.egr-menu *:focus,
.egr-menu *:focus-visible,
.egr-menu__wrapper:focus,
.egr-menu__wrapper:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Show focus indicators only for keyboard navigation - but NOT for paragraphs */
*:not(.paragraph):not([class*="paragraph--"]):focus-visible {
  outline: 2px solid var(--focus-color, #18453b);
  outline-offset: 2px;
}

/* Ensure paragraphs never show focus outline */
.paragraph:focus-visible,
[class*="paragraph--"]:focus-visible {
  outline: none !important;
}

/* Specific focus-visible styles for different elements */
a:focus-visible {
  outline: 2px solid var(--focus-color, #18453b);
  outline-offset: 3px;
  border-radius: 2px;
}

button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-color, #18453b);
  outline-offset: 2px;
}

/* Form elements focus-visible */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: none;
  border-color: var(--focus-color, #18453b);
  box-shadow: 0 0 0 0.2rem var(--focus-shadow, rgba(24, 69, 59, 0.25));
}

/* Button focus-visible - subtle style */
.btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  box-shadow: none;
}

/* Dark background focus-visible indicators */
.bg-dark a:focus-visible,
.bg-dark button:focus-visible,
.navbar-dark a:focus-visible,
.navbar-dark button:focus-visible {
  outline: 2px solid #8fc965;
  outline-offset: 2px;
}

/* Cards and interactive components */
.card:focus-visible,
.accordion-button:focus-visible {
  outline: 2px solid var(--focus-color, #18453b);
  outline-offset: 0;
  box-shadow: 0 0 0 0.2rem var(--focus-shadow, rgba(24, 69, 59, 0.25));
}

/* Navigation items */
.nav-link:focus-visible,
.dropdown-item:focus-visible {
  outline: 2px solid var(--focus-color, #18453b);
  outline-offset: -2px;
  background-color: rgba(24, 69, 59, 0.05);
}

/* Skip links - always visible on focus */
.skip-link:focus,
.skip-link:focus-visible {
  outline: 3px solid var(--focus-color, #18453b);
  outline-offset: 0;
  /* Ensure skip link is visible */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 10000 !important;
}

/* ==========================================================================
   Skip Links
   ========================================================================== */

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #18453b;
  color: #ffffff;
  padding: 12px 20px;
  text-decoration: none;
  z-index: 100000;
  font-weight: 700;
  font-size: 16px;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.skip-link:focus {
  top: 10px;
  left: 10px;
}

.skip-link:hover {
  background: #0d3625;
  color: #ffffff;
  text-decoration: underline;
}

/* Specific styling for visually-hidden-focusable skip link */
.visually-hidden-focusable.skip-link {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.visually-hidden-focusable.skip-link:focus,
.visually-hidden-focusable.skip-link:focus-visible {
  position: fixed !important;
  top: 10px !important;
  left: 10px !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  z-index: 100000 !important;
  background: #18453b !important;
  color: #ffffff !important;
  padding: 12px 20px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
  clip: auto !important;
  white-space: normal !important;
}

.visually-hidden-focusable.skip-link a {
  color: #ffffff !important;
  text-decoration: none !important;
}

.visually-hidden-focusable.skip-link a:focus,
.visually-hidden-focusable.skip-link a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   Screen Reader Only Content
   ========================================================================== */

.visually-hidden,
.sr-only {
  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;
}

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

/* ==========================================================================
   Color Contrast Fixes
   ========================================================================== */

/* Import accessible color configuration */
@import url('accessible-colors.css');

/* Legacy color variable support for backward compatibility */
:root {
  --accessible-muted-color: var(--text-muted, #5a6268);
  --accessible-gray: var(--text-secondary, #495057);
  --accessible-link: var(--text-link, #0066cc);
  --accessible-link-hover: var(--text-link-hover, #0052a3);
}

/* ==========================================================================
   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;
  }

  /* Disable transforms on hover */
  .card:hover,
  .egr-news-card:hover,
  .egr-logo:hover {
    transform: none !important;
  }

  /* Disable carousel auto-play */
  .carousel-item {
    transition: none !important;
  }

  /* Remove parallax effects */
  .parallax {
    background-attachment: scroll !important;
  }
}

/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */

@media (prefers-contrast: high) {
  /* Increase border visibility */
  .card,
  .btn,
  .form-control,
  .form-select {
    border-width: 2px !important;
    border-color: currentColor !important;
  }

  /* Stronger focus indicators */
  *:focus {
    outline-width: 4px !important;
    outline-style: solid !important;
  }

  /* Ensure text has strong contrast */
  body {
    color: #000000;
    background-color: #ffffff;
  }
}

/* ==========================================================================
   Keyboard Navigation Enhancements
   ========================================================================== */

/* Ensure logical tab order */
[tabindex] {
  position: relative;
}

/* Remove problematic tabindex values */
[tabindex="-1"]:not(.modal):not(.offcanvas):not([role="dialog"]) {
  tabindex: 0;
}

/* Ensure interactive elements are keyboard accessible */
.clickable,
[onclick],
[data-toggle],
[data-bs-toggle],
.card-link {
  cursor: pointer;
}

.clickable:not([tabindex]),
[onclick]:not([tabindex]),
[data-toggle]:not([tabindex]),
[data-bs-toggle]:not([tabindex]) {
  tabindex: 0;
}

/* Show focus within dropdown menus */
.dropdown-menu a:focus,
.dropdown-menu a:focus-visible,
.dropdown-menu button:focus,
.dropdown-menu button:focus-visible {
  background-color: #f8f9fa;
  outline: 2px solid var(--focus-color, #18453b);
  outline-offset: -2px;
}

/* Tab panel focus */
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:focus-visible,
.nav-pills .nav-link:focus,
.nav-pills .nav-link:focus-visible {
  border-color: var(--focus-color, #18453b);
  box-shadow: 0 0 0 0.2rem rgba(24, 69, 59, 0.25);
  z-index: 1;
}

/* Accordion focus */
.accordion-button:focus,
.accordion-button:focus-visible {
  z-index: 3;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(24, 69, 59, 0.25);
}

/* Card focus improvements */
.card:focus-within {
  box-shadow: 0 0 0 2px var(--focus-color, #18453b);
}

/* Ensure proper focus order in navigation */
.navbar-nav {
  display: flex;
  flex-direction: row;
}

.navbar-nav .nav-item {
  position: relative;
}

/* Skip redundant navigation */
.skip-nav {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-nav:focus {
  position: absolute;
  left: 10px;
  top: 10px;
  width: auto;
  height: auto;
  padding: 5px 10px;
  background: #18453b;
  color: #fff;
  z-index: 10000;
  text-decoration: none;
}

/* Modal and dialog focus trap indicators */
.modal.show,
.offcanvas.show {
  outline: 2px solid transparent;
}

.modal.show:focus-within,
.offcanvas.show:focus-within {
  outline-color: var(--focus-color, #18453b);
}

/* Improve focus for complex components */
.carousel-control-prev:focus,
.carousel-control-prev:focus-visible,
.carousel-control-next:focus,
.carousel-control-next:focus-visible {
  opacity: 1;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Data tables keyboard navigation */
table[role="table"] th[role="columnheader"][tabindex="0"]:focus {
  outline: 2px solid var(--focus-color, #18453b);
  outline-offset: -2px;
  background-color: rgba(24, 69, 59, 0.1);
}

/* Form field groups */
.form-group:focus-within {
  background-color: rgba(24, 69, 59, 0.05);
  border-radius: 4px;
  padding: 10px;
  margin: -10px;
}

/* Breadcrumb navigation */
.breadcrumb-item a:focus {
  outline-offset: 2px;
  text-decoration: underline;
}

/* Pagination focus */
.pagination .page-link:focus {
  z-index: 3;
  outline: 2px solid var(--focus-color, #18453b);
  outline-offset: -2px;
}

/* EGR Content Block focus styles */
.egr-content-block__link-button:focus,
.egr-content-block__link-button:focus-visible {
  outline: 2px solid var(--focus-color, #18453b);
  outline-offset: 2px;
  text-decoration: underline;
}

.egr-content-block:focus-within {
  box-shadow: 0 0 0 1px rgba(24, 69, 59, 0.2);
}

/* EGR Counter focus styles */
.egr-counter__item:focus,
.egr-counter__item:focus-visible {
  outline: 2px solid var(--focus-color, #18453b);
  outline-offset: 4px;
  transform: scale(1.02);
}

.egr-counter__item:focus .egr-counter__number {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Ensure counter items are keyboard navigable */
.egr-counter__item {
  position: relative;
  cursor: default;
  transition: transform 0.2s ease;
}

/* Ensure counter labels are accessible to screen readers */
.egr-counter__label {
  /* Ensure label is not hidden from screen readers */
  clip: auto !important;
  height: auto !important;
  width: auto !important;
  position: static !important;
  overflow: visible !important;
}

/* Improve screen reader context for counters */
.egr-counter__number-wrapper {
  /* Group related counter elements */
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem;
}

/* Ensure ARIA live regions work properly */
.egr-counter__number[aria-live="polite"] {
  /* Ensure changes are announced */
  position: relative;
}

/* Improve focus visibility for components with backgrounds */
.egr-content-block[style*="background-color"] .egr-content-block__link-button:focus,
.egr-counter-bg-wrapper[style*="background-color"] .egr-counter__item:focus {
  outline: 3px solid #ffffff;
  outline-offset: -1px;
  box-shadow: 0 0 0 5px var(--focus-color, #18453b);
}

/* EGR Cards focus styles */
.egr-card:focus,
.egr-card:focus-visible {
  outline: 2px solid var(--focus-color, #18453b);
  outline-offset: 2px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.egr-card__button:focus,
.egr-card__button:focus-visible {
  outline: 2px solid var(--focus-color, #18453b);
  outline-offset: 2px;
  text-decoration: underline;
}

/* EGR Profile Card focus styles */
.egr-profile-card:focus,
.egr-profile-card:focus-visible {
  outline: 2px solid var(--focus-color, #18453b);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(24, 69, 59, 0.1);
}

.egr-profile-card a:focus,
.egr-profile-card a:focus-visible {
  outline: 2px solid var(--focus-color, #18453b);
  outline-offset: 1px;
  text-decoration: underline;
}

/* EGR CTA Mixed focus styles */
.egr-cta-mixed .cta:focus,
.egr-cta-mixed .cta:focus-visible {
  outline: 2px solid var(--focus-color, #18453b);
  outline-offset: 4px;
  transform: scale(1.05);
}

.egr-cta-mixed .image a:focus,
.egr-cta-mixed .image a:focus-visible {
  outline: 3px solid var(--focus-color, #18453b);
  outline-offset: 2px;
  display: block;
}

/* EGR Media and Video focus styles */
.egr-media .play-button:focus,
.egr-media .video-play-button:focus,
.egr-video iframe:focus,
.egr-video video:focus {
  outline: 3px solid var(--focus-color, #18453b);
  outline-offset: 2px;
}

/* EGR Accordion focus improvements */
.egr-accordion__toggle:focus,
.egr-accordion__toggle:focus-visible {
  outline: 2px solid var(--focus-color, #18453b);
  outline-offset: -2px;
  background-color: rgba(24, 69, 59, 0.05);
}

/* EGR Tabs focus improvements */
.egr-tabs__tab:focus,
.egr-tabs__tab:focus-visible,
.egr-hv-tabs__tab:focus,
.egr-hv-tabs__tab:focus-visible {
  outline: 2px solid var(--focus-color, #18453b);
  outline-offset: -2px;
  z-index: 10;
}

/* EGR Link Card focus styles */
.egr_link_card__link:focus,
.egr_link_card__link:focus-visible {
  outline: 2px solid var(--focus-color, #18453b);
  outline-offset: 2px;
  text-decoration: underline;
  background-color: rgba(24, 69, 59, 0.05);
}

/* EGR Text CTAs focus styles */
.egr-text-ctas__link:focus,
.egr-text-ctas__link:focus-visible {
  outline: 2px solid var(--focus-color, #18453b);
  outline-offset: 2px;
  text-decoration: underline;
}

/* EGR Logos focus styles */
.egr-logos__item a:focus,
.egr-logos__item a:focus-visible {
  outline: 2px solid var(--focus-color, #18453b);
  outline-offset: 4px;
  transform: scale(1.1);
}

/* Ensure all interactive elements have visible focus */
.egr-button:focus,
.egr-button:focus-visible,
button.egr-button:focus,
button.egr-button:focus-visible {
  outline: 2px solid var(--focus-color, #18453b);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(24, 69, 59, 0.2);
}

/* Focus within containers */
.egr-aside:focus-within,
.egr-contact-map:focus-within,
.egr-divider:focus-within {
  box-shadow: 0 0 0 1px rgba(24, 69, 59, 0.2);
}

/* Improve keyboard navigation for complex layouts */
[role="article"]:focus {
  outline: 2px solid var(--focus-color, #18453b);
  outline-offset: 4px;
}

/* Ensure proper focus for components with dark backgrounds */
.msu-green *:focus,
.msu-green *:focus-visible,
[style*="background-color: #18453b"] *:focus,
[style*="background-color: #18453b"] *:focus-visible {
  outline-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   ARIA Live Regions
   ========================================================================== */

[aria-live="polite"],
[aria-live="assertive"] {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   Form Accessibility
   ========================================================================== */

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

/* Error messages */
.invalid-feedback {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #dc3545;
}

/* Success messages */
.valid-feedback {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #198754;
}

/* Form help text */
.form-text {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #5a6268; /* Improved contrast from #6c757d (4.48:1) to #5a6268 (5.67:1) */
}

/* ==========================================================================
   Image Accessibility
   ========================================================================== */

/* Ensure decorative images are hidden from screen readers */
img[alt=""],
img:not([alt]) {
  role: presentation;
}

/* Image error states */
img::before {
  content: attr(alt);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  padding: 1rem;
  text-align: center;
  color: #6c757d;
}

/* ==========================================================================
   Table Accessibility
   ========================================================================== */

/* Responsive tables with proper scroll indication */
.table-responsive {
  position: relative;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive:focus {
  outline: 3px solid #005a9c;
  outline-offset: 2px;
}

/* Zebra striping for better row distinction */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.02);
}

/* ==========================================================================
   Loading States
   ========================================================================== */

/* Accessible loading spinner */
.spinner-border,
.spinner-grow {
  display: inline-block;
  vertical-align: text-bottom;
}

.spinner-border-sm,
.spinner-grow-sm {
  vertical-align: baseline;
}

/* Loading text for screen readers */
.spinner-border .visually-hidden,
.spinner-grow .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;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  /* Ensure links are distinguishable in print */
  a[href]::after {
    content: " (" attr(href) ")";
  }

  /* Hide interactive elements that don't make sense in print */
  .no-print,
  button,
  .btn,
  .pagination,
  .carousel-control-prev,
  .carousel-control-next {
    display: none !important;
  }
}

/* ==========================================================================
   CRITICAL: Final Override - Remove ALL focus outlines from paragraphs
   ========================================================================== */

/* This section MUST be at the end to ensure highest specificity */
.paragraph,
.paragraph *,
[class*="paragraph--"],
[class*="paragraph--"] *,
.field--type-entity-reference-revisions .paragraph,
.field--type-entity-reference-revisions .paragraph * {
  outline: none !important;
  outline-color: transparent !important;
  outline-width: 0 !important;
  outline-style: none !important;
  box-shadow: none !important;
}

/* Prevent any focus styles on paragraph elements */
.paragraph:focus,
.paragraph:focus-within,
.paragraph:focus-visible,
.paragraph *:focus,
.paragraph *:focus-within,
.paragraph *:focus-visible,
[class*="paragraph--"]:focus,
[class*="paragraph--"]:focus-within,
[class*="paragraph--"]:focus-visible,
[class*="paragraph--"] *:focus,
[class*="paragraph--"] *:focus-within,
[class*="paragraph--"] *:focus-visible {
  outline: none !important;
  outline-color: transparent !important;
  outline-width: 0 !important;
  outline-style: none !important;
  box-shadow: none !important;
}