/* ---------------------------------------------------------------------------
   Contact form — artculture.au

   Loaded after artculture.min.css. Scoped to #contact throughout so nothing
   here can leak into the rest of the page.

   artculture.min.css already handles the form fields:
       .input-field label            { left:0; color:#fff }
       input[type=email|text],
       textarea.materialize-textarea { color:#fff;
                                       border-bottom-color:#fff;
                                       border-bottom-width:2px }
       form                          { padding:1rem;
                                       background:hsla(0,0%,100%,.02) }
   so the field chrome, labels, focus states and the faint form panel are
   inherited rather than restated. What is left below is the button (which
   the site never styles, so it was falling through to stock Materialize
   teal), the validation state, and the honeypot.
   --------------------------------------------------------------------------- */

#contact .hosting-note {
    margin-bottom: 1.4rem;
}

#contact .contact-form {
    position: relative;   /* containing block for the off-canvas honeypot */
    margin-top: .4rem;
    text-align: left;     /* the section is .center-on-medium-and-down, which
                             would otherwise centre the text inside the inputs */
}

/* Chrome paints autofilled fields with its own pale background, which would
   put near-white text on near-white paper. */
#contact .contact-form input:-webkit-autofill,
#contact .contact-form input:-webkit-autofill:hover,
#contact .contact-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    caret-color: #fff;
    transition: background-color 5000s ease-in-out 0s;
}

/* -------------------------------------------------------------------- button

   The site pairs #fff with #373737 wherever it inverts (.modal.bottom-sheet,
   .block .title on small screens), and uses 2px white rules on the inputs.
   The button follows both: a 2px white outline at rest, filling to white with
   #373737 text on hover, so it reads as part of the same system as the field
   underlines rather than as a Material component that wandered in.

   Square corners, no shadow, sentence case — consistent with a stylesheet
   that removes box-shadow from nav, .side-nav, .faq .collapsible and the
   input focus state, and that uses no uppercase anywhere else.

   Padding rather than Materialize's fixed height/line-height pair, so the
   2px border cannot change the rendered height under either box-sizing.
   --------------------------------------------------------------------------- */

#contact .cf-actions .btn,
#contact .cf-actions .btn:focus {
    height: auto;
    padding: .85rem 2.25rem;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: .01em;
    color: #fff;
    background-color: transparent;
    border: 2px solid #fff;
    border-radius: 0;
    box-shadow: none;
    transition: background-color .4s cubic-bezier(.075, .82, .165, 1),
                color .4s cubic-bezier(.075, .82, .165, 1);
}

#contact .cf-actions .btn:hover,
#contact .cf-actions .btn:focus:hover {
    color: #373737;
    background-color: #fff;
    box-shadow: none;
}

/* Keyboard focus needs to be visible without relying on hover. */
#contact .cf-actions .btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

/* Materialize sets .btn:disabled colours with !important, so matching it is
   the only way to keep the sending state on-palette. */
#contact .cf-actions .btn[disabled],
#contact .cf-actions .btn:disabled {
    color: hsla(0, 0%, 100%, .4) !important;
    background-color: transparent !important;
    border-color: hsla(0, 0%, 100%, .25);
    box-shadow: none;
}

/* ----------------------------------------------------------------- actions */

#contact .cf-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.4rem;
}

#contact .cf-actions .btn {
    margin-right: 1.25rem;
}

#contact .cf-status {
    font-size: .95rem;
    line-height: 1.45;
    max-width: 24rem;
}

#contact .cf-status--ok    { color: #00e676; }  /* matches .toast.success */
#contact .cf-status--error { color: #ff5252; }  /* matches .toast.error   */
#contact .cf-status--busy  { opacity: .7; }

/* -------------------------------------------------------- validation state

   The site deliberately flattens Materialize's own .valid / .invalid classes
   to white, so error state is carried on our own .cf-invalid class instead.
   2px to match the resting underline weight.
   --------------------------------------------------------------------------- */

#contact .contact-form .cf-error {
    display: block;
    margin-top: .2rem;
    font-size: .82rem;
    line-height: 1.35;
    color: #ff5252;
}

#contact .contact-form input.cf-invalid,
#contact .contact-form input.cf-invalid:focus,
#contact .contact-form textarea.cf-invalid,
#contact .contact-form textarea.cf-invalid:focus {
    border-bottom-color: #ff5252;
    border-bottom-width: 2px;
    box-shadow: none;
}

/* ---------------------------------------------------------------- honeypot */

/* Off-canvas rather than display:none — a headless browser can spot the
   latter and skip the field. */
#contact .cf-hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ------------------------------------------------------------- small screens

   The section carries .center-on-medium-and-down, so the button and status
   line are centred to sit with the rest of the mobile layout while the
   fields themselves stay left-aligned.
   --------------------------------------------------------------------------- */

@media only screen and (max-width: 992px) {
    #contact .cf-actions {
        justify-content: center;
    }

    #contact .cf-actions .btn {
        margin-right: 0;
        margin-bottom: 1rem;
    }

    #contact .cf-status {
        flex: 0 0 100%;
        text-align: center;
    }
}