@import 'variables';
@import 'mixins';

html {
    height:100%;
}
body {
    position:relative;
    min-height: 100%;
}

footer {
    position:relative;
    bottom:0;
    left:0;
    right:0;
    padding-top:60px;
    padding-bottom:env(safe-area-inset-bottom);
    border-top: 1px solid #111;
    background:#333;
    margin-top:55px;
    text-align:center;
    @include width-medium() {
        margin-top:100px;
    }

    ul {
        margin: 0 0 30px 0;
        padding: 0;
        list-style: none;
    }

    .internal {
        h4 {
            @include font-size(14, 14);
            color:#fff;
            font-weight:$fw-semibold;
            margin-bottom:10px;
            padding-bottom:10px;
            position:relative;
            @include width-medium() {
                margin-bottom:15px;
            }

            &:after {
                position: absolute;
                content: " ";
                border-bottom: 1px solid #5a5a5a;
                width:50%;
                bottom:0;
                left:50%;
                margin-left:-25%;
            }
        }

        a {
            color:#ddd;
            @include font-size(14, 25);
            text-decoration: none;
            display:block;
            &:hover {
                text-decoration:underline;
            }
        }
    }
    .external {
        li {
            display: inline-block;
        }

        a {
            display:inline-block;
            color: #fff;
            text-decoration: none;
            @include font-size(20, 20);
            border: 1px #555 solid;
            border-radius: 3px;
            padding: 8px;
            background: #3a3a3a;
            margin: 0 5px;
            i {
                vertical-align:middle;
            }
        }
    }
    .legal {
        margin-top:30px;
        padding:20px 0;
        border-top: 1px solid #5a5a5a;
        color:#ddd;
        @include font-size(14, 19);

        a {
            color:#ddd;
            display:inline-block;
            text-decoration:none;
            border-bottom:1px solid #999;
        }

        .copyright {
            @include width-smaller-than-medium() {
                margin-bottom:10px;
            }
            @include width-medium() {
                float:right;
            }
        }
    }
}

