/* Nav menu that is collapsed by default on all screen sizes */

/*** Color Definitions ***/
/* Nav menu background */
nav.cxn-nav-menu { background-color: #333; }
/* Nav menu items */
.cxn-nav-item > .cxn-nav-link       { color: #FFF; }
.cxn-nav-item > .cxn-nav-link:hover { color: #00ACC8; }
/* Nav menu toggler */
span.cxn-nav-burger-patty { background: #CDCDCD; }




.cxn-nav-wrapper {
    position: relative;

    height  : 100%;
}

nav.cxn-nav-menu {
    display         : flex;
    align-items     : center;
    justify-content : center;

    position        : fixed;
    top             : 0;
    left            : 0;
    right           : 0;

    width           : 100%;
    height          : 100vh;

    /* This menu is hidden by default and gets it's opacity and visibility on toggle */
    opacity         : 0;
    visibility      : hidden;
    
    transition      : opacity    1.2s,
                      visibility 1.2s;
}
/* When the nav menu is active, the .nav-active class is set on the body element */
body.loaded.nav-active nav.cxn-nav-menu {
    opacity         : 1;
    visibility      : visible;

    z-index         : 14;
}


.cxn-nav-list {
    display         : flex;
    flex-direction  : column;
    align-items     : center;

    height          : auto;
}

.cxn-nav-list > .cxn-nav-item {
    display         : inline-flex;
}

.cxn-nav-item > .cxn-nav-link {
    display         : flex;

    font-size       : 4em;
    text-decoration : none;

    transition      : color 0.4s;
}



/*** Link Slide-In Animations ***/
.cxn-nav-list > .cxn-nav-item { transform: translateX(-75vw); }
.nav-active .cxn-nav-list > .cxn-nav-item { transform: translateX(0); }
.cxn-nav-list > .cxn-nav-item:nth-child(1) { transition: transform  .2s; }
.cxn-nav-list > .cxn-nav-item:nth-child(2) { transition: transform  .4s; }
.cxn-nav-list > .cxn-nav-item:nth-child(3) { transition: transform  .6s; }
.cxn-nav-list > .cxn-nav-item:nth-child(4) { transition: transform  .8s; }
.cxn-nav-list > .cxn-nav-item:nth-child(5) { transition: transform   1s; }




/*** Nav Toggler/Burger ***/
.cxn-nav-wrapper button.cxn-nav-toggle {
    display         : block;

    position        : absolute;
    top             : 0;
    right           : 10px;

    height          : 100%;
    padding         : 0;
    border          : 0;

    cursor          : pointer;
    background-color: rgba(0,0,0,0);

    z-index         : 15;
}

.cxn-nav-wrapper span.cxn-nav-burger-patty {
    display         : block;

    position        : relative;

    width           : 30px;
    height          : 2px;
    margin          : 5px 0;
    border-radius   : 3px;

    transform-origin: 5px;
    transition      : transform  0.8s,
                      opacity    1.3s,
                      background 1s;
}

.nav-active .cxn-nav-wrapper span.cxn-nav-burger-patty:nth-child(1) { transform: rotate(45deg); }
.nav-active .cxn-nav-wrapper span.cxn-nav-burger-patty:nth-child(2) { transform: scale(0); opacity: 0; }
.nav-active .cxn-nav-wrapper span.cxn-nav-burger-patty:nth-child(3) { transform: rotate(-45deg); }