/* --- Загальні стилі та кольори --- */
:root {
    --main-blue: #00aaff; /* Основний яскраво-синій колір */
    --light-gray: #f8f9fa; /* Світло-сірий для фону мобільного меню */
    --dark-text: #212529; /* Темний колір тексту */
    --white: #ffffff;
}

/* --- 1. Верхній бар (Top-Bar) --- */
.top-bar {
    background-color: var(--main-blue); /* Яскраво-синій фон */
    padding: 5px 0; /* Невеликий вертикальний відступ */
}

.top-bar-text {
    font-size: 14px;
    color: var(--white); /* Білий текст */
}

/* --- 2. Основна навігація (Navbar) --- */
.main-nav-bar {
    background-color: var(--main-blue); /* Яскраво-синій фон */
    min-height: 80px; /* Для візуальної висоти */
}

/* Стилі для посилань на десктопі (lg+) */
@media (min-width: 992px) {
    .main-nav-bar .navbar-nav .nav-link,
    .main-nav-bar .btn-blog {
        color: var(--white); /* Білий текст для всіх пунктів */
        font-weight: 500;
        margin-right: 15px; /* Простір між пунктами */
        transition: color 0.3s;
    }

    .main-nav-bar .navbar-nav .nav-link:hover,
    .main-nav-bar .btn-blog:hover {
        color: var(--dark-text); /* Зміна кольору при наведенні (за бажанням) */
    }
    
    .main-nav-bar .nav-link.active {
        /* Додатковий стиль для активного посилання */
        font-weight: bold;
        text-decoration: underline;
        text-underline-offset: 4px;
    }
}

/* --- 3. Кнопка "Blog" та Соціальні іконки на десктопі (lg+) --- */
/* На десктопі "Blog" стилізується як посилання, а не кнопка Bootstrap */
.main-nav-bar .btn-blog {
    /* Робимо, щоб виглядало як звичайне посилання, а не кнопка */
    padding: 0;
    text-decoration: none;
    background-color: transparent;
    border: none;
    font-size: 1rem;
}

.social-icons .social-icon {
    /* Стилі для кругів соціальних іконок */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    background-color: var(--white); /* Білий фон круга */
    color: var(--main-blue); /* Синій колір іконки */
    border-radius: 50%;
    margin-left: 8px; /* Відстань між іконками */
    font-size: 16px; /* Розмір іконки */
    transition: background-color 0.3s, color 0.3s;
}

.social-icons .social-icon:hover {
    background-color: var(--dark-text); /* Зміна кольору при наведенні */
    color: var(--white);
}


/* --- 4. Стилізація мобільного меню (Hamburger Menu) --- */

/* Фон мобільного меню та відступи */
.navbar-collapse {
    background-color: var(--light-gray); /* Світло-сірий фон, як на зображенні */
    padding: 15px;
    border-radius: 5px;
    margin-top: 10px; /* Невеликий відступ від хедера */
}

/* Колір іконки "Гамбургер" (якщо потрібно) */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5); /* Світла облямівка іконки */
}
.navbar-toggler-icon {
    /* Колір самої іконки можна змінити, якщо використовуєте SVG або фільтри */
    /* За замовчуванням 'navbar-light' робить її темною */
}

/* Стилі для посилань у мобільному меню */
.navbar-collapse .nav-item .nav-link {
    color: var(--dark-text) !important; /* Темний текст, як на зображенні */
    padding: 8px 0; /* Вертикальні відступи між пунктами */
    font-size: 1.1rem;
    font-weight: 500;
}

.navbar-collapse .nav-item .nav-link.active {
    font-weight: bold;
}

/* Стилізація кнопки "Blog" у мобільному меню */
.navbar-collapse .btn-blog {
    /* Робимо кнопку "Blog" синьою з білим текстом */
    display: block !important; /* Робимо посиланням на всю ширину */
    width: 100%;
    text-align: center;
    margin-bottom: 15px; /* Відступ до соц. іконок */
    
    /* Стилі, що імітують синю кнопку з зображення */
    background-color: var(--main-blue); 
    color: var(--white) !important;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
}

/* Стилізація соціальних іконок у мобільному меню */
.navbar-collapse .social-icons {
    /* Центрування іконок на мобільному */
    margin-top: 10px;
    margin-bottom: 10px;
}
.navbar-collapse .social-icons .social-icon {
    /* Стилі для мобільних соц. іконок, якщо вони відрізняються */
    margin: 0 5px; /* Зменшуємо горизонтальний відступ */
}