@charset "UTF-8";
/* ==========================================================
HEADER
========================================================== */

.site-header{
position:sticky;
top:0;
left:0;
z-index:9999;
width:100%;
background:#fff;
box-shadow:0 2px 12px rgba(0,0,0,.05);
transition:background .3s ease,box-shadow .3s ease;
}

.site-header.is-fixed{
background:rgba(255,255,255,.96);
backdrop-filter:blur(10px);
box-shadow:0 4px 20px rgba(0,0,0,.08);
}

.site-header .container{
display:flex;
align-items:center;
justify-content:space-between;
min-height:88px;
}

.site-logo{
display:flex;
align-items:center;
flex-shrink:0;
}

.site-logo a{
display:flex;
align-items:center;
}

.site-logo img{
display:block;
width:auto;
max-height:60px;
}

.site-title{
font-size:2rem;
font-weight:700;
color:var(--color-primary);
text-decoration:none;
}

.global-nav{
display:flex;
align-items:center;
margin-left:auto;
}

.global-menu{
display:flex;
align-items:center;
gap:2rem;
margin:0;
padding:0;
list-style:none;
}

.global-menu>li{
position:relative;
display:flex;
align-items:center;
}

.global-menu>li>a{
display:flex;
align-items:center;
height:88px;
padding:0;
font-size:1rem;
font-weight:600;
letter-spacing:.03em;
text-decoration:none;
color:var(--color-primary);
transition:var(--transition);
}

.global-menu>li>a:hover,
.global-menu>.current-menu-item>a,
.global-menu>.current-menu-ancestor>a{
color:var(--color-secondary);
}

.global-menu>li>a::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:20px;
height:2px;
background:var(--color-secondary);
transform:scaleX(0);
transform-origin:center;
transition:.3s ease;
}

.global-menu>li>a:hover::after,
.global-menu>.current-menu-item>a::after,
.global-menu>.current-menu-ancestor>a::after{
transform:scaleX(1);
}

.global-menu .sub-menu{
position:absolute;
top:100%;
left:0;
min-width:240px;
margin:0;
padding:.75rem 0;
list-style:none;
background:#fff;
border-radius:8px;
box-shadow:0 12px 30px rgba(0,0,0,.08);
opacity:0;
visibility:hidden;
transform:translateY(10px);
transition:.25s ease;
z-index:100;
}

.global-menu li:hover>.sub-menu{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.global-menu .sub-menu li{
width:100%;
}

.global-menu .sub-menu a{
display:block;
padding:.75rem 1.25rem;
font-size:.95rem;
text-decoration:none;
color:var(--color-text);
white-space:nowrap;
}

.global-menu .sub-menu a:hover{
background:#f7f9fc;
color:var(--color-secondary);
}

.menu-toggle{
display:none;
width:48px;
height:48px;
padding:0;
border:none;
background:transparent;
cursor:pointer;
position:relative;
}

.menu-toggle span{
position:absolute;
left:10px;
width:28px;
height:2px;
background:var(--color-primary);
transition:.3s ease;
}

.menu-toggle span:nth-child(1){
top:15px;
}

.menu-toggle span:nth-child(2){
top:23px;
}

.menu-toggle span:nth-child(3){
top:31px;
}

.menu-toggle.is-active span:nth-child(1){
transform:rotate(45deg);
top:23px;
}

.menu-toggle.is-active span:nth-child(2){
opacity:0;
}

.menu-toggle.is-active span:nth-child(3){
transform:rotate(-45deg);
top:23px;
}

/* ==========================================================
Tablet & Mobile
========================================================== */

@media (max-width:991px){

.site-header .container{
min-height:72px;
}

.site-logo img{
max-height:48px;
}

.menu-toggle{
display:block;
z-index:1001;
}

.global-nav{
position:fixed;
top:72px;
right:-100%;
width:300px;
height:calc(100vh - 72px);
padding:30px;
background:#fff;
box-shadow:-5px 0 20px rgba(0,0,0,.08);
transition:right .3s ease;
overflow-y:auto;
}

.global-nav.is-open{
right:0;
}

.global-menu{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:0;
width:100%;
}

.global-menu>li{
width:100%;
}

.global-menu>li>a{
height:auto;
padding:15px 0;
width:100%;
border-bottom:1px solid #eee;
}

.global-menu>li>a::after{
display:none;
}

.global-menu .sub-menu{
position:static;
opacity:1;
visibility:visible;
transform:none;
display:block;
width:100%;
padding:10px 0 10px 15px;
margin:0;
box-shadow:none;
border-radius:0;
background:transparent;
}

.global-menu .sub-menu a{
padding:10px 0;
}

}

/* ==========================================================
Small Mobile
========================================================== */

@media (max-width:480px){

.site-header .container{
min-height:68px;
}

.site-logo img{
max-height:42px;
}

.global-nav{
top:68px;
height:calc(100vh - 68px);
width:100%;
}

}