/*---Import Google Fonts---*/

#menu-button{display:none;}
.submenu-toggle{display:none;}


 /* ======================================================
       SECTION 2: DESKTOP STYLES
       ------------------------------------------------------
       Safe style adjustments
       ====================================================== */

/* Top Level Desktop Navigation */
nav.primary{
    padding:0;
    display:block;
    margin:0;
    position:relative;
    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        opacity .35s ease,
        visibility .35s ease;
    will-change:
        transform,
        opacity;
    z-index:999;
}

nav.primary ul{
    margin:0;
    padding:0;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;
}

nav.primary ul li{
    display:block;
    margin:0;
    list-style-type:none;
    width:auto;
    position:relative;
}

nav.primary ul li a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 15px;
    color:#fff;
    font-family: var(--Roboto-Cond);
    font-style: italic;
    font-weight: 600;
    text-transform: uppercase;
    text-align:center;
    transition:.3s ease;
}

nav.primary ul li a:hover{
    color:#000;
    background:#f0f0f0;
}
/* Dropdown Structure */
nav.primary ul ul{
    display:none;
    position:absolute;
    min-width:240px;
    margin:0;
    background:#fff;
    transition:.3s ease;
    box-shadow:0 24px 48px rgba(17, 17, 17, 0.12);
}

/* Dropdown Link Appearance */
nav.primary ul li li a{
    display:block;
    padding:12px 18px;
    color:#111111;
    font-family: var(--Inter);
    font-style: normal;
    font-weight: 300;
    text-transform: none;
    text-align:left;
    background: var(--white);
    transition:.3s ease;
}
nav.primary ul li li a.special {background: rgba(255,0,0,0.25);}

nav.primary ul li li a:hover{
    color:#fff;
    background: var(--red);
}


nav.primary ul ul ul{
    position:absolute;
    right:calc(100% - 0px);
    top:0;
}

nav.primary ul li:hover > ul{
    display:block;
    z-index:1000;
    animation:dropdown-in .2s ease forwards;
}

@keyframes dropdown-in{
    from{
        opacity:0;
        transform:translateY(-6px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

nav.primary ul ul li{
    float:none;
    width:100%;
    position:relative;
    margin:0;
    display:block;
}


nav.primary ul ul ul::before{
    top:1.2rem;
    left:-0.45rem;
    border-top:0;
    border-right:0;
    border-left:1px solid rgba(0, 0, 0, 0.18);
    border-bottom:1px solid rgba(0, 0, 0, 0.18);
}

.menu-close-button{
    display:none;
}


/* ==========================================================
   MOBILE BREAKPOINT
   ========================================================== */
:root {
    /* Mobile breakpoint (Adjust to match media query) */
    --mobile-breakpoint: 1000px;
}


@media screen and (max-width:1000px){

    /* ======================================================
       SECTION 2: MOBILE STRUCTURE CONTROLS
       ------------------------------------------------------
       Safe mobile adjustments.
       ====================================================== */

    #menu-button{
        display:block;
    }
    #menu-button{
/*        font-family:'Inter', sans-serif;*/
        font-weight:700;
        font-size:20px;
        letter-spacing:.04em;
        text-transform:none;
        background: transparent;
        color:#fff;
        border:0;
        border-radius: 10px;
        padding:12px 18px;
        cursor:pointer;
        transition:background .25s ease,color .25s ease;
    }

    #menu-button:hover{
        background: var(--red);
        color:#fff;
    }

    /* Close Button */
    .menu-close-button{
        display:flex;
        align-items:center;
        justify-content:center;
        position:absolute;
        top:10px;
        right:10px;
        width:40px;
        height:40px;
        border:0;
        background:#f0f0f0;
        color:#111111;
        font-size:20px;
        line-height:1;
        cursor:pointer;
        z-index:1001;
    }

    .menu-close-button:hover{
        background:#ccc;
    }

    nav.primary .menu-close-button + ul{
        padding-top:60px;
    }

    nav.primary{
        position:fixed;
        background:#ffffff;
        box-shadow:0 20px 40px rgba(0,0,0,.35);
        z-index:1000;
    }

    nav.primary > ul{
        display:flex;
        flex-direction:column;
        padding:18px 0 22px;
        width:100%;
    }

    nav.primary ul li{
        display:block;
        width:100%;
    }

    nav.primary li a{
        margin:0;
        padding:14px 18px;
        text-align:left;
        color:#111111 !important;
        font-family: sans-serif;
        font-size:15px!important;
        font-weight:600;
        border-left:4px solid transparent;
        transition:.3s ease;
        width:100%;
        justify-content:flex-start!important;
    }
    
    nav.primary li:has(.submenu-toggle:hover) a,
    nav.primary li a:hover{
        color:#000;
        background:#f0f0f0;
        border-left-color:#000;
    }

    nav.primary li li a{
        padding-left:28px;
        font-size:14px!important;
        color:#111111;
        background:#f8faf4;
    }

    nav.primary li li li a{
        padding-left:20px;
        color:#fff;
        background:#666;
    }

    .submenu-toggle{
        position:absolute;
        display: flex; 
        justify-content: flex-end;
        align-items: flex-start;
        top:0px;
        right:0;
        width:100%;
        height:100%;
        border:0;
        background:none;
        color:#000;
        font-size:18px;
        cursor:pointer;
    }

    .submenu-toggle:hover{
        color:#333;
    }


    /* ======================================================
       SECTION 3: DO NOT TOUCH
       ------------------------------------------------------
       Critical menu functionality.
       ====================================================== */

    nav.primary li.has-children:hover ul{display:none;}

    nav.primary li > ul{
        max-height:0;
        overflow:hidden;
        transition:max-height .3s ease;
    }

    nav.primary li.open{
        overflow:visible!important;
    }

    nav.primary li.open > ul{
        max-height:1000px;
        display:block!important;
        z-index:999;
    }

    nav.primary ul{
        position:relative!important;
        left:0;
        right:0;
        top:0!important;
    }

    nav.primary ul ul{
        box-shadow:none;
    }

    nav.primary ul ul:has(li.open){
        overflow:visible!important;
    }

    body.menu-open{
        overflow:hidden;
    }

	.menu-right{
        top:0;
        right:0;
        width:320px;
        max-width:90vw;
        height:100vh;
        transform:translateX(100%);
		opacity:0;
    }

    .menu-right.is-open{
        transform:translateX(0);
		opacity:1;
    }

    .menu-left{
        top:0;
        left:0;
        width:320px;
        max-width:90vw;
        height:100vh;
        transform:translateX(-100%);
		opacity:0;
    }

    .menu-left.is-open{
        transform:translateX(0);
		opacity:1;
    }

    .menu-fullscreen{

        inset:0;
        width:100vw;
        height:100vh;
        opacity:0;
        visibility:hidden;
        transform:translateX(-100%);
    }

    .menu-fullscreen.is-open{
        opacity:1;
        visibility:visible;
         transform:translateX(0);
    }

    .menu-dropdown{
        position: relative !important;
        top:0;
        left:0;
        width:100%;
        height: 0;
        max-height:80vh;
        transform:translateY(-100%);
		opacity:0;
		z-index:-100;
        border-top:1px solid rgba(0, 0, 0, 0.18);
        border: none !important;
        box-shadow: none !important;
    }

    .menu-dropdown.is-open{
        transform:translateY(0);
		opacity:1;
		z-index: 100;
		top:0;
        height: 100%;
    }

    .menu-modal{

        width: 100%;
        max-width: calc(100% - 10vw);
        max-height:85vh;
        margin: 0 5vw !important;
        top: 15vh;
        bottom: unset;
/*        bottom: 0;*/
        left:0;
        border-radius:16px !important;
        overflow: hidden;
        opacity:0;
        visibility:hidden;
        transform:
            translate(-50%,50%)
            scale(.95);
    }

    .menu-modal.is-open{
        top: 15vh;
        bottom: unset;
/*        margin: auto;*/
        opacity:1;
        visibility:visible;
        transform:
            translate(0, 0)
            scale(1);
    }
    nav.primary.menu-accordion {
        position: relative;
        box-shadow: none;
    }
    .menu-accordion {
        width: 100%;
        max-height: 0px;
        overflow: hidden;
        transition: 0.3s ease all;
    }
    .menu-accordion.is-open{
        max-height: 100vh;
        transition: 0.3s ease all;
    }

}