@use "../base/mixins";

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

/* 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 {
        margin-bottom: 30px;

        .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 2;
                }

                &.col--social, &.col--after-social {
                    // This sorta looks janky if no socials exist,
                    // but the design was tricky, as it required socials to be in
                    // the same column as a menu in desktop
                    // and making the menu responsive was a nightmare lining up menus
                    // so this is simplest
                    padding-top: 100px;
                }

                &.col--social {
                    position: relative;

                    .socials-wrap {
                        position: absolute;
                        top: 0;
                        left: 0;
                    }
                }
            }
        }
    }

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

            .site-footer__col {
                &.col--social, &.col--after-social {
                    padding-top: 0;
                }

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

.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;
    }
}