body {
    background-color: var(--colourBackground);
    font-family: 'Albert Sans', sans-serif;
}

div.container {
    max-width: var(--layoutWidth);
    margin: 0 auto;
}

div.strip {
    background-color: var(--colourContentBackground);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    margin: 22px 0;

    div.container {
        padding: 22px;
        display: flex;
        align-items: center;
        gap: 22px;
        flex-direction: column;

        @media (min-width: 768px) {
            flex-direction: row;
        }

        img {
            min-width: 200px;
            min-height: 200px;
            background-color: var(--colourPlaceholder);
        }

        div.content {
            .title {
                text-align: center;
                font-family: 'Playfair Display', serif;
                font-weight: 600;
            }

            p {
                margin-top: 18px;
            }

            div.button-row {
                margin-top: 22px;
                display: flex;
                justify-content: center;
                gap: 22px;
            }
        }
    }
}

footer {
    margin-top: 44px;
    div.strip {
        margin-bottom: 0;
        margin-top: 0;

        div.container {
            display: flex;
            justify-content: space-between;
            gap: 44px;
            flex-direction: column;

            @media (min-width: 768px) {
                flex-direction: row;
            }

            div.brand {
                width: 50%;
                text-align: center;
                img {
                    object-fit: contain;
                    min-height: unset;
                    background-color: transparent;
                }
            }

            div.contact {
                display: flex;
                flex-direction: column;
                gap: 22px;

                div.method {
                    display: flex;
                    gap: 22px;

                    div.icon {
                        background-color: var(--colourSecondary);
                        height: 55px;
                        width: 55px;
                        border-radius: 50%;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        svg {
                            width: 50%;
                            fill: white;
                        }
                    }

                    div.info {
                        p {
                            font-weight: bold;
                        }

                        p.subtext {
                            font-size: 0.8rem;
                            font-weight: normal;
                            opacity: 0.8;
                        }
                    }
                }
            }
        }

        div.end {
            margin-top: 22px;
            padding-bottom: 22px;
            text-align: center;
            div.taurusnetwork {
                p {
                    display: inline-block;
                    font-weight: bold;
                }
            }
        }
    }
}

button,.button {
    border: none;
    border-radius: 0;
    background-color: var(--colourPlaceholder);
    padding: 8px 16px;
    color: white;
    cursor: pointer;

    &.primary {
        --buttonColour: var(--colourPrimary);
    }

    &.secondary {
        --buttonColour: var(--colourSecondary);
    }

    background-color: var(--buttonColour);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

    &:hover {
        background-color: color-mix(in srgb, var(--buttonColour), black 20%);
    }

    &:active {
        background-color: color-mix(in srgb, var(--buttonColour), black 40%);
    }
}

div.enquiry-overlay {
    div.trigger {
        position: fixed;
        bottom: 22px;
        right: 22px;
        width: 60px;
        height: 60px;
        background-color: var(--colourPrimary);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        cursor: pointer;
        z-index: 999;

        &:hover {
            background-color: color-mix(in srgb, var(--colourPrimary), black 20%);
        }

        &:active {
            background-color: color-mix(in srgb, var(--colourPrimary), black 40%);
        }

        svg {
            fill: white;
            width: 50%;

            &.close {
                display: none;
            }
        }
    }

    div.backdrop {
        display: none;
        background-color: color-mix(in srgb, var(--colourPrimary), black 50%);
        opacity: 0.2;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    div.form-wrapper {
        display: none;
        position: fixed;
        bottom: 100px;
        left: 8px;
        right: 8px;
        height: fit-content;
        background-color: var(--colourContentBackground);
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        padding: 22px;
        transition: all 1s ease;
        max-height: 80vh;
        height: fit-content;
        overflow-y: auto;

        @media (min-width: 450px) {
            left: unset;
            right: 22px;
            max-width: 350px;       
            width: 100%;
        }

        p.title {
            font-family: 'Playfair Display', serif;
            font-weight: 600;
            text-align: center;
            font-size: 1.6rem;
        }

        button {
            display: block;
            margin: 0 auto;
            margin-top: 22px;
        }

        div.success {
            display: none;
            text-align: center;

            svg {
                max-width: 25%;
                fill: var(--colourSecondary);
                margin: 22px auto;
            }
        }

        div.cf-turnstile {
            margin: 20px auto;
            display: block;
            width: fit-content;
        }

        &.success {
            form {
                display: none;
            }

            div.success {
                display: block;
            }
        }
    }

    &.active {
        div.form-wrapper {
            display: block;
        }

        div.backdrop {
            display: block;
        }

        div.trigger {
            svg {
                &.open {
                    display: none;
                }

                &.close {
                    display: block;
                }
            }
        }
    }
}

form {
    div.input {
        margin-top: 22px;

        label {
            font-family: 'Playfair Display', serif;
            font-weight: 600;
            display: block;

            sup {
                font-size: 0.8rem;
                font-weight: normal;
            }
        }

        input,textarea,select {
            border-radius: 4px;
            border: solid var(--colourSecondary) 1px;
            width: 100%;
        }
    }
}