/* =============================================================
   BASE / ACCESSIBILITY
   
   Единое правило фокуса для всех интерактивных элементов.
   
   Почему :where() — чтобы специфичность была 0,0,1,0.
   Любой компонент сможет переопределить фокус одним классом.
   ============================================================= */

:where(a,
    button,
    [role="button"],
    input,
    select,
    textarea,
    summary,
    [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--focus-color, var(--blue-700));
    outline-offset: var(--focus-offset, 2px);
    border-radius: var(--focus-radius, 2px);
}

/* Убираем дефолтный фокус там, где он не нужен */
:focus:not(:focus-visible) {
    outline: none;
}

/* =============================================================
   VISUALLY HIDDEN
   Скрыто визуально, но доступно скринридеру
   ============================================================= */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}