/* backend/src/main/resources/static/modules_styles/pikiner_sites/components/site-form.css */

/* ==============================================
   FORM — the first message a visitor sends

   The only form on either site, and the first pattern here that is not
   running text: P6 asks fourteen questions before a first meeting.
   Nothing in the project styled a form control before this file, so the
   controls are given a shape here rather than left at browser defaults
   beside typography that is anything but default.

   The set was rendered disabled while submission waited on the server
   handler. It submits now, and the disabled state stays styled rather
   than deleted: ContentGates can close the form again, and a preview
   that has to look deliberate is exactly what the page would show.
   ============================================== */

/*
  A fieldset rather than a div: disabling the whole set is one attribute on
  one element, and the browser then blocks every control inside it without
  the markup repeating itself fourteen times. Its own border, padding and
  the min-width the element carries by default are removed — they belong to
  a fieldset that groups options, not to the container of the whole form.
*/
.site-form {
  border: 0;
  margin: var(--gb-spacing-xl) 0;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gb-spacing-lg);
}

/*
  The set needs a name a screen reader can announce when focus enters it,
  and while the fields are disabled it also tells a reader what the block
  below is: the questions of a first message, not a broken form.
*/
.site-form__legend {
  font-size: var(--gb-type-lead-size);
  font-weight: var(--gb-font-weight-semibold);
  color: var(--gb-text-heading);
  padding: 0;
  margin-bottom: var(--gb-spacing-md);
}

/* ==============================================
   FIELD — label, control and the note under it
   ============================================== */

.site-field {
  display: flex;
  flex-direction: column;
  gap: var(--gb-spacing-xs);
}

.site-field__label {
  font-weight: var(--gb-font-weight-medium);
  color: var(--gb-text-heading);
}

/*
  The optional marker rather than a required one: ten of the fourteen
  fields are required, so marking the exception is quieter than marking
  the rule, and a visitor scanning the form sees what they can skip.
*/
.site-field__optional {
  font-weight: var(--gb-font-weight-normal);
  color: var(--gb-text-tertiary);
}

.site-field__hint {
  font-size: var(--gb-type-secondary-size);
  color: var(--gb-text-secondary);
}

.site-field input,
.site-field textarea {
  width: 100%;
  font: inherit;
  color: var(--gb-text-primary);
  background: var(--gb-bg-surface);
  border: 1px solid var(--gb-border-default);
  padding: var(--gb-spacing-sm) var(--gb-spacing-md);
}

.site-field textarea {
  min-height: 8rem;
  resize: vertical;
}

.site-field input:disabled,
.site-field textarea:disabled {
  background: var(--gb-bg-inset);
  color: var(--gb-text-tertiary);
  cursor: not-allowed;
}

/* ==============================================
   OPTIONS — a group of radios or checkboxes

   A fieldset, because a group of controls sharing one question needs a
   name that a screen reader announces with each option. The legend is
   the question; the label of each option is only its own value.
   ============================================== */

.site-options {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gb-spacing-xs);
}

.site-options__legend {
  font-weight: var(--gb-font-weight-medium);
  color: var(--gb-text-heading);
  padding: 0;
  margin-bottom: var(--gb-spacing-xs);
}

.site-option {
  display: flex;
  align-items: baseline;
  gap: var(--gb-spacing-sm);
  color: var(--gb-text-primary);
}

.site-option input:disabled {
  cursor: not-allowed;
}

.site-option input:disabled + span {
  color: var(--gb-text-tertiary);
}

/* ==============================================
   ERRORS — what the visitor has to fix

   Colour is not the only carrier: the message is text next to the field
   it belongs to, and it is bound to the control through
   aria-describedby, so a reader that never sees the red announces it.
   ============================================== */

.site-form__error {
  font-size: var(--gb-type-secondary-size);
  font-weight: var(--gb-font-weight-medium);
  color: var(--gb-color-error);
}

/*
  The summary above the form exists for the case the visitor cannot see:
  a failed submission scrolls back to the top of the form, and without a
  line there the page looks unchanged. It takes focus after a failed
  attempt — card 5.P6.15 asks for exactly that — which is why it carries
  a tabindex and needs a focus ring of its own.
*/
.site-form__summary {
  border-left: 3px solid var(--gb-color-error);
  padding: var(--gb-spacing-sm) var(--gb-spacing-md);
  margin-bottom: var(--gb-spacing-lg);
  background: var(--gb-bg-surface);
  color: var(--gb-text-primary);
}

.site-form__summary:focus-visible {
  outline: 2px solid var(--gb-accent-primary);
  outline-offset: 2px;
}

/* ==============================================
   HONEYPOT

   Removed from sight and from the accessibility tree, but not with
   display:none — a bot that reads the stylesheet skips a hidden field,
   and the point is that it should not know to. A visitor never reaches
   it: it is out of the tab order and out of the tree.
   ============================================== */

/* The submit button is a field among fields: the form's own gap places
   it, not the step every other button group takes below running text. */
.site-form > .btn-group {
  margin-top: 0;
}

.site-form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}