/* ==========================
   Contact page (contact.css)
   ========================== */

/* Honeypot: hide visually, keep out of layout */
#link {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Card wrapper for the form area */
.contact-form-card {
    border: 2px solid rgba(25, 135, 84, 0.6);
}

/* Left-hand label blocks */
.contact-label {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    margin: 0;
    font-weight: 700;
    color: #000;
    background: rgba(255, 255, 255, 0.9);
    border: 3px solid rgba(25, 135, 84, 0.75);
    border-radius: 0.375rem;
}

.contact-field {
    width: 100%;
}

.contact-textarea {
    min-height: 140px;
    resize: vertical;
}

/* Alert area spacing */
#formAlert {
    margin-top: 0.75rem;
}

/* ------------------------------------------------------------------
   Suggestion 1: Only show invalid styling AFTER submit attempt
   Use Bootstrap-compatible .was-validated class.
   ------------------------------------------------------------------ */

/* Don’t show any “invalid” styling by default on page load */
input:invalid,
textarea:invalid {
    /* let Bootstrap defaults apply; we’ll enhance under .was-validated */
}

/* Enhance invalid fields only when the form has been validated */
.was-validated input:invalid,
.was-validated textarea:invalid {
    border-width: 2px;
    border-style: dashed;
    border-color: #dc3545; /* Bootstrap danger */
}

.was-validated input:invalid:focus,
.was-validated textarea:invalid:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Optional: show a subtle “valid” cue after validation */
.was-validated input:valid,
.was-validated textarea:valid {
    border-style: solid;
}

/* Improve keyboard focus visibility */
input:focus-visible,
textarea:focus-visible,
button:focus-visible,
a.btn:focus-visible {
    outline: 3px solid rgba(25, 135, 84, 0.6);
    outline-offset: 2px;
}