/*
 * gagarind.ru - правки вёрстки по итогам аудита.
 * Файл подключается ПОСЛЕДНИМ, чтобы перебивать инлайновые стили WordPress.
 * Ничего не переопределяем «на всякий случай» - только по конкретным находкам.
 */

/* ------------------------------------------------------------------
 * UI-01. Шапка перекрывает контент - и на мобильных, и на десктопе.
 *
 * Тема задаёт .header{position:fixed;height:60px} и компенсирует это
 * правилом body{padding-top:60px}. Но WordPress выводит инлайновый блок
 * <style id="global-styles-inline-css"> ПОЗЖЕ стилей темы, и в нём есть
 * body{padding-top:0px}. Специфичность одинаковая, поэтому побеждает то,
 * что идёт ниже, - компенсация обнуляется.
 *
 * Следствия, которые лечатся этим же правилом:
 *  - на мобильном шапка ложится поверх заголовка первого экрана;
 *  - на десктопе первый экран уезжает под шапку, и меню, которое лежит
 *    в начале первого экрана, накладывается на телефон, e-mail и кнопку.
 *
 * Селектор html body специфичнее, чем body, поэтому переживает
 * любой порядок подключения.
 * ------------------------------------------------------------------ */
html body {
    padding-top: 60px;
}

@media (min-width: 1024px) {
    html body {
        padding-top: 78px;
    }
}

/* ------------------------------------------------------------------
 * UI-04. Контраст текста на кнопках.
 *
 * Было #ffffff на #42a95f = 2,97:1 при норме WCAG AA 4,5:1.
 * Стало #ffffff на #2E7D46 = 5,07:1. Наведение затемняется дальше.
 * Оттенок зелёного сохранён, кнопки остаются узнаваемыми.
 * ------------------------------------------------------------------ */
.button_primary {
    border-color: #2E7D46;
    background-color: #2E7D46;
}

.button_primary:hover,
.button_primary:focus {
    border-color: #256339;
    background-color: #256339;
}

/* ------------------------------------------------------------------
 * UI-06. Возвращаю видимый фокус для клавиатуры.
 *
 * В теме стоит outline:0 для button, .button, .form__control и .nav-toggle,
 * в одном месте даже с !important. Навигация с клавиатуры превращается
 * в движение вслепую.
 *
 * :focus-visible срабатывает только при клавиатурном фокусе, поэтому
 * внешний вид при клике мышью не меняется.
 * ------------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.form__control:focus-visible,
.nav-toggle:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #2E7D46 !important;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Поле ввода в фокусе должно быть видно и без клавиатуры. */
.form__control:focus {
    border-color: #2E7D46;
}

/* ------------------------------------------------------------------
 * Опечатка в стилях темы: z-index:iinitial вместо initial.
 * Значение невалидно, браузер отбрасывает всю декларацию, из-за чего
 * меню на десктопе остаётся с z-index от мобильного состояния (10000)
 * и перекрывает то, что должно быть выше него.
 * ------------------------------------------------------------------ */
@media (min-width: 1024px) {
    .nav {
        z-index: auto;
    }
}