/* The footer is written out in every page as four paragraphs: version,
   disclaimer, legal links, copyright. It is laid out here as one centered
   column, and the visual order is set below -- the links are the only
   interactive part, so they come first and the small print follows them. */
footer {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    text-align: center;
    padding: 0.5rem 1.5rem 0.4rem;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid #e3e6ea;
    font-size: 0.9rem;
    line-height: 1.3;
    color: #666;
}

footer>p {
    margin: 0;
}

/* Visual order of the four paragraphs (the markup is the same everywhere and
   cannot be reordered in one place). */
footer .legal-links {
    order: 1;
}

footer>p:first-child {
    order: 2;
}

footer>p:last-child {
    order: 3;
}

footer #footer-disclaimer {
    order: 4;
}

/* The links are the footer's only buttons, so they are shaped like buttons: a
   pill that tints on hover. */
footer .legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.1rem 0.3rem;
    margin: 0;
    font-size: 0.8rem;
}

footer .legal-links a {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    color: #55606b;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

footer .legal-links a:hover {
    background-color: rgba(0, 119, 181, 0.09);
    color: var(--linkedin-color, #0077b5);
}

footer .legal-links a:focus-visible {
    outline: 2px solid var(--linkedin-color, #0077b5);
    outline-offset: 1px;
}

/* Hairline between the links and the small print. It hangs off the version
   line, which is the first of the three small-print paragraphs. */
footer>p:first-child::before {
    content: "";
    display: block;
    width: 48px;
    height: 1px;
    margin: 0 auto 0.2rem;
    background-color: #dfe3e7;
}

footer>p:first-child,
footer>p:last-child {
    font-size: 0.7rem;
    color: #8a929b;
}

footer .version {
    font-weight: 600;
    color: #5e6773;
    font-variant-numeric: tabular-nums;
}

footer #footer-disclaimer {
    max-width: 68ch;
    font-size: 0.68rem;
    line-height: 1.3;
    color: #a0a6ad;
}

footer #footer-disclaimer strong {
    font-weight: 600;
    color: #8a929b;
}

/* Narrow screens: the footer is fine print, so it is set as fine print. The
   smaller type also stops the copyright and version lines from wrapping, which
   is where most of the height was going. */
@media (max-width: 700px) {
    footer {
        gap: 0.05rem;
        padding: 0.4rem 0.75rem 0.35rem;
        font-size: 0.7rem;
        line-height: 1.25;
    }

    footer .legal-links {
        gap: 0.05rem 0.15rem;
        margin: 0;
        font-size: 0.72rem;
    }

    footer .legal-links a {
        /* Tappable, and the tight row gap keeps the two lines of links from
           taking that padding back as height. */
        padding: 0.25rem 0.45rem;
        border-radius: 8px;
    }

    footer .legal-links a:active {
        background-color: rgba(0, 119, 181, 0.1);
    }

    footer>p:first-child::before {
        width: 40px;
        margin-bottom: 0.2rem;
    }

    footer>p:first-child,
    footer>p:last-child {
        font-size: 0.65rem;
    }

    footer #footer-disclaimer {
        font-size: 0.65rem;
    }
}