/* ==========================================================================
   Component: form fields  (request-a-quote, contact)
   --------------------------------------------------------------------------
   <div class="field [field--wide] [has-error]">
       <label for="x">Label <small>optional</small></label>
       <input id="x" …> | <select> | <textarea>
       <p class="field__error">message</p>
   </div>
   Inside .fields (a 2-column grid; .field--wide spans both). Soft grey wells,
   rounded, a navy ring on focus, red ring + message on error.
   ========================================================================== */

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.field { display: grid; gap: var(--s-2); align-content: start; }
.field--wide { grid-column: 1 / -1; }

.field label { font-weight: 600; font-size: var(--fs-sm); }
.field label small { margin-inline-start: 0.4em; color: var(--ink-faint); font-weight: 500; }
.field label .req { color: #B42318; }

.field input, .field select, .field textarea {
    width: 100%;
    min-height: 52px;
    padding: 0.75em 1em;
    border: 1.5px solid transparent;
    border-radius: var(--r-md);
    background: var(--card-soft);
    color: var(--navy);
    font-size: var(--fs-base);
    line-height: 1.5;
    transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; padding-inline-end: 2.5em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2320394A' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 18px; background-position: left 0.9em center; }
[dir="ltr"] .field select { background-position: right 0.9em center; }
.field ::placeholder { color: var(--ink-faint); opacity: 0.8; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy); background: var(--card); }
.field [dir="ltr"] { text-align: start; }

.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #B42318; background: #FEF3F2; }
.field__error { color: #B42318; font-size: var(--fs-xs); font-weight: 600; }

/* Honeypot — off-screen for people, still in the form for bots */
.hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { display: flex; align-items: center; gap: var(--s-2); color: var(--ink-faint); font-size: var(--fs-xs); }

@media (max-width: 575.98px) { .fields { grid-template-columns: 1fr; } }

/* reCAPTCHA v3: Google's notice replaces its floating badge (allowed by Google when the notice is shown) */
.recaptcha-note { margin-block-start: var(--s-2); color: var(--ink-faint); font-size: var(--fs-xs); }
.recaptcha-note a { text-decoration: underline; }
.grecaptcha-badge { visibility: hidden; }

/* AJAX forms: a send error (connection, reCAPTCHA, too many tries) under the fields */
.form-status { margin-block: var(--s-3) 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: #FEF3F2; color: #B42318; font-size: var(--fs-sm); font-weight: 600; }
.form-status[hidden] { display: none; }