/* Component chrome that can't live in styles.css without touching it.
   Custom elements default to display:inline, which would collapse the
   poster's vertical flow — so every mhm-* element becomes a block. */

mhm-header,
mhm-footer,
mhm-divider,
mhm-hero,
mhm-section,
mhm-charges,
mhm-cards,
mhm-telegram,
mhm-form {
  display: block;
}

/* The form block, dressed with the existing poster tokens. */

.mhm-form {
  display: grid;
  gap: 0.35rem 0;
  margin-top: 1.25rem;

  & label {
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: 0.6rem;
  }

  & input,
  & textarea,
  & select {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 0;
    padding: 0.5rem 0.6rem;
    width: 100%;
  }

  & input:focus-visible,
  & textarea:focus-visible,
  & select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }

  & button[type="submit"] {
    justify-self: start;
    margin-top: 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    background: transparent;
    border: 2px solid var(--accent);
    padding: 0.55rem 1.4rem;
    cursor: pointer;
  }

  & button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: default;
  }
}

/* Honeypot: parked well off the paddock. */
.mhm-form__hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden;
}

.mhm-form__success {
  border: 2px solid var(--rule);
  padding: 1rem 1.2rem;
  margin-top: 1.25rem;
}

.mhm-form__error {
  color: var(--accent);
}