/* -------------------------------------------------------------------------- */
/*	#. Contact Form 7
/* -------------------------------------------------------------------------- */
.contact-form,
.membership-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 2em;
    grid-template-areas:
        "contact-required contact-required"
        "contact-first-name contact-first-name"
        "contact-last-name contact-last-name"
        "contact-subject contact-subject"
        "contact-email contact-email"
        "contact-message contact-message"
        "contact-consent contact-consent"
        "contact-send contact-send"
        "form-error form-error";

    font-size: var(--wp--preset--font-size--normal);
}

.membership-form {
    grid-template-areas:
        "membership-header-contact-details membership-header-contact-details"
        "membership-required membership-required"
        "membership-first-name membership-first-name"
        "membership-last-name membership-last-name"
        "membership-address-line-1 membership-address-line-1"
        "membership-address-line-2 membership-address-line-2"
        "membership-address-line-3 membership-address-line-3"
        "membership-postcode membership-postcode"
        "membership-telephone membership-telephone"
        "membership-email membership-email"
        "membership-contact-method-text membership-contact-method-text"
        "membership-contact-method ."
        "membership-spacer-interests-experience membership-spacer-interests-experience"
        "membership-header-interests-experience membership-header-interests-experience"
        "membership-work-interests-text membership-work-interests-text"
        "membership-work-interests-01 membership-work-interests-01"
        "membership-work-interests-02 membership-work-interests-02"
        "membership-work-experience-text membership-work-experience-text"
        "membership-work-experience-01 membership-work-experience-01"
        "membership-work-experience-02 membership-work-experience-02"
        "membership-spacer-membership-type membership-spacer-membership-type"
        "membership-header-membership-type membership-header-membership-type"
        "membership-type membership-type"
        "membership-payment membership-payment"
        "membership-consent membership-consent"
        "membership-send membership-send"
        "form-error form-error";
}

@media screen and (min-width: 768px) {
    .contact-form {
        grid-template-areas:
            "contact-required contact-required"
            "contact-first-name contact-last-name"
            "contact-subject contact-subject"
            "contact-email contact-email"
            "contact-message contact-message"
            "contact-consent contact-consent"
            "contact-send contact-send"
            "form-error form-error";
    }

    .membership-form {
        grid-template-areas:
            "membership-header-contact-details membership-header-contact-details"
            "membership-required membership-required"
            "membership-first-name membership-last-name"
            "membership-address-line-1 membership-address-line-1"
            "membership-address-line-2 membership-address-line-2"
            "membership-address-line-3 membership-address-line-3"
            "membership-postcode membership-postcode"
            "membership-telephone membership-email"
            "membership-contact-method-text membership-contact-method-text"
            "membership-contact-method ."
            "membership-spacer-interests-experience membership-spacer-interests-experience"
            "membership-header-interests-experience membership-header-interests-experience"
            "membership-work-interests-text membership-work-interests-text"
            "membership-work-interests-01 membership-work-interests-02"
            "membership-work-experience-text membership-work-experience-text"
            "membership-work-experience-01 membership-work-experience-02"
            "membership-spacer-membership-type membership-spacer-membership-type"
            "membership-header-membership-type membership-header-membership-type"
            "membership-type membership-payment"
            "membership-consent membership-consent"
            "membership-send membership-send"
            "form-error form-error";
    }
}

.contact-required {
    grid-area: contact-required;
}

.contact-first-name {
    grid-area: contact-first-name;
}

.contact-last-name {
    grid-area: contact-last-name;
}

.contact-subject {
    grid-area: contact-subject;
}

.contact-email {
    grid-area: contact-email;
}

.contact-message {
    grid-area: contact-message;
}

.contact-consent {
    grid-area: contact-consent;
}

.contact-send {
    grid-area: contact-send;
}

.membership-header-contact-details {
    grid-area: membership-header-contact-details;
}

.membership-required {
    grid-area: membership-required;
}

.membership-first-name {
    grid-area: membership-first-name;
}

.membership-last-name {
    grid-area: membership-last-name;
}

.membership-address-line-1 {
    grid-area: membership-address-line-1;
}

.membership-address-line-2 {
    grid-area: membership-address-line-2;
}

.membership-address-line-3 {
    grid-area: membership-address-line-3;
}

.membership-postcode {
    grid-area: membership-postcode;
}

.membership-telephone {
    grid-area: membership-telephone;
}

.membership-email {
    grid-area: membership-email;
}

.membership-spacer-membership-type {
    grid-area: membership-spacer-membership-type;
}

.membership-header-membership-type {
    grid-area: membership-header-membership-type;
}

.membership-type {
    grid-area: membership-type;
}

.membership-payment {
    grid-area: membership-payment;
}

.membership-spacer-interests-experience {
    grid-area: membership-spacer-interests-experience;
}

.membership-header-interests-experience {
    grid-area: membership-header-interests-experience;
}

.membership-work-interests-text {
    grid-area: membership-work-interests-text;
}

.membership-work-interests-01 {
    grid-area: membership-work-interests-01;
}

.membership-work-interests-02 {
    grid-area: membership-work-interests-02;
}

.membership-work-experience-text {
    grid-area: membership-work-experience-text;
}

.membership-work-experience-01 {
    grid-area: membership-work-experience-01;
}

.membership-work-experience-02 {
    grid-area: membership-work-experience-02;
}

.membership-contact-method-text {
    grid-area: membership-contact-method-text;
}

.membership-contact-method {
    grid-area: membership-contact-method;
}

.membership-consent {
    grid-area: membership-consent;
}

.membership-send {
    grid-area: membership-send;
}

.membership-type-description {
    margin-top: 1em;
    display: block;
}

.wpcf7-response-output {
    grid-area: form-error;
}

.wpcf7-form p {
    margin: 1em 0 0;
}

.wpcf7-form-required {
    color: var(--wp--preset--color--vivid-red);
}

.wpcf7-form label {
    display: inline-block;
    margin-bottom: .5em;
    font-weight: 700;
}

.wpcf7-form input:not(.wpcf7-submit),
.wpcf7-textarea,
.wpcf7-form select {
    border: 2px solid var(--wp--preset--color--senary);
    border-radius: .5em;
    padding: .4em;
    width: 100%;
    font-family: inherit;
    font-size: var(--wp--preset--font-size--normal);
    box-sizing: border-box;
}

.wpcf7-form input:not(.wpcf7-submit):hover,
.wpcf7-form input:not(.wpcf7-submit):focus,
.wpcf7-form input:not(.wpcf7-submit):active,
.wpcf7-textarea:hover,
.wpcf7-textarea:focus,
.wpcf7-textarea:active,
.wpcf7-form select:hover,
.wpcf7-form select:focus,
.wpcf7-form select:active {
    border: 2px solid var(--wp--preset--color--quaternary);
}

.wpcf7-form select:first-child,
.wpcf7-form select:invalid {
    width: 100%;
    color: var(--wp--preset--color--secondary);
}

.wpcf7-form select:valid {
    color: var(--wp--preset--color--foreground);
}

.wpcf7-form input:not(.wpcf7-submit)::placeholder,
.wpcf7-textarea::placeholder {
    color: var(--wp--preset--color--secondary);
}

.wpcf7 input[type=checkbox]:checked {
    accent-color: var(--wp--preset--color--quaternary);
}

.wpcf7-list-item {
    display: unset;
    margin: 0;
}

.wpcf7-list-item label {
    display: flex;
    align-items: center;
    gap: 1em;
}

.wpcf7-list-item input[type=checkbox] {
    margin: 0;
    width: 25px;
    min-width: 25px;
    max-width: 25px;
    height: 25px;
    min-height: 25px;
    max-height: 25px;
}

.wpcf7-checkbox.multiple-choice .wpcf7-list-item {
    margin: 0;
    width: 100%;
}

.wpcf7-checkbox.multiple-choice .wpcf7-list-item label {
    margin: 1em 0 0;
    font-size: var(--wp--preset--font-size--normal);
}

.wpcf7-not-valid-tip {
    display: inline-block;
    position: relative;
    margin-top: .8em;
    border-radius: .5em;
    padding: .5em .8em;
    background-color: var(--wp--preset--color--vivid-red);
    color: var(--wp--preset--color--background);
    font-size: var(--wp--preset--font-size--small);
    font-weight: normal;
}

.wpcf7-not-valid-tip::before {
    display: inline-block;
    margin-right: .5em;
    font-family: 'FontAwesome';
    content: '\f06a';
}

.wpcf7-not-valid-tip::after {
    position: absolute;
    top: -20px;
    left: 20px;
    border-top: .8em solid transparent;
    border-right: .8em solid transparent;
    border-bottom: .8em solid var(--wp--preset--color--vivid-red);
    border-left: .8em solid transparent;
    content: "";
}

.wpcf7 form .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
    display: flex;
    align-items: center;
    gap: 1em;
    margin: 2em 0;
    border: 1px solid var(--wp--preset--color--quaternary);
    border-radius: .5em;
    padding: .5em 1em;
    background-color: var(--wp--preset--color--senary);
    color: var(--wp--preset--color--quaternary);
    font-size: var(--wp--preset--font-size--normal);
}

.wpcf7 form .wpcf7-response-output::before {
    height: auto;
    font-family: 'FontAwesome';
    font-size: var(--wp--preset--font-size--huge);
    content: '\f06a';
    float: left;
}

.wpcf7 form.sent .wpcf7-response-output::before {
    /* Green. */
    color: var(--wp--preset--color--vivid-green-cyan);
    content: '\f058';
}

.wpcf7 form.failed .wpcf7-response-output::before,
.wpcf7 form.aborted .wpcf7-response-output::before {
    /* Red. */
    color: var(--wp--preset--color--vivid-red);
    content: '\f057';
}

.wpcf7 form.spam .wpcf7-response-output::before,
.wpcf7 form.invalid .wpcf7-response-output::before,
.wpcf7 form.unaccepted .wpcf7-response-output::before {
    /* Orange. */
    color: var(--wp--preset--color--luminous-vivid-orange);
    content: '\f071';
}

.wpcf7 form.init .wpcf7-response-output {
    display: none;
}

.wpcf7-submit {
    cursor: pointer;
}