/**
 * Hero and Carousel Accessibility Enhancements
 * WCAG 2.2 Level A and AA Compliance
 */

/* ==========================================================================
   1. Focus Indicators (WCAG 2.4.7, 2.4.11)
   ========================================================================== */

/* Enhanced focus indicators for all interactive elements */
.homepage-hero-image a:focus,
.homepage-hero-image button:focus,
.home-hero-button a:focus,
.carousel-control-prev:focus,
.carousel-control-next:focus,
.carousel-indicators button:focus {
  outline: 3px solid #47CF73;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(71, 207, 115, 0.3);
}

/* Focus visible for keyboard navigation only */
.homepage-hero-image a:focus:not(:focus-visible),
.homepage-hero-image button:focus:not(:focus-visible),
.home-hero-button a:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* High contrast focus for carousel controls */
.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible {
  background: rgba(0, 0, 0, 0.8);
}

/* ==========================================================================
   2. Color Contrast (WCAG 1.4.3, 1.4.6)
   ========================================================================== */

/* Ensure text has sufficient contrast on hero images */
.slide-content {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 4px;
}

/* Ensure white text on dark backgrounds meets WCAG AA (4.5:1) */
.hero-title,
.slide-title,
.home-hero-description,
.slide-description,
.home-hero-description p,
.slide-description p {
  color: #ffffff !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

/* Button contrast improvements */
.home-hero-button a {
  background-color: #18453b;
  color: #ffffff;
  min-height: 44px; /* WCAG 2.5.5 Target Size */
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.home-hero-button a:hover,
.home-hero-button a:focus {
  background-color: #0d3625;
  color: #ffffff;
  text-decoration: underline;
}

/* Carousel caption contrast */
.homepage-hero-image .carousel-caption {
  background: linear-gradient(
    to top,
    rgba(13, 54, 37, 0.95) 0%,
    rgba(13, 54, 37, 0.8) 40%,
    transparent 100%
  );
}

/* ==========================================================================
   3. Target Size (WCAG 2.5.5, 2.5.8)
   ========================================================================== */

/* Ensure all clickable elements meet minimum target size */
/* Using padding to achieve 44px clickable area while keeping visual size smaller */
.carousel-indicators button {
  width: 12px;
  height: 12px;
  padding: 16px; /* This creates a 44px clickable area (12px + 16px*2 = 44px) */
  margin: 0 4px;
  background-clip: content-box; /* Ensures background color only fills the 12x12 area */
}

.carousel-control-prev,
.carousel-control-next {
  width: 60px;
  min-height: 100px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 44px;
  height: 44px;
}

/* ==========================================================================
   4. Motion and Animation (WCAG 2.3.3)
   ========================================================================== */

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .carousel-item {
    transition: none !important;
  }
  
  .home-hero-title,
  .home-hero-description,
  .home-hero-button,
  .slide-content {
    animation: none !important;
  }
  
  .carousel {
    transition: none !important;
  }
  
  /* Disable auto-play when reduced motion is preferred */
  .carousel[data-bs-ride="carousel"] {
    data-bs-interval: false;
  }
}

/* Removed play/pause button functionality */

/* ==========================================================================
   5. Screen Reader Support (WCAG 4.1.2, 4.1.3)
   ========================================================================== */

/* Visually hidden but accessible to screen readers */
.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;
}

/* Live region for carousel updates */
.carousel-live-region {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   6. High Contrast Mode Support
   ========================================================================== */

@media (prefers-contrast: high) {
  .slide-content {
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid white;
  }
  
  .home-hero-button a {
    border: 2px solid white;
  }
  
  .carousel-indicators button {
    border-width: 3px;
  }
  
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    filter: contrast(2);
  }
}

/* Windows High Contrast Mode */
@media screen and (-ms-high-contrast: active) {
  .slide-content {
    border: 2px solid windowText;
  }
  
  .home-hero-button a {
    border: 2px solid buttonText;
  }
}

/* ==========================================================================
   7. Touch Target Spacing (WCAG 2.5.8 Level AA)
   ========================================================================== */

/* Ensure adequate spacing between interactive elements */
.home-hero-button {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.carousel-indicators {
  gap: 8px;
}

/* ==========================================================================
   8. Error Prevention and Recovery (WCAG 3.3.4)
   ========================================================================== */

/* Clear link purposes */
.home-hero-button a::after {
  content: " (opens in same window)";
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.home-hero-button a[target="_blank"]::after {
  content: " (opens in new tab)";
}

/* ==========================================================================
   9. Orientation (WCAG 1.3.4)
   ========================================================================== */

/* Ensure content works in both orientations */
@media (orientation: portrait) {
  .slide-content {
    max-width: 100%;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .slide-content {
    position: relative;
    transform: none;
    top: auto;
    left: auto;
    margin-top: 1rem;
  }
}

/* ==========================================================================
   10. Text Spacing (WCAG 1.4.12)
   ========================================================================== */

/* Support for user text spacing preferences */
.hero-title,
.slide-title,
.home-hero-description,
.slide-description {
  line-height: 1.5 !important;
  letter-spacing: 0.12em;
  word-spacing: 0.16em;
}

.home-hero-description p,
.slide-description p {
  margin-bottom: 2em;
}