/* https://origamid.com/projetos/flexbox-guia-completo/ 
 Nesse site encontramos um guia completo sobre Flexbox*/

/*Esse arquivo configura o estilo do cabeçalho das páginas*/

.barra-logotipo { /*possibilita fazer alteração na barra superior que foi
    configurada para ficar visivel somente em telas menores (tablet e mobile)*/
    padding: 0px; /* reduz o espaçamento entre o limite da barra do menu 
                  principal e do limite da barra da lista ul*/
    color: #fff; /*define a cor do texto*/
    background-color: #8a8a8a; /*define a cor de fundo dos itens do menu*/
    height: 4em; /*define altura da barra superior*/
    align-items: center;
}
.barra-logotipo .icone_barra {
    color: #fff;
}

.accordion-menu .is-accordion-submenu-parent>a::after {
    border-color: #87CEFA transparent transparent!important;
}
.accordion-menu li {
    background-color: #8a8a8a; /*define cor de fundo*/
}
.accordion-menu li a {
    color: #87CEFA;  /* 00BFFF d7ecfa*/
}
/* Menu fixo */
.sticky-menu { /* possibilita fazer ajustes no menu fixo */
    z-index: 2; /*sobrepõe o menu fixo aos demais elementos da página*/
}

/* O código abaixo configura o menu fixo para telas menores (tablet e mobile)*/
.sticky-menu .title-bar { /* possibilita fazer ajustes na barra de título do menu*/
    background-color: #cacaca; /*define cor de fundo*/
    color: #8a8a8a; /*define cor da fonte*/
    .title-bar-title { /* possibilita fazer ajustes no texto da barra de título */
        font-family: Verdana, Arial, Helvetica, sans-serif; /* define o estilo da fonte utilizada no texto */
        font-size: 15px; /* define o tamanho da fonte utilizada no texto */
        padding: 0px; /* define o espaço entre o texto e as extremidades da barra de título */
    }
}
.sticky-menu .menu-icon::after { /*possibilita fazer ajustes no icone do menu fixo em telas menores*/
    background-color: #1E90FF; /*define a cor do primeiro traço*/
    -webkit-box-shadow: 0 7px 0 #00BFFF, 0 14px 0 #1E90FF; /*define a cor e espaço do segundo traço*/
    box-shadow: 0 7px 0 #1E90FF, 0 14px 0 #1E90FF; /*define a cor e espaço do terceiro traço*/
}

/* O código abaixo configura o menu principal em telas grandes */
.top-bar { /* possibilita fazer alterações na barra do menu */
    background-color: #8a8a8a; /* define cor de fundo */
    padding: 0px; /* reduz o espaçamento entre o limite da barra do menu principal e 
                     do limite da barra da lista ul*/
    height: 6em;
}
.top-bar .texto {
    color: #fff;
}
.top-bar .link-logotipo { /* possibilita fazer ajustes no link do logotipo */
    padding: 0px!important; /* tira os espaços ao redor da figura logotipo*/
}
.top-bar .logotipo { /* possibilitar fazer ajustes na figura do logotipo */
    height: 4em; /*define a altura da figura logotipo*/
}
.top-bar ul { /*possibilita fazer ajustes em cada item da lista*/
    background-color: #8a8a8a; /*muda a cor de fundo do elemento primário <ul> da lista*/
}
.top-bar .dropdown { /* possibilita fazer alterações na barra do menu principal*/
    background-color: #8a8a8a; /*define a cor da barra do menu*/
    display: flex;
    align-items: center;
    justify-content: center;
}
.top-bar .dropdown.large-horizontal>li.is-dropdown-submenu-parent>a::after { /* muda a cor do iconezinho que 
                                                                             fica do lado do menu*/ 
    color: #00b9f2;
    border-color: #00b9f2 transparent transparent;
}
.top-bar .dropdown>li.is-active>a { /*cor do menu que abre um submenu quando o mouse passa sobre ele*/
    color: #4F4F4F; /*#00b9f2;*/
    border-color: #00b9f2 transparent transparent;
}
.top-bar .dropdown>li.is-active>a::after { /*cor do iconezinho do lado do menu que abre 
                                           um submenu quando o mouse passa sobre ele*/
    border-color: #4F4F4F transparent transparent!important;
}
.is-dropdown-submenu>li {
    border-style: none;
    height: 2.1em;
}
.dropdown .is-dropdown-submenu {
    border-style: none;
}
.dropdown .is-dropdown-submenu a {
    height: 2.2em!important;
    border-style: solid;
    border-color: #A9A9A9;
    border-width: 0.05em;
}

.top-bar .dropdown li a { /*possibilita fazer alterações nos itens do menu principal*/
    background-color: #8a8a8a; /*define a cor de fundo dos itens do menu*/
    color: #00b9f2; /*cor anterior 87CEFA*/
    height: 6em;
    display: flex;
    align-items: center;
}
.top-bar .dropdown li:not(:first-child) a:hover { /* faz alterações no item do menu principal que está selecionado pelo mouse */
    background-color: #cacaca; /* define cor de fundo */
    color: #8a8a8a; /* define cor da letra */
}
.top-bar .icone {
    color: #fff;
}
.top-bar .dropdown li.especial a:hover {
    background-color: transparent;
}
.top-bar .accordion-menu li a:hover { /* Para telas menores (tablet e mobile): altera cor de fundo e letra quando clica 
                                      em alguma opção do menu deixando-o marcado*/
    background-color: #F8F8FF; /*define a cor de fundo*/
    color: #8a8a8a; /*define a cor da letra*/
}

/* O código abaixo oculta a barra superior (para mobile e tablets) quando o 
conteúdo for exibido em telas grandes (laptop, desktop etc)*/
@media only screen and (min-width: 64em) {
    .barra-logotipo { /*omite a barra superior*/
        display: none;
    }
    .menuitem-produto {
        width: 100px;
    }    
}
/* O código abaixo torna visível uma barra superior criada para telas pequenas e 
    médias (mobile e tablets)*/
@media only screen and (max-width: 64.063em) {
    .barra-logotipo .alinhado-a-direita { /*alinha o menu com os icones das
        redes sociais à direita nas telas menores (tablet e mobile)*/
        float: right;
    }
    .barra-logotipo .texto { /*possibilita fazer alterações no texto de titulo
        da barra superior nas telas menores (tablet e mobile)*/
        margin-left: 0.72rem;
        font-weight: bold;
    }
    .barra-logotipo img { /*ajusta a altura da figura do logotipo para ficar
        visualmente compativel com a barra superior em telas menores (tablet e
        mobile)*/
        height: 2.5em; /*ajusta a altura da figura do logotipo*/
        margin-left: 0.5em; /*ajusta o espaço à esquerda entre o canto esquerdo
                              da tela e a figura do logotipo*/
    }
    .top-bar { /*possibilita fazer ajustes na barra inicial do menu nas
        telas menores (tablet e mobile)*/
        display: block; /*mantem a barra inicial do menu visivel*/
    }
    .top-bar .accordion-menu .especial { /*oculta os icones das redes sociais e
        o logotipo e o nome dentro do menu em telas menores (tablet e mobile), 
        afinal esses já foram configurados para aparecer na barra superior*/
        display: none;
    }
    .mobile { /*permite aparecer o logotipo e o título na barra superior em 
              telas menores (tablet e mobile)*/
        display: block;
    }
    .menuitem-produto {
        width: 100%;
    }

}

@media only screen and (max-width: 25em) {
    .barra-logotipo .texto { /*possibilita fazer alterações no texto de titulo
        da barra superior nas telas menores (tablet e mobile)*/
        font-size: 0.8em;
    }
    .top-bar .accordion-menu { /*possibilita fazer alterações no texto do menu
        principal em telas menores (tablet e mobile)*/
        font-size: 0.8em;
    }
    .top-bar .accordion-menu .especial { /*oculta os icones das redes sociais
        dentro do menu em telas menores (tablet e mobile), afinal esses icones
        foram configurados para aparecer na barra superior*/
        display: none;
    }
    .menu { /*possibilita fazer alterações na palavra Menu ao lado do icone
        do menu em telas menores (tablet e mobile)*/
        font-size: 0.8em;
    }
    .menu a { /*reduz espaçamento ao redor dois icones das redes sociais e dos
              itens do menu principal deixando um visual mais harmônico em telas
              menores (tablet e mobile)*/
        padding: 0.9rem 0.8rem;
    }
    .menuitem-produto {
        width: 100%;
    }
}

@media only screen and (max-width: 20em) {
    .barra-logotipo .texto { /*possibilita fazer alterações no texto de titulo
        da barra superior nas telas menores (mobile)*/
        margin-left: 0.5rem;
        font-size: 0.6em;
    }
    .top-bar .accordion-menu { /*possibilita fazer alterações no texto do menu
        principal em telas menores (mobile)*/
        font-size: 0.6em;
    }
    .menu { /*possibilita fazer alterações na palavra Menu ao lado do icone
        do menu em telas menores (mobile)*/
        font-size: 0.6em;
    }
    .menu a { /*reduz espaçamento ao redor dois icones das redes sociais e dos
              itens do menu principal deixando um visual mais harmônico em telas
              menores (mobile)*/
        padding: 1rem 0.8rem;
    }
    .menuitem-produto {
        width: 100%;
    }
}


/*
Prevenindo FOUC
Antes que o JavaScript da sua página seja carregado, você poderá ver os 
elementos para celular e desktop ao mesmo tempo por um breve segundo. Isso é 
conhecido como flash de conteúdo sem estilo . Não há uma maneira fácil para o 
framework lidar com isso para você, mas você pode adicionar algum CSS extra 
para compensar isso.

.title-bar é nosso elemento mobile e .top-bar é nosso elemento desktop. 
Portanto, antes de o JavaScript carregar, queremos que apenas o elemento 
certo para aquele tamanho de tela esteja visível. O código abaixo faz isso
acontecer.
*/
.no-js .top-bar {
    display: none;
}

@media screen and (min-width: 40em) {
    .no-js .top-bar {
        display: block;
    }

    .no-js .title-bar {
        display: none;
    }
}