/**
 * Keyboard Accessibility Styles
 * Focus indicators for video scroll sections
 */

/* Focus indicator for sections */
.sequel-video-scroll__section:focus {
  outline: 3px solid #005C7A;
  outline-offset: -3px;
  position: relative;
}

.sequel-video-scroll__section:focus-visible {
  outline: 3px solid #005C7A;
  outline-offset: -3px;
}

/* Skip outline for mouse users */
.sequel-video-scroll__section:focus:not(:focus-visible) {
  outline: none;
}

/* Ensure content is still accessible when focused */
.sequel-video-scroll__section:focus .sequel-video-scroll__content {
  position: relative;
  z-index: 11;
}

/* Visual hint when section is keyboard-focused and active */
.sequel-video-scroll__section:focus.is-active::before {
  display: none !important;
  /* Temp: hide */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 3px solid #005C7A;
  pointer-events: none;
  z-index: 5;
  border-radius: 4px;
}

/* Screen reader only text */
.sequel-video-scroll__sr-instructions {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  white-space: nowrap !important;
}