/*
==========================================================
Patrimônio Vivo
TopBar Core
Versão 1.0

Este arquivo contém apenas o layout estrutural.
As animações ficam em:
topbar-animation.css

==========================================================
*/

:root{

    --pvivo-topbar-height:60px;

    --pvivo-topbar-gap:52px;

    --pvivo-topbar-speed:60;

    --pvivo-topbar-background:#ffffff;

    --pvivo-topbar-color:#111;

    --pvivo-topbar-shadow:0 2px 10px rgba(0,0,0,.08);

    --pvivo-topbar-image-size:54px;

}

/* ---------------------------------------------------- */

.pvivo-top-highlights{

    position:relative;

    height:var(--pvivo-topbar-height);

    background:var(--pvivo-topbar-background);

    color:var(--pvivo-topbar-color);

    overflow:visible;

    box-shadow:var(--pvivo-topbar-shadow);

    z-index:100;

}

/* ---------------------------------------------------- */

.pvivo-top-highlights-inner{

    display:flex;

    align-items:center;

    height:100%;

    width:100%;

    overflow:visible;

}

/* ---------------------------------------------------- */

.pvivo-top-highlights-label{

    flex:0 0 150px;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    overflow:visible;

    z-index:20;

}

/* ---------------------------------------------------- */

.pvivo-topbar-logo{

    display:block;

    width:var(--pvivo-topbar-logo-width,90px);

    height:auto;

    user-select:none;

    pointer-events:none;

}

/* ---------------------------------------------------- */

.pvivo-highlight-viewport{

    flex:1;

    height:100%;

    overflow:hidden;

    position:relative;

}

/* ---------------------------------------------------- */

.pvivo-highlight-track{

    position:absolute;

    top:0;

    left:0;

    display:flex;

    flex-wrap:nowrap;

    align-items:center;

    gap:0;

    will-change:transform;

    transform:translate3d(0,0,0);

}

/*
Cada grupo corresponde a uma cópia da lista.
O PHP renderizará:

Grupo 1
Grupo 2

O JS apenas desloca.
*/

.pvivo-highlight-group{

    display:flex;

    align-items:center;

    flex-wrap:nowrap;

    gap:var(--pvivo-topbar-gap);

    padding-right:var(--pvivo-topbar-gap);

}

/* ---------------------------------------------------- */

.pvivo-highlight-item{

    display:flex;

    align-items:center;

    flex:0 0 auto;

    white-space:nowrap;

    text-decoration:none;

    color:inherit;

    font-weight:700;

    transition:

        opacity .20s,

        transform .20s;

}

/* ---------------------------------------------------- */

.pvivo-highlight-item:hover{

    opacity:.82;

}

/* ---------------------------------------------------- */

.pvivo-highlight-item img{

    width:var(--pvivo-topbar-image-size);

    height:var(--pvivo-topbar-image-size);

    object-fit:cover;

    border-radius:4px;

    margin-right:10px;

}

/* ---------------------------------------------------- */

.pvivo-highlight-item span{

    font-size:17px;

    line-height:1;

}

/* ---------------------------------------------------- */

.pvivo-highlight-empty{

    display:flex;

    align-items:center;

    justify-content:center;

    height:100%;

    font-weight:600;

}

/* ---------------------------------------------------- */

.pvivo-topbar-text{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    font-size:14px;

    font-weight:800;

    line-height:1.05;

    text-align:center;

    text-transform:uppercase;

}