/* ============================================================================
   Form controls — used by the contact, quote and careers forms (Phase 6).
   Built now so every form on the site starts from the same styling.

   Expected markup:

     <div class="field">
       <label class="field__label" for="name">Full name <span class="field__req">*</span></label>
       <input class="field__input" id="name" name="name" required>
       <p class="field__error">Please enter your name.</p>
     </div>
   ========================================================================== */

.form { display: grid; gap: var(--s-5); }

.form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5);
}
.form__grid--full { grid-column: 1 / -1; }

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

.field { display: grid; gap: var(--s-2); }

.field__label {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}
.field__req { color: var(--c-gold); }

.field__input,
.field__select,
.field__textarea {
    width: 100%;
    padding: var(--s-3) var(--s-4);
    min-height: 52px;
    font-size: var(--fs-base);
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}

.field__textarea {
    min-height: 150px;
    resize: vertical;
    line-height: var(--lh-base);
}

.field__input::placeholder,
.field__textarea::placeholder { color: var(--ink-400); }

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
    outline: none;
    border-color: var(--c-gold);
    box-shadow: 0 0 0 3px rgba(178, 125, 67, .15);
}

/* Native select arrow replaced with the brand chevron. */
.field__select {
    appearance: none;
    padding-right: var(--s-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23222223' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--s-4) center;
}

/* ---------------------------------------------------------------- states */
.field--error .field__input,
.field--error .field__select,
.field--error .field__textarea { border-color: #C0392B; }

.field__error {
    display: none;
    font-size: var(--fs-sm);
    color: #C0392B;
}
.field--error .field__error { display: block; }

.field__hint {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* ---------------------------------------------------------------- checkbox */
.check {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--s-3);
    font-size: var(--fs-sm);
    cursor: pointer;
}
.check input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--c-gold);
}

/* ---------------------------------------------------------------- file input */
.field__file {
    padding: var(--s-5);
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field__file:hover { border-color: var(--c-gold); background: var(--gold-50); }

/* ---------------------------------------------------------------- messages */
.form__message {
    padding: var(--s-4) var(--s-5);
    font-size: var(--fs-sm);
    border-left: 3px solid;
    border-radius: var(--radius-sm);
}
.form__message--success { color: #1E7B4D; background: #EAF6EF; border-color: #1E7B4D; }
.form__message--error   { color: #C0392B; background: #FBEDEB; border-color: #C0392B; }

/* Honeypot — a bot-only field. Hidden from people and from screen readers.
   Clipped to nothing rather than pushed to left:-9999px: an off-screen element
   can still widen the page on some mobile browsers, and this cannot. */
.form__hp {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}
.form__hp input { width: 1px; height: 1px; padding: 0; border: 0; min-height: 0; }

/* ---------------------------------------------------------------- on dark */
.section--dark .field__input,
.section--dark .field__select,
.section--dark .field__textarea {
    background: rgba(255, 255, 255, .04);
    color: var(--c-white);
    border-color: var(--border-dark);
}
.section--dark .field__label { color: var(--ink-300); }

/* ---------------------------------------------------------------- touch */
@media (max-width: 767px) {
    /* A 20px checkbox is hard to hit; the label row becomes the target. */
    .check {
        gap: var(--s-4);
        padding-block: var(--s-2);
        min-height: 44px;
        align-items: center;
    }
    .check input { width: 24px; height: 24px; margin-top: 0; }

    /* iOS zooms the page in when a focused input's text is under 16px.
       These are already 16px; this pins it so a future tweak cannot break it. */
    .field__input,
    .field__select,
    .field__textarea { font-size: 16px; }
}