@import "../styles";

body.namespace-.controller-journey,
body.namespace-.controller-insiders {
    & #site-footer {
        margin-top: 0px;
        background: #191525;

        .external-section {
            background: none;
            box-shadow: none;
            .bottom {
                background: none;
            }

            .btn-enhanced.btn-l {
                box-shadow: none;
            }
        }
    }
}

#site-footer {
    /* Show this through JS to avoid CLS */
    display: none;
    background: var(--backgroundColorSiteFooter);

    margin-top: 100px;
    @screen lg {
        margin-top: 200px;
    }

    @apply border-t-8 border-purple;

    & .external-section {
        box-shadow: 0px 4px 24px 0px #00000026;
        background: linear-gradient(
                180deg,
                #271b72 0%,
                rgba(39, 27, 114, 0) 48.1%,
                #271b72 100%
            ),
            linear-gradient(0deg, #271b72, #271b72), var(--hex-bg-image);

        background-size: 100%;
        background-position: -190px;

        & .c-icon {
            @apply mb-24;
            width: 133px;
            height: 24px;
            filter: var(--filter-FFFFFF);
        }
        & h2 {
            @apply text-white;
        }
        & p {
            @apply text-veryLightBlue;
            max-width: 640px;
        }
        & .btn-enhanced {
            @apply bg-transparent;
            @apply text-white;
        }
        & .bottom {
            background: linear-gradient(
                180deg,
                rgba(39, 27, 114, 0) 0%,
                #190f5c 100%
            );
            height: 64px;
        }
    }

    & hr {
        border-top: 2px solid #453a8f;
    }

    & hr.c-divider {
        filter: var(--filter-59D2AE);
    }

    & .nfp {
        @apply flex flex-col items-center text-center;
        @apply pt-52;
        & > .c-icon {
            width: 64px;
            height: 64px;
            @apply mb-24;
        }
        & h2 {
            @apply text-lightPurple;

            max-width: 610px;
        }
        & h3 {
            @apply text-white;
        }
        & p {
            @apply text-lightPurple;

            & strong {
                @apply font-semibold text-white;
            }
            max-width: 800px;
            @apply mb-32;
        }
        & .c-react-wrapper-donations-footer-form {
            width: 100%;
            max-width: 1024px;
            @apply uses-suspense;
        }
        & .donations-form {
            & .amounts {
                @apply flex-grow;
                @apply grid gap-16;
                grid-template:
                    "a b" auto
                    "c d" auto
                    "e e" auto / 1fr 1fr;

                @screen sm {
                    grid-template:
                        "a b c" auto
                        "d e e" auto / 1fr 1fr 1fr;
                }

                & button {
                    @apply text-unnamed15;
                    @apply bg-gotToLoveAPurple border-1 border-purpleForever;
                    @apply rounded-8;

                    &.selected {
                        @apply bg-purpleForever;
                        @apply border-1 border-purpleForever;
                    }
                }

                & h3 {
                    @apply text-16 leading-150 font-semibold;
                    @apply text-textColor6;
                    @apply mb-8;
                }

                & .c-faux-input {
                    grid-area: e;
                    @apply py-4;
                    @apply text-textColor1;
                    @apply bg-gotToLoveAPurple border-1 border-purpleForever;
                    @apply rounded-8;

                    & .icon {
                        @apply text-darkPlaceholder;
                    }
                    & input {
                        min-width: 0;
                        @apply flex-grow;
                        line-height: 30px;
                        border-left-color: #9d94da !important;
                        &::placeholder {
                            @apply text-darkPlaceholder;
                        }
                    }
                    &.selected {
                        @apply bg-purpleForever;
                        @apply border-1 border-purpleForever;
                        box-shadow: 0px 0px 0px 1px #2e57e8,
                            0px 0px 2px 2px var(--inputBoxShadowColorFocus);
                        & input {
                            @apply text-white font-semibold;
                        }
                    }
                }
            }
            & .continue-btn {
                @screen md {
                    width: 250px;
                    height: auto;
                }

                @apply bg-limeGreen text-white;
                & .c-icon {
                    filter: var(--white-filter);
                }
            }
        }
    }

    & .site-links,
    & .tracks {
        & li {
            @apply mb-8;
            & a {
                @apply text-[#c8d5ef] font-medium text-16 leading-150;
            }
        }
    }
    & .site-links {
        & h3 {
            @apply text-white text-16 leading-160 font-bold;
        }

        & hr.c-divider {
            @apply mt-16 mb-20;
        }
        & .col {
            @apply mb-20;
        }
    }

    & .socials {
        @apply flex items-center justify-center;
        & .icon {
            height: 48px;
            width: 48px;
            @apply grid place-items-center;
            @apply rounded-circle;
            @apply mx-12;
            & .c-icon {
                height: 24px;
                width: 24px;
                filter: var(--filter-FFFFFF);
            }
            &.twitter {
                background: #1da1f2;
            }
            &.facebook {
                background: #4267b2;
            }
            &.github {
                background: #6e82aa;
            }
        }
    }
    & .tracks {
        @apply flex flex-col;
        & h2 {
            @apply text-white;
        }
        & h3 {
            @apply text-white mb-12;
        }
        & p {
            @apply text-lightPurple;
            & a {
                color: #fae54e;
                @apply font-semibold;
            }
        }
    }
    & .legals {
        @apply text-[#c8d5ef] text-16 leading-160;
        & a {
            @apply text-lightPurple font-medium;
            @apply border-b-1 border-[#c8d5ef];
        }

        & .copyright {
            @apply text-veryLightBlue font-semibold;
            @apply flex-shrink-0;
        }
    }
}
