/*O normal é fazer no mesmo arquivo do css, mas AGORA acho que seja melhor dividir*/
/*Site para ver se a propriedade funciona ou não: caniuseit.com.
Alguns navegadores mais antigos não suportam*/
.cabecalhoPrincipal .container {
    /*Usei o 'container' para iniciar o flexbox pois ele é a classe 
    pai dos elementos q quero alinhar.
    N usei apenas o 'container' pois tem outro*/
    display: flex;
    align-items: center;
    justify-content: space-between; /*Pegue o espaço q sobra e cola entre os elementos*/


}

.cabecalhoPrincipal-nav {
    display: flex; /*Tem um 'margin: 0 0 0 10px no cass aqui. 
    Não dá pra usar o 'space-between' pq ta tudo junto. 
    N tem espaço que sobre*/
    
}

.cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rodapePrincipal-patrocinadores .container{
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.rodapePrincipal-patrocinadores-list {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 70%; /*Distribuir em um espaço determinado, pois não há incialmente*/
    margin-right: 5%;
}

.rodapePrincipal-contatoForm{
    width: 25%;

}

.rodapePrincipal-contatoForm-fieldset {
    display: flex;

}

.rodapePrincipal-navMap-list {
    display: flex;
    flex-direction: column;
    /* flex-direction: column-reverse; REVERTE A ORDEM DOS FLEX ITENS NA COLUNA */
    flex-wrap: wrap;
    height: 260px;

}

.conteudoPrincipal-cursos {
    display: flex;
    flex-wrap: wrap; 


}

.conteudoPrincipal-cursos-link {
    width: 23%;
    margin: 1%;

/*

É complicado fazer um grid com o justify-contente, é melhor fazer usando o with e margin

EXEMPLO: 

Nesse caso teriamos 3 .course por linha, cada um com width: 31.3% e margin: 1%.

De width isso totaliza: 31.3 * 3 = 93.9%.

De margin isso totaliza: 6% (1% à esquerda e 1% à direita de cada elemento).

No total temos: 93.9% + 6% = 99.9% que dá pra arredondar para 100%.*/


}

.conteudoPrincipal-cursos-link:nth-child(4n) {
    margin-right: 0;


}

.conteudoPrincipal-cursos-link:nth-child(4n+1) {
    margin-right: 0;
    /*Funciona assim: 4 x 0 + 1 = 1, 4 x 1 + 1 = 5...*/
} 

.videoSobre .container {
    display: flex;
    

}

.videoSobre-sobre {
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-grow: 2; /*Pega o espaço restante e faz o item crescer. 
    Pode ir até 10(oou infinito). ACHO q é em proporção 

    OUTROS COMANDOS
    flex: 1 1 250px; grow | shrink | flex-basis
    flex-basis: 25%; (define o tamanho fixo de todos itens. É basicamente um Width, mas com prioridade superior. Porem define a altura se tiver em column e a largura se tiver em row)


    https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_flex-grow */

}

.videoSobre-sobre-list {
    flex-grow: 1;

}
/*Já que ambos tem flex-grow: 1, o navegador dividiu em 2 o espaço e distribuiu para cada.
Se eu colocasse 2 no video, ele ficaria maior, pois diviria em 3*/
.videoSobre-video {
    flex-grow: 1;
    flex-shrink: 2; /*Vai diminuir duas vezes mais do que a lista quando a tela diminuir também
        flex-shrink: 0 (Caso eu queira que n diminua)
    */

}

/*________________________________________________________________________MOBILE________________________________________________________________________*/
@media screen and (max-width: 768px) {

.cabecalhoPrincipal-nav-link-app {
    order: -1; /*Alterar a ordem dos flex itens dentro do flex container*/

    }

.cabecalhoPrincipal-nav {
    flex-direction: column;

}

.cabecalhoPrincipal .container {
    flex-direction: column;
    align-items: initial;
    text-align: center;

}

.conteudoPrincipal-cursos{
    flex-direction: column;

}

.conteudoPrincipal-cursos-link {
    width: 100%;

}

.rodapePrincipal-navMap-list {
    height: auto;
    align-items: center;

}

.rodapePrincipal-patrocinadores .container{
    flex-direction: column;
    align-items: center;

}

.rodapePrincipal-contatoForm{
    width: auto;

}

.rodapePrincipal-patrocinadores-list {
    width: 100%;
    margin: auto;

}

.videoSobre .container {
    flex-direction: column;

}

.videoSobre-video {
    margin: 1rem auto;

}
    
}



/*SOBRE OS USOS DO FLEX CONTAINER e FLEX ITENS

flex container:
justify-content, align-items, display: flex, flex-direction, flex-wrap...

flex items:
order, flex-grow, flex-shrink

A propriedade display: flex pode ser usada nos dois. Se for usada em um flex item esse elemento será tanto um flex item quanto um flex container.


*/







/* SOBRE O JUSTIFY-CONTENT

Podemos distribuir os elementos dentro do pai de diversas formas, podemos por exemplo:

Colocar todo espaço à esquerda, jogando o conteúdo para direita com justify-content: flex-end.

Colocar todo espaço à direita, jogando o conteúdo para esquerda com justify-content: flex-start (que é o padrão).

Colocar todo espaço à esquerda e à direita, jogando o conteúdo para o meio com justify-content: center.

Colocar todo espaço entre os elementos como vimos antes usando justify-content: space-between.

E uma possibilidade bem interessante também é colocar o espaço em volta dos elementos. Podemos usar o justify-content: space-around para isso.


*/


/*SOBRE OS USOS DO DISPLAY

display: inline

Colocando display: inline nos elementos permite eles se posicionarem um do lado do outro, o problema do display: inline é que os elementos não aceitam mais que seja modificada tanto a width quanto a height. Isso limita MUITO nossas possibilidades.

display: inline-block

O display: inline-block permite os elementos se posicionarem um do lado do outro porém, diferentemente do display: inline ele permite que os elementos tenham sua width e height modificadas. Por esse motivo o display: inline-block é muito mais interessante na maioria dos casos do que o display: inline.

O problema de usar display: inline-block é espaçar os elementos entre si. Para fazer isso teríamos que colocar margins e fazer contas.

float: left | right

O float é mais complicado, ele empurra o elemento para um dos lados (left | right) e os elementos que estão embaixo sobem. Isso nem sempre é o que a gente quer. Além do mais o float não permite que usemos a propriedade vertical-align: middle para alinhar os elementos verticalmente. Ou seja, para contornar isso uma possibilidade seria ter que colocar margin-top ou bottom nos elementos e usar os temidos números mágicos!

display: flex

O display: flex veio com o intuito de facilitar nossa vida nesses aspectos de posicionamento. Ele permite os elementos ficarem um do lado do outro, permite espaçar os elementos de forma mais intuitiva e sem ter que fazer cálculos. Além disso ele também permite alinhar os elementos verticalmente de forma fácil.

O display flex pode ser um pouco mais complicado de usar tendo em vista que existem diversas propriedades que vem junto da especificação flexible box, todavia tudo isso foi feito para justamente melhorar nosso código.

Agora que já tivemos essa introdução, vamos logo começar a organizar nosso site com flex (;


*/