/* === ACCESSIBILITY ENHANCEMENTS (WCAG 2.1 AA COMPLIANT) === */

/* Skip to main content link - only visible when focused */
.visually-hidden-focusable {
  top: 10px;
  left: 10px;
  z-index: 99999;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
  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;
}

/* Enhanced focus indicators - only for interactive elements */
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus,
[role="button"]:focus {
  outline: 1px solid rgba(255, 209, 102, 0.5);
  outline-offset: 1px;
}

/* Remove focus outline from non-interactive elements */
section:focus,
div:focus,
main:focus,
article:focus,
aside:focus,
header:focus,
footer:focus {
  outline: none;
}

/* Improve button focus states - remove aggressive styling */
.btn:focus {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 0.25rem rgba(255, 209, 102, 0.25);
}

.nav-link:focus {
  outline: none;
  background-color: rgba(255, 209, 102, 0.1);
  border-radius: 0.25rem;
}

.navbar-brand:focus {
  outline: 1px solid rgba(255, 209, 102, 0.5);
  outline-offset: 1px;
}

/* Card focus states - disable conflicting transforms for 3D tilt cards */
.card-custom:focus-within:not([data-tilt]) {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(255, 209, 102, 0.15);
}

/* Remove focus outline from tilt cards to prevent 3D rotation mismatch */
[data-tilt]:focus,
[data-tilt] a:focus,
[data-tilt]:focus-within,
.tilt-card:focus,
.tilt-card a:focus {
  outline: none !important;
}

/* Subtle focus indicator that works with 3D rotation - uses inner glow instead of outline */
[data-tilt] a:focus .tilt-card {
  box-shadow: 
    0 0 0 1px rgba(255, 209, 102, 0.4) inset,
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(255, 209, 102, 0.15) !important;
  transition: box-shadow 0.2s ease;
}

/* Ensure sufficient color contrast for text */
.text-light-emphasis {
  color: #e9ecef !important; /* Higher contrast than default */
}

.text-secondary {
  color: #adb5bd !important; /* Improved contrast */
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .text-white {
    color: #ffffff !important;
  }
  
  .text-light-emphasis {
    color: #f8f9fa !important;
  }
  
  .border {
    border-color: #ffffff !important;
  }
}

/* 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;
  }
  
  [data-aos] {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Ensure interactive elements are large enough (44px minimum) */
.btn,
.nav-link,
.navbar-toggler {
  min-height: 44px;
  min-width: 44px;
}

/* Improve form focus indicators when forms are added */
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 0.25rem rgba(255, 209, 102, 0.25);
}

/* Screen reader only text */
.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;
}

/* Note: Decorative elements should have aria-hidden="true" in HTML, not CSS */

/* High contrast borders for better definition */
@media (prefers-contrast: high) {
  .card-custom,
  .tilt-card {
    border: 2px solid #ffffff !important;
  }
  
  .glass-header {
    border-bottom: 2px solid #ffffff !important;
  }
}