/* ==========================================================================
   forms.css — contact form and all input controls
   ========================================================================== */

/* Page-level wrapper for a form and its supporting information.
   Single column on small screens; the two-column rule lives in responsive.css. */
.form-layout {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
}

.form {
  display: grid;
  gap: var(--space-lg);
}

.form__grid {
  display: grid;
  gap: var(--space-lg) var(--grid-gap);
}

/* Postal addresses should read as text, not as an italic aside. */
address {
  font-style: normal;
}

.field {
  display: grid;
  gap: var(--space-2xs);
}

.field__label {
  font-family: var(--font-navigation);
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
}

.field__required {
  color: var(--colour-accent);
}

.field__hint {
  font-family: var(--font-navigation);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--colour-text-muted);
}

.field__control {
  inline-size: 100%;
  padding: 0.875rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--colour-text);
  background-color: var(--colour-surface);
  border: var(--border-width) solid var(--colour-border-strong);
  border-radius: var(--control-radius);
  transition: border-color var(--duration-fast) var(--easing);
  appearance: none;
}

.field__control::placeholder {
  color: var(--colour-text-muted);
  opacity: 0.75;
}

.field__control:hover {
  border-color: var(--colour-secondary);
}

.field__control:focus {
  border-color: var(--colour-text);
  outline: 2px solid var(--colour-focus);
  outline-offset: 2px;
}

textarea.field__control {
  min-block-size: 10rem;
  resize: vertical;
}

select.field__control {
  padding-inline-end: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235E6B75' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.75rem;
  cursor: pointer;
}

/* --- Validation ----------------------------------------------------------- */

.field__error {
  display: none;
  font-family: var(--font-navigation);
  font-size: 0.8125rem;
  font-weight: var(--weight-medium);
  color: var(--colour-danger);
}

.field.has-error .field__error {
  display: block;
}

.field.has-error .field__control {
  border-color: var(--colour-danger);
}

.form__status {
  display: none;
  padding: var(--space-md) var(--space-lg);
  font-size: var(--size-small);
  border-inline-start: 2px solid var(--colour-border-strong);
  background-color: var(--colour-background-alt);
}

.form__status.is-visible {
  display: block;
}

.form__status.is-success {
  border-inline-start-color: var(--colour-success);
}

.form__status.is-error {
  border-inline-start-color: var(--colour-danger);
}

/* --- Consent checkbox ----------------------------------------------------- */

.checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs);
  align-items: start;
}

.checkbox input[type='checkbox'] {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0.2rem 0 0;
  accent-color: var(--colour-accent);
  cursor: pointer;
}

.checkbox__label {
  font-family: var(--font-navigation);
  font-size: var(--size-small);
  line-height: 1.6;
  color: var(--colour-text-muted);
}

.checkbox__label a {
  color: var(--colour-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --- Honeypot ------------------------------------------------------------- */
/* A non-JavaScript deterrent for basic bots. Never remove without replacement. */

.form__trap {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* --- Form aside ----------------------------------------------------------- */

.form-aside {
  display: grid;
  gap: var(--space-lg);
  align-content: start;
}

.form-aside__block {
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-width) solid var(--colour-border);
}

.form-aside__label {
  display: block;
  margin-block-end: var(--space-2xs);
  font-family: var(--font-navigation);
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--colour-text-muted);
}