/* ==========================================================================
   Iguazu Noticias — Form primitives

   Promoted out of flight-finder.css, which had carried them since the date
   picker was the only control in the design and which asked, in a comment, to
   be relieved of them the moment a second unrelated form appeared. The contact
   form is that second form.

   Loads before flight-finder.css in the shared tier, so the finder keeps every
   rule it had and in the same cascade position.

   Scope note: these are bare-element primitives on purpose. Contact Form 7
   appends its own wpcf7-* classes to whatever we ask for, so the contact form
   wears .ig-input alongside .wpcf7-form-control without either fighting the
   other.
   ========================================================================== */

.ig-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ig-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--ink);
}

.ig-input {
    height: 46px;
    padding-inline: var(--space-4);
    border: 1.5px solid var(--neutral-200);
    border-radius: var(--radius);
    background: #fff;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    width: 100%;
    transition: border-color var(--dur), box-shadow var(--dur);
}

.ig-input:hover {
    border-color: var(--neutral-400);
}

.ig-input:focus {
    outline: none;
    border-color: var(--violet-500);
    box-shadow: 0 0 0 4px rgba(115, 111, 219, 0.18);
}

/* A textarea cannot wear .ig-input alone: the 46px height above is a hard
   value, sized for a single-line control. Everything else carries over. */
textarea.ig-input {
    height: auto;
    min-height: 130px;
    padding-block: 12px;
    line-height: 1.6;
    resize: vertical;
    font-family: var(--font-body);
}

/* base.css rings a:focus-visible, button, input, summary and [tabindex] but not
   textarea, so without this a textarea would fall back to the browser's own
   outline while every neighbouring field showed the violet glow. */
textarea.ig-input:focus {
    outline: none;
    border-color: var(--violet-500);
    box-shadow: 0 0 0 4px rgba(115, 111, 219, 0.18);
}

/* --------------------------------------------------------------------------
   Invalid state and help text

   The tone matches .ig-finder__status--error, which was the theme's only
   existing error treatment.
   -------------------------------------------------------------------------- */

.ig-input--error,
.ig-input[aria-invalid='true'] {
    border-color: var(--danger);
}

.ig-input--error:focus,
.ig-input[aria-invalid='true']:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 4px rgba(201, 45, 93, 0.16);
}

.ig-help {
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--text-muted);
}

.ig-help--error {
    color: var(--danger);
    font-weight: var(--weight-medium);
}