@import "../_variables.css";

footer {
    container-type: inline-size;
    container-name: footer;

    border-top: 2px solid var(--gray-300);
    background-color: var(--primary);
    color: white;

    hr {
        border-top: 1px solid white;
        margin: 1rem 0;

        @container screen (min-width: 48rem) {
            border-top: 1px solid var(--body-color);
        }
    }

    .footer-main-content {
        display: flex;
        flex-direction: column;
        gap: 3rem;
        font-size: 0.875rem;
        padding: 1.5rem 3rem;

        @container screen (min-width: 48rem) {
            font-size: 1rem;
            gap: 1rem;
            padding: unset;
        }

        a {
            font-family: var(--font-family-body);
            text-decoration: none;
            color: white;
            transition: all 0.2s ease;
            font-size: 0.875rem;
            font-weight: 500;
            line-height: 20px;

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

            @container screen (min-width: 48rem) {
                color: var(--body-color);
                font-size: inherit;
            }
        }

        .content-element {
            margin-bottom: unset;

            .content {
                gap: 1rem;
                display: flex;
                flex-direction: column;

                p {
                    margin-bottom: unset;
                }
            }
        }

        .contact-info {
            order: 2;

            svg path {
                fill: white;
            }

            p {
                margin-top: 1.75rem;
                font-size: 0.875rem;
                font-weight: 400;
                line-height: 1.5rem;
            }

            @container screen (min-width: 48rem) {
                order: unset;

                svg path {
                    fill: revert-layer;
                }

                p {
                    font-size: 1.125rem;
                }
            }
        }

        .footer-faculty-navigation a {
            text-wrap: pretty;
            max-width: 270px;
            font-family: var(--font-family-body);
            font-weight: 500;
            line-height: 1.25rem;
            -webkit-font-smoothing: auto;

            &:before {
                display: none;
            }

            @container screen (min-width: 48rem) {
                -webkit-font-smoothing: inherit;

                &:before {
                    display: inherit;
                }
            }
        }

        .footer-navigation a {
            font-weight: 500;
            line-height: 1.5rem;
        }

        .socials {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            order: 3;

            @container screen (min-width: 48rem) {
                gap: 1.25rem;
                align-items: center;
                justify-content: start;
                order: unset;
            }

            .social-link {
                width: 24px;
                height: 24px;

                svg path {
                    fill: white;

                    @container screen (min-width: 48rem) {
                        fill: revert-layer;
                    }
                }
            }
        }
    }

    .footer-sub-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.5rem 3rem;

        @container screen (min-width: 48rem) {
            padding: unset;
        }

        .copyright {
            font-size: 0.875rem;

            @container screen (min-width: 48rem) {
                font-size: 1rem;
            }
        }

        .footer-logos {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            justify-content: space-around;
            gap: 1rem;
            margin-left: auto;
            margin-right: auto;

            img {
                height: 3rem;
                width: auto;
            }
        }
    }

    span.fernuni-icons,
    a.fernuni-icons {
        &[class*="category-"],
        &[class*="icon-"] {
            display: inline-flex;
            align-items: flex-start;

            &:before {
                font-size: 1rem;
                margin-right: 0.5rem;
                background-color: transparent;
            }
        }

        &.icon-psychology:before {
            color: var(--color-psychology);
        }

        &.icon-law:before,
        &.icon-law-balance:before {
            color: var(--color-law);
        }

        &.icon-economy-management:before {
            color: var(--color-economy);
        }

        &.icon-history-science:before {
            color: var(--color-history);
        }

        &.category-8:before,
        &.icon-mathematics-computer-science:before {
            color: var(--color-maths);
        }
    }

    @container screen (min-width: 48rem) {
        padding-top: 3rem;
        padding-bottom: 3rem;
        color: var(--body-gray);
        background: var(--gray-100);

        hr {
            margin-top: 3rem;
            margin-bottom: 0;
        }

        .footer-main-content,
        .footer-sub-content {
            flex-direction: row;
            justify-content: space-between;
        }

        .footer-main-content {
            gap: 3.75rem;

            .socials {
                flex-direction: column;
            }
        }

        .footer-sub-content {
            align-items: center;
            padding-top: 3rem;
            gap: revert;

            .footer-logos {
                display: flex;
                flex-direction: row;
                gap: 3.75rem;
                justify-content: end;
                margin-left: revert;
                margin-right: revert;
            }
        }
    }
}