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

.topbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:99999;

    padding:20px 50px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:
    linear-gradient(
    to bottom,
    rgba(0,0,0,0.92),
    rgba(0,0,0,0.72)
    );

    border-bottom:
    1px solid
    var(--header-border,
    rgba(255,255,255,0.08));

    box-shadow:
    0 10px 30px rgba(0,0,0,0.25);

    transition:
    background 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

/* ======================================================
   SCROLLED
====================================================== */

.topbar.scrolled{

    background:
    linear-gradient(
    to bottom,
    rgba(0,0,0,0.94),
    rgba(0,0,0,0.78)
    );

    border-bottom:
    1px solid var(--accent-color);

    box-shadow:
    0 0 35px var(--theme-glow),
    0 10px 30px rgba(0,0,0,0.45);
}

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

.logo{

    font-family:'Cinzel',serif;

    font-size:2rem;

    font-weight:700;

    letter-spacing:3px;

    color:#ffffff;

    text-transform:uppercase;

    line-height:1;

    text-decoration:none;
}

.logo span{

    color:var(--accent-color,#c40000);
}

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

.menu{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:35px;

    flex-wrap:wrap;
}

.menu a{

    position:relative;

    text-decoration:none;

    color:
    rgba(255,248,235,0.88);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:0.9rem;

    transition:0.3s ease;

    white-space:nowrap;
}

.menu a:hover{

    color:
    var(--accent-color,#ff2a2a);
}

.menu a::after{

    content:'';

    position:absolute;

    bottom:-6px;
    left:0;

    width:0;
    height:1px;

    background:
    var(--accent-color,#ff2a2a);

    transition:0.3s ease;
}

.menu a:hover::after{

    width:100%;
}

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

@media(max-width:1100px){

    .topbar{

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:14px;

        padding:16px 14px;
    }

    .logo{

        font-size:1.55rem;

        text-align:center;

        letter-spacing:2px;
    }

    .menu{

        width:100%;

        display:flex;

        justify-content:center;

        align-items:center;

        flex-wrap:wrap;

        gap:12px;
    }

    .menu a{

        font-size:0.72rem;

        letter-spacing:1px;
    }
}