/* =========================================================================
   website-08-forms.css — the Symaptics enquiry form.

   Replaces WPForms' stylesheet, which was 168 KB of the site's 313 KB combined
   CSS (53%) to render three fields. This is the whole of the form's appearance.

   TWO THINGS IT IS TRYING TO FIX
   The old form was 483 px tall inside a 652 px card and did not look like the
   rest of the site. It sat next to the contact cards, which are compact, tightly
   spaced and bordered, and read as a different component from a different
   design system - because it was one.

   So: house tokens throughout (--space-*, --color-*, --radius), inputs that
   match the radius of .symap-btn, and a vertical rhythm close to the contact
   cards beside it rather than WPForms' defaults.

   LOADED ONLY WHERE THE FORM IS. symaptics-asset-loader.php checks the post
   content for the shortcode, so the other 18 pages pay nothing for it. That is
   also why this file is not in the sitewide enqueue loop despite living in the
   sitewide folder.
   ========================================================================= */

/* The form sits inside .symap-contact-form-card (padding var(--space-4)) which
   in turn wraps .symap-form-container (padding var(--space-6)). Two nested
   paddings before a single field is drawn, which is a good part of why the old
   one felt adrift in space. Collapse the inner one where our form is present.
   :has() is unsupported only in browsers that predate 2023; there the form is
   simply a little roomier, which is the pre-existing behaviour and not a bug. */
.symap-form-container:has(.symap-contact-form),
.symap-form-container:has(.symap-form-confirmation) {
  padding: 0;
  background: none;
}

.symap-contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  text-align: left;
}

/* ---- Fields ---------------------------------------------------------- */

.symap-contact-form .symap-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  border: 0; /* the name group is a <fieldset> */
  min-width: 0;
}

.symap-contact-form .symap-field-label {
  display: block;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-dark);
}

.symap-contact-form .symap-required {
  color: var(--color-primary);
  font-weight: 600;
}

/* First and last, side by side. minmax(0,1fr) rather than 1fr so a long
   placeholder cannot push the pair wider than the card. */
.symap-contact-form .symap-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
}

.symap-contact-form .symap-field-half {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

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

.symap-contact-form input[type='text'],
.symap-contact-form input[type='email'],
.symap-contact-form textarea {
  /* REQUIRED, not tidiness. This site does not set a global border-box, and
     inputs default to content-box: width:100% plus 12px of padding and a 1px
     border each side made every field overflow its card by 26px. Caught by
     measuring the rendered preview rather than by reading it. */
  box-sizing: border-box;
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--color-text-dark);
  background: var(--color-background);
  /* #d8dee9 is .symap-btn's border colour, not --color-border (#e5e7eb):
     controls should agree with the button they sit next to. */
  border: 1px solid #d8dee9;
  /* 10px, matching .symap-btn rather than the card's 14px: controls and buttons
     are the same family, panels are a different one. */
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.symap-contact-form textarea {
  min-height: 96px;
  resize: vertical;
}

.symap-contact-form input::placeholder,
.symap-contact-form textarea::placeholder {
  /* --color-text-light is #64748b: 4.5:1 on white, so the placeholder is
     readable rather than the usual near-invisible grey. */
  color: var(--color-text-light);
  opacity: 1;
}

.symap-contact-form input:hover,
.symap-contact-form textarea:hover {
  border-color: #cbd5e1;
}

.symap-contact-form input:focus,
.symap-contact-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(15, 98, 254, 0.12);
}

/* Keyboard users must still get a visible ring if the box-shadow is lost to a
   forced-colours mode. */
.symap-contact-form input:focus-visible,
.symap-contact-form textarea:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* ---- Errors ---------------------------------------------------------- */

.symap-contact-form [aria-invalid='true'] {
  border-color: #b91c1c;
}

.symap-contact-form [aria-invalid='true']:focus {
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
}

.symap-contact-form .symap-field-error:empty {
  display: none;
}

.symap-contact-form .symap-field-error {
  font-size: 0.75rem;
  line-height: 1.35;
  /* #b91c1c on white is 6.4:1 - the usual #ef4444 is 3.8:1 and fails AA. */
  color: #b91c1c;
}

.symap-contact-form .symap-form-errors {
  padding: var(--space-3);
  font-size: 0.875rem;
  line-height: 1.45;
  color: #7f1d1d;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
}

.symap-contact-form .symap-form-errors[hidden] {
  display: none;
}

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

/* .symap-btn.primary comes from website-02-components.css and is deliberately
   not restyled here - the point is that this button IS the site's button. */
.symap-contact-form .symap-form-submit {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-1);
}

.symap-contact-form .symap-form-submit .symap-btn {
  justify-content: center;
  min-width: 140px;
}

.symap-contact-form .symap-btn[disabled] {
  opacity: 0.65;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* ---- Confirmation ---------------------------------------------------- */

.symap-form-confirmation {
  padding: var(--space-5) var(--space-4);
  text-align: center;
  color: var(--color-text-dark);
  background: var(--color-primary-light);
  border: 1px solid #cddcff;
  border-radius: var(--radius);
}

.symap-form-confirmation p {
  margin: 0;
  font-weight: 600;
}

.symap-form-confirmation:focus {
  outline: none;
}

/* ---- Utility --------------------------------------------------------- */

.symap-contact-form .symap-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Narrow ---------------------------------------------------------- */

@media (max-width: 480px) {
  /* Stack the name pair, and let the button span the width - a 140 px target
     floated right is awkward with a thumb. */
  .symap-contact-form .symap-field-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .symap-contact-form .symap-form-submit .symap-btn {
    width: 100%;
  }
}