/*-------------------*/
/*-------------------*/
/*NAVBAR mobile first*/
/*-------------------*/
/*-------------------*/

/*le reset.css ne comprend pas une réinitialisation des comportements de liens*/
/*je specifie que je veux un re-skin des liens uniquement dans mes navigations (haute et reseaux sociaux) .*/
/*si vous voulez specifier le meme comportement pour tout les liens, vous pouvez faire : "body a{}" */
nav a{
    text-decoration: none;
    color:var(--clr-light);
}

#main-nav{
    /*je donne une valeur haute au zindex pour etre sur que ma nav passe au dessus de tout les elements de page*/
    z-index: 1000;
    /*je donne les propriété de flex pour positioner mes deux element de navigation*/
    display: flex;
    /*le space between me permet de coller mes deux elements de chaque coté de ma navigation*/
    justify-content: space-between;
    /*je veux que ma navigation prenne toute la largeur de la page et 64px de haut*/
    width: 100%;
    min-height: 64px;
    /*je veux qu'elle soit coller en bas de mon ecran*/
    position: fixed;
    bottom:0;
    /*je donne une couleur de fond*/
    background-color: var(--clr-dark);
    box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.3);
}

/*pour pouvoir voir le contenu de toute la page sans que la navigation masque du contenu*/

/*je cache mon branding sur l'affichage mobile*/
.brand {display: none;}
/*je position mon menu et lui donne les comportement flex pour positionner les liens */
.menu{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
}
/*le selecteur suivant dit "dans ma class menu (qui est un conteneur flex),
j'opere sur TOUT les enfants DIRECT, quelques soient leur nature div spa liens etc, " */
.menu > * {
    /*le flex 1 permet de répartir mes elements en fractions egales sur ma ligne*/
    flex:1;
    /*je donne les propriété de flex pour positioner mes deux elements du bouton : l'icon et le texte*/
    display: flex;
    /*je centre mon icon et mon texte dans le conteneur */
    align-items: center;
    justify-content: center;
}
/*je donne des propriétés au survol du bouton*/
.menu > *:hover {
    background-color: var(--clr-primary);
    border-bottom: 4px var(--clr-secondary) solid;
    color:var(--clr-secondary);
}
.menu > *:active {
    background-color: var(--clr-secondary);
    border-bottom: 4px var(--clr-primary) solid;
    color:var(--clr-primary);
}
/*je dis a mon icon d'etre plus grande et a mon texte*/
/*ATTENTION le font size s'applique car c'est une icon svg.*/
/*si vous importer des images, il faudra jouer sur la taille d'affichage avec le width et le height*/
.menu > * > *:nth-child(1){font-size: 2rem;}
/*je cache les ecritures sur affichage mobile*/
.menu > * > *:nth-child(2) {display: none;font-size: 1rem;}


/*vous pouvez aussi rajouter une taille intermediaire pour votre navigation en plus de celle proposé plus bas pour le 768px*/
/*mais attention : toute classes, toutes propriété changer dans ce media, sera initialisé pour  les media superieurs*/
/*WARNING: se rapeler qu'utiliser min-width dit : CECI EST L'AFFICHAGE POUR TOUT LES ECRANS AU DESSUS de cette min-width*/
/*si dans le cas suivant j'utilise une nouvelle position et une nouvelle direction flex sur ma nav,
il va falloir rajouter ces regles sur le media superieur suivant*/
/*
@media (min-width:500px){
    #main-nav{position:relative;top:0;bottom: initial;flex-direction: column;}
    .brand {display: block;}
    .menu{width: initial;margin-top: 1rem;}
    .menu > *{padding:0rem 1rem;}
    .menu > * > *:nth-child(1){padding:0rem 1rem 0px 0px;}
    .menu > * > *:nth-child(2) {display: block;}
}
*/
/*definition des regles sur les grand ecrans*/
/*nous allons devoir redefinir les regles d'affichage pour avoir le logo et les textes en plus mais aussi le positionnement en haut*/
@media (min-width:768px){
    /*je redefini le positionnement en haut*/
    #main-nav{top:0;bottom: initial;}
    /*j'affiche le bloc logo et lui rajoute un padding pour le centrer dans la nav bar*/
    .brand {display: block;padding: 8px 0rem 8px 2rem;}
    /*je donne les propriété de flex pour aligner le logo et le texte dans la nav bar*/
    .brand a{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        font-family: 'Archivo Black', sans-serif;
        font-weight: bolder;
        color: var(--clr-lighter);
    }
    /*je donne une hauteur fixe au logo pour qu'il rentre dans la nav bar avec un peut de marge sur l'axe vertical*/
    /*attention : si la ressource image est carré, il faudra rajouter une marge sur l'axe horizontal */
    .brand-img{
        max-height: 68px;
        margin-right:2rem;
        /*je donne une forme de cercle au logo*/
        /*clip-path: circle();*/
    }
    /*.brand-name{}*/
    /*en affichage mobile, nous avions donné une largeur de 100% pour occuper tout l'espace*/
    /*je redefini la taille en auto pour qu'elle s'adapte au contenu enfant et non au conteneur parent*/
    .menu{width:auto;}
    /*je donne une regles de marge interieure sur l'axe horizontal a tout les elements enfants DIRECT de mon menu*/
    .menu > *{padding:0rem 1.66rem;}
    /*je donne une marge a droite de l'icone pour position le texte */
    /*NOTE : j'aurai pu mettre cette marge a gauche du texte sur le Nchild2, mais si,
    imaginons, les icones ne s'affiches pas pour X raisons, le texte ne sera pas centré dans le lien */
    .menu > * > *:nth-child(1){margin:0rem 1rem 0px 0px;}
    /*j'affiche les textes*/
    .menu > * > *:nth-child(2) {display: block;}
}