/**
 * Feedback form.
 *
 * Colours come from the theme's tokens so the form follows the site palette.
 * The fallbacks after each var() keep the form legible if it is ever rendered
 * by a theme that does not define them.
 */

.feedback-page {
  --feedback-error: #b02a37; /* 6.1:1 on white, so the message is readable as text, not only as a colour */
  --feedback-accent: var(--primary-color, #0f5757);
}

.feedback-intro {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.feedback-mandatory {
  color: #595959; /* 7:1 on white */
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

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

.feedback-form .form-item {
  margin-bottom: 1.25rem;
}

.feedback-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

/*
 * Drupal's required marker is an asterisk with no accessible name of its own.
 * The label text already carries the meaning for a screen reader via the
 * required attribute on the control, so this only has to be visible.
 */
.feedback-form .form-required::after {
  color: var(--feedback-error);
  content: " *";
  font-weight: 700;
}

.feedback-form .form-control {
  border: 1px solid #767676; /* 4.5:1 on white, the minimum for a control boundary */
  border-radius: 4px;
  padding: 0.6rem 0.75rem;
  width: 100%;
}

.feedback-form .form-control:focus,
.feedback-form .btn:focus-visible {
  border-color: var(--feedback-accent);
  outline: 3px solid var(--feedback-accent);
  outline-offset: 2px;
}

.feedback-form textarea.form-control {
  min-height: 9rem;
  resize: vertical;
}

.feedback-form .description {
  color: #595959;
  font-size: 0.875rem;
  margin-top: 0.35rem;
}

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

.feedback-form .form-control.error,
.feedback-form .form-control[aria-invalid="true"] {
  border-color: var(--feedback-error);
  border-width: 2px;
}

.feedback-error {
  color: var(--feedback-error);
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 0.35rem;
}

/* The suffix wrapper is inline by default and would collapse the message. */
.feedback-form .field-suffix {
  display: block;
}

/* Character counter ------------------------------------------------------- */

.feedback-charcount {
  color: #595959;
  display: block;
  font-size: 0.875rem;
  margin-top: 0.35rem;
}

.feedback-charcount--limit {
  color: var(--feedback-error);
  font-weight: 600;
}

/* Security check ---------------------------------------------------------- */

.feedback-form .feedback-captcha-input {
  max-width: 12rem;
}

.feedback-captcha-refresh {
  background: transparent;
  border: 1px solid var(--feedback-accent);
  color: var(--feedback-accent);
  margin-inline-start: 0.5rem;
}

.feedback-captcha-refresh:hover,
.feedback-captcha-refresh:focus {
  background: var(--secondary-color, #d9f2f2);
  color: var(--feedback-accent);
}

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

.feedback-form .feedback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.feedback-form .feedback-actions .btn {
  margin: 0;
  padding: 0.6rem 1.5rem;
}

.feedback-submit {
  background: var(--feedback-accent);
  border: 1px solid var(--feedback-accent);
  color: var(--white, #fff);
  display: inline-block;
  text-decoration: none;
}

a.feedback-submit:hover,
a.feedback-submit:focus {
  color: var(--white, #fff);
  text-decoration: underline;
}

/* Acknowledgement --------------------------------------------------------- */

.feedback-result {
  border-inline-start: 6px solid var(--feedback-accent);
  border-radius: 4px;
  background: var(--secondary-color, #d9f2f2);
  padding: 1.5rem;
}

.feedback-result:focus {
  outline: 3px solid var(--feedback-accent);
  outline-offset: 2px;
}

.feedback-result-title {
  margin-top: 0;
}

.feedback-reference {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Bot bait ---------------------------------------------------------------- */

/*
 * Removed from the layout rather than display:none, because some form
 * autofill implementations skip fields that are display:none and a bot that
 * checks for it would simply leave the field alone. The wrapper is aria-hidden
 * and the input is out of the tab order, so nobody is offered it either way.
 */
.feedback-honeypot {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}

@media (max-width: 575.98px) {
  .feedback-form .feedback-actions .btn {
    width: 100%;
  }

  .feedback-captcha-refresh {
    margin-inline-start: 0;
  }
}

/* Status and error messages ----------------------------------------------- */

/*
 * The page template renders these inside the form column. This theme places no
 * messages block, so nothing else styles them.
 */
.feedback-page [data-drupal-messages] [role="contentinfo"] {
  border-inline-start: 6px solid var(--feedback-accent);
  border-radius: 4px;
  background: var(--secondary-color, #d9f2f2);
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
}

.feedback-page [data-drupal-messages] [role="alert"] {
  border-inline-start-color: var(--feedback-error);
  background: #fdeced;
  color: #4a1216; /* 12:1 on the pink ground */
}

.feedback-page [data-drupal-messages] ul {
  margin: 0.5rem 0 0;
  padding-inline-start: 1.25rem;
}