/* ================================================================
   Версия для слабовидящих — CSS
   Сайт: nakhodka-city.ru
   Приказ Минцифры № 953, ГОСТ Р 52872-2019 (AA), WCAG 2.1
   ================================================================ */

/* ---- Skip-link (WCAG 2.4.1) ---- */
#vi-skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 2147483647;
  background: #000;
  color: #fff;
  padding: 12px 24px;
  font-size: 16px;
  font-family: Arial, sans-serif;
  text-decoration: none;
  border: 2px solid #fff;
}
#vi-skip-link:focus {
  top: 0;
  outline: 3px solid #ffdd00;
}

/* ---- Переключатель ---- */
#vi-toggle-link {
  cursor: pointer;
}

/* ---- Панель ---- */
#vi-panel {
  display: none;
  position: relative;
  z-index: 2147483646;
  background: #f0f0f0;
  border-bottom: 3px solid #333;
  padding: 12px 20px;
  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
  color: #222 !important;
  line-height: 1.6;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
#vi-panel.open { display: block; }
#vi-panel .vi-panel-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
#vi-panel .vi-group {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
#vi-panel .vi-group-label {
  font-weight: bold;
  font-size: 14px;
  color: #333;
}
#vi-panel .vi-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 6px 12px;
  border: 2px solid #999;
  background: #fff;
  color: #333;
  font-size: 14px;
  font-family: Arial, sans-serif;
  cursor: pointer;
  border-radius: 4px;
}
#vi-panel .vi-btn:hover,
#vi-panel .vi-btn:focus {
  border-color: #333;
  background: #e8e8e8;
}
#vi-panel .vi-btn.active {
  border-color: #0066cc;
  background: #0066cc;
  color: #fff;
}
#vi-panel .vi-btn:focus {
  outline: 3px solid #ffdd00;
  outline-offset: 2px;
}
#vi-panel .vi-divider {
  width: 1px;
  height: 32px;
  background: #bbb;
}
#vi-panel .vi-reset {
  margin-left: auto;
  background: #fff;
  border: 2px solid #cc3333;
  color: #cc3333;
  font-weight: bold;
}
#vi-panel .vi-reset:hover {
  background: #cc3333;
  color: #fff;
}
#vi-panel .vi-close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #666;
  padding: 4px 8px;
  min-width: 44px;
  min-height: 44px;
}
#vi-panel .vi-close:hover { color: #333; }
#vi-panel .vi-feedback {
  font-size: 13px;
  color: #555;
  text-decoration: underline;
}

/* ================================================================
   РЕЖИМ ДЛЯ СЛАБОВИДЯЩИХ
   ================================================================ */

/* ---- Базовые ---- */
body.vi-mode {
  font-family: Arial, Verdana, sans-serif !important;
  font-size: 20px !important;
  line-height: 1.5 !important;
  color: #000 !important;
  background: #fff !important;
  background-image: none !important;
  transition: none !important;
  animation: none !important;
}
body.vi-mode * {
  transition: none !important;
  animation: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
body.vi-mode *:focus {
  outline: 3px solid #0066cc !important;
  outline-offset: 2px !important;
}

/* ---- Размер шрифта ---- */
body.vi-mode.vi-font-medium { font-size: 24px !important; }
body.vi-mode.vi-font-large { font-size: 30px !important; }

body.vi-mode.vi-font-medium *:not(#vi-panel):not(#vi-panel *):not(#vi-skip-link) {
  font-size: inherit !important;
}
body.vi-mode.vi-font-large *:not(#vi-panel):not(#vi-panel *):not(#vi-skip-link) {
  font-size: inherit !important;
}

/* Иерархия заголовков сохраняется через em */
body.vi-mode h1 { font-size: 1.8em !important; }
body.vi-mode h2 { font-size: 1.5em !important; }
body.vi-mode h3 { font-size: 1.25em !important; }
body.vi-mode h4 { font-size: 1.1em !important; }
body.vi-mode h5 { font-size: 1em !important; }
body.vi-mode h6 { font-size: 0.9em !important; }

/* Мелкий текст для метаданных */
body.vi-mode .date,
body.vi-mode .news-card .date,
body.vi-mode .widget li {
  font-size: 0.85em !important;
}

/* ---- Межстрочный интервал ---- */
body.vi-mode.vi-lh-15 { line-height: 1.5 !important; }
body.vi-mode.vi-lh-15 *:not(#vi-panel):not(#vi-panel *) { line-height: 1.5 !important; }
body.vi-mode.vi-lh-20 { line-height: 2 !important; }
body.vi-mode.vi-lh-20 *:not(#vi-panel):not(#vi-panel *) { line-height: 2 !important; }

/* ---- Шрифт с засечками ---- */
body.vi-mode.vi-font-serif,
body.vi-mode.vi-font-serif *:not(#vi-panel):not(#vi-panel *) {
  font-family: "Times New Roman", Georgia, serif !important;
}

/* ================================================================
   ЦВЕТОВЫЕ СХЕМЫ
   ================================================================ */

/* --- Ч/Б --- */
body.vi-mode.vi-theme-bw,
body.vi-mode.vi-theme-bw *:not(#vi-panel):not(#vi-panel *):not(#vi-skip-link) {
  background-color: #fff !important;
  background-image: none !important;
  color: #000 !important;
  border-color: #000 !important;
}
body.vi-mode.vi-theme-bw a:not(#vi-panel a):not(#vi-skip-link) {
  color: #0000cc !important;
  text-decoration: underline !important;
}

/* --- Инверсия --- */
body.vi-mode.vi-theme-inverse,
body.vi-mode.vi-theme-inverse *:not(#vi-panel):not(#vi-panel *):not(#vi-skip-link) {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
  border-color: #fff !important;
}
body.vi-mode.vi-theme-inverse a:not(#vi-panel a):not(#vi-skip-link) {
  color: #ffff00 !important;
  text-decoration: underline !important;
}
body.vi-mode.vi-theme-inverse img:not(#vi-panel img) {
  filter: invert(1) hue-rotate(180deg) !important;
}

/* --- Чёрный на жёлтом --- */
body.vi-mode.vi-theme-yellow,
body.vi-mode.vi-theme-yellow *:not(#vi-panel):not(#vi-panel *):not(#vi-skip-link) {
  background-color: #ffff00 !important;
  background-image: none !important;
  color: #000 !important;
  border-color: #000 !important;
}
body.vi-mode.vi-theme-yellow a:not(#vi-panel a):not(#vi-skip-link) {
  color: #0000cc !important;
  text-decoration: underline !important;
}

/* --- Тёмный на бежевом --- */
body.vi-mode.vi-theme-beige,
body.vi-mode.vi-theme-beige *:not(#vi-panel):not(#vi-panel *):not(#vi-skip-link) {
  background-color: #f7f3d6 !important;
  background-image: none !important;
  color: #2d2d2d !important;
  border-color: #6d6d6d !important;
}
body.vi-mode.vi-theme-beige a:not(#vi-panel a):not(#vi-skip-link) {
  color: #003366 !important;
  text-decoration: underline !important;
}

/* ================================================================
   ОТКЛЮЧЕНИЕ ИЗОБРАЖЕНИЙ
   ================================================================ */
body.vi-mode.vi-images-off img:not(#vi-panel img):not(#vi-skip-link img) {
  display: none !important;
}
body.vi-mode.vi-images-off *:not(#vi-panel):not(#vi-panel *) {
  background-image: none !important;
}
body.vi-mode.vi-images-off svg:not(#vi-panel svg) {
  display: none !important;
}
/* Сохраняем SVG-иконки в ссылках с aria-label */
body.vi-mode.vi-images-off a[aria-label] svg {
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  filter: grayscale(1) !important;
}
/* Alt-текст (создаётся через JS) */
.vi-img-alt-text {
  display: inline-block !important;
  padding: 4px 8px !important;
  font-size: 0.9em !important;
  color: inherit !important;
  background: inherit !important;
  border: 1px dashed currentColor !important;
  font-style: italic !important;
  margin: 4px 0 !important;
}

/* ================================================================
   КОРРЕКТИРОВКИ ЭЛЕМЕНТОВ САЙТА
   ================================================================ */

/* Навигация */
body.vi-mode .main-nav {
  border-bottom: 2px solid currentColor !important;
}
body.vi-mode .main-nav ul {
  display: block !important;
}
body.vi-mode .main-nav li {
  display: block !important;
}
body.vi-mode .main-nav a:not(#vi-panel a) {
  text-decoration: none !important;
  border-bottom: 2px solid transparent !important;
}
body.vi-mode .main-nav a:not(#vi-panel a):hover,
body.vi-mode .main-nav a:not(#vi-panel a):focus {
  border-bottom: 2px solid currentColor !important;
  text-decoration: underline !important;
}
body.vi-mode .main-nav .dropdown {
  display: block !important;
  position: static !important;
  box-shadow: none !important;
  border: 1px solid currentColor !important;
  margin: 4px 0 4px 15px;
}

/* Cookie-баннер */
body.vi-mode .cookie-banner {
  z-index: 2147483645 !important;
}

/* Кнопки */
body.vi-mode .btn-primary:not(#vi-panel .btn-primary) {
  border: 2px solid currentColor !important;
  text-decoration: underline !important;
}

/* Заголовки */
body.vi-mode h1, body.vi-mode h2, body.vi-mode h3,
body.vi-mode h4, body.vi-mode h5, body.vi-mode h6 {
  font-weight: bold !important;
  margin-top: 1em !important;
  margin-bottom: 0.5em !important;
}

/* Таблицы */
body.vi-mode table {
  border-collapse: collapse !important;
  width: 100% !important;
}
body.vi-mode table th, body.vi-mode table td {
  border: 1px solid currentColor !important;
  padding: 8px !important;
}

/* Формы */
body.vi-mode input, body.vi-mode textarea, body.vi-mode select {
  border: 2px solid currentColor !important;
  font-size: inherit !important;
  padding: 6px !important;
  background: inherit !important;
  color: inherit !important;
}
body.vi-mode input:focus, body.vi-mode textarea:focus, body.vi-mode select:focus {
  outline: 3px solid #0066cc !important;
}

/* Iframe */
body.vi-mode iframe:not(#vi-panel iframe) {
  border: 2px solid currentColor !important;
}

/* Видео сохраняем */
body.vi-mode.vi-images-off video {
  display: block !important;
}