/* ==========================================================================
   MARIWASA SURFACES — FORMS & CONTACT

   Loaded only where a form is on the page (see inc/contact.php enqueue).

   Element selectors sit alongside the class names Contact Form 7, Fluent Forms
   and WPForms emit, so replacing the theme's own form with one of those
   inherits the same styling without a rewrite.

   21  Fields
   22  Notes — success, error
   23  Enquiry layout
   24  Contact page layout
   ========================================================================== */

/* --------------------------------------------------------------------------
   21  FIELDS
   -------------------------------------------------------------------------- */

.field { margin-bottom: 1.5rem; }

.field label,
.wpforms-field-label,
.fluentform .ff-el-input--label label,
.wpcf7-form label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.field__required { color: var(--brand-text); margin-left: 0.15em; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="number"],
.field select,
.field textarea,
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select,
.fluentform input,
.fluentform textarea,
.fluentform select,
.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  padding: 0.95rem 1.1rem;
  min-height: 52px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
  border-radius: calc(var(--radius) / 2);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
}

.field textarea { min-height: 160px; resize: vertical; }

/* The select needs its own chevron once appearance is stripped. */
.field select,
.wpforms-field select,
.fluentform select {
  padding-right: 3rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%231D1D1F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 16px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand-text);
  box-shadow: 0 0 0 3px var(--brand-tint);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); }

/* Invalid state carries an icon and a message, never colour alone. */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.wpforms-error,
.ff-el-is-error input { border-color: var(--brand-deep); }

.field__error,
.wpcf7-not-valid-tip,
.wpforms-error-container {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--brand-deep);
}

.field__error::before,
.wpcf7-not-valid-tip::before {
  content: "!";
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-deep);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
}

.field__hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   22  NOTES
   -------------------------------------------------------------------------- */

.form-note {
  padding: 1.75rem 2rem;
  margin-bottom: 2rem;
  background: #fff;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--brand);
  border-radius: calc(var(--radius) / 2);
  box-shadow: var(--shadow-sm);
}

.form-note__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

.form-note p { margin: 0; color: var(--ink-soft); }
.form-note--success { border-left-color: var(--accent); }
.form-note--error { border-left-color: var(--brand-deep); }

/* --------------------------------------------------------------------------
   23  ENQUIRY LAYOUT
   -------------------------------------------------------------------------- */

.enquiry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.5rem;
}

.field--full { grid-column: 1 / -1; }

.enquiry-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.5rem;
}

/* The honeypot must be unreachable, not merely invisible. */
.enquiry-form__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   24  CONTACT PAGE LAYOUT
   -------------------------------------------------------------------------- */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.contact-layout__aside {
  padding: 2.5rem;
  background: var(--stone);
  border-radius: var(--radius);
}

.contact-block + .contact-block {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline);
}

.contact-block__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.5rem;
}

.contact-block__value {
  margin: 0;
  font-style: normal;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-line;
}

.contact-block__value a { color: var(--ink); border-bottom: 1px solid var(--hairline-strong); }
.contact-block__value a:hover { color: var(--brand-text); border-bottom-color: currentColor; }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .contact-layout__aside { padding: 2rem; }
}

@media (max-width: 640px) {
  .enquiry-grid { grid-template-columns: minmax(0, 1fr); }
  .enquiry-form__actions .btn { width: 100%; }
}