/**
 * Accessibility Enhancements
 * @package Dennis_Theme
 * @since 1.0.0
 */

/* ============================================
   WCAG 2.1 AA COMPLIANCE
   ============================================ */

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

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

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

/* Enhanced focus indicators */
*:focus {
  outline: none; /* Remove default, we'll add custom */
}

*:focus-visible {
  outline: 3px solid var(--color-accent, #c9a66b);
  outline-offset: 3px;
  border-radius: 3px;
  transition: outline-offset 0.2s ease;
}

/* Focus within containers */
.card:focus-within,
.project-card:focus-within {
  box-shadow: 0 0 0 3px var(--color-accent, #c9a66b);
  outline: 2px solid transparent;
}

/* Skip navigation */
.skip-navigation {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  text-align: center;
  background: var(--color-primary, #1a1a1a);
  color: var(--color-secondary, #f5f0eb);
  padding: 1rem;
  z-index: 100000;
  transition: top 0.3s ease;
}

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

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

/* Required field indicator */
[required]::after,
[aria-required="true"]::after {
  content: " *";
  color: var(--color-accent, #c9a66b);
  font-weight: bold;
}

/* Error states */
[aria-invalid="true"],
.is-invalid {
  border-color: #dc2626 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc2626' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px 20px;
  padding-right: 40px;
}

/* Success states */
[aria-invalid="false"],
.is-valid {
  border-color: #10b981 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2310b981' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px 20px;
  padding-right: 40px;
}

/* Form field focus */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-accent, #c9a66b);
  box-shadow: 0 0 0 3px rgba(201, 166, 107, 0.2);
}

/* ============================================
   MOTION PREFERENCES
   ============================================ */

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

  /* Disable smooth scroll */
  html {
    scroll-behavior: auto !important;
  }

  /* Disable Lenis */
  .lenis.lenis-smooth {
    scroll-behavior: auto !important;
  }

  /* Disable all GSAP animations */
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* Disable parallax */
  [data-animate="parallax"] {
    transform: none !important;
  }

  /* Show loader content immediately */
  .page-loader {
    display: none !important;
  }

  body.loading {
    overflow: auto !important;
  }

  body.loading main,
  body.loading header,
  body.loading footer {
    opacity: 1 !important;
  }
}

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

/* Ensure minimum 4.5:1 contrast for text */
.text-low-contrast {
  color: #1a1a1a; /* Update any low contrast text */
}

/* Link underlines for better visibility */
a:not(.btn):not(.card) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:not(.btn):not(.card):hover,
a:not(.btn):not(.card):focus {
  text-decoration-thickness: 2px;
}

/* Button contrast */
.btn {
  min-height: 44px;
  min-width: 44px;
  font-weight: 600;
}

/* Ensure decorative images don't get focus */
img[alt=""],
img:not([alt]) {
  user-select: none;
}

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

@media (prefers-contrast: high) {
  /* Increase border widths */
  *:focus-visible {
    outline-width: 4px !important;
  }

  /* Stronger shadows */
  .card,
  .btn {
    border: 2px solid currentColor;
  }

  /* Remove subtle effects */
  .card:hover {
    transform: none;
  }
}

/* ============================================
   DARK MODE ACCESSIBILITY
   ============================================ */

@media (prefers-color-scheme: dark) {
  /* Ensure sufficient contrast in dark mode */
  :root {
    --color-primary: #f5f0eb;
    --color-secondary: #1a1a1a;
  }

  /* Adjust focus indicators for dark backgrounds */
  *:focus-visible {
    outline-color: #d7bf97;
  }
}

/* ============================================
   TOUCH TARGETS
   ============================================ */

/* Minimum 44x44px touch targets (WCAG 2.5.5) */
button,
a,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
select {
  min-height: 44px;
  min-width: 44px;
}

/* Exception for inline links in text */
p a,
li a {
  min-height: auto;
  min-width: auto;
  padding: 2px 0;
}

/* Expand clickable area */
.card a::before,
.project-card a::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

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

[aria-live] {
  position: relative;
}

/* Style for polite announcements */
[aria-live="polite"] {
  /* Let screen readers announce when ready */
}

/* Style for assertive announcements */
[aria-live="assertive"] {
  font-weight: 600;
}

/* ============================================
   LANDMARK NAVIGATION
   ============================================ */

/* Visual indicators for landmarks (dev only) */
[role="banner"]::before,
[role="navigation"]::before,
[role="main"]::before,
[role="complementary"]::before,
[role="contentinfo"]::before {
  /* Hidden by default, can be enabled for testing */
  display: none;
}

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

@media (max-width: 768px) {
  /* Larger touch targets on mobile */
  button,
  a,
  input[type="button"],
  input[type="submit"] {
    min-height: 48px;
    min-width: 48px;
  }

  /* Better spacing for form fields */
  input,
  textarea,
  select {
    font-size: 16px; /* Prevent zoom on iOS */
  }
}

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

@media print {
  /* Show link URLs in print */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.875em;
  }

  /* Hide navigation elements */
  nav,
  .skip-link,
  .mobile-menu-toggle,
  .page-loader {
    display: none !important;
  }

  /* Ensure good contrast */
  * {
    color: #000 !important;
    background: #fff !important;
  }
}

/* ============================================
   KEYBOARD-ONLY NAVIGATION INDICATORS
   ============================================ */

/* Show hint for keyboard users */
.keyboard-user *:focus {
  outline: 3px solid var(--color-accent, #c9a66b) !important;
  outline-offset: 3px !important;
}

/* Hide mouse focus */
.mouse-user *:focus:not(:focus-visible) {
  outline: none !important;
}

/* ============================================
   ERROR PREVENTION
   ============================================ */

/* Confirm dialogs for destructive actions */
[data-confirm]::before {
  /* JavaScript handles confirmation */
}

/* Loading states */
button[disabled],
button[aria-busy="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  position: relative;
}

button[aria-busy="true"]::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  margin: auto;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
  to { transform: rotate(360deg); }
}

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

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  text-align: left;
  font-weight: 600;
  background-color: var(--color-secondary, #f5f0eb);
}

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

/* Responsive tables */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
  }
}

/* ============================================
   VIDEO/AUDIO ACCESSIBILITY
   ============================================ */

video,
audio {
  max-width: 100%;
}

/* Ensure controls are keyboard accessible */
video:focus,
audio:focus {
  outline: 3px solid var(--color-accent, #c9a66b);
  outline-offset: 3px;
}