/* =====================================================================
   Transicao de marca no cabecalho: Amigovida -> Celes
   -----------------------------------------------------------------
   O tema alterna duas pecas dentro de .brandtitle conforme o estado do
   cabecalho: .secondary-img sobre a capa e .primary-img quando a barra
   fixa reduz. Reaproveitamos essa troca:

     expandido  -> Amigovida + seta + Celes, com a legenda abaixo
     reduzido   -> apenas o logo da Celes, que cabe na barra

   IMPORTANTE: as regras do tema para as imagens do cabecalho usam ID

       #header-blueprint:not(.floatheader) .brandtitle a img { width:auto }

   com especificidade (1,2,2). Por isso todo seletor daqui tambem parte
   de #header-blueprint: sem o ID, o width:auto do tema prevaleceria e
   as medidas abaixo seriam ignoradas.
   ===================================================================== */

/* ------------------------------------------------------------------
   Composicao (estado expandido)
   ------------------------------------------------------------------ */

/* .site-header-cell e um flex row, entao .brandtitle encolhe ate o
   conteudo e a composicao escapa da tela em telas estreitas. Forcando
   largura total, o centramento passa a ser feito pelo proprio flex. */
#header-blueprint .brandtitle--celes,
#header-blueprint .brandtitle--celes > a {
    width: 100%;
    max-width: 100%;
}

/* O tema aplica display:block em .secondary-img; aqui precisa ser flex. */
#header-blueprint .brandtitle--celes a .secondary-img.marca-transicao {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Respiro entre a linha das marcas e a legenda. */
    gap: clamp(.85rem, 1.7vw, 1.35rem);
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding: clamp(.7rem, 1.4vw, 1.2rem) 12px;
    box-sizing: border-box;
    text-align: center;
}

/* No cabecalho fixo a composicao sai de cena e fica so o logo.
   Sem esta regra o display:flex acima (especificidade 1,4,2) venceria
   a do tema que esconde .secondary-img (1,3,2), e a barra branca
   ficaria com a altura da composicao inteira. */
#header-blueprint.floatheader .brandtitle--celes a .secondary-img.marca-transicao {
    display: none;
}

/* Amigovida -> seta -> Celes, sempre na mesma linha.
   As pecas sao dimensionadas em porcentagem da propria linha: a soma
   fecha em 88%, entao a composicao nunca transborda, em nenhuma tela,
   e dispensa medidas diferentes por breakpoint. */
#header-blueprint .brandtitle--celes a .marca-transicao__linha {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 4%;
    width: 100%;
    max-width: 470px;
    margin-inline: auto;
}

/* Base comum das duas marcas. O max-height precisa ser anulado porque
   o tema o define em 160px/230px pensando num logo unico. */
#header-blueprint .brandtitle--celes a .marca-transicao img {
    display: block;
    height: auto;
    max-height: none;
    margin: 0;
    min-width: 0;
}

#header-blueprint .brandtitle--celes a .marca-transicao img.marca-transicao__antiga {
    width: 25%;
    flex: 0 0 25%;
    opacity: .95;
}

#header-blueprint .brandtitle--celes a .marca-transicao img.marca-transicao__nova {
    width: 46%;
    flex: 0 0 46%;
}

/* Seta ligando as duas marcas. */
#header-blueprint .brandtitle--celes a .marca-transicao__seta {
    display: grid;
    place-items: center;
    width: 11%;
    flex: 0 0 11%;
    max-width: 44px;
    aspect-ratio: 1;
    height: auto;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .15);
    color: #fff;
    flex: none;
}

/* O SVG aponta para baixo; na horizontal ele gira para a direita. */
#header-blueprint .brandtitle--celes a .marca-transicao__seta svg {
    width: 54%;
    height: 54%;
    display: block;
    transform: rotate(-90deg);
}

#header-blueprint .brandtitle--celes a .marca-transicao__legenda {
    display: block;
    font-family: "GilroyMedium", system-ui, sans-serif;
    font-size: clamp(.98rem, 1.26vw, 1.22rem);
    font-weight: normal;
    line-height: 1.35;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-wrap: balance;
    color: rgba(255, 255, 255, .92);
}

/* Em telas com folga a legenda cabe em uma linha. */
@media screen and (min-width: 64em) {
    #header-blueprint .brandtitle--celes a .marca-transicao__legenda {
        white-space: nowrap;
    }
}

/* ------------------------------------------------------------------
   Estado reduzido: so o logo da Celes na barra fixa branca
   ------------------------------------------------------------------ */
/* Mesma medida que o tema ja usava para o logo da Amigovida. */
#header-blueprint .brandtitle--celes a .primary-img {
    width: auto;
    max-height: 50px;
    margin: auto;
}

/* ------------------------------------------------------------------
   Rodape: o lockup da Celes e horizontal (~3.4:1) e ficava pequeno
   demais no limite de 190px pensado para o logo vertical da Amigovida.
   ------------------------------------------------------------------ */
.brand-footer-column h1.brandtitle--celes-rodape img,
.brand-footer-column .brandtitle--celes-rodape img {
    max-width: 250px;
    width: 100%;
    height: auto;
}

/* ------------------------------------------------------------------
   Telas pequenas: a composicao encolhe para nao encostar nas bordas.
   ------------------------------------------------------------------ */
@media screen and (max-width: 39.9375em) {
    #header-blueprint .brandtitle--celes a .secondary-img.marca-transicao {
        gap: .7rem;
        padding: .5rem 0;
    }

    #header-blueprint .brandtitle--celes a .marca-transicao__linha {
        gap: .6rem;
    }

    /* A capa e baixa no celular e o cabecalho fica sobreposto a ela
       (position:absolute). Sem folga vertical, a composicao era coberta
       pela secao seguinte: aqui ela encolhe e a legenda sai de cena,
       porque as duas marcas com a seta ja passam o recado. */
    #header-blueprint .brandtitle--celes a .secondary-img.marca-transicao {
        gap: 0;
        padding: 0 12px;
    }

    #header-blueprint .brandtitle--celes a .marca-transicao__linha {
        max-width: 260px;
    }

    #header-blueprint .brandtitle--celes a .marca-transicao__legenda {
        display: none;
    }

    #header-blueprint:not(.floatheader) .site-header-cell-wrapper {
        padding: 18px 0;
    }

    .brand-footer-column h1.brandtitle--celes-rodape img,
    .brand-footer-column .brandtitle--celes-rodape img {
        max-width: 210px;
    }
}

@media (prefers-contrast: more) {
    #header-blueprint .brandtitle--celes a .marca-transicao img.marca-transicao__antiga { opacity: 1; }
    #header-blueprint .brandtitle--celes a .marca-transicao__legenda { color: #fff; }
    #header-blueprint .brandtitle--celes a .marca-transicao__seta { border-color: #fff; }
}