/* ==========================================================================
   12 · FORMS
   Generic controls plus everything Contact Form 7 injects on its own.
   CF7 markup is not ours, so it is styled here rather than fought elsewhere.
   ========================================================================== */

.form-wrap { margin-top: var(--s-6); }


/* --- Layout ---------------------------------------------------------------
   The form template writes these wrappers itself, with wpcf7_autop_or_not
   disabled so CF7 does not scatter <p> tags through the grid. */

.f-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}

.f-field { display: flex; flex-direction: column; gap: var(--s-2); }
.f-field--full { grid-column: 1 / -1; }

.f-field label {
  color: var(--ink-2);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.f-field label abbr {
  color: var(--mulberry);
  text-decoration: none;
  border: 0;
}

.f-note {
  color: var(--ink-3);
  font-size: var(--fs-200);
}

.f-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

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


/* --- Controls ------------------------------------------------------------- */

.form-wrap input[type="text"],
.form-wrap input[type="email"],
.form-wrap input[type="tel"],
.form-wrap input[type="url"],
.form-wrap input[type="number"],
.form-wrap input[type="date"],
.form-wrap select,
.form-wrap textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-300);
  font-weight: 300;
  transition: border-color 0.2s var(--ease);
  appearance: none;
}

.form-wrap select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235f574e' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px;
}

.form-wrap input:focus,
.form-wrap select:focus,
.form-wrap textarea:focus {
  border-color: var(--mulberry);
  outline: none;
}

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

.form-wrap input[type="file"] {
  width: 100%;
  padding: 11px 14px;
  background: var(--card);
  border: 1px dashed var(--rule);
  font-size: var(--fs-200);
}


/* --- Checkbox and acceptance lists ---------------------------------------- */

.wpcf7-checkbox,
.wpcf7-acceptance .wpcf7-list-item {
  display: block;
  margin: 0;
}

.wpcf7-checkbox {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-2) var(--s-4);
}

.wpcf7-list-item { margin: 0; }

.wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  color: var(--ink-2);
  font-size: var(--fs-300);
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.wpcf7-list-item input[type="checkbox"] {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--mulberry);
}

.wpcf7-list-item-label { line-height: 1.5; }

.wpcf7-acceptance a {
  color: var(--mulberry);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* --- Submit --------------------------------------------------------------- */

.form-wrap input[type="submit"],
.form-wrap button[type="submit"] {
  padding: 13px 30px;
  background: var(--mulberry);
  border: 0;
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: var(--fs-200);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s var(--ease);
  appearance: none;
}

.form-wrap input[type="submit"]:hover,
.form-wrap button[type="submit"]:hover { background: var(--mulberry-dk); }

.form-wrap input[type="submit"]:disabled { opacity: 0.5; cursor: default; }


/* --- CF7 feedback ---------------------------------------------------------
   CF7 ships its own red/green boxes. These replace them with the theme's
   hairline language, and keep the "submitting" spinner from shifting layout. */

.wpcf7-spinner {
  width: 20px;
  height: 20px;
  margin: 0;
  background: var(--mulberry-lt);
}

.wpcf7 form .wpcf7-response-output {
  margin: var(--s-5) 0 0;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--rule);
  border-left-width: 2px;
  color: var(--ink-2);
  font-size: var(--fs-300);
}

.wpcf7 form.sent .wpcf7-response-output       { border-left-color: var(--olive); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output { border-left-color: var(--gilt); }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output    { border-left-color: var(--mulberry); }

.wpcf7-not-valid-tip {
  margin-top: var(--s-1);
  color: var(--mulberry);
  font-size: var(--fs-200);
}

.form-wrap .wpcf7-not-valid {
  border-color: var(--mulberry);
}

/* CF7 marks required fields itself; the visible asterisk lives in our label. */
.wpcf7 .screen-reader-response { position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; }