@import url('../media.css');

footer {
    flex-shrink: 0;
    background-color: var(--black);
    overflow-x: hidden;
}

#help-links {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6rem;
    background-color: var(--light-grey);

    @media (--md-up) {
        height: 9.3rem;
    }

    & a,
    & button {
        text-align: center;
        width: 10rem;
        font-size: var(--font-size-xs);
        cursor: pointer;

        @media (--md-up) {
            font-size: var(--font-size);
        }

        &:hover {
            text-decoration: underline;
            opacity: 0.6;
        }
    }

    & img {
        margin-bottom: var(--standard-margin);
        width: 21px;

        @media (--md-up) {
            width: 26px;
        }
    }

    & .divider {
        border-inline-end: 2px solid darkgrey;
        height: 2.5rem;

        @media (--md-up) {
            display: block;
        }
    }
}

#moz-links {
    display: flex;
    flex-direction: column-reverse;
    padding: var(--page-margin);
    height: 100%;
    font-size: 0.9rem;
    color: var(--white);
    align-items: center;

    @media (--xl-up) {
        margin: 0 auto;
        padding: 0.4rem 20px;
        max-width: var(--desktop-width);
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        & > * {
            margin: 2rem 0;
        }
    }

    & a {
        color: var(--white);

        &:hover {
            color: var(--blue);
        }
    }

    & .divider-bottom {
        border-top: 1px solid hsl(0deg, 0%, 20%);
        width: 20rem;
        margin-top: 1em;
        display: block;

        @media (--md-up) {
            display: none;
        }
    }

    & .links {
        margin-top: 2rem;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex: 1;
        justify-content: space-between;

        @media (--xl-up) {
            max-width: 30rem;
            margin-inline-end: 4rem;
            margin-top: 0;
            padding: 0;
        }

        @media (--lg-down) {
            justify-content: space-evenly;
        }

        .text-button {
            color: var(--white);
            font-size: 0.9rem;
            margin-block-end: 16px;
        }

        & a {
            margin-block-end: 16px;

            &:last-of-type {
                margin-block-end: 0;
            }
        }

        & > div {
            display: flex;
            flex-direction: column;
        }

        & .divider-vertical {
            border-inline-end: 1px solid hsl(0deg, 0%, 20%);
            height: 6.3rem;
            align-self: center;
        }
    }

    & .back-top {
        margin-top: 1rem;
        color: white;
        text-decoration: underline;
        text-align: center;
        order: -1;

        @media (--xl-up) {
            display: none;
        }
    }

    & *:focus.focus-visible {
        outline: 1px solid white;
    }
}

#logo-license-text {
    align-content: center;
    margin: 0 auto;
    max-width: var(--desktop-width);
    padding-inline: 20px;

    & .logo-container {
        display: flex;
        flex: 1;
        flex-direction: row;
        margin-top: 4rem;
        margin-block-end: 4rem;

        @media (--xl-up) {
            min-width: 9rem;
            margin-top: 0;
        }

        & .Logo {
            font-size: 1rem;
        }

        & .Logo,
        & .LogoImage {
            height: 2.5rem;
            max-height: 2.5rem;

            @media (--lg-down) {
                margin-inline-end: 2rem;
            }

            @media (--xl-up) {
                height: 150px;
            }
        }

        & .license {
            font-size: var(--font-size-xs);
            color: var(--white);

            a {
                color: var(--light-purple);
            }
        }
    }
}

#sharing {
    padding: 3rem 2rem;
    margin-block-start: 0;
    margin-block-end: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    background-color: var(--near-black);
    border-radius: 5px;
    max-width: 260px;

    & .title {
        margin-bottom: 1rem;
        text-align: center;
        font-size: var(--font-size-sm);
        font-style: italic;
        font-weight: normal;
        font-family: var(--base-font-family);
        color: var(--grey);
    }

    & .icons {
        width: 100%;
        display: flex;
        justify-content: center;

        & > * {
            margin: 0 8px;
        }
    }
}

#email-subscription {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    align-items: center;

    @media (--xl-up) {
        padding: 1.5rem 2rem;
    }
}
