/* ==============================================================================
   CONTACT BLOCK
   ============================================================================== */

/* The block places its title and intro copy above the form; the form's
   own fields follow below, in this same file since the old _modals.css
   (named after a modal the form no longer lives in) was folded in. */
.block-contact {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
}

/* > (child), not a descendant selector: templates/blocks/contact.html's
   own intro <p> is a direct child of .block-contact, but .form-error and
   .form-alert (below) are <p> elements too, nested a few levels
   deeper inside the form. A descendant ".block-contact p" would match
   both, and its specificity (class + type) ties with ".form-error"/
   ".form-alert" (a single class) — so it silently painted every form
   message in --text-secondary regardless of import order, and
   --color-danger never actually reached the page (task 6 review,
   finding 1: caught only because a live render was checked, not the
   token value alone). */
.block-contact > p {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
}

/* ==============================================================================
   CONTACT FORM FIELDS
   ============================================================================== */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 1rem);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 0.25rem);
}

.form-group label {
  font-weight: 500;
  color: var(--text-primary);
}

.form-group input,
.form-group textarea {
  padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md, 8px);
  font-size: 1rem;
  background: var(--paper-bg);
  color: var(--text-primary);
  transition: border-color 0.2s ease;
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

.form-group input:focus-visible,
.form-group textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 0;
  border-color: var(--focus-ring);
}

.form-group [aria-invalid="true"] {
  border-color: var(--color-danger);
}

.form-error {
  margin: 0;
  color: var(--color-danger);
  font-size: 0.9rem;
}

/* The banner above the fields: the same colour as a field error, a step
   bolder, with room before the first field. */
.form-alert {
  margin: 0 0 var(--spacing-md, 1rem);
  color: var(--color-danger);
  font-size: 0.9rem;
  font-weight: 500;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
}

/* Honeypot: outside the viewport for people, present in the DOM for bots */
.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}