/* 
 * 
 * Styling for footer menu
 * 
 */

.site-footer {
    background-color: var(--color-garnet);
    .container {
        padding-top: 2.4rem;
        padding-bottom: 2.4rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        @media (min-width: 992px) {
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            
        }
    }
    
    .footer-logo-container {
        margin: 0 0 0.4rem 0;
        padding: 0;
        order: 1;
        text-align: center;
        width: 10rem;
        @media (min-width: 992px) {
            text-align: left;
        }
        
        .footer-logo-link {
            display: block;
        }
        
        .footer-logo {
            max-width: 100%;
            height: auto;
            max-height: 5rem;
        }
    }
    .footer-social-menu {
        order: 3;
        margin: 0.4rem 0;
        padding: 0;
        .footer-social-items {
            display: flex;
            justify-content: center;
            align-items: center;
            li {
                margin: 0 1.2rem;
                a {
                    color: white;
                    padding: 1.4rem;
                    display: inline-block;
                }
            }
        }
        @media (min-width: 992px) {
            order: 2;
            margin-left: 4.8rem;
            .footer-social-items { 
                li a {
                    transition: transform 0.1s ease-out;
                    &:hover {
                        transform: scale(1.3);
                    }
                }
            }
        }
    }
    .footer-menu {
        display: flex;
        justify-content: center;
        align-items: center;
        order: 2;
        .footer-menu-items {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            padding: 0;
            li {
                margin: 0 1.6rem;
                a {
                    color: white;
                    display: inline-block;
                    text-decoration: none;
                    font-size: 1.6rem;
                    line-height: 2.8rem;
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
        @media (min-width: 992px) {
            order: 3;
            flex-grow: 1;
            justify-content: flex-end;
        }
    }
}