/* Простые правила для отображения контента */
#page-wrapper:not(.smooth-scroll),
.page-wrapper__content,
main,
section,
.section {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
}

/* Убеждаемся, что page-wrapper не выходит из потока */
#page-wrapper:not(.smooth-scroll) {
    width: 100% !important;
}

/* Футер должен быть выше контента, но ниже хедера */
footer,
.footer {
    position: relative !important;
    z-index: 200 !important; /* Выше чем page-wrapper__content, но ниже хедера (500) */
    background-color: #f5f5f5 !important;
    isolation: isolate !important; /* Создаем новый stacking context для футера */
}

/* Убеждаемся, что wrapper не создает проблем со stacking context */
[data-barba="wrapper"] {
    position: relative !important;
    z-index: auto !important;
    isolation: auto !important; /* Не создаем stacking context для wrapper */
}

/* Футер должен быть виден поверх контента */
[data-barba="wrapper"] > footer,
[data-barba="wrapper"] > .footer {
    position: relative !important;
    z-index: 200 !important; /* Выше чем page-wrapper__content, но ниже хедера (500) */
    isolation: isolate !important; /* Создаем новый stacking context */
}

/* Убеждаемся, что хедер имеет правильный z-index */
header.header_fixed,
.header_fixed,
.header_sticky,
#page-header.header_fixed {
    z-index: 500 !important;
    position: fixed !important;
    isolation: isolate !important; /* Создаем отдельный stacking context для хедера */
}

/* Обеспечиваем видимость header и меню */
#page-header,
header.header,
.header {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Обеспечиваем видимость меню, но НЕ перекрываем Bootstrap классы d-lg-block/d-lg-none */
/* Эти классы должны управлять видимостью через display, а не через opacity */
#page-header .menu,
.header .menu {
    opacity: 1 !important;
    visibility: visible !important;
}

/* НЕ применяем display: block для header__col, чтобы Bootstrap классы работали правильно */
/* Bootstrap классы d-none d-lg-block и d-lg-none управляют display через свои правила */
/* Убираем opacity: 0 из общего правила для header__col, чтобы Bootstrap классы работали */

/* Логотип всегда должен быть виден */
#page-header .header__col-left,
.header .header__col-left {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

#page-header .header__col.d-none.d-lg-block,
.header .header__col.d-none.d-lg-block {
    opacity: 1 !important;
    visibility: visible !important;
    /* display управляется Bootstrap классом d-none d-lg-block */
}

#page-header .header__col.d-lg-none,
.header .header__col.d-lg-none {
    opacity: 1 !important;
    visibility: visible !important;
    /* display управляется Bootstrap классом d-lg-none */
}

/* На больших экранах (lg и выше) - Bootstrap сам управляет через d-none d-lg-block */
/* На маленьких экранах (меньше lg) - Bootstrap скрывает d-none d-lg-block и показывает d-lg-none */

/* Обеспечиваем видимость ссылок в меню */
#page-header .menu a,
.header .menu a {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Обеспечиваем видимость фильтров */
.filter,
.filter__list,
.filter_services,
.filter_portfolio {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.filter__item,
.filter__link {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Обеспечиваем видимость overlay меню после открытия */
#page-header.opened .header__overlay-menu,
#page-header.opened #js-overlay-menu {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

#js-preloader,
.preloader,
#js-page-transition-curtain,
.curtain,
.header-curtain,
#js-spinner,
.spinner {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

body {
    overflow: visible !important;
    visibility: visible !important;
}

/* Дополнительная защита от перекрытия футера хедером */
#page-wrapper:not(.smooth-scroll) {
    position: relative !important;
    z-index: 1 !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
    width: 100% !important;
}

/* Футер всегда должен быть внизу и виден */
footer.footer {
    position: relative !important;
    z-index: 200 !important; /* Выше чем page-wrapper__content, но ниже хедера (500) */
    clear: both !important;
    margin-top: 0 !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    isolation: isolate !important; /* Создаем новый stacking context */
}