/* =============================================================
   Karmi Family Archive — Shared Accessibility Styles
   Loaded on every page to ensure consistent keyboard & screen-
   reader support across the site.
   ============================================================= */

/* --- Skip-to-main-content link ---
   Invisible until keyboard-focused; slides down into view.     */
.skip-link {
  position: fixed;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 22px;
  background: #1a1f36;
  color: #9cc2ff;
  border: 2px solid #9cc2ff;
  border-radius: 0 0 10px 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Hebrew', Arial, sans-serif;
  text-decoration: none;
  z-index: 99999;
  white-space: nowrap;
  transition: top 0.2s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #9cc2ff;
  outline-offset: 2px;
}

/* --- Visible focus ring ---
   Ensures every focusable element shows a clear indicator when
   reached by keyboard (Tab key). Uses :focus-visible so it only
   appears for keyboard navigation, not mouse clicks.            */
:focus-visible {
  outline: 3px solid #9cc2ff !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* Inputs & textareas: keep the border-highlight and add ring    */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #9cc2ff !important;
  outline-offset: 0 !important;
  border-color: #9cc2ff !important;
}

/* Buttons inside SVG / canvas areas where ring looks odd        */
.no-focus-ring:focus-visible {
  outline: none !important;
}

/* --- Minimum tap/click target size hint (for older users) ---
   Ensures interactive elements are at least 44×44 CSS px.       */
button,
[role="button"],
a,
input[type="checkbox"],
input[type="radio"] {
  min-height: 36px; /* relaxed — avoids breaking compact controls */
}
/* Override for controls that intentionally stay compact          */
.level-btn,
.lang-btn,
.controls-toggle {
  min-height: unset;
}

/* --- Reduced-motion respect ---
   Users who prefer no animation get none.                        */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- High-contrast footer links (replaces very low opacity) --- */
footer a:focus-visible,
.footer a:focus-visible {
  outline: 3px solid #9cc2ff !important;
  opacity: 1 !important;
}