/***************************************************************************
**  FOOTER
***************************************************************************/

footer {

    --footer__font             : normal 0.9rem/1.5 var(--ff-regular);
    --footer__color            : var(--site__dark-color);
    --footer__background-color : transparent;

    --footer__nav-font         : 600 1.3rem/1.4 var(--ff-regular);
    --footer__nav-color        : var(--site__accent-color);
    --footer__nav-hover-color  : var(--site__light-color);

    position                   : relative; 
    font                       : var(--footer__font);
    color                      : var(--footer__color);
    background-color           : var(--footer__background-color);
    z-index                    : 2;

    width                      : 100%;
    max-width                  : var(--max-width);
    margin-inline              : auto;
    background-repeat          : repeat;

    padding-inline             : 1rem;
}

footer .media {
    display                    : flex;
    margin                     : 0 auto;
    justify-content            : center;
}

    footer nav {
        text-align             : center;
        padding-block          : 1rem 2rem;
        margin-inline          : auto;

        display                : none;
        flex-direction         : row;
        align-items            : center;
        justify-content        : center;
        padding-block-start    : 1rem;

        font                   : var(--footer__nav-font);
        color                  : var(--footer__nav-color);
    }

    footer nav a {
        font                   : inherit;
        color                  : inherit;
        position               : relative;
        text-decoration        : none;
        margin-inline          : 1em;
    }

      footer nav a:hover {
        color                  : var(--footer__nav-hover-color); 
    }

    footer nav a:not(:last-child)::after { 
        --width                : 2px;
        content                : "";
        position               : absolute;
        top                    : 0.2em;
        height                 : 1em;
        width                  : var(--width);
        margin-inline          : calc(1em - var(--width) / 2);
        background-color       : var(--footer__nav-color); /* same color as text */
        /* transform: rotate(10deg); */
    }

    .short-terms {
        max-width              : var(--mid-width);
        margin                 : 0 auto;
        font-size              : 0.9em;
        padding                : 2rem 4rem;
        text-align             : center;
        color                  : var(--site__dark-color);
        background-color       : transparent;
    }
    
    .short-terms a {
        color                  : inherit;
        font-weight            : var(--fw-bold);
        text-decoration        : none;
    }
    
@media screen and (width > 768px) {

    .short-terms {
        max-width              : var(--mid-width);
    }

    footer nav {
        display                : flex;
        font-size              : 1.3rem;
    }

}