/**
 * Employer enquiry form.
 *
 * The layout is the kit's `.with-aside` (a 340px trailing aside that becomes a
 * stacked block at 960px, with `.with-aside__side` handling the sticky
 * behaviour), and every control comes from pages.css §12. Neither is repeated
 * here.
 *
 * What is new: the form card, the contacts panel, and the switched-off submit.
 *
 * Every class is prefixed `enquiry-form__`, per AGENTS.md §2.
 */

.enquiry-form__card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-s);
  padding: var(--s-5);
}

.enquiry-form__intro { color: var(--ink-soft); }

.enquiry-form__required {
  margin-block-end: var(--s-4);
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

.enquiry-form__required .req { color: var(--red); }

/* ---- Contacts panel ------------------------------------------------------ */
.enquiry-form__aside {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding-block: var(--s-4);
  padding-inline: var(--s-5);
}

.enquiry-form__aside h3 {
  margin-block-end: var(--s-3);
  font-size: var(--text-base);
}

.enquiry-form__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.enquiry-form__contacts li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--text-s);
  line-height: var(--leading-body);
  color: var(--ink-soft);
}

.enquiry-form__contacts svg {
  inline-size: var(--s-3);
  block-size: var(--s-3);
  flex: none;
  color: var(--blue);
  /* Optical alignment with the first line of the label, in em so it tracks the
     type rather than a fixed offset. */
  margin-block-start: 0.25em;
}

/* An email address has no space or hyphen in it, so it cannot wrap and instead
   runs out of the panel on a narrow screen. Same defect as review finding
   F-12d on Contact, fixed the same way: `anywhere` rather than `break-word`,
   because only `anywhere` also shrinks the min-content contribution the flex
   item is sized from. Wrapped, never truncated. */
.enquiry-form__contacts a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
  transition: color var(--dur-fast) ease;
}

.enquiry-form__contacts a:hover { color: var(--blue); }

/* `.btn--ghost` is blue on transparent, which is correct on this white panel.
   The navy-ground trap the kit warns about does not apply here. */
.enquiry-form__chat { margin-block-start: var(--s-3); }

.enquiry-form__aside .placeholder-note { margin-block-start: var(--s-3); }

/* ---- Submit -------------------------------------------------------------- */
.enquiry-form__submit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  margin-block-start: var(--s-4);
}

.enquiry-form__pending { align-self: stretch; }

/* Same unbreakable-string problem as the contacts aside above: the direct
   routes in this callout are an email address, a phone number and a Messenger
   link. Scoped to the links, which are the only tokens here with no break
   opportunity. */
.enquiry-form__pending a { overflow-wrap: anywhere; }

/* Switched off until a forms plugin is wired up, and it has to read that way.
   Cloud on ink-soft measures about 8.3:1, so an inactive control is still
   comfortably readable.

   Keyed on `aria-disabled`, not on `disabled`. The control deliberately does
   not carry the disabled attribute: that removes it from the tab order, so a
   keyboard or screen reader user met no send button at all and no explanation
   for its absence (review finding F-10). It stays focusable, and the global
   :focus-visible ring in base.css still lands on it, which is the point. */
.enquiry-form__submit .btn[aria-disabled="true"] {
  background: var(--cloud);
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 var(--btn-border-width) var(--line);
  cursor: not-allowed;
}

.enquiry-form__submit .btn[aria-disabled="true"]:hover {
  background: var(--cloud);
  box-shadow: inset 0 0 0 var(--btn-border-width) var(--line);
  transform: none;
}

.enquiry-form__privacy {
  max-inline-size: 62ch;
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

.enquiry-form__privacy a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
}

/* The honeypot. A real text input that no person sees, reaches by keyboard or
   hears announced; a form-filling bot fills it and the handler drops the
   submission. Off-canvas rather than display:none, because some bots skip
   fields that are not rendered. */
.enquiry-form .form-hp {
  position: absolute;
  inset-inline-start: -9999px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

/* The sent / not-sent callout above the fields. */
.enquiry-form__notice {
  margin-block-end: var(--s-4);
}
.enquiry-form__notice a { overflow-wrap: anywhere; }
.enquiry-form__notice:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }