/* ============================================================================
   assets/common/a11y.css — базовий шар доступності на ВЕСЬ сайт.

   Підключається з views/templates/header.php, тобто діє на всіх сторінках,
   що включають шапку. Тут навмисно лише те, що безпечно застосувати
   глобально: видимий фокус, посилання-обхід, шанування
   prefers-reduced-motion і дві утиліти. Жодних кольорів компонентів,
   жодної типографіки — щоб файл не конфліктував з дизайном сторінок.
   ========================================================================= */

:root{
  /* Колір обвідки фокуса. Темна тема перевизначає нижче — на темному тлі
     темно-бірюзовий не має потрібних 3:1. */
  --a11y-focus:#0d7a6f;
}
html.dark, html[data-theme="dark"], body.dark-mode, body.dark{
  --a11y-focus:#7dd3c8;
}

/* --- 1. Видимий фокус --------------------------------------------------
   У проєкті 213 місць гасять обвідку (`outline:none` / `outline:0`) — це
   типова спадщина, коли прибирали «синю рамку» в Chrome. Тому тут
   доводиться перебивати через !important, інакше правило програє.

   Це безпечно: :focus-visible спрацьовує лише при клавіатурній навігації,
   тож користувач миші жодної обвідки не побачить. Сторінка, яка хоче свій
   вигляд фокуса, може домалювати box-shadow — його ми не чіпаємо. */
:is(a[href], button, [role="button"], [role="tab"], [role="link"],
    input, select, textarea, summary,
    [tabindex]:not([tabindex="-1"])):focus-visible{
  outline:3px solid var(--a11y-focus) !important;
  outline-offset:2px !important;
}

/* Елемент, на який стрибнув skip-link, focus-visible не отримує (фокус
   програмний, не з клавіатури), тож обвідку йому не малюємо взагалі —
   інакше при кожному переході блимала б рамка навколо всього контенту. */
#main:focus{ outline:none }

/* --- 2. Посилання-обхід -------------------------------------------------
   Перший елемент у body. Без нього користувач клавіатури й скрінрідера
   щоразу проходить усі ~40 пунктів меню, перш ніж дістатись контенту. */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100000;
  padding:12px 20px;
  background:#0d7a6f;
  color:#fff;
  font:600 15px/1.2 'Inter', system-ui, sans-serif;
  text-decoration:none;
  border-radius:0 0 10px 0;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.skip-link:focus{
  left:0;
  outline:3px solid #fff !important;
  outline-offset:-6px !important;
}

/* --- 3. Орієнтир <main> без впливу на розкладку -------------------------
   Шапка відкриває <main id="main">, підвал його закриває. Кілька десятків
   сторінок тримають підвал унизу через `body{display:flex}` + `flex:1` на
   контейнері; звичайний блок-обгортка розірвав би цю пару, бо контейнер
   перестав би бути прямим нащадком body.

   display:contents прибирає сам елемент із розкладки, лишаючи дітей на
   тому ж рівні, — тобто розкладка не змінюється НІДЕ. Орієнтир при цьому
   лишається в дереві доступності: браузери прибирали з нього
   display:contents лише для беззмістовних div/span, і той дефект давно
   виправлено в Chrome, Firefox і Safari. */
main#main{ display:contents }

/* --- 4. Менше руху ------------------------------------------------------
   Хто ввімкнув «зменшити рух» у системі, той страждає від паралаксів і
   каруселей фізично (вестибулярні розлади). Гасимо все скопом — це
   дешевше, ніж вичищати анімації по файлах, і працює на майбутні теж. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* --- 5. Утиліти ---------------------------------------------------------
   Текст для скрінрідера, невидимий очима. Саме такий набір властивостей,
   а не display:none і не visibility:hidden — ті ховають вміст і від
   скрінрідера теж. */
.visually-hidden:not(:focus):not(:active){
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}