/* ==========================================
   FOCUS VISIBLE STYLES (WCAG 2.2 2.4.7)
   Видимый фокус для клавиатурной навигации
   ========================================== */

/* ✅ Базовый стиль фокуса для всех элементов */
*:focus-visible {
  outline: 3px solid #0052cc;
  outline-offset: 2px;
}

/* ==========================================
   BUTTON & LINK FOCUS STYLES
   ========================================== */

button:focus-visible,
.btn:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible {
  outline: 3px solid #0052cc;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(0, 82, 204, 0.1);
}

a:focus-visible {
  outline: 3px dashed #0052cc;
  outline-offset: 4px;
  border-radius: 2px;
}

/* ==========================================
   FORM ELEMENTS FOCUS
   ========================================== */

input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="password"]:focus-visible,
input[type="search"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #0052cc;
  outline-offset: 2px;
  border-color: #0052cc;
}

/* ==========================================
   CHECKBOX & RADIO FOCUS
   ========================================== */

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 3px solid #0052cc;
  outline-offset: 4px;
}

/* ==========================================
   HIGH CONTRAST MODE SUPPORT
   ========================================== */

@media (prefers-contrast: more) {
  *:focus-visible {
    outline-width: 4px;
    outline-color: #000;
  }
  
  button:focus-visible,
  .btn:focus-visible {
    outline: 4px solid #000;
    box-shadow: 0 0 0 8px #ffff00;
  }
}

/* ==========================================
   DARK MODE SUPPORT
   ========================================== */

@media (prefers-color-scheme: dark) {
  *:focus-visible {
    outline-color: #60a5fa;  /* Более светлый синий на тёмном */
  }
  
  button:focus-visible,
  .btn:focus-visible,
  input[type="button"]:focus-visible {
    outline-color: #60a5fa;
    box-shadow: 0 0 0 6px rgba(96, 165, 250, 0.1);
  }
  
  a:focus-visible {
    outline-color: #60a5fa;
  }
}

/* ==========================================
   VISIBLE FOCUS INDICATOR (для браузеров без :focus-visible)
   ========================================== */

button:focus,
.btn:focus,
input[type="button"]:focus,
input[type="submit"]:focus {
  outline: 3px solid #0052cc;
  outline-offset: 2px;
}

/* ==========================================
   REMOVE DEFAULT OUTLINE ТОЛЬКО ЕСЛИ ЕСТЬ FOCUS-VISIBLE
   ========================================== */

*:focus:not(:focus-visible) {
  outline: none;
}