/* Hero Section Background */
.hero-section { 
    background-color: #a9e5f1;
    /*padding-top: 2rem;  Добавляем отступ сверху, чтобы не перекрывать .breadcrumbs */
	padding-top:40px !important;
}
main {
    padding-top: 68px;
}


/* Стили для боковой панели (Desktop) */
.sidebar {
    position: sticky;
    top: 0;
    overflow-y: auto;
    border-right: 1px solid #dee2e6;
    background-color: #f8f9fa;
    padding: 0;
    margin-top: 0 !important;
}

/* Стили для пунктов меню */
.sidebar .nav-link {
    padding: 0.75rem 1.5rem;
    color: #333;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 0.25rem;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
}

.sidebar .nav-link i {
    margin-right: 0.75rem;
    font-size: 1.1rem;
}

.sidebar .nav-link:hover {
    background-color: #e9ecef;
    color: #0d6efd;
    text-decoration: none;
}

.sidebar .nav-link.active {
    background-color: #0d6efd;
    color: #fff;
    font-weight: 600;
}


/* Стили для вложенных пунктов (подменю) */
.sidebar .nav-link + .nav.flex-column {
    margin-left: 1.5rem;
    margin-top: 0.5rem;
}

.sidebar .nav.flex-column .nav-link {
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    font-weight: 400;
    color: #555;
    display: block;
}

.sidebar .nav.flex-column .nav-link:hover {
    background-color: #e9ecef;
    color: #0d6efd;
}

.sidebar .nav.flex-column .nav-link.active {
    background-color: #0d6efd;
    color: #fff;
    font-weight: 500;
}

/* Стили для кнопки открытия (Mobile) */
.btn-outline-secondary {
    border-color: #6c757d;
    color: #6c757d;
}

.btn-outline-secondary:hover {
    background-color: #6c757d;
    color: #fff;
}

/* Стили для вводного раздела */
.intro-section {
    margin: 1.5rem 0;
    padding: 1rem;
    background-color: #f1f3f5;
    border-left: 4px solid #0d6efd;
    border-radius: 0.25rem;
}

.intro-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #0d6efd;
}

.intro-lead {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.intro-benefits {
    list-style: none;
    padding-left: 0;
}

.intro-benefits li {
    margin-bottom: 0.5rem;
    padding-left: 1rem;
    position: relative;
}

.intro-benefits li::before {
    content: "•";
    color: #0d6efd;
    position: absolute;
    left: 0;
}

/* Стили для цитаты */
blockquote {
    margin: 1.5rem 0;
    padding: 1rem;
    border-left: 4px solid #0d6efd;
    background-color: #f1f3f5;
    font-style: italic;
    color: #333;
    font-size: 1.1rem;
}

blockquote p {
    margin: 0;
}

/* Адаптивность */
@media (min-width: 992px) {
    .sidebar {
        display: block;
    }

    #mobileMenu {
        display: none !important;
    }
	#menuSource {
        z-index:2;
    }

    .main-content {
        padding-left: 2rem;
    }
}

@media (max-width: 991px) {
    #menuSource {
        display: none !important;
    }

    #mobileMenu {
        width: 350px;
        background-color: #f8f9fa;
    }

    #mobileMenu .offcanvas-body {
        padding: 1rem;
    }

    .main-content {
       /* padding-left: 0; */
    }

    .container {
        padding-top: 0;
    }
    .row {
        margin-top: 0;
    }
}
/* ============================================== */
/* HELP PAGE SIDEBAR STYLES (v2 with Toggle Hint) */
/* ============================================== */

/* Делаем сайдбар "липким" только на больших экранах */
@media (min-width: 992px) {
    .sidebar-sticky {
        position: sticky;
        top: 6rem; /* Отступ от верхнего края */
        height: calc(100vh - 7rem);
        overflow-y: auto; /* Прокрутка, если меню длиннее экрана */
    }
}

.sidebar-heading {
    font-size: 1rem;
    font-weight: bold;
    color: var(--bs-body-color);
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
    display: block;
    text-decoration: none;
    position: relative; /* Необходимо для позиционирования псевдоэлемента */
}

/* === КЛЮЧЕВОЕ ИЗМЕНЕНИЕ === */
/* Добавляем иконку-стрелку ТОЛЬКО для раскрывающихся пунктов */
.sidebar-heading[data-bs-toggle="collapse"] {
    cursor: pointer;
}

.sidebar-heading[data-bs-toggle="collapse"]::after {
    content: '\F282'; /* Bootstrap Icons: chevron-down */
    font-family: 'bootstrap-icons';
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s ease-in-out;
    font-size: 0.9rem; /* Делаем стрелку чуть меньше текста */
    color: var(--bs-secondary-color); /* Неяркий цвет для индикатора */
}

/* Поворот стрелки, когда меню раскрыто */
.sidebar-heading[data-bs-toggle="collapse"][aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(-180deg);
}
/* === КОНЕЦ КЛЮЧЕВОГО ИЗМЕНЕНИЯ === */

.sidebar-submenu .nav-link {
    color: var(--bs-secondary-color);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    font-size: 0.9rem;
}

.sidebar-submenu .nav-link:hover {
    color: var(--bs-primary);
}

/* Стиль для активной ссылки внутри меню */
.sidebar .nav-link.active {
    font-weight: bold;
    color: var(--bs-primary);
}

/* Стиль для активного заголовка-раздела */
.sidebar-heading.active {
    color: var(--bs-primary);
    border-left: 3px solid var(--bs-primary); /* Добавляем левую границу для активного раздела */
    padding-left: calc(0.5rem - 3px);
}

/* ============================================== */
/* HELP SIDEBAR ICON COLOR STYLES                 */
/* ============================================== */

/* 1. Цвет иконок для заголовков разделов (уровень 1) */
.sidebar-heading > i {
    color: var(--bs-primary); /* Основной синий цвет вашего бренда */
    transition: color 0.15s ease-in-out;
}

/* 2. Цвет иконок для подпунктов меню (уровень 2) */
.sidebar-submenu .nav-link > i {
    color: var(--bs-secondary-color); /* Спокойный серый цвет */
    transition: color 0.15s ease-in-out;
}

/* 3. Стиль иконок при наведении или для активных элементов */

/* Когда мы наводим на заголовок, его иконка остается синей (или наследует цвет) */
.sidebar-heading:hover > i,
.sidebar-heading.active > i {
    color: var(--bs-primary); /* Можно также использовать 'inherit', чтобы иконка всегда была цвета текста */
}

/* Когда мы наводим на подпункт, его серая иконка становится синей, как и текст */
.sidebar-submenu .nav-link:hover > i,
.sidebar-submenu .nav-link.active > i {
    color: var(--bs-primary);
}

/* ============================================== */
/* BREADCRUMB STYLING                             */
/* ============================================== */

.breadcrumb-bar {
    background-color: var(--bs-tertiary-bg); /* Используем очень светлый серый фон из Bootstrap */
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0.75rem 0; /* Добавляем внутренние отступы сверху и снизу */
}

.breadcrumb {
    margin-bottom: 0; /* Убираем стандартный нижний отступ у хлебных крошек */
}