/*! Notes...

    Author: Jay George
    Author URI: https://jaygeorge.co.uk

    ABOUT THIS CSS
    ===================================================
    - Only edit filename.css, then process with Codekit to output into prod/

*/


/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / NAV / MOBILE / BUTTON
=================================================== */
/* Custom */
@media (max-width: 319px) {
    /* button*/.c-nav-mobile-button {
    width: 100%;
}
}
/* button*/.c-nav-mobile-button {
    display: flex;
    justify-content: center;
    /* =JFG. Cancel any default button value */
    margin-inline: 0;
    color: var(--colour-pink);
}
/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / NAV / MOBILE / OPEN STATE
=================================================== */
/* Notes...

    Needs to be like this:

    button.c-nav-mobile-button
    nav
        ul
            li

*/
/* --mq-full-nav-before */
@media (max-width: 1199px) {
    .js:not(.js-added---nav-is-open) .c-site-header__nav {
        height: 0;
        opacity: 0;
    }

    .js .c-site-header__nav li {
        transform: translate(-100%, 0);
        transition-timing-function: ease-out;
        transition-property: opacity, transform;
        opacity: 0;
    }

    .js-added---nav-is-open .c-site-header__nav li {
        opacity: 1;
        transform: translate(0);
        transition-duration: 0.5s;
    }
    /* Staggered animation */
    nav li {
        /* Default i.e. after 4th */
        transition-delay: calc(0.025s * 8);
    }
    nav li:nth-child(1) {
        transition-delay: 0s;
    }
    nav li:nth-child(2) {
        transition-delay: calc(0.025s * 2);
    }
    nav li:nth-child(3) {
        transition-delay: calc(0.025s * 4);
    }
    nav li:nth-child(4) {
        transition-delay: calc(0.025s * 6);
    }

    /* Decoration */
    .c-site-header__nav a {
        color: white;
    }

    /* Background */
    .c-site-header__nav ul::before {
        content: "";
    }

    .js-added---nav-is-open .c-site-header__nav ul::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--colour-blue-alpha);
        backdrop-filter: blur(10px);
        transition: background 0.5s ease-in 0s;
        transition-property: background;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 90%);
    }
}
/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / NAV / MOBILE / OPEN STATE / SVG ANIMATIONS
=================================================== */
#c-nav-line-1,
#c-nav-line-2,
#c-nav-line-3 {
    transition: 0.25s ease-in-out;
    transform-origin: center;
}

.js-added---nav-is-open #c-nav-line-1,
.js-added---nav-is-open #c-nav-line-4 {
    opacity: 0;
    transition: 0.25s;
}

.js-added---nav-is-open #c-nav-line-2 {
    transform: rotate(45deg) translate(0.5px);
}

#c-nav-line-3 {
    opacity: 0;
}

.js-added---nav-is-open #c-nav-line-3 {
    opacity: 1;
}

.js-added---nav-is-open #c-nav-line-3 {
    transform: rotate(-45deg) translate(-0.5px);
}
/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / NAV / OPEN / MODIFIERS
=================================================== */
/* Optional force the nav to open */
/* --mq-full-nav-after */
@media (min-width: 1200px) {
    .c-nav-mobile-button {
        /* =JFG. Hide the toggle button now that nav is always visible */
        display: none;
    }
}