/* Accessibility-specific styles */

/*
 * 1. Visually hide an element, but keep it available for screen readers.
 * 2. Use in conjunction with .focusable to make the element focusable on keyboard interaction.
 */
.br-visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/*
 * Skip link styles
 * Hidden by default, slides down when focused.
 */
.br-skip-link {
    position: absolute;
    top: 0;
    left: 5%;
    background: #fff;
    color: #000;
    padding: 15px;
    z-index: 100000;
    border: 1px solid #ccc;
    border-radius: 0 0 4px 4px;
    text-decoration: none;
    font-weight: bold;
    
    /* Hide visually but keep focusable */
    transform: translateY(-100%);
    transition: transform 0.2s ease-in-out;
}

.br-skip-link:focus {
    /* Show when focused */
    transform: translateY(0);
    outline: 2px solid #000; /* Ensure visibility when focused */
}


/*
 * 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;
  }
}