/*
 * V&J Works Studio — Estilos del formulario de contacto estático.
 *
 * 1) PARTE ADITIVA (siempre): lo que el formulario de Jetpack no tiene.
 *    En /contacto/ el aspecto lo da `vj-contact.css`, porque `form.html` usa el
 *    mismo marcado que Jetpack; aquí no se duplica nada de eso.
 * 2) RESERVA (solo fuera de /contacto/, `body:not(.page-id-15)`): estilo mínimo
 *    para que el snippet sea utilizable si se inserta en otra página.
 */

/* ---------------------------------------------------------- 1) Parte aditiva */

/* Trampa para bots: fuera de la pantalla, sin ocupar sitio ni recibir foco. */
.vj-static-form .vj-hp {
  position: absolute !important;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Contenedor de Turnstile: se reserva su altura para evitar saltos de diseño. */
.vj-static-form .vj-turnstile { margin: 0.25rem 0 0.5rem; min-height: 65px; }

/* Cuadro de estado (mensajes reales del servidor o de la validación). Vacío = oculto.
   Usa clases propias a propósito: `.contact-form__error` de Jetpack se oculta solo. */
.vj-static-form .vj-form-status { margin: 0.4rem 0 0; font-size: 0.92rem; line-height: 1.5; }
.vj-static-form .vj-form-status:empty { display: none; }
.vj-static-form .vj-form-status--error {
  display: block;
  padding: 0.9rem 1rem;
  border-left: 3px solid #b3261e;
  background: rgba(179, 38, 30, 0.06);
  color: #b3261e;
}
.vj-static-form .vj-form-status--success {
  display: block;
  padding: 0.9rem 1rem;
  border-left: 3px solid #0f6b2e;
  background: rgba(15, 107, 46, 0.07);
  color: #0f6b2e;
}

/* El botón deshabilitado durante el envío no debe parecer inactivo por error. */
.vj-static-form button[type="submit"][aria-busy="true"] { cursor: progress; }

/* ------------------------------------------- 2) Reserva fuera de /contacto/ */
body:not(.page-id-15) .vj-static-form {
  font-family: Archivo, Helvetica, Arial, sans-serif;
  font-size: 0.975rem;
  color: #0A0A0A;
  max-width: 620px;
}
body:not(.page-id-15) .vj-static-form .grunion-field-wrap { margin-bottom: 1.1rem; border: 0; padding: 0; }
body:not(.page-id-15) .vj-static-form .grunion-field-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
body:not(.page-id-15) .vj-static-form .grunion-label-required { margin-left: 0.4em; font-weight: 400; text-transform: none; color: #6E6E6E; }
body:not(.page-id-15) .vj-static-form input[type="text"],
body:not(.page-id-15) .vj-static-form input[type="email"],
body:not(.page-id-15) .vj-static-form textarea,
body:not(.page-id-15) .vj-static-form select {
  width: 100%;
  box-sizing: border-box;
  background: #f2f2f2;
  border: 1px solid #8a8a8a;
  border-radius: 0;
  padding: 0.7rem 0.9rem;
  font: inherit;
  color: #0A0A0A;
}
body:not(.page-id-15) .vj-static-form input:focus-visible,
body:not(.page-id-15) .vj-static-form textarea:focus-visible,
body:not(.page-id-15) .vj-static-form select:focus-visible { outline: 2px solid #0A0A0A; outline-offset: 1px; background: #fff; }
body:not(.page-id-15) .vj-static-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
body:not(.page-id-15) .vj-static-form .grunion-radio-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
body:not(.page-id-15) .vj-static-form .contact-form-field { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.9rem; border: 1px solid #8a8a8a; background: #f2f2f2; cursor: pointer; }
body:not(.page-id-15) .vj-static-form input[type="radio"] { accent-color: #0A0A0A; }
body:not(.page-id-15) .vj-static-form .contact-form__input-error { margin-top: 0.35rem; font-size: 0.85rem; color: #b3261e; }
body:not(.page-id-15) .vj-static-form .grunion-field-wrap.has-error input:not([type="radio"]),
body:not(.page-id-15) .vj-static-form .grunion-field-wrap.has-error textarea { border-color: #b3261e; }
body:not(.page-id-15) .vj-static-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  margin-top: 0.6rem;
  padding: 0 2rem;
  border: 1px solid #0A0A0A;
  border-radius: 0;
  background: #0A0A0A;
  color: #fff;
  font: 600 0.82rem/1 Archivo, Helvetica, Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
body:not(.page-id-15) .vj-static-form button[type="submit"]:disabled { opacity: 0.6; }
body:not(.page-id-15) .vp-ct-privacy { max-width: 52ch; font-size: 0.85rem; line-height: 1.55; color: #6E6E6E; }
body:not(.page-id-15) .vp-ct-privacy a { color: #0A0A0A; text-decoration: underline; }
