/* 1. Comportamento base do cabeçalho principal */
#header_site {
    transition: all 0.4s ease-in-out;
    background-color: var(--background-color); /* Substitua pela cor exata do seu cabeçalho */
    z-index: 1050;
    width: 100%;
}

/* 2. O que acontece quando passamos da barra preta (vira fixed no topo) */
body.header-is-fixed #header_site {
    position: fixed !important;
    top: 0;
    left: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

section.region.region-navigation {
    height: 15vh;
    transition: height .4s ease !important; 
}

body.header-is-fixed section.region.region-navigation {
    height: 5vh !important;
}

/* 3. Prepara o logo e o texto para a transição */
#block-az-barrio-branding .qs-site-logo,
#block-az-barrio-branding .h3{
    transition: all 0.4s ease-in-out;
}

#block-az-barrio-branding .qs-site-logo {
    opacity: 1;
    max-width: 300px;
    overflow: hidden;
}

/* =========================================================
   ANIMAÇÕES (Encolher logo e alinhar texto)
   ========================================================= */

/* 4. Esconde o logo suavemente */
body.header-is-fixed #block-az-barrio-branding .qs-site-logo {
    opacity: 0;
    max-width: 0; 
    margin: 0 !important;
    padding: 0 !important;
}

/* 5. Força o texto para uma única linha */
body.header-is-fixed #block-az-barrio-branding .h3 {
    white-space: nowrap; 
    font-size: 1.1rem; 
    margin-top: 0.8rem !important; 
    margin-bottom: 0.8rem !important;
}

/* 6. Ajuste para responsividade em telas menores */
@media (max-width: 991px) {
    body.header-is-fixed #block-az-barrio-branding .h3 {
        font-size: 0.9rem;
        white-space: normal; 
    }
}