/* --- НАЧАЛНИ СТИЛОВЕ (Преди скрол) --- */

/* Начален голям размер на логото */
.branding-main-logo {
    width: 85px;             /* Голямо лого в началото */
    height: auto;
    transition: all 0.3s ease;
}

/* Начален голям размер на текста (2 реда) */
.site-title-large {
    font-size: 1.05rem;
    line-height: 1.3;
    transition: all 0.3s ease;
}

/* Ограничаваме брандинг блока вляво */
#logostudia {
    visibility: hidden;
    opacity: 0;
    max-width: 380px;        /* Увеличен max-width за по-голямото лого и текст */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 10;
}

/* При скролиране над 300px то се появява */
#logostudia.scrolled {
    visibility: visible;
    opacity: 1;
}

/* --- СТИЛОВЕ ПРИ СКРОЛ (Когато е добавен .scrolled) --- */

/* ПО-ГОЛЯМО ЛОГО ПРИ СКРОЛИРАНЕ */
#logostudia.scrolled .branding-main-logo {
    width: 160px;             /* Увеличено лого след скрол (може да го направите 60px - 75px) */
}

/* Намаляваме леко текста при скролиране, за да компенсираме по-голямото лого */
#logostudia.scrolled .site-title-large {
    font-size: 0.75rem;
    line-height: 1.2;
}

/* Предпазване от застъпване на центрираното меню при средни екрани */
@media (max-width: 1400px) {
    #logostudia.scrolled + .header-menu-wrapper {
        padding-left: 320px;  /* Коригирано отстояние заради по-широкия лого блок */
    }
}

/* Скрива текстовата част от брандинг блока, когато е в sticky контейнера при скрол */
#logostudia .site-name > div:last-child {
    display: none !important;
}