/* ==========================================
   Header
========================================== */

.header{

    position:sticky;

    top:0;

    z-index:1000;

    background:#fff;

    border-bottom:1px solid #e8edf5;

    box-shadow:0 2px 10px rgba(0,0,0,.04);

}

.header-inner{

    max-width:1200px;

    height:72px;

    margin:0 auto;

    padding:0 20px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.header-left{

    display:flex;

    align-items:center;

    gap:16px;

}

/* ==========================================
   Logo
========================================== */

.site-title{

    font-size:1.6rem;

    font-weight:700;

    color:#1565c0;

    text-decoration:none;

    white-space:nowrap;

}

/* ==========================================
   Navigation
========================================== */

.navigation{

    display:flex;

    align-items:center;

    gap:32px;

}

.navigation a{

    color:#444;

    text-decoration:none;

    font-weight:600;

    transition:.2s;

    position:relative;

}

.navigation a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#1565c0;

    transition:.25s;

}

.navigation a:hover{

    color:#1565c0;

}

.navigation a:hover::after{

    width:100%;

}

/* ==========================================
   Buttons
========================================== */

.menu-button{

    width:42px;

    height:42px;

    border:none;

    border-radius:10px;

    background:#f5f7fb;

    cursor:pointer;

    font-size:1.3rem;

    transition:.2s;

}

.menu-button:hover{

    background:#e8eef8;

}

.search-button{

    display:none;

}

/* ==========================================
   Drawer
========================================== */

.drawer{

    position:fixed;

    top:0;

    left:-280px;

    width:280px;

    height:100vh;

    background:#fff;

    box-shadow:4px 0 20px rgba(0,0,0,.12);

    padding:90px 24px;

    display:flex;

    flex-direction:column;

    gap:18px;

    transition:left .3s ease;

    z-index:2000;

}

.drawer.open{

    left:0;

}

.drawer a{

    display:block;

    padding:14px 0;

    color:#333;

    text-decoration:none;

    font-weight:600;

    border-bottom:1px solid #edf2f7;

    transition:.2s;

}

.drawer a:hover{

    color:#1565c0;

}

/* ==========================================
   Overlay
========================================== */

#overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.35);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:1500;

}

#overlay.show{

    opacity:1;

    visibility:visible;

}

/* ==========================================
   Responsive
========================================== */

@media(max-width:900px){

    .navigation{

        display:none;

    }

}

@media(min-width:901px){

    .menu-button{

        display:none;

    }

}