// =============================================================================
// FOOTER (CSS)
// =============================================================================


// Layout and columns
// -----------------------------------------------------------------------------
//
// 1. To enable the grid's display: inline-block; to work properly, we need to
//    remove the white-space that it creates between columns with font-size: 0;
// 2. Re-set the font-size that was reduced to 0 in point 1 for children.
// 3. Fix for text flickers on windows devices
//
// -----------------------------------------------------------------------------

.footer {
    background-color: $footer-background;
    border-top: container("border");
    padding: spacing("double") 0;
    position: relative;
    transform: translateZ(0); // 3
}

.footer-title-sr-only {
    height: 1px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
}

.footer-info {
    @include grid-row($behavior: nest);
    font-size: 0; // 1
}

.footer-info-col {
    @include grid-column(12);
    color: stencilColor("color-textSecondary");
    display: inline-block;
    float: none;
    font-size: fontSize("base"); // 2
    overflow-wrap: break-word;
    text-align: center;
    vertical-align: top;
    // TODO: specifically use vendor only for IE11 since overflow-wrap is not supported here
    -ms-word-break: break-all;
    @include breakpoint("small") {
        text-align: left;
        width: width("6/12");
    }

    @include breakpoint("medium") {
        width: width("4/12");
    }

    > :first-child {
        margin-top: 0;
    }

    > :last-child {
        margin-bottom: 0;
    }
}

.footer-info-col--small {
    @include breakpoint("medium") {
        width: width("2/12");
    }
}

.footer-info-col--social {
    width: 100%;
}

.footer-info-col--left {
    @include breakpoint("small") {
        padding: 0;
    }
}

.footer-info-col--right {
    @include breakpoint("small") {
        left: 50%;
        position: inherit;
        width: 50%;
    }

    @include breakpoint("medium") {
        left: 0;
        padding: 0;
        text-align: right;
        width: 100%;
    }
}


// Content
// -----------------------------------------------------------------------------

.footer-info-heading {
    color: $footer-heading-fontColor;
    font-size: fontSize("base");
    text-transform: inherit;
}

.footer-info-list {
    list-style: none;
    margin-left: 0;

    a {
        color: stencilColor("color-textSecondary");
        text-decoration: none;

        &:hover {
            color: stencilColor("color-textSecondary--hover");
        }
    }
}

.footer-copyright {
    text-align: center;

    @include breakpoint("small") {
        text-align: left;
    }

    > .powered-by {
        color: stencilColor("color-textSecondary");
        font-size: fontSize("tiny");
        margin: 0;
    }

    a {
        color: stencilColor("color-textSecondary");
        text-decoration: none;

        &:hover {
            color: stencilColor("color-textSecondary--hover");
        }
    }
}

.footer-payment-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style-type: none;
    margin-left: 0;
    margin-top: spacing("single");

    @include breakpoint("small") {
        justify-content: normal;
    }

    @include breakpoint("medium") {
        margin-top: spacing("double");
    }

    .footer-payment-icon {
        height: remCalc(40);
        margin: spacing("quarter");
        vertical-align: middle;
        width: remCalc(50);
    }

    svg {
        fill: stencilColor("icon-color");
    }
}

.footer-newsletter-summary {
    text-align: left;
}
