.nav-link {
    display: none;
    cursor: pointer;
    position: fixed;
    top: 4.5vw;
    right: 4vw;
    z-index: 1002;
}

.nav-link i {
    margin: 0;
    padding: 5px 5px 4px;
    font-size: 35px;
    line-height: 1em;
    border-radius: 5px;
    color: var(--secondary);
    background: var(--white-trans-50);
}

.nav-link i:hover {
    color: var(--primary);
}

.nav-link.is-open {
    position: fixed;
    top: 4vw;
    right: 5vw;
}

.nav-link.is-open i {
    color: #fff;
}

.nav-link.is-open i::before {
    content: "×";
    font-family: Arial, sans-serif;
    font-size: 42px;
    line-height: 1;
}

nav ul.menu {
    display:         flex;
    gap:             15px;
    list-style:      none;
    margin:          1.5rem 0 0;
    padding:         0;
}

nav ul.menu li a { 
    color: var(--black); 
    font-size: .9rem;
    line-height: 1em;
    border: 2px solid transparent;
    border-radius: 4px;
    padding: 8px 10px;
    display: block;
}

nav ul.menu li a:hover {
    border: 2px solid var(--black-trans-10);
}

nav ul.menu li.current-menu-item a {
    border: 2px solid var(--secondary);
}

nav ul.footer {
    display:         flex;
    gap:             15px;
    list-style:      none;
    margin:          0;
    padding:         0;
}

nav ul.footer li a { 
    color: var(--black); 
    font-size: .85rem;
    line-height: 1.35em;
    border: 0;
    padding: 0;
    display: block;
}

nav ul.footer li a:hover { 
    color: var(--primary);
}

nav ul.footer li.current-menu-item a {
    color: var(--secondary);
}


/* ---------- mobile Version ---------- */

@media all and ( max-width: 768px ) {

    .nav-link {
        display: block;
    }

    header nav {
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: rgba(64, 95, 131, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 300ms ease, visibility 300ms ease;
    }

    header nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    header nav ul.menu {
        display: block;
        margin: 0;
        padding: 0;
        text-align: center;
    }

    header nav ul.menu li {
        opacity: 0;
        transform: translateY(28px);
        transition:
            opacity 420ms ease,
            transform 420ms ease;
        transition-delay: 0ms;
    }

    header nav.is-open ul.menu li {
        opacity: 1;
        transform: translateY(0);
        transition-delay: calc(var(--i, 0) * 60ms + 80ms);
    }

    header nav ul.menu li a {
        color: #fff;
        font-size: 1.8rem;
        line-height: 1.4em;
        border: 0;
        padding: 10px 0;
    }

    header nav ul.menu li a:hover,
    header nav ul.menu li.current-menu-item a {
        border: 0;
        color: #fff;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }
}