/* KO Plant Engineers: readable, accessible Grav local CAPTCHA, v5. */

/* Preserve the honeypot for spam checking, but never expose its input. */
body.page-template-contact form[name="contact"] input.form-honeybear,
body.page-template-contact form[name="contact"] .form-honeybear {
  display: none !important;
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.page-template-contact form[name="contact"] .form-data.basic-captcha,
body.page-template-contact form[name="contact"] [data-grav-field="basic-captcha"] {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin-top: 2px !important;
}

body.page-template-contact .contact-form-card {
  container-name: contact-card;
  container-type: inline-size;
}

/* Present the challenge and answer as a clear, locally rendered security panel. */
body.page-template-contact form[name="contact"] .form-data.basic-captcha .form-input-wrapper,
body.page-template-contact form[name="contact"] [data-grav-field="basic-captcha"] .form-input-wrapper {
  display: grid !important;
  grid-template-columns: minmax(0, 300px) minmax(0, 210px) !important;
  width: min(100%, 542px) !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px !important;
  gap: 10px !important;
  align-items: stretch !important;
  overflow: visible !important;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-alt) 100%) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
}

body.page-template-contact form[name="contact"] .form-data.basic-captcha .form-input-prepend,
body.page-template-contact form[name="contact"] [data-grav-field="basic-captcha"] .form-input-prepend {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 50px !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 76px !important;
  min-width: 0 !important;
  align-items: stretch !important;
  overflow: hidden !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-xs) !important;
  box-shadow: var(--shadow-sm) !important;
}

body.page-template-contact form[name="contact"] .form-data.basic-captcha .form-input-prepend img,
body.page-template-contact form[name="contact"] [data-grav-field="basic-captcha"] .form-input-prepend img {
  display: block !important;
  width: 100% !important;
  height: 74px !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  object-fit: contain !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
}

body.page-template-contact form[name="contact"] .reload-captcha-button {
  appearance: none !important;
  display: grid !important;
  width: 50px !important;
  min-width: 50px !important;
  height: 74px !important;
  min-height: 74px !important;
  padding: 0 !important;
  margin: 0 !important;
  place-items: center !important;
  color: var(--theme-accent-on-dark) !important;
  background: var(--theme-dark-card) !important;
  border: 0 !important;
  border-left: 1px solid var(--line-dark) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: color .15s ease, background-color .15s ease, transform .12s ease !important;
}

body.page-template-contact form[name="contact"] .reload-captcha-button:hover {
  color: var(--theme-accent-on-dark) !important;
  background: var(--surface-dark) !important;
}

body.page-template-contact form[name="contact"] .reload-captcha-button:active {
  transform: translateY(1px) !important;
}

body.page-template-contact form[name="contact"] .reload-captcha-button:focus-visible {
  position: relative !important;
  z-index: 2 !important;
  outline: 3px solid var(--brand) !important;
  outline-offset: -3px !important;
}

body.page-template-contact form[name="contact"] .reload-captcha-button svg {
  display: block !important;
  width: 19px !important;
  height: 19px !important;
  margin: 0 !important;
  transition: transform .18s ease !important;
}

body.page-template-contact form[name="contact"] .reload-captcha-button:hover svg {
  transform: rotate(25deg) !important;
}

body.page-template-contact form[name="contact"] .form-data.basic-captcha input.form-input,
body.page-template-contact form[name="contact"] .form-data.basic-captcha input[type="text"],
body.page-template-contact form[name="contact"] [data-grav-field="basic-captcha"] input.form-input,
body.page-template-contact form[name="contact"] [data-grav-field="basic-captcha"] input[type="text"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 76px !important;
  padding: 12px 14px !important;
  margin: 0 !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-xs) !important;
  box-shadow: var(--shadow-sm) !important;
}

body.page-template-contact form[name="contact"] .basic-captcha-help,
body.page-template-contact form[name="contact"] .form-data.basic-captcha .form-errors,
body.page-template-contact form[name="contact"] [data-grav-field="basic-captcha"] .form-errors {
  max-width: 520px !important;
  margin: 0 2px !important;
  grid-column: 1 / -1 !important;
}

body.page-template-contact form[name="contact"] .basic-captcha-help {
  color: var(--muted) !important;
  font-size: .76rem !important;
  line-height: 1.55 !important;
}

body.page-template-contact form[name="contact"] .form-data.basic-captcha input.form-input:hover,
body.page-template-contact form[name="contact"] [data-grav-field="basic-captcha"] input.form-input:hover {
  border-color: var(--brand-strong) !important;
}

body.page-template-contact form[name="contact"] .form-data.basic-captcha input.form-input:focus,
body.page-template-contact form[name="contact"] [data-grav-field="basic-captcha"] input.form-input:focus {
  border-color: var(--brand-strong) !important;
  box-shadow: var(--focus) !important;
}

@container contact-card (max-width: 550px) {
  body.page-template-contact form[name="contact"] .form-data.basic-captcha .form-input-wrapper,
  body.page-template-contact form[name="contact"] [data-grav-field="basic-captcha"] .form-input-wrapper {
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(100%, 330px) !important;
  }

  body.page-template-contact form[name="contact"] .form-data.basic-captcha .form-input-prepend,
  body.page-template-contact form[name="contact"] [data-grav-field="basic-captcha"] .form-input-prepend,
  body.page-template-contact form[name="contact"] .form-data.basic-captcha input.form-input,
  body.page-template-contact form[name="contact"] .form-data.basic-captcha input[type="text"],
  body.page-template-contact form[name="contact"] [data-grav-field="basic-captcha"] input.form-input,
  body.page-template-contact form[name="contact"] [data-grav-field="basic-captcha"] input[type="text"] {
    width: 100% !important;
  }
}

@media (max-width: 620px) {
  body.page-template-contact form[name="contact"] .form-data.basic-captcha .form-input-wrapper,
  body.page-template-contact form[name="contact"] [data-grav-field="basic-captcha"] .form-input-wrapper {
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(100%, 330px) !important;
  }

  body.page-template-contact form[name="contact"] .form-data.basic-captcha .form-input-prepend,
  body.page-template-contact form[name="contact"] [data-grav-field="basic-captcha"] .form-input-prepend,
  body.page-template-contact form[name="contact"] .form-data.basic-captcha input.form-input,
  body.page-template-contact form[name="contact"] .form-data.basic-captcha input[type="text"],
  body.page-template-contact form[name="contact"] [data-grav-field="basic-captcha"] input.form-input,
  body.page-template-contact form[name="contact"] [data-grav-field="basic-captcha"] input[type="text"] {
    width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-template-contact form[name="contact"] .reload-captcha-button,
  body.page-template-contact form[name="contact"] .reload-captcha-button svg {
    transition: none !important;
  }
}