/* ==========================================================
   PORTAL DAS JORNADAS CIENTÍFICAS
   Universidade Jean Piaget de Angola
   Ficheiro: header.css
   ========================================================== */

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

.header{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    background:rgba(255,255,255,.97);

    -webkit-backdrop-filter:blur(15px);

    backdrop-filter:blur(15px);

    border-bottom:1px solid rgba(0,0,0,.05);

    transition:var(--transition);

}

/*==========================================================
  HEADER AO FAZER SCROLL
==========================================================*/

.header.scrolled{

    background:#FFF;

    box-shadow:var(--shadow);

}

/*==========================================================
  TOPBAR
==========================================================*/

.topbar{

    background:var(--primary);

    color:#FFF;

    font-size:.90rem;

    padding:8px 0;

}

.topbar .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.topbar ul{

    display:flex;

    gap:20px;

    align-items:center;

}

.topbar li{

    display:flex;

    align-items:center;

    gap:8px;

}

.topbar i{

    color:var(--gold);

}

.topbar a{

    color:#FFF;

}

.topbar a:hover{

    color:var(--gold-light);

}

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

.header-main{

    height:90px;

}

.header-main .container{

    height:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/*==========================================================
  LOGO
==========================================================*/

.logo{

    display:flex;

    align-items:center;

    gap:18px;

}

.logo img{

    width:70px;

    height:70px;

    object-fit:contain;

    transition:.35s;

}

.logo:hover img{

    transform:rotate(-5deg) scale(1.05);

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-text h1{

    margin:0;

    font-family:var(--font-title);

    font-size:1.6rem;

    color:var(--primary);

    line-height:1.2;

}

.logo-text span{

    color:var(--gold);

    font-size:.95rem;

    font-weight:500;

}

/*==========================================================
  AÇÕES DO HEADER
==========================================================*/

.header-actions{

    display:flex;

    align-items:center;

    gap:15px;

}

.header-actions .btn{

    padding:10px 20px;

}

.search-btn{

    width:46px;

    height:46px;

    border-radius:50%;

    border:1px solid var(--border);

    display:flex;

    justify-content:center;

    align-items:center;

    background:#FFF;

    transition:.35s;

}

.search-btn:hover{

    background:var(--gold);

    color:#FFF;

    border-color:var(--gold);

}

.search-btn i{

    font-size:1.2rem;

}

/*==========================================================
  LOGIN
==========================================================*/

.login-btn{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 25px;

    border-radius:40px;

    background:var(--gold);

    color:#FFF;

    font-weight:600;

    transition:.35s;

}

.login-btn:hover{

    background:var(--gold-dark);

    transform:translateY(-2px);

    box-shadow:var(--shadow-sm);

}

/*==========================================================
  PERFIL
==========================================================*/

.user-profile{

    display:flex;

    align-items:center;

    gap:12px;

}

.user-profile img{

    width:45px;

    height:45px;

    border-radius:50%;

    object-fit:cover;

}

.user-profile h6{

    margin:0;

    font-size:.95rem;

    font-family:var(--font-primary);

}

.user-profile small{

    color:var(--text-light);

}

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

body{

    padding-top:130px;

}

/*==========================================================
  RESPONSIVO
==========================================================*/

@media(max-width:992px){

    .topbar{

        display:none;

    }

    body{

        padding-top:95px;

    }

    .logo img{

        width:58px;

        height:58px;

    }

    .logo-text h1{

        font-size:1.2rem;

    }

    .logo-text span{

        font-size:.80rem;

    }

}

@media(max-width:768px){

    .header-main{

        height:80px;

    }

    .header-actions{

        gap:10px;

    }

    .login-btn{

        display:none;

    }

}

@media(max-width:576px){

    .logo{

        gap:10px;

    }

    .logo img{

        width:50px;

        height:50px;

    }

    .logo-text h1{

        font-size:1rem;

    }

    .logo-text span{

        display:none;

    }

}