/**
 * Slideshow styles for ADIT landing page
 * Controls layout and appearance of screenshot carousel
 */

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

:root {
  /* Slideshow spacing and sizing */
  --slideshow-nav-padding: 12px;
  --slideshow-nav-offset: 10px;
  --slideshow-nav-font-size: 18px;
  --slideshow-nav-border-radius: 3px;

  /* Slideshow colors */
  --slideshow-nav-bg: rgba(0, 0, 0, 0.5);
  --slideshow-nav-bg-hover: rgba(0, 0, 0, 0.8);
  --slideshow-nav-color: white;

  /* Dot navigation */
  --slideshow-dot-size: 12px;
  --slideshow-dot-spacing: 4px;
  --slideshow-dot-bg: rgba(255, 255, 255, 0.5);
  --slideshow-dot-bg-active: rgba(255, 255, 255, 0.9);

  /* Animation timing */
  --slideshow-transition-duration: 0.6s;

  /* Focus indicator */
  --slideshow-focus-outline: 2px solid #fff;
  --slideshow-focus-outline-offset: 2px;
}

.slideshow-container {
  position: relative;
  max-width: 100%;
  margin: 2rem auto;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.slides-wrapper {
  display: flex;
  transition: transform var(--slideshow-transition-duration) ease-in-out;
  width: 100%;
}

.slide {
  min-width: 100%;
}

.slide img {
  width: 100%;
  display: block;
}

/* Navigation buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  padding: var(--slideshow-nav-padding);
  color: var(--slideshow-nav-color);
  font-size: var(--slideshow-nav-font-size);
  background-color: var(--slideshow-nav-bg);
  user-select: none;
  transform: translateY(-50%);
  border-radius: var(--slideshow-nav-border-radius);
  border: none;
  transition: background-color 0.2s ease;
}

.next {
  right: var(--slideshow-nav-offset);
}

.prev {
  left: var(--slideshow-nav-offset);
}

.prev:hover,
.next:hover {
  background-color: var(--slideshow-nav-bg-hover);
}

/* Focus indicators for keyboard navigation */
.prev:focus-visible,
.next:focus-visible,
.dot:focus-visible {
  outline: var(--slideshow-focus-outline);
  outline-offset: var(--slideshow-focus-outline-offset);
}

/* Dots */
.dot-container {
  text-align: center;
  position: absolute;
  bottom: var(--slideshow-nav-offset);
  width: 100%;
}

.dot {
  cursor: pointer;
  height: var(--slideshow-dot-size);
  width: var(--slideshow-dot-size);
  margin: 0 var(--slideshow-dot-spacing);
  background-color: var(--slideshow-dot-bg);
  border-radius: 50%;
  display: inline-block;
  border: none;
  padding: 0;
  transition: background-color 0.2s ease;
}

.dot.active,
.dot[aria-pressed="true"] {
  background-color: var(--slideshow-dot-bg-active);
}