/* ==============================
   Базовые стили и Шапка (Header)
   ============================== */

header {
    margin: 0px;
    position: relative;
    z-index: 10; /* Повысил z-index, чтобы меню было точно сверху других элементов */
    
    /* === ДОБАВЛЕН ФОН ИЗ ФУТЕР2.PNG === */
    /* Путь к картинке. Убедитесь, что он правильный. */
    background-image: url('../img/futer2.png');  
    
    /* Стили для фона */
    background-size: cover;          /* Картинка полностью покрывает блок */
    background-position: center;     /* Центрируем картинку по горизонтали и вертикали */
    background-repeat: no-repeat;    /* Картинка не повторяется */
    background-color: #fff;          /* Цвет-заглушка, если картинка не загрузится */
    
    /* Минимальная высота шапки */
    min-height: 250px; 
    
    /* Сдвинем все элементы вниз, чтобы они были по центру */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.logo-container {
    display: flex;         
    align-items: center;   
    gap: 20px;             
    padding: 30px 20px 10px 20px;    /* Больше отступа сверху, чтобы не "жалось" к краю */
    
    /* === ИЗМЕНЕН ФОН НА ПРОЗРАЧНЫЙ === */
    background-color: transparent; /* Убираем белый фон, чтобы было видно картинку */
}



.header-title {
    font-size: 3rem; /* Уменьшил размер, чтобы лучше помещалось на фоне */
    margin: 0;
    flex-grow: 1;          
    text-align: center; 
    font-family: 'Muli', sans-serif;	
    
    /* === ИЗМЕНЕН ЦВЕТ ТЕКСТА НА СВЕТЛЫЙ ДЛЯ КОНТРАСТА === */
    color: white; 
    
    /* Добавляем тень для текста, чтобы он читался на любом фоне */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); 
    
    line-height: 1.2;      
}
.overlay-image {
    height: 100px; /* Можно немного увеличить, если позволяет высота шапки */
    width: auto;
    
    /* Этот фильтр создаст мягкий ореол вокруг логотипа, 
       чтобы он не сливался с фоном картинки */
    filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.3)); 
    
    transition: transform 0.3s ease;
}

.overlay-image:hover {
    transform: scale(1.05); /* Небольшой интерактив при наведении */
}

/* ==============================
   Навигация (Navbar)
   ============================== */
.navbar1 {
   
	background-color: rgba(0, 0, 139, 0.9);
    color: white;
    padding: 0 20px;
    margin-top: auto; /* Навигация всегда прижата к низу блока header */
}

.container1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

/* Список меню */
.menu {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.menu li {
    position: relative;
}

.menu li a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    transition: 0.3s;
    font-weight: bold;
}

.menu li a:hover {
    background-color: #34495e;
}

/* Выпадающее меню */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 10000;
    list-style: none;
    padding: 0;
}

.dropdown-content li a {
    color: #333;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    font-weight: normal;
}

.dropdown-content li a:hover {
    background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Стили для мобильных устройств (адаптивность) */
#menu-toggle, .menu-icon {
    display: none;
}

@media (max-width: 992px) {
    /* На мобильных телефонах можно сделать шапку меньше */
    header {
        min-height: 150px;
        background-position: center bottom; /* Смещаем акцент на нижнюю часть картинки */
    }
    
    .logo-container {
        padding: 15px 10px;
        justify-content: center; /* Центрируем логотипы на мобильном */
    }
    
    .logo-container .overlay-image:last-child {
        display: none; /* Прячем второй логотип, если он есть, на маленьких экранах */
    }

    /* Скрываем заголовок на экранах меньше 992px */
    .header-title {
        display: none;
    }
    
    .menu {
        display: none; /* Прячем меню по умолчанию */
        flex-direction: column;
        width: 100%;
        background-color: #2c3e50;
        z-index: 10000;
        position: absolute;
        top: 60px;
        left: 0;
    }

    .menu-icon {
        display: block;
        font-size: 28px;
        cursor: pointer;
        padding: 15px;
        color: white;
    }

    #menu-toggle:checked ~ .menu {
        display: flex; /* Показываем при клике на бургер */
    }

    .menu li {
        width: 100%;
    }

    .dropdown-content {
        position: static;
        background-color: #3e5871;
        z-index: 10000;
        box-shadow: none;
    }

    .dropdown-content li a {
        color: white;
        padding-left: 30px;
        z-index: 10000;
    }
}