@use "../base/mixins";

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

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

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

    .raptor-form label {
        color: var(--c-white);
        display: none; // make sure to use placeholders on inputs
    }

    .raptor-form input {
        background: transparent;
        border-color: var(--c-white);
        color: var(--c-white);
    }

    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");
        }
    }

    .raptor-form {
        margin-bottom: var(--site-gutter);
    }

    @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--form {
                    grid-column: span 1;
                }

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

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

                address.contact-details {
                    display: flex;
                    gap: 20px;
                    flex-direction: column !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;
    }
}