/* ===========================================================================
   EmbedSheets - the site footer
   ---------------------------------------------------------------------------
   Its own file because both stylesheets need it and neither owns it.

   The home page had a footer of its own, in home.css, with its own columns and
   its own links - several of which pointed at pages that were never built
   (/form-builder/, /widgets/, /about/) and one that sent readers into the
   application for documentation that now lives on the site. Every other page
   used includes/footer.php. Keeping both meant fixing a footer twice and
   getting it right once.

   Every rule is scoped under .site-footer, including the width, so loading
   this alongside home.css cannot affect anything else on the page.
   ========================================================================= */

.site-footer {
    background: #081326;
    color: #fff;
    padding: 65px 0 25px;
}

/*
 * The two stylesheets call their wrapper different things - .shell on the
 * inner pages, .container on the home page - so the footer answers to both
 * rather than the markup having to know which page it is on.
 */
.site-footer .shell,
.site-footer .container {
    width: min(1180px, calc(100% - 40px));
    margin: auto;
}

.footer-main {
    display: grid;
    grid-template-columns: .34fr .66fr;
    gap: 60px;
}

.footer-logo {
    display: inline-block;
    background: #fff;
    border-radius: 7px;
    padding: 4px 7px;
}

.footer-logo img { display: block; width: 190px; height: auto; }

.footer-main p {
    color: #93a2bb;
    font-size: 14px;
    line-height: 1.6;
    max-width: 260px;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.footer-links > div { display: flex; flex-direction: column; gap: 9px; }
.footer-links b { font: 700 14px Manrope, sans-serif; margin-bottom: 8px; color: #fff; }

.footer-links a {
    font-size: 13px;
    color: #93a2bb;
    line-height: 1.5;
    transition: color .15s;
}

.footer-links a:hover { color: #fff; }

/* The postal address, which is all that sits under the tagline now. */
.footer-address {
    margin-top: 16px;
    font-style: normal;
    font-size: 13px;
    line-height: 1.65;
    color: #8394ad;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #1e2b42;
    margin-top: 45px;
    padding-top: 22px;
    font-size: 12.5px;
    color: #8394ad;
}

.footer-legal { display: flex; gap: 18px; }
.footer-legal a { color: #8394ad; transition: color .15s; }
.footer-legal a:hover { color: #fff; }

@media (max-width: 860px) {
    .footer-main { grid-template-columns: 1fr; gap: 34px; }
    .footer-links { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; }
    .footer-bottom { flex-direction: column; gap: 7px; align-items: flex-start; }
}