/* ==========================================================================
   1. ОБЩИЙ СБРОС АНИМАЦИИ И СДВИГОВ ДЛЯ ШАПКИ
   ========================================================================== */
.navbar-brand, 
.navbar-nav li a,
.navbar-brand *,
.navbar-nav li a * {
    text-indent: 0px !important;
    letter-spacing: normal !important;
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
    -webkit-animation: none !important;
}

/* ==========================================================================
   2. НАЗВАНИЕ САЙТА ([4RTech])
   ========================================================================== */
.brand-first::before { content: "[" !important; display: inline-block !important; visibility: visible !important; opacity: 1 !important; }
.brand-rest::before { content: "4RTech]" !important; display: inline-block !important; visibility: visible !important; opacity: 1 !important; }

.brand-hover-effect b::before,
.brand-hover-effect span::before {
    color: #9a9a9a !important;
    font-weight: normal !important;
}
.brand-hover-effect:hover b::before { color: #ffff00 !important; }
.brand-hover-effect:hover span::before { color: #ffffff !important; }
.brand-hover-effect:hover { background-color: transparent !important; }


/* ==========================================================================
   3. ЭФФЕКТЫ ДЛЯ КНОПОК НАВИГАЦИИ (Следующая / Предыдущая)
   ========================================================================= */

/* Магия: Безопасно генерируем первые буквы через CSS, возвращая их на правильные места */
.retro-prev::after {
    content: "П" !important;
    display: inline-block !important;
}
.retro-next::before {
    content: "С" !important;
    display: inline-block !important;
}

/* Выравниваем элементы внутри кнопок, чтобы иконки и буквы стояли ровно друг за другом */
.navbar-default .navbar-nav a.retro-prev,
.navbar-default .navbar-nav a.retro-next {
    display: flex !important;
    align-items: center !important;
    gap: 0px !important; /* Убираем лишние зазоры между сгенерированной буквой и остальным словом */
}

/* Для кнопки Предыдущая меняем визуальный порядок: сначала иконка, потом буква П (after), потом остальное слово */
.navbar-default .navbar-nav a.retro-prev i { order: 1 !important; margin-right: 4px !important; }
.navbar-default .navbar-nav a.retro-prev::after { order: 2 !important; }
.navbar-default .navbar-nav a.retro-prev span { order: 3 !important; }

/* Для кнопки Следующая: сначала буква С (before), потом остальное слово, потом иконка */
.navbar-default .navbar-nav a.retro-next::before { order: 1 !important; }
.navbar-default .navbar-nav a.retro-next span { order: 2 !important; }
.navbar-default .navbar-nav a.retro-next i { order: 3 !important; margin-left: 4px !important; }


/* --- АКТИВНЫЕ КНОПКИ (Обычное состояние) --- */
/* Намертво задаем темно-серый цвет для всего текста, иконок и сгенерированных букв */
.navbar-default .navbar-nav a.retro-active,
.navbar-default .navbar-nav a.retro-active::before,
.navbar-default .navbar-nav a.retro-active::after,
.navbar-default .navbar-nav a.retro-active span,
.navbar-default .navbar-nav a.retro-active i {
    color: #555555 !important;
    font-weight: normal !important;
    background-color: transparent !important;
}

/* --- АКТИВНЫЕ КНОПКИ ПРИ НАВЕДЕНИИ МЫШИ --- */
/* При наведении на ЛЮБУЮ активную кнопку ее текст и иконка становятся белыми */
.navbar-default .navbar-nav a.retro-active:hover span,
.navbar-default .navbar-nav a.retro-active:hover i,
.navbar-default .navbar-nav a.retro-active:focus span,
.navbar-default .navbar-nav a.retro-active:focus i {
    color: #ffffff !important;
}
/* При наведении строго на ПРЕДЫДУЩУЮ, буква П вспыхивает желтым */
.navbar-default .navbar-nav a.retro-prev.retro-active:hover::after,
.navbar-default .navbar-nav a.retro-prev.retro-active:focus::after {
    color: #ffff00 !important;
}
/* При наведении строго на СЛЕДУЮЩУЮ, буква С вспыхивает желтым */
.navbar-default .navbar-nav a.retro-next.retro-active:hover::before,
.navbar-default .navbar-nav a.retro-next.retro-active:focus::before {
    color: #ffff00 !important;
}

/* --- НЕАКТИВНЫЕ КНОПКИ (Заблокированы) --- */
/* Намертво красим в четкий светло-серый цвет темы */
.navbar-default .navbar-nav a.retro-disabled,
.navbar-default .navbar-nav a.retro-disabled::before,
.navbar-default .navbar-nav a.retro-disabled::after,
.navbar-default .navbar-nav a.retro-disabled span,
.navbar-default .navbar-nav a.retro-disabled i {
    color: #9a9a9a !important;
    background-color: transparent !important;
    cursor: default !important;
    pointer-events: none !important;
}


/* ==========================================================================
   4. ГЛОБАЛЬНОЕ УМНОЕ СКРЫТИЕ И ЦЕНТРИРОВАНИЕ (ДЛЯ ПК И МОБИЛЬНЫХ)
   ========================================================================== */

/* Если внутри боковой панели .col-md-3 физически нет ни одной ссылки <a>,
   мы НАМЕРТВО уничтожаем её и со стационарных компьютеров, и со смартфонов */
.col-md-3:not(:has(a)),
div[role="complementary"]:not(:has(a)) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Как только панель скрылась, мы говорим текстовому блоку .col-md-9 
   занять все 100% компьютерного и мобильного экрана, идеально центрируя статью */
.row:not(:has(.col-md-3 a)) .col-md-9,
.container:not(:has(.col-md-3 a)) .col-md-9,
body:not(:has(.col-md-3 a)) .col-md-9,
.col-md-3:not(:has(a)) + .col-md-9 {
    width: 100% !important; /* Текст расширяется на весь экран на ПК и телефонах */
    max-width: none !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ==========================================================================
   5. ОКОНЧАТЕЛЬНЫЙ ФИКС ДЛЯ МОБИЛЬНЫХ ЭКРАНОВ (БЕЗУПРЕЧНЫЙ БАЛАНС ВЫСОТЫ)
   ========================================================================== */
@media (max-width: 991px) {
    
    /* 1. НАМЕРТВО ЗАМОРАЖИВАЕМ БОКОВУЮ ПАНЕЛЬ ТЕМЫ НА ЭКРАНЕ СМАРТФОНА */
    .col-md-3,
    div[role="complementary"] {
        position: fixed !important; /* Блок застывает на одном месте при скролле */
        top: 22px !important;       /* Ваша идеальная высота от шапки */
        left: 15px !important;      
        right: 15px !important;
        width: auto !important;     /* Блок растянется ровно по ширине текста */
        max-width: none !important;
        z-index: 99999 !important;  /* Меню находится строго над текстом страницы */
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    /* 2. Делаем внутреннюю обертку (.well) сплошной зеленой */
    .well,
    .bs-sidebar .well,
    .bs-sidenav .well {
        position: relative !important;
        background-color: #00aa00 !important; /* Наш зеленый цвет */
        border: 1px solid #00aa00 !important;
        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.9) !important; /* Ретро-тень */
        padding: 10px !important;
        margin: 0 !important;
        min-height: auto !important;
        display: block !important;
        width: 100% !important;
    }

    /* Схлопываем внутренние отступы для тонкой пустой зеленой полосы */
    .well:not(:has(a)),
    .bs-sidebar .well:not(:has(a)),
    .bs-sidenav .well:not(:has(a)) {
        padding: 4px 10px !important;
    }

    /* 3. Обесцвечиваем внутреннее выпадающее меню */
    .navbar-collapse, 
    .navbar-collapse.in, 
    nav .navbar-collapse {
        background-color: transparent !important; 
        background: transparent !important;
        border: none !important; 
        box-shadow: none !important; 
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    /* 4. Фиксируем оригинальный белый цвет текста внутри меню */
    .navbar-collapse a,
    .navbar-collapse span,
    .navbar-collapse i,
    .well a,
    .well span {
        color: #ffffff !important; 
        text-shadow: none !important;
    }

    /* 5. НАПРАВЛЯЕМ ТЕКСТ СТРАНИЦЫ (.col-md-9) ПОД МЕНЮ */
    .col-md-9,
    main, 
    div[role="main"], 
    article,
    .container {
        position: relative !important;
        z-index: 1 !important; /* Текст проскальзывает под зеленую плиту */
    }

    /* ХАК ДЛЯ ПЕРВОЙ СТРОКИ: Скрываем самый первый элемент статьи на смартфонах, 
       полностью копируя десктопное поведение ПК */
    .col-md-9 > :first-child,
    article > :first-child,
    div[role="main"] > :first-child {
        display: none !important;
        visibility: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 0 !important;
    }

    /* ВАРИАНТ №1: По умолчанию (когда меню ПУСТОЕ) прижимаем текст высоко к тонкой полоске */
    .col-md-9 {
        padding-top: 55px !important; /* Текст начинается близко, убирая огромную дыру */
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-top: 0 !important;
    }

    /* ВАРИАНТ №2 (Железобетонный фикс): Если глобальный ряд .row содержит внутри себя 
       зеленый блок .well, в котором ЕСТЬ рабочие ссылки <a>, мы намертво переключаем отступ 
       текста .col-md-9 на 170px, полностью выталкивая его из-под длинного оглавления! */
    .row:has(.col-md-3 .well a) .col-md-9,
    .container:has(.col-md-3 .well a) .col-md-9,
    body:has(.col-md-3 .well a) .col-md-9 {
        padding-top: 170px !important; /* Идеальная видимость для страниц с якорями */
    }

    /* 6. ФИКС ДЛЯ ССЫЛОК ИЗ МЕНЮ: Сдвигаем точку остановки прокрутки заголовков */
    h1, h2, h3, h4, h5, h6, [id] {
        scroll-margin-top: 165px !important; 
    }
}