/*
 * Header / full-screen menu
 * The normal header and the menu header intentionally share the exact same
 * .header-inner geometry. This keeps the logo and hamburger/X on identical
 * coordinates before and after opening the menu.
 */
.site-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    transition:background-color .3s ease,box-shadow .3s ease;
}

.header-inner{
    width:80%;
    height:84px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-sizing:border-box;
}

.site-header.scrolled{
    background:rgba(20,20,20,.72);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.site-logo{
    display:block;
    flex:0 0 auto;
    line-height:0;
    text-decoration:none;
}
.site-logo img{
    display:block;
    width:170px;
    height:auto;
}

.menu-open,
.menu-close{
    flex:0 0 auto;
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    background:transparent;
    padding:0;
    margin:0;
    cursor:pointer;
    line-height:0;
}
.menu-open img{
    display:block;
    width:25px;
    height:auto;
}
.menu-close img{
    display:block;
    width:26px;
    height:auto;
}

.menu-overlay{
    position:fixed;
    inset:0;
    z-index:2000;
    background:rgba(10,10,10,.62);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .3s ease,visibility .3s ease;
}
.menu-overlay.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.menu-panel{
    position:relative;
    width:100%;
    height:100%;
    min-height:100dvh;
    box-sizing:border-box;
}

/* Exactly the same top position/height/width as the normal header. */
.menu-header-inner{
    position:relative;
    z-index:2;
}

.menu-contents{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    width:80%;
    margin:0 auto;
    text-align:right;
    box-sizing:border-box;
}
.menu-contents ul{
    list-style:none;
    margin:0;
    padding:0;
}
.menu-contents li{
    margin:0 0 36px;
}
.menu-contents li:last-child{
    margin-bottom:0;
}
.menu-contents a{
    color:#fff;
    text-decoration:none;
    font-size:32px;
    font-weight:500;
    line-height:1.25;
    transition:opacity .2s ease;
}
.menu-contents a:hover{
    opacity:.65;
}

body.menu-opened{
    overflow:hidden;
}

@media(max-width:767px){
    .header-inner{
        width:calc(100% - 40px);
        height:62px;
    }
    .site-logo img{
        width:120px;
    }
    .menu-open,
    .menu-close{
        width:24px;
        height:24px;
    }
    .menu-open img{
        width:20px;
    }
    .menu-close img{
        width:22px;
    }
    .menu-contents{
        width:calc(100% - 40px);
    }
    .menu-contents li{
        margin-bottom:28px;
    }
    .menu-contents a{
        font-size:24px;
    }
}


/* -----------------------------------------------------------------
   Header geometry hardening
   Some legacy page CSS also defines .header-inner. These scoped rules
   intentionally win so the closed header and open-menu header always
   use the same top coordinate and height.
------------------------------------------------------------------ */
.site-header > .header-inner {
    width:80%;
    height:84px;
    min-height:84px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
    box-sizing:border-box;
}
.menu-panel > .menu-header-inner {
    width:80%;
    height:84px;
    min-height:84px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
    top:0;
    z-index:2;
    box-sizing:border-box;
}
.menu-panel > .menu-header-inner .site-logo,
.site-header > .header-inner .site-logo {
    align-self:center;
}

@media(max-width:767px){
    .site-header > .header-inner,
    .menu-panel > .menu-header-inner {
        width:calc(100% - 40px);
        height:62px;
        min-height:62px;
    }
}