/* ==========================================
   NAVBAR — GRAND LINE THEME
========================================== */

.navbar{

    position:fixed;
    top:0;
    left:0;

    width:100%;

    height:var(--navbar-height);

    display:flex;
    align-items:center;

    z-index:1000;

    transition:all .35s ease;

}

.navbar.scrolled{

    background:rgba(7, 5, 3, .92);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

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

    box-shadow:0 4px 30px rgba(0,0,0,.55);

}

/* ==========================
   CONTAINER
========================== */

.nav-wrapper{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    position:relative;

}

@media (min-width: 769px) {
    nav {
        position:absolute;
        left:50%;
        transform:translateX(-50%);
    }
}

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

.logo{

    display:flex;

    align-items:center;

    gap:14px;

}

.logo img{

    width:52px;

    height:52px;

    object-fit:contain;

    filter:drop-shadow(0 0 8px rgba(201,144,42,.35));

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-text h2{

    font-size:1.15rem;

    color:var(--gold);

    letter-spacing:3px;

    margin:0;

    text-shadow:0 0 12px rgba(201,144,42,.40);

}

.logo-text span{

    font-size:.7rem;

    color:var(--gray);

    letter-spacing:2px;

    text-transform:uppercase;

}

/* ==========================
   LINKS
========================== */

.nav-links{

    display:flex;

    align-items:center;

    gap:38px;

}

.nav-links a{

    position:relative;

    color:var(--white);

    font-weight:500;

    font-size:.9rem;

    letter-spacing:.5px;

    transition:var(--transition);

}

.nav-links a:hover{

    color:var(--gold);

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:1px;

    background:linear-gradient(90deg, var(--crimson), var(--gold));

    transition:var(--transition);

}

.nav-links a:hover::after{

    width:100%;

}

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

.menu-toggle{

    display:none;

    cursor:pointer;

    flex-direction:column;

    gap:6px;

}

.menu-toggle span{

    display:block;

    width:26px;

    height:2px;

    background:var(--gold);

    border-radius:2px;

    transition:.3s;

}