/**
 * Accessibility улучшения для КООП МЕДИА
 *
 * Восстанавливает :focus индикаторы для keyboard navigation
 * @since 2025.12.04
 */

/* ==========================================================================
   Focus Visible Styles
   ========================================================================== */

/**
 * Восстанавливаем outline для keyboard navigation
 * focus-visible показывает outline только при навигации с клавиатуры,
 * но не при клике мышью
 */

/* Кнопки */
button:focus-visible,
.alm-load-more-btn:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible {
  outline: 2px solid #3381df;
  outline-offset: 2px;
  transition: outline-offset 0.2s ease;
}

/* Ссылки */
a:focus-visible {
  outline: 2px solid #3381df;
  outline-offset: 2px;
  transition: outline-offset 0.2s ease;
}

/* Формы */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #3381df;
  outline-offset: 0;
  border-color: #3381df;
}

/* Поисковая форма */
#searchform input[type="text"]:focus-visible {
  outline: 2px solid #3381df;
  outline-offset: -2px;
}

/* Меню навигации */
.header-menu a:focus-visible,
.mobile-menu-items a:focus-visible {
  outline: 2px solid #3381df;
  outline-offset: 2px;
}

/* Карточки постов */
.post a:focus-visible,
.post__title a:focus-visible {
  outline: 2px solid #3381df;
  outline-offset: 2px;
}

/* Логотип */
.main-logo:focus-visible {
  outline: 2px solid #3381df;
  outline-offset: 4px;
  border-radius: 4px;
}

/* Иконки и интерактивные элементы */
.header__search:focus-visible,
.mobile-burger:focus-visible {
  outline: 2px solid #3381df;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Ajax Load More кнопка */
.ajax-load-more-wrap .alm-load-more-btn:focus-visible {
  outline: 2px solid #3381df;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(51, 129, 223, 0.1);
}

/* Compilation sidebar кнопки */
.compilation__button:focus-visible,
.compilation__count:focus-visible {
  outline: 2px solid #3381df;
  outline-offset: 2px;
}

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

/**
 * Поддержка Windows High Contrast Mode
 */
@media (prefers-contrast: high) {
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline-width: 3px;
    outline-offset: 3px;
  }
}

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

/**
 * Отключаем transitions для пользователей с настройкой reduced motion
 */
@media (prefers-reduced-motion: reduce) {
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    transition: none;
  }
}

/* ==========================================================================
   Skip Links (для screen readers)
   ========================================================================== */

/**
 * Skip to content ссылка для screen readers
 * Показывается только при фокусе с клавиатуры
 */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #3381df;
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 100000;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* ==========================================================================
   Screen Reader Only Utility
   ========================================================================== */

/**
 * Utility class для элементов, видимых только для screen readers
 */
.sr-only: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;
}

/* ==========================================================================
   Focus Within Styles
   ========================================================================== */

/**
 * Подсветка родительских элементов при фокусе на дочерних
 */
.header-menu li:focus-within {
  background-color: rgba(51, 129, 223, 0.05);
}

.post:focus-within {
  box-shadow: 0 0 0 2px rgba(51, 129, 223, 0.2);
  transition: box-shadow 0.2s ease;
}

/* ==========================================================================
   Mobile Touch Target Size
   ========================================================================== */

/**
 * Обеспечиваем минимальный размер touch targets (44x44px) для мобильных устройств
 */
@media (max-width: 767px) {
  button,
  a,
  input[type="button"],
  input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Исключения для элементов, которые должны быть меньше */
  .post__title a,
  .header-menu a {
    min-height: auto;
    min-width: auto;
  }
}