/* public/css/components/header/header.css */

#page-header {
    transition: border-radius 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    /* GPU прискорення для покращення продуктивності при скролінгу */
    will-change: box-shadow, border-radius;
    transform: translateZ(0);
}

#page-header.scrolled {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
}

/* Контейнер для логотипу та тексту */
.logo-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    text-decoration: none;
}

/* Стиль для зображення логотипу */
.logo-image {
    height: 32px;
    width: 32px;
    transition: transform 0.5s ease-in-out;
}

/* Анімація обертання при наведенні на посилання */
.logo-link:hover .logo-image {
    transform: rotate(360deg);
}

/* Контейнер для тексту "Step Flow" */
.logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    display: none;
}

/* 2. Показуємо текст на екранах 768px і ширше */
@media (min-width: 768px) {
    .logo-text {
        display: inline;
        /* Або 'block', якщо потрібно */
    }
}

.logo-step {
    color: var(--color-secondary);
}

.logo-up {
    color: var(--color-primary);
}

/* Текст кнопки "Підтримати" та ім'я користувача: на мобільних приховано, на ПК (768px+) видимий */
.header-label {
    display: none;
}

@media (min-width: 768px) {
    .header-label {
        display: inline;
    }
}