/*
==========================================================
 Portal ICEC GYE
 Archivo: header.css
 Versión: 0.1.0
==========================================================
*/

/* ===== HEADER ===== */

header{
    display:flex;
    align-items:center;
    justify-content:center;
}

.header-container{
    width:min(100% - 2rem,var(--container));
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:0 auto;
}

.logo{
    display:flex;
    align-items:center;
    gap:1rem;
}

.logo img{
    height:60px;
    width:auto;
}

.logo h1{
    margin:0;
    font-size:1.25rem;
    color:var(--color-primary);
}

.nav-menu{
    display:flex;
    align-items:center;
    gap:1rem;
}

.nav-menu a{
    position:relative;
    font-weight:600;
    color:var(--color-dark);
    transition:var(--transition);
}

.nav-menu a:hover,
.nav-menu a.active{
    color:var(--color-primary);
}

.nav-menu a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:var(--color-primary);
    transition:var(--transition);
}

.nav-menu a:hover::after,
.nav-menu a.active::after{
    width:100%;
}

/* ===== BOTÓN HAMBURGUESA ===== */

.menu-toggle{
    display:none;
    width:44px;
    height:44px;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-md);
}

.menu-toggle:hover{
    background:rgba(11,78,162,.08);
}

.menu-toggle span{
    display:block;
    width:24px;
    height:3px;
    background:var(--color-primary);
    margin:4px 0;
    border-radius:10px;
}

/* ===== RESPONSIVE ===== */

@media (max-width:768px){

    .menu-toggle{
        display:flex;
        flex-direction:column;
    }

    .nav-menu{
        position:absolute;
        top:var(--header-height);
        left:0;
        width:100%;
        background:var(--color-white);
        flex-direction:column;
        gap:1.25rem;
        padding:2rem;
        box-shadow:var(--shadow-md);
        display:none;
    }

    .nav-menu.active{
        display:flex;
    }

    .logo h1{
        display:none;
    }

}