@import url('cores-barra-pesquisa.css');

/*
------- FOLHA DE ESTILOS -------
* 0 - CONTEUDO
* 1 - CAMPO PESQUISA
* 2 - CORPO DA PÁGINA NOTICIA
* 3 - LINKS RELACIONADOS
* 4 - DESTAQUES
* 5 - BOTÃO LEIA MAIS
* 6 - CSS PARA LANDPAGE
*/

/* ANCHOR 0 - CONTEUDO */
.principal {
    max-height: initial;    
}
@media (min-width: 576px) {
.menu_principal {     
    max-height: calc(100vh - 0.7407407407407407vh - 5.185185185185185vh - 1.4814814814814814vh - 1.4814814814814814vh - 2.7777777777777777vh - 2.2222222222222223vh);
}
}
@media (max-width: 575px) {
.principal {    
    max-height: calc(100vh - 2.2222222222222223vh);
    max-height: initial;
}
}
.conteudo {
    padding: 0 0 30px 0;
}

/* ANCHOR 1 - CAMPO PESQUISA */
.campo-pesquisa {
    /* position: fixed; */
}

/* Estado Padrão do Container do Formulário */
.campo-pesquisa #searchform div, .campo-pesquisa #search-form {    
    background-color: var(--surface-container-High-bps, #FBFFFD);
    height: 56px;    
    height: 5.185185185185185vh;
    min-height: 30px;
    width: calc((83.333vw - 1rem) * 0.75 * 0.6);
    width: calc((100vw - 1rem) * 0.5 * 0.5);
    width: calc((100vw - 1rem) * 0.5 * 0.5 - 80px);
    width: calc((100vw - 1rem) * 0.5 * 0.5 - 4.166666666666667vw);
    border: none;
    border-radius: 8px;
    padding: 16px 24px;
    padding: 1.4814814814814814vh 1.25vw;
    margin-right: 12px;
    margin-right: 0.625vw;
    
    /* Define a cor padrão do ícone SVG (Primeira linha da imagem) */
    color: #363636;
    transition: color 0.2s ease-in-out;
    max-height: 56px;
}

/* Estado Ativo / Foco (Segunda linha da imagem) */
/* Quando o input é clicado, muda a cor do container e o SVG herda automaticamente */
.campo-pesquisa #search-form:focus-within {
    color: #12BBEF; 
}

/* ESTADO Preenchido (Tem texto digitado, mesmo se o usuário clicar fora) */
/* Se o input NÃO está mostrando o placeholder, significa que tem texto nele! */
.campo-pesquisa #search-form:has(#search-input:not(:placeholder-shown)) {
    /* Cor do Estado Preenchido: Cor azul da imagem (pode usar a mesma do foco ou o tom exato) */
    color: #12BBEF; 
}

@media (max-width: 991px) {
.campo-pesquisa #search-form {
    width: calc((100vw - 1rem) * 0.6 * 1 - 102px);
    width: calc((100vw - 1rem) * 0.7 * 1 - 102px - 80px);
    width: calc((100vw - 1rem) * 0.6 * 1 - 72px - 110px);
    margin-right: 12px;
    width: calc((100vw - 48px) * 1 - 101px - 30px - 0px - 60px);
    margin-right: 30px;
}
.campo-pesquisa-mobile .campo-pesquisa #search-form {
    /* novo menu mobile 10/07/2026 */ 
    width: 100%;
    margin-right: 0px;
}
}
@media (max-width: 767px) {
.campo-pesquisa #search-form {
    width: calc((100vw - 1rem) * 1 * 1 - 102px);
    width: calc((100vw - 1rem) * 1 * 1 - 102px - 80px);
    width: calc((100vw - 1rem) * 1 * 1 - 72px - 110px - 0px);
    margin-right: 12px;
    width: calc((100vw - 48px) * 1 - 101px - 30px - 0px - 60px);
    margin-right: 30px;
}
}
@media (max-width: 480px) {
.campo-pesquisa #search-form {
    width: calc((100vw - 1rem) * 1 * 1 - 102px - 80px - 30px);
    width: calc((100vw - 1rem) * 1 * 1 - 72px - 110px - 0px);
    margin-right: 12px;
    width: calc((100vw - 48px) * 1 - 101px - 30px - 0px - 60px);
    margin-right: 30px;
}
}
.campo-pesquisa #searchform div .screen-reader-text {
    display: none;    
}

/* Configurações do Input de Texto (Mantendo as fontes originais) */
.campo-pesquisa #searchform div #s, .campo-pesquisa #search-form #search-input {
    border: 0;
    background-color: transparent;
    width: calc(100% - 25px);
    font-family: 'cera_promedium';
    font-weight: 500;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 24px;
    letter-spacing: normal;
    color: #878B8F;
    max-height: 24px;
}
.campo-pesquisa #search-form #search-input::placeholder {
    color: var(--color-texto-bps, #878B8F);
}
.campo-pesquisa #search-form #search-input:focus-within {
    color: var(--color-texto-bps-ativo, #9A9EA1);
}
.campo-pesquisa #search-form #search-input::-webkit-search-cancel-button {
    position: relative;
    right: 20px;
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background-size: 18px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../../images/blocos-template/barra-pesquisa/close_fill_363636.svg) !important; 
    cursor: pointer;
}
.campo-pesquisa #search-form #search-input.form-control {
    padding: 0;
}
.campo-pesquisa #search-form #search-input.form-control:focus {
    box-shadow: none;
}
.campo-pesquisa #searchform div #s:focus-visible, .campo-pesquisa #search-form #search-input:focus-visible {
    outline: 0;
}

/* O Botão / Área do SVG modificado para o novo comportamento */
.campo-pesquisa #searchform div #searchsubmit, .campo-pesquisa #search-form .input-group-append {
    width: 32px;
    min-width: 14px;
    height: 32px;
    min-height: 14px;
    border: 0;
    background-color: transparent !important; /* Remove o fundo sólido antigo */
    display: flex;
    align-self: center;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* Estilos específicos para o novo botão do SVG */
.campo-pesquisa .btn-busca {
    color: inherit; /* Herda o preto ou azul do elemento pai */
}
.campo-pesquisa .btn-busca:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Estilos específicos do SVG interno */
.campo-pesquisa .svg-busca {
    display: block; 
    width: 24px;
    height: 24px;
}

.campo-pesquisa #searchform div input#s:-webkit-autofill,
.campo-pesquisa #searchform div input#s:-webkit-autofill:hover,
.campo-pesquisa #searchform div input#s:-webkit-autofill:focus,
.campo-pesquisa #search-form input#search-input:-webkit-autofill,
.campo-pesquisa #search-form input#search-input:-webkit-autofill:hover,
.campo-pesquisa #search-form input#search-input:-webkit-autofill:focus {
    border: 1px solid var(--surface-container-High-bps, #FBFFFD);
    -webkit-text-fill-color: var(--color-texto-bps, #878B8F) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--surface-container-High-bps, #FBFFFD) inset;
    transition: background-color 5000s ease-in-out 0s;
}

.busca-subtitulo {
    color: var(--color-card-noticias-bps, #004A80);
    font-family: 'open_sansbold', sans-serif;
    font-size: 16px;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.0390625vw;
    margin-top: -16px;
    margin-bottom: -16px;
}

/* Remove resquícios do ícone antigo */
.campo-pesquisa .fa-search:before {
    content: "";
}