#MainHeader
{
    --inside-horizontal-margin: calc(var(--row-gap) * .5);
    --outside-horizontal-margin: var(--inside-horizontal-margin);

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

#MainHeader > section
{
    --hardlight-opacity: .75;
    display: grid;
    grid-column: pos-first / pre-last;
    grid-row: first / row 1;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    align-items: center;
    padding: 0 var(--default-inside-vertical-margin);
    background-color: var(--hardlight);
    border-radius: var(--base-size);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

#MainHeader > section > .logo
{
    height: var(--vw-qt);
    aspect-ratio: 300/86;
    grid-column: pos-first / pre-division 1;
    grid-row: pos-first / pre-row 1;
}

#MainHeader > section > aside
{
    grid-column: pos-middle 5 / pre-last;
    grid-row: pos-first / pre-row 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--column-gap);
}


#MainHeader [aria-controls="MainNav"]
{
    --size: 2;
    width: calc(var(--base-size) * var(--size));
    aspect-ratio: 1;
    color: var(--text-color);
    overflow: hidden;
    cursor: pointer;
    margin-right: var(--default-inside-vertical-margin);
    flex-shrink: 0;
    display: none;
}


#MainHeader [aria-controls="MainNav"]::before,
#MainHeader [aria-controls="MainNav"]::after
{
    --fm-size-ratio: 1;
    --font-size: calc(var(--base-size) * var(--size));
    font-family: var(--vg-ns);
    font-size: var(--adjusted-font-size);
    line-height: 1;
    display: block;
    transition: all .3s var(--base-easing);
}

#MainHeader [aria-controls="MainNav"]::before
{
    content: '\3a';
}

#MainHeader [aria-controls="MainNav"]::after
{
    content: '\6d';
    transform: rotateZ(45deg);
}

#MainHeader [aria-controls="MainNav"]:hover::before,
#MainHeader [aria-controls="MainNav"]:focus::before
{
    margin-left: -100%;
}

#MainHeader [aria-controls="MainNav"][aria-expanded="true"]::after
{
    transform: rotateZ(0deg);
}


#MainNav
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-column: pos-middle 2 / pre-division 5;
    grid-row: first / row 1;
}

#MainNav > ul
{
    display: flex;
}

#MainNav > ul.menu
{
    gap: var(--column-gap);
}

#MainNav > ul.social
{
    gap: calc(var(--base-size) * .5);
}

#MainNav > ul li
{
    margin-top: 0;
    font-weight: var(--f-medium);
}

#MainNav > ul li:has(> ul) > a
{
    cursor: pointer;
}

#MainNav > ul li > ul
{
    --move-to: calc(var(--base-size) * 2);
    --hardlight-opacity: .75;
    position: absolute;
    padding: var(--base-size) calc(var(--base-size) * 2);
    padding-top: 0;
    margin-top: 0;
    opacity: 0;
    transition-property: opacity, padding-top;
    transition-duration: .3s;
    transition-timing-function: var(--base-easing);
    transition-delay: .1s;
    grid-row: pos-row 1 / pos-last;
    pointer-events: none;
}

#MainNav > ul li > ul::before
{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 0;
    background-color: var(--hardlight);
    border-radius: var(--base-size);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition-property: opacity, margin-top;
    transition-duration: .3s;
    transition-timing-function: var(--base-easing);
    transition-delay: .1s;
}

#MainNav:hover > ul li:hover > ul,
#MainNav:hover > ul li:hover > ul:hover,
#MainNav > ul li > ul:focus-within
{
    padding-top: var(--move-to);
    opacity: 1;
    pointer-events: all;
}

#MainNav:hover > ul li:hover > ul::before,
#MainNav:hover > ul li:hover > ul:hover::before,
#MainNav > ul li > ul:focus-within::before
{
    margin-top: var(--move-to);
}

#MainNav > ul li > ul > li
{
    white-space: nowrap;
    line-height: calc(var(--line-height) * 1.5);
}

#MainNav > ul li > ul > li:first-of-type
{
    padding-top: var(--base-size);
}



@media (max-width: 1280px) {
    #MainNav
    {
        grid-column: pos-middle 2 / pre-middle 5;
    }
}

@media (max-width: 960px) {
    #MainHeader > section > .logo
    {
        height: calc(var(--vw-qt) * 2);
    }
    
    #MainHeader > section > aside
    {
        grid-column: pos-division 3 / pre-last;
    }

    #MainHeader [aria-controls="MainNav"]
    {
        display: flex;
    }

    #MainNav
    {
        --hardlight-opacity: .75;
        grid-column: pos-first / pre-last;
        grid-row: pos-row 1 / last;
        background-color: var(--hardlight);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        padding: 0 var(--default-inside-vertical-margin);
        flex-direction: column;
        gap: var(--display-gap);
        align-items: flex-start;
        border-radius: var(--base-size);
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        margin-top: calc(var(--row-gap) * -1);
        pointer-events: none;
        transition: all .5s var(--base-easing);
    }

    #MainNav.show
    {
        opacity: 1;
        padding: calc(var(--default-inside-vertical-margin) * 2) var(--default-inside-vertical-margin);
        max-height: 100vh;
        margin-top: 0;
        pointer-events: all;
    }

    #MainNav > .menu
    {
        flex-direction: column;
    }

    #MainNav > ul li:has(> ul)
    {
        display: flex;
        flex-wrap: wrap;
    }

    #MainNav > ul li > ul
    {
        position: relative;
        opacity: 1;
        padding: 0 var(--base-size);
        max-height: 0;
        overflow: hidden;
        transition: max-height .5s var(--base-easing);
        order: 2;
        flex-basis: 100%;
    }

    #MainNav > ul li:has(> ul)::after
    {
        content: '\64';
        font-family: var(--vg-ns);
        display: inline-block;
        order: 1;
        margin-left: var(--base-size);
    }

    #MainNav > ul li > ul::before
    {
        display: none;
    }

    #MainNav:hover > ul li:hover > ul,
    #MainNav:hover > ul li:hover > ul:hover,
    #MainNav > ul li > ul:focus-within
    {
        padding-top: 0;
        pointer-events: all;
        max-height: 100vh;
    }
}

@media (max-width: 480px) {
    #MainHeader > section > .logo
    {
        height: calc(var(--vw-qt) * 2.666667);
    }

    #MainHeader > section > aside
    {
        grid-column: pos-last / pre-last;
    }

    #MainHeader > section > aside .cta
    {
        display: none;
    }
}