/* ---------------- Contact page styles ---------------- */
.contact {
    .contact-details,
    .contact-form {
        section,
        section.form-content {
            h2,
            p {
                padding-bottom: 0.5rem;
            }
        }
    }
}
.contact-us {
    .contact {
        .contact-details {
            margin-bottom: 2rem;
            padding: 1.5rem;
            .icon {
                a {
                    &::before {
                        top: 1px;
                        color: var(--color-blue);
                    }
                }
            }
            section {
                &:last-child {
                    padding-bottom: 0;
                }
            }
            @media screen and (min-width: 64em) {
                margin-bottom: 0;
                padding: 2.5rem;
            }
        }
    }
    .contact-form {
        .form-content {
            margin-bottom: 2rem;
            padding-bottom: 2rem;
            border-bottom: 4px solid var(--color-light-blue);
        }
        @media screen and (min-width: 64em) {
            .form-content {
                padding-top: 2.5rem;
            }
        }
        .wpcf7-form {
            label {
                display: inline-block;
                margin-bottom: 0.5rem;
                font-weight: 600;
            }
            small {
                font-size: 0.75rem;
            }
        }
        .wpcf7-list-item {
            margin: 0;
            padding-bottom: 1.5rem;
            input {
                &[type="checkbox"] {
                    width: auto;
                    margin: 0 0.5rem 0 0;
                }
            }
        }
        .wpcf7-not-valid-tip {
            font-weight: 600;
        }
        div {
            &.form-success-message {
                margin-top: 2rem;
                padding: 2rem !important;
                background: var(--color-medium-blue);
                color: var(--color-white);
                h3 {
                    margin-bottom: 1rem;
                    padding-bottom: 1rem;
                    border-bottom: 2px solid var(--color-white);
                }
            }
        }
    }
}

.faqs {
    .contact-faqs {
        width: 100%;
        details {
            padding-bottom: 0.5rem;
            margin-bottom: 0.5rem;
            border-bottom: 1px solid var(--color-light-grey);
            summary {
                position: relative;
                display: flex;
                align-items: center;
                padding: 1.125rem 3.125rem 1.125rem 0;
                font-size: 1.25rem;
                font-weight: 600;
                line-height: 1.4;
                cursor: pointer;
                &::-webkit-details-marker {
                    display: none;
                }
                &::before,
                &::after {
                    position: absolute;
                    right: 0.85rem;
                    width: 1.5rem;
                    border-bottom: 1px solid currentColor;
                    transition: transform .25s ease;
                    content: "";
                }
                &::after {
                    transform: rotate(90deg);
                }
                &::before {
                    transform: rotate(0deg);
                }
            }
            [data-content="true"] {
                padding: 0 1.25rem 1.125rem 0;
                transform: translateY(-6px);
                transition: max-height .35s ease, opacity .25s ease, transform .25s ease;
                p {
                    font-size: 1.125rem;
                }
            }
            &[open] {
                summary {
                    &::after {
                        transform: rotate(360deg);
                    }
                }
                [data-content="true"] {
                    opacity: 1;
                }
            }
        }
    }
}