/*
  MENU v 1.1;
  05/2023;
  João Diogo Pereira;
*/

.site-header,
.site-header.scrolled{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    background: var(--green);
    transition: all .3s ease-in-out;
}

.site-header nav ul{
    padding: 0;
    margin: 0;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
}

.home .site-header:not(.scrolled), .page-template-page-imoveis .site-header:not(.scrolled){
    background: linear-gradient(180deg, #000 0%, transparent 100%);
}

.page-template-page-servicos .site-header, .page-template-page-servicos .site-header.scrolled, .page-template-page-servicos .site-header nav ul, .page-template-page-servicos .site-header.scrolled nav ul,
.page-template-page-recrutamento .site-header, .page-template-page-recrutamento .site-header.scrolled, .page-template-page-recrutamento .site-header nav ul, .page-template-page-recrutamento .site-header.scrolled nav ul,
.single-servico .site-header, .single-servico .site-header.scrolled, .single-servico .site-header  nav ul, .single-servico .site-header.scrolled  nav ul,
.single-imovel .site-header, .single-imovel .site-header.scrolled, .single-imovel .site-header nav ul, .single-imovel .site-header.scrolled  nav ul,
.page-template-page-area-reservada .site-header, .page-template-page-area-reservada .site-header.scrolled, .page-template-page-area-reservada .site-header nav ul, .page-template-page-area-reservada .site-header.scrolled nav ul,
.error404 .site-header, .error404 .site-header.scrolled, .error404 .site-header nav ul, .error404 .site-header.scrolled nav ul,
.page-template-page-perfil .site-header, .page-template-page-perfil .site-header.scrolled, .page-template-page-perfil .site-header nav ul, .page-template-page-perfil .site-header.scrolled nav ul,
.page-template-page-documentos .site-header, .page-template-page-documentos .site-header.scrolled, .page-template-page-documentos .site-header nav ul, .page-template-page-documentos .site-header.scrolled nav ul,
.page-template-page-agendamentos .site-header, .page-template-page-agendamentos .site-header.scrolled, .page-template-page-agendamentos .site-header nav ul, .page-template-page-agendamentos .site-header.scrolled nav ul,
.page-template-page-simuladores .site-header, .page-template-page-simuladores .site-header.scrolled, .page-template-page-simuladores .site-header nav ul, .page-template-page-simuladores .site-header.scrolled nav ul{
    background: var(--black);
}

.page-template-page-contactos .site-header, .page-template-page-contactos .site-header.scrolled,
.page-template-page-contactos .site-header nav ul, .page-template-page-contactos .site-header.scrolled nav ul{
    background: var(--brown);
}

.site-header .logo-header h1{
    margin: 0;
    line-height: 0;
}

.site-header .logo-header img {
    max-width: 125px;
    height: auto;
    z-index: 99;
    position: relative;
}

.site-header nav ul a{
    padding-left: 1rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--gothic);
    font-weight: 400;
    font-size: calc(16px + var(--fontSize));
    line-height: 100%;
    letter-spacing: 0;
    vertical-align: middle;
    color: var(--white);
    text-decoration: none;
    z-index: 99;
    position: relative;
    text-align: center;
    transition: all .3s ease-in-out;
}

.site-header .loginout{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--gothic);
    font-weight: 400;
    font-size: calc(16px + var(--fontSize));
    line-height: 100%;
    letter-spacing: 0;
    vertical-align: middle;
    color: var(--white);
    text-decoration: none;
    white-space: nowrap;
    z-index: 99;
    position: relative;
    transition: all .3s ease-in-out;
}

.site-header .loginout svg{
    fill: var(--white);
    width: 20px;
    height: auto;
    transition: all .3s ease-in-out;
}

.site-header nav ul a:hover, .site-header nav ul .current_page_item a, .site-header .loginout:hover{
    color: var(--lightbrown);
}

.site-header .loginout:hover svg{
    fill: var(--lightbrown);
}

.site-header .loginout .cart-count{
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(50%);
    background-color: var(--lightbrown);
    padding: .25rem;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-size: calc(10px + var(--fontSize));
    display: flex;
    align-items: center;
    justify-content: center;
    color:white;
}

.site-header .loginout:hover .cart-count{
    color: var(--white);
}

/*MOBILE*/

#menu__toggler{
    height: 0;
    opacity: 0;
    width: 0;
}

.menu__toggle {
    transition: all .3s ease-in-out;
    position: relative;
    z-index: 99;
    display: none;
}

.menu__toggle .bar{
    position: absolute;
    height: 2px;
    width: 22px;
    display: block;
    margin: 0;
    background-color: var(--white);
    border-radius: 10px;
    /* right: 12px; */
    right: 0;
    cursor: pointer;
    transform: translateY(-50%);
}

.menu__toggle .bar:nth-of-type(1){
    top: calc(50% - 7px);
    rotate: 0deg;
    transition: rotate .2s ease-in-out, width .2s ease-in-out .2s, right .2s ease-in-out .2s, top .2s ease-in-out .4s;
}

.menu__toggle .bar:nth-of-type(2){
    top: 50%;
    z-index: 2;
}

.menu__toggle .bar:nth-of-type(3){
    top: calc(50% + 7px);
    rotate: 0deg;
    transition: rotate .2s ease-in-out, width .2s ease-in-out .2s, right .2s ease-in-out .2s, top .2s ease-in-out .4s;
}

#menu__toggler:checked ~ .menu__toggle .bar:nth-of-type(1){
    top: calc(50% + 3px);
    width: 11px;
    right: 3px;
    rotate: 45deg;
    transition: top .2s ease-in-out, width .2s ease-in-out .2s, right .2s ease-in-out .2s, rotate .2s ease-in-out .4s;
}

#menu__toggler:checked ~ .menu__toggle .bar:nth-of-type(3){
    top: calc(50% + 3px);
    width: 11px;
    right: 8px;
    rotate: -45deg;
    transition: top .2s ease-in-out, width .2s ease-in-out .2s, right .2s ease-in-out .2s, rotate .2s ease-in-out .4s;
}

#menu__toggler:checked ~ nav ul{
    right: 0;
}

@media only screen and (max-width: 1200px){
    .site-header nav ul:not(.accessibility__list){
        position: fixed;
        width: 100vw;
        height: calc(100% - var(--headerSize));
        right: -100vw;
        top: var(--headerSize);
        display: block;
        padding-top: 1rem;
        background-color: var(--green);
        transition: all .3s ease-in-out;
    }

    .home .site-header:not(.scrolled) nav ul, .page-template-page-imoveis .site-header:not(.scrolled) nav ul{
        height: 100%;
        right: -100vw;
        top: 0;
        padding-top: calc(var(--headerSize) + 1rem);
    }

    .site-header nav ul a{
        padding: 1rem;
        font-size: calc(18px + var(--fontSize));
    }

    .px-custom{
        padding-left: 0!important;
        padding-right: 0!important;
    }

    .menu__toggle {
        display: block;
    }

    .site-header .loginout{
        justify-content: flex-end;
    }
}

@media only screen and (max-width: 767px){
    .site-header .logo-header img {
        max-width: 75px;
        height: auto;
    }

    .menu__toggle{
        margin-right: 12px;
    }

    .site-header .loginout{
        font-size: calc(14px + var(--fontSize));
    }

    .site-header .loginout svg{
        width: 16px;
    }

    .site-header .loginout .cart-count {
        width: 20px;
        height: 20px;
        font-size: calc(8px + var(--fontSize));
    }
}