/* Contact inquiry form (templates/_form.php), port of the live WS Form panel on /contact/.
   Theme tokens with the live values as fallbacks (ACSS names from RECON/DESIGN.md). Unlayered on purpose:
   it must win over any theme reset of input/button. */
.inquiry {
  --inq-gold: var(--action, #a18563);
  --inq-gold-hover: var(--action-hover, #493c2c);
  --inq-panel: var(--action-ultra-dark, #201a13);
  --inq-ink: var(--base, #292929);
  --inq-light: var(--action-ultra-light, #f5f3ef);
  --inq-border: #000;
  --inq-placeholder: #6b6b6b;
  --inq-invalid: #b3261e;
  --inq-error-text: #ffb4a9;
  --inq-font: var(--font, "Manrope", ui-sans-serif, system-ui, sans-serif);
  --inq-text: clamp(1rem, 0.9535rem + 0.1905vw, 1.125rem); /* 16 at 390, 18 at 1440 */
  --inq-pad: clamp(1.5rem, 1.0821rem + 1.7143vw, 2.8125rem); /* 24 to 45 */
  --inq-gap-y: clamp(1.25rem, 1.1571rem + 0.381vw, 1.5rem);
  --inq-gap-x: 1.25rem;
  --inq-control-h: 3.125rem;

  container: inquiry / inline-size;
  background: var(--inq-panel);
  padding: var(--inq-pad);
  font-family: var(--inq-font);
  color: var(--inq-light);
}

.inquiry__form[hidden],
.inquiry__success[hidden],
.inquiry__error[hidden],
.inquiry__status[hidden] { display: none; }

.inquiry__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--inq-gap-y) var(--inq-gap-x);
}

@media (width >= 768px) {
  .inquiry__grid { grid-template-columns: 1fr 1fr; }
  .inquiry__field--email,
  .inquiry__field--message { grid-column: 1 / -1; }
}

.inquiry__field {
  display: grid;
  gap: 0.5rem;
  min-inline-size: 0;
}

/* Labels are not rendered on live (placeholders only); kept for assistive tech. */
.inquiry__label,
.inquiry__trap,
.inquiry__trap input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.inquiry__control {
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: var(--inq-control-h);
  margin: 0;
  padding: 0.5625rem 1.125rem;
  border: 1px solid var(--inq-border);
  border-radius: 0;
  background: #fff;
  color: #000;
  font: 400 max(1rem, var(--inq-text)) / 1.5 var(--inq-font);
  appearance: none;
  box-shadow: none;
  outline: none;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.inquiry__control::placeholder { color: var(--inq-placeholder); opacity: 1; }

.inquiry__control--area {
  min-block-size: 7.5rem;
  resize: vertical;
  padding-block: 0.75rem;
}

/* One focus line: the border turns gold and a hugging 1px shadow thickens it. */
.inquiry__control:focus-visible,
.inquiry__control:focus {
  border-color: var(--inq-gold);
  box-shadow: 0 0 0 1px var(--inq-gold);
}

.inquiry__control[aria-invalid="true"] {
  border-color: var(--inq-invalid);
  box-shadow: 0 0 0 1px var(--inq-invalid);
}

.inquiry__control[aria-invalid="true"]:focus { border-color: var(--inq-invalid); box-shadow: 0 0 0 1px var(--inq-invalid); }

.inquiry__error,
.inquiry__status {
  margin: 0;
  color: var(--inq-error-text);
  font: 500 0.9375rem / 1.4 var(--inq-font);
  text-wrap: pretty;
}

.inquiry__status { margin-block-start: var(--inq-gap-y); }

.inquiry__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: var(--inq-control-h);
  margin: 1.875rem 0 0;
  padding: 0 1.6875rem;
  border: 0;
  border-radius: 0;
  background: var(--inq-gold);
  color: var(--inq-light);
  font: 400 max(1rem, var(--inq-text)) / 1.3 var(--inq-font);
  cursor: pointer;
  outline: none;
  transition: background-color 0.3s ease-in-out;
}

.inquiry__submit-label {
  display: inline-block;
  text-box: trim-both cap alphabetic;
  white-space: nowrap;
}

@media (hover: hover) {
  .inquiry__submit:hover { background: var(--inq-gold-hover); }
}

.inquiry__submit:focus-visible {
  background: var(--inq-gold-hover);
  box-shadow: 0 0 0 1px var(--inq-light);
}

.inquiry__submit:disabled {
  cursor: progress;
  background: var(--inq-gold-hover);
}

.inquiry__success {
  margin: 0;
  color: var(--inq-light);
  font: 400 max(1rem, var(--inq-text)) / 1.5 var(--inq-font);
  text-wrap: pretty;
  outline: none;
}

.inquiry__trap { inset-inline-start: -100vw; }

:where(.inquiry p):has(br) { text-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .inquiry__control,
  .inquiry__submit { transition: none; }
}