/* ---------------------------------------------------------------------------
   HindArch — overrides layered on top of the Webflow export.
   Kept in a separate file so re-exporting from Webflow never clobbers them.
   --------------------------------------------------------------------------- */

/* Contact form states -------------------------------------------------------
   The Webflow export shipped .rl-success-text as #2d7a2d (dark green), which is
   effectively invisible against the near-black contact section. These rebuild
   the two states in the site's own palette: amber accent (#ffc107), off-white
   text (#f0eee8), 8px radii, and the same panel treatment as .rl-form-input.
   --------------------------------------------------------------------------- */

:root {
  /* The stack every element in the contact section already uses -- labels,
     inputs, textarea, submit button and headings are all set to this, not to
     the Instrument Sans body font declared further up the export. */
  --ha-ui-font: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

.is-hidden {
  display: none !important;
}

/* Every other field is required, so the one optional field says so rather than
   leaving people to infer it. Dimmed so it reads as an aside on the label. */
.ha-field-optional {
  color: #f0eee85c;
  font-weight: 400;
  text-transform: none;
  letter-spacing: .02em;
}

.ha-form-message {
  grid-column-gap: 14px;
  align-items: flex-start;
  border-radius: 8px;
  margin-top: 1.5rem;
  padding: 18px 20px;
  display: flex;
  font-family: var(--ha-ui-font);
}

.ha-form-message__icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
}

.ha-form-message__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Sizes are lifted from the neighbouring form controls: 15px/.02em matches
   .rl-button-2, 14px/400 matches .rl-form-input and .rl-form-text-area. */
.ha-form-message__title {
  letter-spacing: .02em;
  margin: 0;
  font-family: var(--ha-ui-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.ha-form-message__text {
  color: #f0eee8b8;
  margin: 4px 0 0;
  font-family: var(--ha-ui-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
}

/* Success — green reads as "delivered" without fighting the amber brand accent */
.ha-form-message--success {
  background-color: #4ade8014;
  border: 1px solid #4ade8040;
}

.ha-form-message--success .ha-form-message__icon {
  color: #4ade80;
}

.ha-form-message--success .ha-form-message__title {
  color: #6ee7a0;
}

/* Error */
.ha-form-message--error {
  background-color: #f8717114;
  border: 1px solid #f8717140;
}

.ha-form-message--error .ha-form-message__icon {
  color: #f87171;
}

.ha-form-message--error .ha-form-message__title {
  color: #fca5a5;
}

/* Gentle entrance so the state change is noticed after the form is replaced */
.ha-form-message:not(.is-hidden) {
  animation: ha-form-message-in .35s ease-out both;
}

@keyframes ha-form-message-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ha-form-message:not(.is-hidden) {
    animation: none;
  }
}

/* Submit button while the request is in flight */
.rl-button-2[disabled] {
  cursor: progress;
  opacity: .65;
}