/* NAV-E2. Островные стили навбара.
   Подключается изнутри resources/views/layouts/navigation.blade.php, то есть
   ПОЗЖЕ app.css: при равной специфичности выигрывает этот файл, !important не нужен.
   Mix этого файла не касается — у него своя версия в теге (?v=N).

   В этом этапе здесь только авто-скрытие панели при прокрутке.
   Цвета, боковая панель и вид кабинета — следующие этапы. */

/* Панель ездит по вертикали. Класс nav-hidden вешает navbar.js на сам <nav>:
   у <nav> нет :class, поэтому Vue его класс не перезаписывает. */
.navbar.is-fixed-top {
    transition: transform .28s ease;
    will-change: transform;
}

.navbar.is-fixed-top.nav-hidden {
    transform: translateY(-100%);
}

/* Кому движение мешает — панель просто исчезает и появляется без поездки. */
@media (prefers-reduced-motion: reduce) {
    .navbar.is-fixed-top {
        transition: none;
    }
}


/* ======================================================================
   NAV-E3. Высота панели: 4.7rem (~75px) -> 56px.

   Bulma собрана с $navbar-height: 4.7rem, и это значение разошлось по
   нескольким правилам разом. Меняем ровно те, что участвуют в НАШЕМ навбаре,
   иначе панель либо останется прежней высоты (её держит .navbar-brand или
   бургер), либо контент уедет под неё (padding-top у body).

   Намеренно НЕ трогаем три правила Bulma с тем же 4.7rem — в проекте их
   некому применить (проверено поиском по resources/views):
     .navbar > .container      — навбар свёрстан без .container;
     .navbar-item.is-tab       — класса is-tab в разметке нет;
     .hero.is-fullheight-with-navbar — такого hero в шаблонах нет.
   ====================================================================== */
.navbar {
    min-height: 56px;
}

/* Держит высоту слева: без него панель осталась бы 75px из-за логотипа. */
.navbar-brand,
.navbar-tabs {
    min-height: 56px;
}

/* Бургер квадратный по высоте панели — иначе он её распирает. */
.navbar-burger {
    height: 56px;
    width: 56px;
}

/* Сдвиг тела страницы под фиксированную панель.
   57, а не 56: у панели есть нижняя граница в 1px (.navbar{border-bottom} в
   app.css), и она входит в её высоту. При 56px верхняя строка контента
   пряталась бы ровно под эту границу. Было 4.7rem. */
body.has-navbar-fixed-top,
html.has-navbar-fixed-top {
    padding-top: 57px;
}

/* Прокрутка длинного меню на телефоне считается от нижней кромки панели. */
.navbar.is-fixed-top .navbar-menu {
    max-height: calc(100vh - 57px);
}

/* Логотип вписывается в новую высоту (было max-height: 2.75rem = 44px).
   Свободная высота внутри пункта как раз 56 - 8 - 8 = 40px. */
.navbar-item img {
    max-height: 40px;
}

@media screen and (max-width: 1023px) {
    /* Выпадающая панель меню прижата к нижней кромке навбара.
       Было top: 4rem под панель 4.7rem; при 56px это дало бы щель. */
    .navbar-menu {
        top: 57px;
    }
}

/* ======================================================================
   NAV-E3. Нейтральные цвета пунктов.

   Панель должна быть спокойной, чтобы будущий единственный акцент
   (кнопка этапа 4) читался как единственный. Поэтому у пунктов убран
   фирменный синий Bulma (#485fc7) и подложка при наведении (#fafafa).

   Область строго ограничена .navbar-end: логотип и его подпись живут в
   .navbar-brand и остаются как были.
   ====================================================================== */
.navbar .navbar-end .navbar-item,
.navbar .navbar-end .navbar-link {
    color: #3a4a58;
}

/* Наведение только у видимых пунктов верхнего уровня: они прямые дети
   обёрток .navbar-item. Пункты выпадающего списка кабинета сюда не попадают
   намеренно — там подсветка уже нейтральная (серая подложка, тёмный текст),
   и трогать её незачем.

   Подчёркивание добавлено сознательно: цвет как единственный признак
   наведения читается не всеми. */
.navbar .navbar-end > .navbar-item > a.navbar-item:hover,
.navbar .navbar-end > .navbar-item > a.navbar-item:focus,
.navbar .navbar-end > .navbar-item > a.navbar-item:focus-within {
    background-color: transparent;
    color: #1F6F78;
    text-decoration: underline;
}