/* =========================================================
   THE WOUNDED LEGACY
   HEADER PÚBLICO
========================================================= */

:root {
    --header-height: 72px;

    --header-dark: #0C101E;

    --header-gold: #B29758;
    --header-cream: #E8E2D5;
    --header-text: #CBC6BD;
}


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

.topbar {
    position:
        relative;

    z-index:
        40;

    width:
        100%;

    min-height:
        var(--header-height);

    padding:
        0
        22px
        0
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    background:
        var(--header-dark);

    border-bottom:
        1px solid
        rgba(178,151,88,.10);
}


/* =========================================================
   NAVEGAÇÃO
========================================================= */

.main-nav {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        19px;
}


.nav-link {
    position:
        relative;

    min-height:
        var(--header-height);

    display:
        inline-flex;

    align-items:
        center;

    color:
        #E4DCCB;

    font-family:
        'Cinzel',
        serif;

    font-size:
        10.5px;

    letter-spacing:
        .8px;

    text-transform:
        uppercase;

    white-space:
        nowrap;

    transition:
        color .25s ease;
}


.nav-link:hover,
.nav-link.active {
    color:
        var(--header-gold);
}


/* linha dourada */

.nav-link::after {
    content: '';

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        13px;

    height:
        1px;

    background:
        var(--header-gold);

    opacity:
        0;

    transform:
        scaleX(0);

    transition:
        opacity .25s ease,
        transform .25s ease;
}


/* pequeno losango */

.nav-link::before {
    content: '';

    position:
        absolute;

    left:
        50%;

    bottom:
        10px;

    width:
        5px;

    height:
        5px;

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

    opacity:
        0;

    transform:
        translateX(-50%)
        rotate(45deg)
        scale(0);

    transition:
        opacity .25s ease,
        transform .25s ease;
}


.nav-link:hover::after,
.nav-link.active::after {
    opacity:
        1;

    transform:
        scaleX(1);
}


.nav-link:hover::before,
.nav-link.active::before {
    opacity:
        1;

    transform:
        translateX(-50%)
        rotate(45deg)
        scale(1);
}


/* =========================================================
   LADO DIREITO
========================================================= */

.topbar-right {
    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


/* =========================================================
   BUSCA
========================================================= */

.search-form {
    position:
        relative;

    width:
        270px;
}


.search-input {
    width:
        100%;

    height:
        40px;

    padding:
        0
        38px
        0
        12px;

    border:
        1px solid
        rgba(178,151,88,.23);

    outline:
        none;

    background:
        rgba(8,12,25,.56);

    color:
        var(--header-cream);

    font-family:
        'Poppins',
        sans-serif;

    font-size:
        10.5px;

    transition:
        border-color .25s ease,
        background .25s ease;
}


.search-input::placeholder {
    color:
        rgba(232,226,213,.40);
}


.search-input:hover {
    border-color:
        rgba(178,151,88,.36);
}


.search-input:focus {
    border-color:
        rgba(178,151,88,.57);

    background:
        rgba(8,12,25,.72);
}


/* botão lupa */

.search-submit {
    position:
        absolute;

    top:
        50%;

    right:
        10px;

    width:
        20px;

    height:
        20px;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transform:
        translateY(-50%);

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        var(--header-gold);

    cursor:
        pointer;

    transition:
        opacity .2s ease,
        transform .2s ease;
}


.search-submit:hover {
    opacity:
        .78;

    transform:
        translateY(-50%)
        scale(1.08);
}


.search-submit svg {
    width:
        15px;

    height:
        15px;

    fill:
        currentColor;
}


/* =========================================================
   JOGUE AGORA
========================================================= */

.cta-button {
    position:
        relative;

    height:
        40px;

    padding:
        0
        19px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--header-gold);

    border:
        1px solid
        rgba(178,151,88,.39);

    background:
        rgba(178,151,88,.08);

    font-family:
        'Cinzel',
        serif;

    font-size:
        9.5px;

    letter-spacing:
        .9px;

    text-transform:
        uppercase;

    white-space:
        nowrap;

    transition:
        color .24s ease,
        background .24s ease,
        border-color .24s ease;
}


/* borda interna */

.cta-button::before {
    content: '';

    position:
        absolute;

    inset:
        4px;

    border:
        1px solid
        rgba(178,151,88,.20);

    pointer-events:
        none;
}


.cta-button:hover {
    color:
        #0B0E1A;

    border-color:
        var(--header-gold);

    background:
        var(--header-gold);
}


/* =========================================================
   ATÉ 1500px
========================================================= */

@media (max-width: 1500px) {

    .main-nav {
        gap:
            14px;
    }


    .nav-link {
        font-size:
            9.5px;
    }


    .search-form {
        width:
            220px;
    }

}


/* =========================================================
   ATÉ 1200px
========================================================= */

@media (max-width: 1200px) {

    .topbar {
        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            8px;

        padding:
            11px
            17px;
    }


    .main-nav {
        flex-wrap:
            wrap;

        gap:
            5px
            13px;
    }


    .nav-link {
        min-height:
            31px;
    }


    .nav-link::after {
        bottom:
            2px;
    }


    .nav-link::before {
        bottom:
            -1px;
    }


    .topbar-right {
        width:
            100%;

        justify-content:
            flex-end;
    }


    .search-form {
        width:
            min(
                290px,
                50vw
            );
    }

}


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

@media (max-width: 650px) {

    .topbar {
        display:
            block;

        padding:
            11px
            13px;
    }


    .main-nav {
        display:
            grid;

        grid-template-columns:
            repeat(
                4,
                minmax(0,1fr)
            );

        gap:
            4px
            8px;

        margin-bottom:
            10px;
    }


    .nav-link {
        min-height:
            30px;

        justify-content:
            center;

        font-size:
            7px;

        text-align:
            center;
    }


    .topbar-right {
        display:
            grid;

        grid-template-columns:
            1fr
            auto;

        gap:
            7px;
    }


    .search-form {
        width:
            100%;
    }

}


/* =========================================================
   MOBILE PEQUENO
========================================================= */

@media (max-width: 430px) {

    .main-nav {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }


    .topbar-right {
        grid-template-columns:
            1fr;
    }


    .cta-button {
        width:
            100%;
    }

}


/* =========================================================
   FULL HD — 1920 × 1080
========================================================= */

@media
(min-width: 1600px)
and (min-height: 900px) {

    :root {
        --header-height:
            78px;
    }


    .topbar {
        padding-left:
            32px;

        padding-right:
            24px;
    }


    .main-nav {
        gap:
            21px;
    }


    .nav-link {
        font-size:
            10.5px;
    }


    .search-form {
        width:
            285px;
    }

}

/* =========================================================
   REGIÕES NO MENU — AJUSTE DE ESPAÇO
========================================================= */

@media (min-width: 1201px) {

    .main-nav {
        gap: 15px;
    }

    .nav-link {
        font-size: 9.8px;
        letter-spacing: .65px;
    }

    .search-form {
        width: 245px;
    }

}

@media (min-width: 1600px) and (min-height: 900px) {

    .main-nav {
        gap: 18px;
    }

    .nav-link {
        font-size: 10px;
    }

    .search-form {
        width: 270px;
    }

}