/*
==========================
Mobile Nav
==========================
*/

@media (max-width:1024px) {

    nav {
        height:95px;
        width:100vw;
        background: rgba(255,255,255,0.9);
        z-index:99;
        position:fixed;
        box-shadow:0 0 5px rgba(0,0,0,0.3);
    }

    .primary-nav {
        display:flex;
        flex-direction: column;
        align-items: flex-start;
        gap:0.5rem;/**/
        justify-content:flex-start;
        list-style:none;
        background:rgba(255,255,255,0.95);/*for Mozilla*/
        backdrop-filter:blur(10px);
        position:fixed;
        top:0;
        right:0;
        bottom:0;
        left:25%;/*inset not supported iOS 14.4*/
        height:100vh;
        padding:min(20vh,10rem) 0 0 0;
        font-weight:400;
        transform:translateX(100%);
        transition:transform 0.3s ease-out;
    }

    .primary-nav[data-visible="true"] {
        transform:translateX(0%);
    }

    /*for Chrome*/
    @supports (backdrop-filter:blur(10px)) {
        .primary-nav {
            background:rgba(255,255,255,0.4);
            backdrop-filter:blur(10px);        
        }
    }

    /*parents of mobile links*/
    .nav-item {
        display: block;
        width:100%;
        /*! padding:1rem 0; */
    }

    /*mobile main logo*/
    .logo {
        width:100px;
        height:68px;
        background: url(/images/TGD-logo.svg) center center no-repeat;
        background-size:contain;
        display:block;
        z-index:100;
        margin:.8rem auto auto 2rem;
    }

    /*mobile links*/
    .nav-link {
        font-size:2rem;
        text-transform: uppercase;
        color:var(--grey);
        text-decoration: none;
        width:100%;
        display:block;
        padding:1.5rem 2rem;
    }

    /*link hover*/
    .nav-link:hover, .nav-link:active {
        background:var(--grey);
        color:white;
    }

    /*logo icon in popup nav*/
    .home-link {
        width:90%;
        height:55px;
        background:  url(/images/icon-home.png) left center no-repeat;
        background-size:contain;
        overflow:hidden;
        text-indent:-999px;
        display:block;
        margin-left:2rem;
        margin-bottom:1rem;
    }

    /*burger button*/
    .mobile-nav-toggle {
        display:block;
        width:22px;
        height:22px;
        background:url(/images/burger.png) center center no-repeat;
        z-index:999;
        position:fixed;
        right:3rem;
        top:2.3rem;
        border:none;
        cursor:pointer;
    }

    /*remove 'home' from burger button*/
    .mobile-nav-toggle > span {
        display:none;
    }

    /*change burger to x*/
    .mobile-nav-toggle[aria-expanded="true"] {
        background:url(/images/cross.png) center center no-repeat;
    }

}

/*
===============================
Desktop Nav
===============================
*/

@media (min-width:1024px) {

    /*push menu to right from 2nd item onwards*/
    .primary-nav li:nth-child(2) {
        margin-left:auto;
    }

    nav {
        height:95px;
        width:100vw;
        background: rgba(255,255,255,0.95);
        position:relative;
        position:fixed;
        inset:0 0 auto 0;
        z-index:99;
        box-shadow:0 0 5px rgba(0,0,0,0.3);
    }

    .primary-nav {
        display:flex;
        align-items: center;
        list-style:none;
        gap:clamp(2rem,2.5vw,5rem);
        font-weight:400;
        height:100%;
        margin:0 clamp(1rem,2.5vw,5rem);
    }
 
    @supports (backdrop-filter:blur(20px)) {
        .nav {
            background:rgba(255,255,255,0.2);
            backdrop-filter:blur(20px);        
        }
    }

    /*parents of mobile links*/
    .nav-item {
        height:100%;
        display:flex;
    }

    /*links*/
    .nav-link {
        font-size:1rem;
        text-transform: uppercase;
        color:var(--grey);
        text-decoration: none;

        display:block;
        align-self: center;
        border-bottom:4px solid #f3f7fa;
        transition:border-bottom 0.3s ease-out;
    }

    /*link hover*/
    .nav-link:hover,
    .nav-link:active {
        border-bottom:4px solid var(--red);
    }

    .logo {
        display:none;
    }

    /*logo icon*/
    .home-link {
        width:100px;
        height:68px;
        background: url(/images/TGD-logo.svg) center center no-repeat;
        overflow:hidden;
        text-indent:-999px;
        display:block;        
        align-self: center;
    }

    /*burger button*/
    .mobile-nav-toggle {
        display:none;
    }

}