/* ============================================================================
   STICKY HEADER - Стили для фиксированной шапки при прокрутке
   ============================================================================ */

.section-header {
    position: relative;
    width: 100%;
    z-index: 1000;
    transition: all 0.3s ease-in-out;
}

/* Состояние sticky (прилипшая шапка) */
.section-header.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.3s ease-in-out;
}

/* Анимация появления sticky header */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Компенсация высоты для контента, чтобы не было скачка */
body.header-sticky-active {
    padding-top: var(--header-height, 0);
}

/* ============================================================================
   МОБИЛЬНЫЕ УСТРОЙСТВА - Особые стили для sticky header
   ============================================================================ */

@media (max-width: 767.98px) {
    /* Уменьшенный header в sticky режиме */
    .section-header.sticky .header-top {
        padding: 0px 0 10px;
        transition: padding 0.3s ease;
        border-bottom: 0;
    }
    
    /* Уменьшенный логотип в sticky режиме */
    .section-header.sticky .logo {
        max-height: 40px;
        transition: max-height 0.3s ease;
    }
    
    /* Скрываем мобильный текст в sticky режиме */
    .section-header.sticky .mobile-text {
        display: none !important;
    }
    
}

/* Планшеты */
@media (min-width: 768px) and (max-width: 991.98px) {
    .section-header.sticky .header-top {
        padding: 12px 0;
        transition: padding 0.3s ease;
    }
    
    .section-header.sticky .logo {
        max-height: 45px;
        transition: max-height 0.3s ease;
    }
}

/* Десктоп - sticky только на мобильных, но если нужен и на десктопе */
@media (min-width: 992px) {
    /* Раскомментируйте, если нужен sticky header и на десктопе */
    /*
    .section-header.sticky .header-top {
        padding: 15px 0;
        transition: padding 0.3s ease;
    }
    
    .section-header.sticky .logo {
        max-height: 50px;
        transition: max-height 0.3s ease;
    }
    
    .section-header.sticky .main-navbar {
        padding: 10px 0;
        transition: padding 0.3s ease;
    }
    */
}

/* ============================================================================
   ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ДЛЯ УЛУЧШЕНИЯ ВИЗУАЛА
   ============================================================================ */

/* Плавный переход для всех элементов header */
.section-header .logo,
.section-header .header-top,
.section-header .main-navbar,
.section-header .mobile-text {
    transition: all 0.3s ease-in-out;
}

/* Убираем возможный flickering при скролле */
.section-header {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Улучшенная тень для sticky header */
.section-header.sticky {
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.08),
        0 4px 16px rgba(0, 0, 0, 0.06);
}