@import url(/css/root.css);

:root {
    --header-size-small: 70px;
    --header-size-large: 90px;
}

header {
    z-index: 150;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    border: none;
    border-radius: 0 0 0.4em 0.4em;
    background-color: transparent;
    background: var(--background-pre-gradient);
    background: var(--background-000toffft-10to100);
    translate: 0% 0%;
    transition: all .3s ease-in-out;
}
header.hide {
    translate: 0% -100%;
}
header.outTop {
    background: transparent;
    background-color: var(--color-vermelho-arcca);
}

.cont_header {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.boxLogo {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-base-white);
    border-radius: 0.2em;
    box-shadow: 0px 0px 0px 1px rgba(255,255,255,1);
    -webkit-box-shadow: 0px 0px 0px 1px rgba(255,255,255,1);
    -moz-box-shadow: 0px 0px 0px 1px rgba(255,255,255,1);
}
.boxLogo img {
    aspect-ratio: 1/1;
    object-fit: contain;
}

.boxTitle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--color-base-white);
}
.boxTitle h1 {
    text-align: center;
    font-size: clamp(1rem, calc(1.2rem + 15%), 1.5rem);
}
.boxTitle h2 {
    text-align: center;
    font-size: clamp(0.5rem, calc(0.8rem + 15%), 1rem);
    text-wrap: nowrap;
}

/* Navbar */

nav {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 500;
}

#btn-sidebar-toggle {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 0.2em;
    background-color: transparent;
    cursor: pointer;
    transition: all .3s ease-in-out;
    
    padding: 0.2em 0.2em;
}
#btn-sidebar-toggle.active {
    margin-right: 0.6em;
    z-index: 502;
    background-color: transparent;
}

#navbar-list li.inactive {
    display: none;
}

/* Mobile */
@media screen and (max-width: 1440px) {

    header {
        min-width: 100%;
        height: var(--header-size-small);
    }

    .boxLogo {
        box-shadow: 0px 0px 0px 1px rgba(255,255,255,1);
        -webkit-box-shadow: 0px 0px 0px 1px rgba(255,255,255,1);
        -moz-box-shadow: 0px 0px 0px 1px rgba(255,255,255,1);
    }
    .boxLogo img {
        width: 56px;
        height: auto;
    }

    #navbar-list {
        position: absolute;
        top: 0;
        right: 0%;
        translate: 100% 0%;
        background-color: var(--color-verde-arcca);
        overflow-x: hidden;
        overflow-y: auto;

        min-width: 60%;
        width: auto;
        max-width: 80%;
        height: 100dvh;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-end;
        gap: 1.2em;
        padding: calc(var(--header-size-small) * 1.2) 1em calc(var(--header-size-small) / 2) 2em;
        border: none;
        border-radius: 0.5em 0em 0em 0.5em;
        transition: translate .3s ease-in-out;
    }
    #navbar-list.show {
        translate: 0% 0%;
        z-index: 501;
    }

    #navbar-list li {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    #navbar-list a {
        width: 100%;
        color: var(--color-base-white);
        font-size: 1.3rem;
        text-align: right;
    }
}
/* Desktop */
@media screen and (min-width: 1440px) {

    #btn-sidebar-toggle {
        display: none;
        background-color: var(--color-bg-light-hover) !important;
    }

    header {
        min-width: 100%;
        height: var(--header-size-large);
    }

    .boxLogo {
        box-shadow: 0px 0px 0px 2px rgba(255,255,255,1);
        -webkit-box-shadow: 0px 0px 0px 2px rgba(255,255,255,1);
        -moz-box-shadow: 0px 0px 0px 2px rgba(255,255,255,1);
    }
    .boxLogo img {
        width: 72px;
        height: auto;
    }
    
    .boxTitle {
        display: flex;
        align-items: flex-start;
        margin-left: 2em;
        margin-right: auto;
    }
    .boxTitle h1 {
        margin-top: 5%;
        font-size: clamp(1rem, calc(1.5rem + 20%), 2rem);
    }
    .boxTitle h2 {
        translate: 0 -0.4em;
        text-align: center;
        font-size: clamp(0.8rem, calc(1rem + 25%), 1.2rem);
    }

    #navbar-list {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 2em;
    }

    #navbar-list li {
        justify-content: center;
    }

    #navbar-list a {
        color: var(--color-base-white);
        font-size: 1.2rem;
        text-align: center;
    }

}