/*********************************************************************/
/* The site footer.                                                  */
/* ----------------------------------------------------------------- */
/* Wide screens: logo fills the left third, text sits centered
   (as a block) in the right two-thirds, with its own lines
   left-justified. Narrow screens: the two boxes stack.
 */

footer.site-footer {
    display: grid;
    grid-template-columns: 1fr 2fr;
    flex-shrink: 0;
    /* A soft fade from the page background into the footer, instead of a
       hard color-change edge. Solid footer color past the first 0.5em. */
    background: linear-gradient(to bottom, var(--color-background), var(--color-navlogo-hover) 0.5em);
    color: var(--color-background);
}

footer.site-footer>.footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3em;
}

footer.site-footer>.footer-logo>img {
    display: block;
    width: 100%;
    max-width: 20em;
    height: auto;
}

footer.site-footer>.footer-info {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3em;
}

footer.site-footer>.footer-info>.footer-info-text {
    text-align: left;
}

footer.site-footer .footer-org-name {
    font-weight: 600;
    font-size: 1.1em;
}

footer.site-footer p {
    margin: 0 0 0.75em;
}

footer.site-footer p:last-child {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    footer.site-footer {
        grid-template-columns: 1fr;
    }
}