@use "../base/mixins";

// Hello from the new raptor create v2 - Footer 02

/* stylelint-disable */
.site-footer {
    .site-footer__col-heading {
        margin-bottom: 15px;
        display: inline-block;

        text-transform: uppercase;
        font-weight: 700;
        font-size: .875rem;
    }

    nav {
        li {
            margin-bottom: 8px;

            &:last-child {
                margin-bottom: 0;
            }
        }

        a {
            display: inline-block;

            &:hover {
                color: inherit;
                text-decoration: underline;
            }
        }
    }
}

.site-footer__main {
    padding: 40px var(--site-padding);
    background-color: var(--c-secondary);

    .custom-logo {
        max-width: 127px;
        height: auto;
    }

    .site-footer__col {
        // Keeps everything centered within column on mobile
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        &.col--logo {
            gap: 20px;
        }
    }

    > * {
        color: var(--c-white);
        fill: var(--c-white);
    }

    .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }

    .social-media-links {

        .social-link {
            overflow: hidden;
            position: relative;
            width: 18px;
            height: 18px;

            svg {
                @include mixins.object-fit;
                object-fit: contain;
            }
        }
    }

    address {
        font-style: normal;

        display: flex;
        flex-direction: column;
        gap: 8px;

        a {
            padding-left: 24px;
            padding-top: 4px;
            padding-bottom: 4px;
            background-repeat: no-repeat;
            background-position: left center;
            background-size: 17px;
        }

        a[href^="tel:"] {
            background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.51667 8.99167C6.71667 11.35 8.65 13.275 11.0083 14.4833L12.8417 12.65C13.0667 12.425 13.4 12.35 13.6917 12.45C14.625 12.7583 15.6333 12.925 16.6667 12.925C17.125 12.925 17.5 13.3 17.5 13.7583V16.6667C17.5 17.125 17.125 17.5 16.6667 17.5C8.84167 17.5 2.5 11.1583 2.5 3.33333C2.5 2.875 2.875 2.5 3.33333 2.5H6.25C6.70833 2.5 7.08333 2.875 7.08333 3.33333C7.08333 4.375 7.25 5.375 7.55833 6.30833C7.65 6.6 7.58333 6.925 7.35 7.15833L5.51667 8.99167Z' fill='%23F25C55'/%3E%3C/svg%3E%0A");
        }

        a[href^="mailto:"] {
            background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.6665 3.33333H3.33317C2.4165 3.33333 1.67484 4.08333 1.67484 4.99999L1.6665 15C1.6665 15.9167 2.4165 16.6667 3.33317 16.6667H16.6665C17.5832 16.6667 18.3332 15.9167 18.3332 15V4.99999C18.3332 4.08333 17.5832 3.33333 16.6665 3.33333ZM16.6665 6.66666L9.99984 10.8333L3.33317 6.66666V4.99999L9.99984 9.16666L16.6665 4.99999V6.66666Z' fill='%23F25C55'/%3E%3C/svg%3E%0A");
        }
    }

    @include mixins.min-width(600) {
        .container {
            --columns: 2;
            align-items: flex-start;
            display: grid;
            grid-template-columns: repeat(var(--columns), 1fr);

            .site-footer__col {
                align-items: start;
                justify-content: start;

                &.col--logo {
                    grid-column: span 1;
                }

                &.col--contact {
                    grid-column: 2 / span 1;
                    grid-row: 1;
                }
            }
        }
    }

    @include mixins.min-width(1200) {
        .container {
            --columns: 6;

            .site-footer__col {

                &.col--logo {
                    grid-column: span 2;
                }

                &.col--contact {
                    grid-column: 3 / span 3;
                    grid-row: 2;
                }

                &.col--social {
                    .socials-wrap {
                        position: static;
                    }
                }

                address.contact-details {
                    display: flex;
                    gap: 20px;
                    flex-direction: row !important;
                }
            }
        }
    }
}

.site-footer__legal {
    padding: 20px var(--site-margin);

    background-color: var(--c-l-grey);

    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }
}

.site-footer__col {
    margin-bottom: 30px;

    &:last-child {
        margin-bottom: 0;
    }

    @include mixins.min-width( 650 ) {
        margin-bottom: 0;
    }
}