/**
 * Forms.
 *
 * A deliberate exception to the BEM rule, like content-section__body. Webform
 * renders through Drupal's Form API, which emits form-item, form-required,
 * form-actions and friends. Overriding enough templates to BEM that markup
 * would cost a lot and gain nothing, so these styles target Drupal's own
 * classes and consume tokens for every value.
 *
 * Unscoped. This file is attached by the front-end theme only, so it never
 * reaches the admin theme.
 *
 * Selectors verified against the rendered Book Now webform. Wrapper spacing
 * uses margin on .form-item rather than a gap on the form element, so nothing
 * depends on the form's own class name.
 */

/* ----------------------------------------------------------------------
   Form container

   The form cannot be wrapped in a Section: a Webform block inside an SDC slot
   renders on GET and fails to rebuild on POST. So the measure is constrained
   here instead, which is a layout decision living in a stylesheet. Not ideal,
   and unavoidable until Canvas can render forms inside slots.
   ---------------------------------------------------------------------- */

.webform-submission-form {
  inline-size: 100%;
  max-inline-size: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block-end: var(--space-section);
}

/* ----------------------------------------------------------------------
   Field wrappers
   ---------------------------------------------------------------------- */

.form-item {
  display: grid;
  gap: var(--space-3xs);
  margin-block: 0 var(--space-m);
}

.form-item:last-child {
  margin-block-end: 0;
}

/* ----------------------------------------------------------------------
   Labels

   Always visible, always above the field. Placeholder-as-label disappears the
   moment someone types and fails WCAG 3.3.2.
   ---------------------------------------------------------------------- */

.form-item label {
  font-family: var(--font-ui);
  font-size: var(--step-0);
  font-weight: var(--weight-medium);
  color: var(--color-ink-strong);
}

.form-required::after {
  content: " *";
  color: var(--color-accent-strong);
}

.description,
.webform-element-description {
  font-size: var(--step--1);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

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

   Targeted by Drupal's form-TYPE classes, which Webform emits on the control
   itself, plus attribute selectors as a fallback.
   ---------------------------------------------------------------------- */

.form-text,
.form-email,
.form-tel,
.form-url,
.form-number,
.form-date,
.form-select,
.form-textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
  inline-size: 100%;
  max-inline-size: 100%;
  min-block-size: 2.75rem;
  padding: var(--space-2xs) var(--space-xs);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-surface);
  color: var(--color-ink-strong);
  font-family: var(--font-text);

  /* 1rem minimum stops iOS Safari zooming the viewport on focus. */
  font-size: max(1rem, var(--step-0));
  line-height: var(--leading-snug);
}

.form-textarea,
textarea {
  min-block-size: 8rem;
  resize: vertical;
}

/* Native select. Do not replace with a custom widget; the native control is
   better on mobile and with assistive technology. */
select {
  appearance: auto;
}

.form-item :is(input, select, textarea):focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  border-color: var(--color-brand-strong);
}

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

   Colour alone never signals state (WCAG 1.4.1), so the border thickens and
   the message carries text.
   ---------------------------------------------------------------------- */

.form-item :is(input, select, textarea).error,
.form-item :is(input, select, textarea)[aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--color-accent-strong);
}

.form-item--error-message,
.webform-element--error-message {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  color: var(--color-accent-strong);
}

.messages--error {
  padding: var(--space-s);
  margin-block-end: var(--space-m);
  border-inline-start: 4px solid var(--color-accent-strong);
  background-color: var(--color-surface-alt);
}

.messages--status {
  padding: var(--space-s);
  margin-block-end: var(--space-m);
  border-inline-start: 4px solid var(--color-brand-strong);
  background-color: var(--color-surface-alt);
}

/* ----------------------------------------------------------------------
   Actions
   ---------------------------------------------------------------------- */

.form-actions {
  margin-block-start: var(--space-m);
}

/* ----------------------------------------------------------------------
   Honeypot

   Hidden from sight and from assistive technology, but still in the DOM for
   bots to fall into. display:none would be skipped by some bots.
   ---------------------------------------------------------------------- */

.url-textfield,
[class*="honeypot"] {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}