/**
 * Accessibility Focus Indicators
 *
 * This file adds visible focus indicators for keyboard navigation
 * to ensure WCAG 2.1 Level AA compliance (Success Criterion 2.4.7: Focus Visible)
 *
 * Uses a combination of outline and box-shadow for cross-browser compatibility
 * and to ensure focus indicators are fully visible around all elements.
 */

/* ============================================
   Fix for Parent Overflow Clipping
   ============================================ */

/* Prevent parent containers from clipping focus indicators */
.ory_elements__grid__roeg5j0,
.ory_elements__form__u030kk0,
.ory_elements__card__1t5ly150 {
  overflow: visible !important;
}

/* For elements that need scrolling, add padding to accommodate focus rings */
.ory_elements__grid__roeg5j0[style*="overflow"] {
  padding: 8px !important;
  overflow: auto !important;
}

/* ============================================
   Navigation Menu Links
   ============================================ */

/* Focus indicator for navigation menu links */
.ory_elements__menu_link__1mb45s82 a:focus,
.ory_elements__menu_link__1mb45s82 a:focus-visible {
  outline: 3px solid var(--ory-theme-accent-def) !important;
  outline-offset: 2px !important;
  border-radius: 0.25rem;
}

/* Enhanced focus for selected/active navigation links */
.ory_elements__nav__u0o6663 a:focus,
.ory_elements__nav__u0o6663 a:focus-visible {
  outline: 3px solid var(--ory-theme-accent-emphasis) !important;
  outline-offset: 2px !important;
}

/* Hover state for navigation links (improves visual feedback) */
.ory_elements__menu_link__1mb45s82 a:hover {
  background-color: var(--ory-theme-background-subtle);
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}

/* ============================================
   Buttons
   ============================================ */

/* Enhanced focus for ALL buttons with visible ring */
.ory_elements__button__xkj8ku0:focus,
.ory_elements__button__xkj8ku0:focus-visible,
button:focus,
button:focus-visible,
input[type="submit"]:focus,
input[type="submit"]:focus-visible,
input[type="button"]:focus,
input[type="button"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--ory-theme-accent-def),
    0 0 0 6px rgba(61, 83, 245, 0.3) !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Focus enhancement for social login buttons */
.ory_elements__button_social__16pmekl0:focus,
.ory_elements__button_social__16pmekl0:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--ory-theme-accent-def),
    0 0 0 6px rgba(61, 83, 245, 0.3) !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Focus for link-style buttons */
.ory_elements__button_link__w27ftz0:focus,
.ory_elements__button_link__w27ftz0:focus-visible {
  outline: 3px solid var(--ory-theme-accent-def) !important;
  outline-offset: 2px !important;
  border-radius: 0.25rem;
  text-decoration: underline;
}

/* Focus for error variant buttons */
.ory_elements__button_variant_error__xkj8ku7:focus,
.ory_elements__button_variant_error__xkj8ku7:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--ory-theme-error-emphasis),
    0 0 0 6px rgba(223, 22, 66, 0.3) !important;
  position: relative !important;
  z-index: 10 !important;
}

/* ============================================
   Form Elements
   ============================================ */

/* Checkbox focus enhancement with visible ring */
.ory_elements__checkbox__15kln121:focus,
.ory_elements__checkbox__15kln121:focus-visible,
input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--ory-theme-accent-def) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(61, 83, 245, 0.15) !important;
}

/* Input field focus enhancement */
.ory_elements__input_field__1tgfa2l1:focus,
.ory_elements__input_field__1tgfa2l1:focus-visible,
input[type="text"]:focus,
input[type="text"]:focus-visible,
input[type="email"]:focus,
input[type="email"]:focus-visible,
input[type="password"]:focus,
input[type="password"]:focus-visible,
input[type="number"]:focus,
input[type="number"]:focus-visible,
input[type="tel"]:focus,
input[type="tel"]:focus-visible,
input[type="url"]:focus,
input[type="url"]:focus-visible,
input[type="search"]:focus,
input[type="search"]:focus-visible,
input[type="date"]:focus,
input[type="date"]:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
  outline: none !important;
  border-color: var(--ory-theme-accent-muted) !important;
  box-shadow: 0 0 0 3px var(--ory-theme-accent-def),
    0 0 0 6px rgba(61, 83, 245, 0.3) !important;
  position: relative !important;
  z-index: 10 !important;
}

/* ============================================
   Card Gradient (Quick Action Cards)
   ============================================ */

/* Focus for card gradient links (e.g., Sign in, Create account cards) */
.ory_elements__card_gradient__1goa44s1:focus,
.ory_elements__card_gradient__1goa44s1:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px var(--ory-theme-accent-def),
    0 0 0 8px rgba(61, 83, 245, 0.3) !important;
  position: relative !important;
  z-index: 10 !important;
}

/* ============================================
   General Link Focus
   ============================================ */

/* Focus for general anchor links */
a:focus-visible {
  outline: 3px solid var(--ory-theme-accent-def) !important;
  outline-offset: 2px !important;
  border-radius: 0.125rem;
}

/* ============================================
   Mobile Menu Toggle
   ============================================ */

/* Focus for mobile menu toggle label */
.ory_elements__nav__u0o6660 > .ory_elements__nav__u0o6661 label:focus-within {
  outline: 3px solid var(--ory-theme-accent-def) !important;
  outline-offset: 2px !important;
  border-radius: 0.25rem;
}

/* ============================================
   High Contrast Mode Support
   ============================================ */

/* Ensure focus indicators are visible in Windows High Contrast Mode */
@media (prefers-contrast: high) {
  *:focus-visible {
    outline-width: 4px !important;
    outline-offset: 4px !important;
  }
}

/* ============================================
   Reduced Motion Support
   ============================================ */

/* Remove transitions for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ory_elements__menu_link__1mb45s82 a:hover {
    transition: none;
  }
}