/* =====================================================
   INK & SNOW
   PREMIUM NAVBAR DESIGN
===================================================== */



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


.header{


position:fixed;

top:0;

left:0;

width:100%;

z-index:1000;

padding:25px 5%;

transition:var(--transition);


}



.header.scrolled{


background:

rgba(28,37,51,.92);


backdrop-filter:

blur(24px) saturate(180%);
-webkit-backdrop-filter:
blur(24px) saturate(180%);


box-shadow:

0 14px 45px rgba(14,19,28,.22),
0 2px 0 rgba(198,155,60,.18) inset;


padding-top:14px;

padding-bottom:14px;


border-bottom:
1px solid rgba(198,155,60,.15);


}





/* =========================
   NAVBAR
========================= */


.navbar{


max-width:var(--container);

margin:auto;

display:flex;

align-items:center;

justify-content:space-between;


}





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


.logo{

text-decoration:none;
display:inline-flex;
align-items:center;
justify-content:flex-start;
gap:10px;

height:58px !important;
max-height:58px !important;
flex: 0 0 auto;
width: auto;

transition:
transform var(--transition),
opacity var(--transition),
height var(--transition);

cursor:pointer;
overflow: visible;

}


.logo__img{

width: auto !important;
max-width: none !important;

height: 58px !important;
max-height: 58px !important;

object-fit: contain;
display:block;

filter:
drop-shadow(0 2px 8px rgba(0,0,0,.18));

flex: 0 0 auto;

}


.logo__fallback{

font-size:2rem;
font-weight:800;
letter-spacing:-1px;
color:var(--white);
display:flex;
align-items:center;
gap:5px;
height:100%;

}


.logo__fallback .gold,
.logo .gold{

color:var(--gold);
font-size:2.3rem;

}



/* logo animation */


.logo:hover{


transform:

scale(1.04);

filter:
drop-shadow(0 4px 14px rgba(198,155,60,.35));

}



.header.scrolled .logo{

height:52px !important;
max-height:52px !important;

}


.header.scrolled .logo__img{

max-height:52px !important;
height: 52px !important;

}


.header:not(.scrolled) .logo__fallback,
.header:not(.scrolled) .logo .gold{
color:var(--white);
}

.header:not(.scrolled) .logo__fallback .gold{
color:var(--gold);
text-shadow: 0 2px 10px rgba(198,155,60,.4);
}





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


.nav-links{


display:flex;

align-items:center;

gap:45px;


}




.nav-links a{


position:relative;

color:white;

font-size:.95rem;

font-weight:500;

transition:var(--transition);


}





/* underline animation */


.nav-links a::after{


content:"";

position:absolute;

left:0;

bottom:-8px;

height:2px;

width:0;

background:var(--gold);

transition:var(--transition);


}





.nav-links a:hover::after{


width:100%;


}



.nav-links a:hover{


color:var(--gold);


}





/* =========================
   NAV BUTTON
========================= */


.nav-btn{


font-size:.9rem;

padding:14px 30px;


}







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


.mobile-menu{


display:none;

flex-direction:column;

gap:6px;

cursor:pointer;


}




.mobile-menu span{


width:30px;

height:3px;

background:white;

border-radius:20px;

transition:.3s;


}







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



@media(max-width:900px){



.nav-links{


position:absolute;

top:90px;

left:5%;

width:90%;


background:

rgba(28,37,51,.95);


backdrop-filter:

blur(20px);


border-radius:

20px;


padding:30px;


flex-direction:column;

gap:25px;


opacity:0;

pointer-events:none;


transform:

translateY(-20px);


transition:var(--transition);


}




.nav-links.active{


opacity:1;

pointer-events:auto;

transform:

translateY(0);


}





.nav-btn{


display:none;


}




.mobile-menu{


display:flex;


}



}




/* =========================
   DARK HERO SUPPORT
========================= */


.header:not(.scrolled) .logo,
.header:not(.scrolled) .nav-links a{


text-shadow:

0 2px 15px rgba(0,0,0,.4);


}