/* ==========================================================================
   Footer Styles
   Extracted from style.css - Footer section
   ========================================================================== */

.site-footer {
    display: flex;
    flex-direction: column;
    padding: 15px 30px;
    background-color: var(--secondary-color);
    align-items: center;

    .widget {
        margin-bottom: 20px;

        .widget-title {
            color: var(--text-muted);
            font-size: 18px;
            margin: 0 0 25px;
        }

        li,
        p {
            line-height: 170%;
        }

        .button {
            background-color: var(--third-color);
            color: var(--secondary-color);
            font-size: 15px;
            border-radius: 60px;
            padding: 11px 70px 12px;
            border: none;
            font-weight: 600;

            &:hover {
                background-color: var(--primary-hover);
                color: var(--secondary-color);
            }
        }

        a {
            text-decoration: none;

            &:hover {
                text-decoration: none;
            }
        }

        .menu {
            list-style: none;
            margin: 0 0 10px;

            li {
                list-style: none;
                margin: 0 0 13px;

                a {
                    color: var(--heading-color);
                    border: none;

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

    .f-logo-wrap {
        margin-bottom: 20px;
        width: 100%;
    }

    .f-logo {
        border: none;
        display: block;

        img {
            max-width: 20%;
            max-height: 20%;
            margin-bottom: 1rem;
            filter: var(--image-invert-color);
        }
    }

    /* MD - Medium devices (≥ 768px) */
    @media (min-width: 768px) {
        padding: 30px 5% 20px;

        .f-logo img {
            max-width: 10%;
        }
    }
}

/* Footer Container - from base.css */
.footer-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    gap: 2rem;
    width: 100%;
    margin: 0 auto;
    padding: 20px 15px;

    h4 {
        text-align: center;
    }

    /* SM - Small devices (≥ 576px) */
    @media (min-width: 576px) {
        display: grid;
        grid-auto-columns: 1fr;
        grid-auto-flow: column;
        gap: 0;
        text-align: left;

        h4 {
            text-align: left;
        }
    }

    /* MD - Medium devices (≥ 768px) */
    @media (min-width: 768px) {
    }
}

.footer-link-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
    width: max-content;

    a {
        color: var(--secondary-text-color);
        text-decoration: none;
        transition: color 0.2s, border 0.2s;

        &:hover,
        &:active {
            color: var(--third-color);
            border-color: var(--third-color);
        }
    }

    &.contact-info {
        /* margin: auto; */
        margin-bottom: 20px;

        li {
            display: flex;
            width: 100%;

            a {
                overflow: hidden;
                max-width: 8rem;
                white-space: nowrap;
                text-overflow: ellipsis;
                color: var(--secondary-text-color);
                overflow: hidden;

                &:hover, &:active {
                    color: var(--third-color);

                    i {
                        color: var(--third-color);
                    }
                }

                i {
                    display: block;
                    color: var(--secondary-text-color);
                    text-align: center;
                    transition: color 0.2s;
                }
            }
        }
    }

    /* SM - Small devices (≥ 576px) */
    @media (min-width: 576px) {
        &.contact-info {
            margin: 0 0 20px 0;

            li {
                a {
                    max-width: 12rem;
                }
            }
        }
    }

    /* MD - Medium devices (≥ 768px) */
    @media (min-width: 768px) {
        &.contact-info {

            li {
                a {
                    max-width: none;

                    i {
                        display: inline;
                        margin-right: 5px;
                    }
                }
            }
        }
    }
}

.social-links-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;

    /* SM - Small devices (≥ 576px) */
    @media (min-width: 576px) {
        align-items: flex-start;
    }

    .social-links {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
        list-style: none;
        margin-left: 2px;
        padding: 0;

        li {
            margin: 0;
            padding: 0;
            background: transparent !important;
            background-color: transparent !important;
            border-radius: 0 !important;
            list-style: none;
        }

        a {
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--base-text-color);
            text-decoration: none;
            transition: color 0.2s, border 0.2s;
            background: transparent;
            border-radius: 0;
            padding: 0;
            width: auto;
            height: auto;

            &:hover {
                color: var(--third-color);
                text-decoration: underline;
            }
        }

        i {
            font-size: 1.8rem;
            background: transparent !important;
            background-color: transparent !important;
            border-radius: 0 !important;
            padding: 0 !important;
            width: auto !important;
            height: auto !important;
        }
    }
}

.footer-link-list.social-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    margin-left: 2px;
    padding: 0;

    li {
        margin: 0;
        padding: 0;
        background: transparent !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        list-style: none;
    }

    a {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--base-text-color);
        text-decoration: none;
        transition: color 0.2s, border 0.2s;
        background: transparent;
        border-radius: 0;
        padding: 0;
        width: auto;
        height: auto;

        &:hover {
            color: var(--third-color);
            text-decoration: underline;
        }
    }

    i {
        font-size: 1.8rem;
        background: transparent !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        padding: 0 !important;
        width: auto !important;
        height: auto !important;
    }
}

.copyright {
    text-align: center;
    color: var(--secondary-text-color);
    font-size: 1.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    width: 100%;
}

.footer-title-container {
    display: none;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;

    .footer-title {
        margin: 0;
        font-size: 2rem;
        transition: color 0.2s;
    }

    svg {
        max-width: auto;
        max-height: 25px;

        path {
            transition: fill 0.2s;

            .darkmode & {
                fill: #ffffff;
            }
        }

    }

    &:hover, &:active {
        cursor: pointer;

        .footer-title {
            color: var(--third-color);
        }

        svg {
            path {
                fill: #1291ee;
            }
        }
    }

    @media screen and (min-width: 992px) {
        display: flex;
        min-width: 28rem;
        margin-right: 5rem;
    }
}