/* =========================================
   ASMC CONTACT PAGE
   PHASE 7D
   FINAL RESPONSIVE + ACCESSIBILITY QA
========================================= */


/* =========================================
   CONSISTENT SCROLL TARGETS
========================================= */

#contact-form,
.contact-details {
    scroll-margin-top:
        calc(
            var(--header-height)
            +
            1.5rem
        );
}



/* =========================================
   PREVENT LAYOUT OVERFLOW
========================================= */

.contact-hero-copy,
.contact-directory,
.contact-enquiry-intro,
.contact-form-shell,
.contact-place-main,
.contact-place-side,
.contact-final-copy,
.contact-final-actions {
    min-width: 0;
}


.contact-directory-value,
.contact-directory-phones a,
.contact-place-side a {
    overflow-wrap: anywhere;
}



/* =========================================
   FORM REQUIRED STATE
========================================= */

.contact-field input:required,
.contact-field textarea:required {
    box-shadow: none;
}



/* =========================================
   VALID FIELD
========================================= */

.contact-field input:not(:placeholder-shown):valid,
.contact-field textarea:not(:placeholder-shown):valid {
    border-bottom-color:
        rgba(
            102,
            46,
            147,
            0.46
        );
}



/* =========================================
   INVALID FIELD
   Only display after user interaction
========================================= */

.contact-field input.is-invalid,
.contact-field textarea.is-invalid {
    border-bottom-color:
        #B42318;
}



/* =========================================
   FIELD ERROR MESSAGE
========================================= */

.contact-field-error {
    display: none;

    margin:
        0.45rem
        0
        0;

    font-family:
        var(--font-body);

    font-size:
        0.76rem;

    line-height:
        1.4;

    color:
        #B42318;
}


.contact-field-error.is-visible {
    display: block;
}



/* =========================================
   FORM STATUS
========================================= */

.contact-form-status {
    min-height:
        1.5rem;

    margin-top:
        1.1rem;

    text-align:
        center;
}


.contact-form-status.is-success {
    color:
        var(--color-violet);
}


.contact-form-status.is-error {
    color:
        #B42318;
}



/* =========================================
   SUBMIT DISABLED / LOADING
========================================= */

.contact-submit:disabled {
    cursor:
        wait;

    opacity:
        0.65;

    transform:
        none;
}



/* =========================================
   IMPROVED KEYBOARD FOCUS
========================================= */

.contact-route-option input:focus-visible + span,
.contact-field input:focus-visible,
.contact-field textarea:focus-visible,
.contact-submit:focus-visible,
.contact-hero-action:focus-visible,
.contact-directory-value:focus-visible,
.contact-directory-phones a:focus-visible,
.contact-place-side a:focus-visible,
.contact-final-primary:focus-visible,
.contact-final-secondary:focus-visible {
    outline:
        3px solid
        rgba(
            247,
            148,
            29,
            0.42
        );

    outline-offset:
        4px;
}



/* =========================================
   TEXTAREA
========================================= */

.contact-field textarea {
    max-height:
        360px;
}



/* =========================================
   LARGE DESKTOP
   Keep the page from spreading too far
========================================= */

@media (min-width: 1500px) {

    .contact-hero-inner,
    .contact-enquiry-grid,
    .contact-place-list,
    .contact-final-cta {
        max-width:
            1160px;
    }

}



/* =========================================
   SMALL LAPTOP
========================================= */

@media
    (min-width: 951px)
    and
    (max-width: 1180px) {

    .contact-hero-inner {
        grid-template-columns:
            minmax(0, 0.82fr)
            minmax(0, 1.18fr);

        column-gap:
            clamp(
                4.5rem,
                7vw,
                6rem
            );
    }


    .contact-hero-title {
        font-size:
            clamp(
                4rem,
                6vw,
                6rem
            );
    }


    .contact-directory {
        padding-left:
            1.25rem;

        padding-right:
            1.25rem;
    }


    .contact-enquiry-grid {
        gap:
            clamp(
                3.5rem,
                6vw,
                5rem
            );
    }

}



/* =========================================
   TABLET
========================================= */

@media (max-width: 950px) {

    .contact-enquiry-intro {
        text-align:
            center;

        margin-inline:
            auto;
    }


    .contact-enquiry-kicker {
        margin-inline:
            auto;
    }


    .contact-enquiry-lead {
        margin-inline:
            auto;
    }


    .contact-enquiry-note {
        justify-content:
            center;

        margin-inline:
            auto;
    }

}



/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .contact-hero,
    .contact-enquiry,
    .contact-details {
        overflow-x:
            clip;
    }


    .contact-route-option span {
        min-height:
            48px;
    }


    .contact-field input {
        /*
            16px minimum prevents automatic
            input zoom on many mobile browsers.
        */

        font-size:
            1rem;
    }


    .contact-field textarea {
        font-size:
            1rem;
    }


    .contact-directory-value,
    .contact-directory-phones a {
        word-break:
            normal;
    }


    .contact-place-side {
        align-items:
            flex-start;
    }


    .contact-final-primary,
    .contact-final-secondary {
        width:
            100%;

        box-sizing:
            border-box;
    }

}



/* =========================================
   VERY SMALL MOBILE
========================================= */

@media (max-width: 380px) {

    .contact-hero-title {
        font-size:
            clamp(
                3rem,
                16vw,
                4rem
            );
    }


    .contact-form-shell {
        padding:
            1.5rem
            1rem;
    }


    .contact-route-indicator {
        padding:
            0.8rem;
    }


    .contact-final-cta {
        padding:
            2rem
            1.15rem;
    }

}



/* =========================================
   HIGH CONTRAST / FORCED COLORS
========================================= */

@media (forced-colors: active) {

    .contact-route-option input:checked + span,
    .contact-submit,
    .contact-hero-action,
    .contact-final-primary {
        border:
            1px solid
            ButtonText;
    }


    .contact-route-dot,
    .contact-location-dot {
        forced-color-adjust:
            none;
    }

}



/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .contact-hero-action,
    .contact-directory-value,
    .contact-directory-phones a,
    .contact-route-option span,
    .contact-submit,
    .contact-place-side a,
    .contact-final-primary,
    .contact-final-secondary {
        scroll-behavior:
            auto;

        transition:
            none;
    }

}