/*
 * The Contact Form block (src/Contact/Form.php): the board's "Send a message" form in the theme's form look, the same
 * recipe as the comment form and the contact panel's forms (lanternwp/page-contact-ways): a heading, labels above
 * classic fields, name and email side by side, the consent box beside its text, the status line and the primary
 * button. The hidden field for bots is off screen. Inside the theme's contact panel the panel draws the border and
 * the padding; hover, press and focus are the interaction roles' (the theme's global.css).
 */
.lanternwp-contact-form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--wp--preset--spacing--40) + var(--wp--preset--spacing--10) / 2);

  & > * {
    margin: 0;
  }
}

.lanternwp-contact-form__title {
  font-size: var(--wp--preset--font-size--xl);
}

.lanternwp-contact-form__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--40);
}

/*
 * Every row spans the form, name and email a column each. `[class]` weighs as much as a class: the panel's row rule
 * (`.lanternwp-page-contact-ways .lanternwp-page-contact-ways__form :is(form, form > div) > * + *`, (0,2,2)) would
 * add its margin on top of the grid's gap.
 */
.lanternwp-contact-form .lanternwp-contact-form__form > [class] {
  grid-column: 1 / -1;
  margin: 0;
}

.lanternwp-contact-form .lanternwp-contact-form__form > .lanternwp-contact-form__field--half {
  grid-column: auto;

  @media (width < 600px) {
    grid-column: 1 / -1;
  }
}

/* The field under its label and the error under the field by margins, as the panel spaces a form plugin's fields. */
.lanternwp-contact-form__field {
  & > label {
    display: block;
    font-size: var(--wp--preset--font-size--sm);
    font-weight: var(--wp--custom--weight--semibold);
    line-height: var(--wp--custom--line-height--snug);
  }

  & > :is(input, textarea),
  & > .lanternwp-contact-form__select > select {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: var(--wp--custom--field--height);
    margin: var(--wp--preset--spacing--20) 0 0;
    padding: 0 var(--wp--preset--spacing--40);
    border: 1px solid var(--wp--preset--color--border-strong);
    border-radius: var(--wp--custom--radius--field);
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
    font-family: inherit;
    font-size: var(--wp--preset--font-size--base);
    font-weight: var(--wp--custom--weight--regular);
    line-height: var(--wp--custom--line-height--normal);
  }
}

/*
 * The message: taller than the panel's textarea and with space above its first line. `[name]` lifts it over the
 * contact panel's textarea rule (`.lanternwp-page-contact-ways .lanternwp-page-contact-ways__form textarea`, (0,2,1)).
 */
.lanternwp-contact-form .lanternwp-contact-form__field > textarea[name] {
  height: 10rem;
  padding-block: var(--wp--preset--spacing--30);
  resize: vertical;
}

/*
 * A select: the plugin's select (resources/front/select.css) draws the chevron and the states. The wrapper carries the
 * space under the label. The select's selector outweighs the contact panel's field rule (`.lanternwp-page-contact-ways
 * .lanternwp-page-contact-ways__form :is(input:is([type='text'], …), textarea, select)`, (0,3,1)), which sets the
 * inline padding; `[name]` breaks the tie.
 */
.lanternwp-contact-form__select {
  display: block;
  margin-block-start: var(--wp--preset--spacing--20);
}

.lanternwp-contact-form .lanternwp-contact-form__field .lanternwp-contact-form__select > select[name] {
  margin: 0;
  padding-inline-end: var(--lanternwp-select-end);
}

/*
 * A refused field's edge. `[name]` lifts it over the contact panel's field rule
 * (`.lanternwp-page-contact-ways .lanternwp-page-contact-ways__form :is(input:is([type='text'], …), textarea, select)`,
 * (0,3,1)).
 */
.lanternwp-contact-form .lanternwp-contact-form__field [aria-invalid='true'][name] {
  border-color: var(--wp--preset--color--sale);
}

.lanternwp-contact-form__required {
  color: var(--wp--preset--color--muted);
}

.lanternwp-contact-form__error {
  display: block;
  margin-block-start: var(--wp--preset--spacing--10);
  color: var(--wp--preset--color--sale);
  font-size: var(--wp--preset--font-size--xs);
  line-height: var(--wp--custom--line-height--snug);

  &[hidden] {
    display: none;
  }
}

/* The consent: the box at the start, its text (a link included) flowing beside it. */
.lanternwp-contact-form__field--consent > label {
  position: relative;
  display: block;
  min-height: var(--wp--custom--choice--size);
  padding-inline-start: calc(var(--wp--custom--choice--size) + var(--wp--preset--spacing--30));
  color: var(--wp--preset--color--muted);
  font-weight: var(--wp--custom--weight--regular);
  line-height: var(--wp--custom--line-height--normal);

  & a {
    color: var(--wp--preset--color--contrast);
  }

  & input[type='checkbox'] {
    position: absolute;
    inset-block-start: calc((1lh - var(--wp--custom--choice--size)) / 2);
    inset-inline-start: 0;
    margin: 0;
    font: inherit;
  }
}

/* Off screen, not hidden: a bot reading the markup sees an ordinary field. */
.lanternwp-contact-form .lanternwp-contact-form__trap {
  position: absolute;
  inset-inline-start: -100vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The answer: empty until the form is sent, then a tinted line with a status edge, as the theme's notices. */
.lanternwp-contact-form__status {
  --lanternwp-status: var(--wp--preset--color--info);

  &:empty {
    display: none;
  }

  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  border-inline-start: 3px solid var(--lanternwp-status);
  border-radius: var(--wp--custom--radius--panel);
  background: color-mix(in srgb, var(--lanternwp-status) 10%, var(--wp--preset--color--base));
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--line-height--normal);

  &.lanternwp-contact-form__status--success {
    --lanternwp-status: var(--wp--preset--color--success);
  }

  &.lanternwp-contact-form__status--error {
    --lanternwp-status: var(--wp--preset--color--sale);
  }
}

.lanternwp-contact-form__submit button[disabled] {
  cursor: progress;
  opacity: 0.6;
}