/* =====================================================
   MENU
===================================================== */


/* HEADER */

.header {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 100;

    background: transparent;

    transition:
        background 0.3s ease,
        backdrop-filter 0.3s ease;

}


.header.scrolled {

    position: fixed;

    background: rgba(0, 0, 0, 0.85);

    backdrop-filter: blur(10px);

}


/* CONTAINER */

.header-container {

    width: min(
        calc(100% - 80px),
        var(--container)
    );

    margin: 0 auto;

    min-height: 100px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


/* LOGO */

.header-logo img {

    width: 150px;

    transition: filter 0.3s ease;

}

/* =====================================================
   LOGO QUANDO O MENU ESTÁ SOBRE FUNDO PRETO
===================================================== */

.header.scrolled .header-logo img {

    filter: brightness(0) invert(1);

}

/* LOGO BRANCO NO MENU MOBILE ABERTO */

@media (max-width: 800px) {

    .header.menu-open .header-logo img {

        filter: brightness(0) invert(1);

    }

}

/* =====================================================
   HAMBURGER → X
===================================================== */

@media (max-width: 800px) {

    .header.menu-open .menu-button span:nth-child(1) {

        transform: translateY(10px) rotate(45deg);

    }


    .header.menu-open .menu-button span:nth-child(2) {

        opacity: 0;

    }


    .header.menu-open .menu-button span:nth-child(3) {

        transform: translateY(-10px) rotate(-45deg);

    }

}


/* MENU DESKTOP */

.desktop-menu {

    display: flex;

    align-items: center;

    gap: 40px;

    font-family: "Barlow Condensed", sans-serif;

    font-size: 18px;

    font-weight: 800;

    text-transform: uppercase;

}


/* =====================================================
   MENU DESKTOP
===================================================== */

.desktop-menu {

    display: flex;

    align-items: center;

    gap: 40px;

    font-size: 18px;

    font-weight: 700;

    text-transform: uppercase;

}


.desktop-menu a {

    color: #000;

    font-family: "Barlow Condensed", sans-serif;

    font-weight: 800;

    transition: color 0.2s ease;

}

.mobile-menu a {

    font-family: "Barlow Condensed", sans-serif;

    font-size: 25px;

    font-weight: 800;

    text-transform: uppercase;

}


/* MENU SOBRE O BANNER */

.desktop-menu a:hover {

    color: #fff;

}


/* =====================================================
   MENU COM FUNDO PRETO APÓS SCROLL
===================================================== */

.header.scrolled .desktop-menu a {

    color: #fff;

}


.header.scrolled .desktop-menu a:hover {

    color: var(--yellow);

}


/* =====================================================
   HAMBURGER
===================================================== */

.menu-button {

    display: none;

    width: 40px;
    height: 40px;

    border: 0;

    background: transparent;

    cursor: pointer;

    flex-direction: column;

    justify-content: center;

    align-items: flex-end;

    gap: 5px;

    padding: 0;

    position: relative;

    z-index: 110;

}


.menu-button span {

    display: block;

    width: 30px;
    height: 5px;

    background: #fff;

    border-radius: 0;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;

}

@media (max-width: 800px) {

    .menu-button {
        display: flex;
    }

}


/* =====================================================
   MENU MOBILE
===================================================== */

.mobile-menu {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100vh;

    background: #000;

    z-index: 90;

    padding: 120px 40px 40px;

    transform: translateX(100%);

    transition: transform 0.4s ease;

}


.mobile-menu.active {

    transform: translateX(0);

}


.mobile-menu nav {

    display: flex;

    flex-direction: column;

    gap: 28px;

}


.mobile-menu a {

    font-family: "Barlow Condensed", sans-serif;

    font-size: 32px;

    font-weight: 800;

    text-transform: uppercase;

    color: #fff;

    transition: color 0.2s ease;

}


.mobile-menu a:hover {

    color: var(--yellow);

}