/* forms.css — Form primitives.
 * Loaded per-page via extraCss front-matter. Uses tokens from tokens.css.
 * Design language is square-edged (--radius-* are all 0) and dark-themed.
 */

.form-stack {
  display: grid;
  gap: clamp(1rem, 1.6vw, 1.25rem);
  max-width: 36rem;
  margin: 1.5rem 0 0;
}

.form-field {
  display: grid;
  gap: 0.5rem;
}

.form-label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
}

.form-input,
.form-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.9rem;
  font: inherit;
  font-size: var(--fs-base);
  color: var(--text-light);
  background: var(--surface-card);
  border: 1px solid var(--accent-faint);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.form-textarea {
  resize: vertical;
  min-height: 7rem;
  line-height: var(--lh-body);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-faint);
}

.form-input:hover,
.form-textarea:hover {
  border-color: var(--accent-glow);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--accent-faint);
  background: var(--surface-medium);
}

.form-input:invalid:not(:placeholder-shown),
.form-textarea:invalid:not(:placeholder-shown) {
  border-color: rgba(220, 120, 90, 0.55);
}

.form-stack .button {
  justify-self: start;
  margin-top: 0.25rem;
}

.form-help {
  margin: 1.5rem 0 0;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.form-help a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-help a:hover {
  color: var(--accent-bright);
}

/* Turnstile uses appearance="interaction-only": invisible unless a challenge is
   actually required, so we don't reserve vertical space for it by default. */

/* === Early-access capture form ===
 * Reusable across the home hero, HOARDE, and the standalone landing page via
 * the early-access-form.njk macro. Two variants: inline (email + button on one
 * row) and stacked (label, input, full-width button).
 */
.ea-form {
  display: grid;
  gap: 0.85rem;
  width: 100%;
}

.ea-form__row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

.ea-form__input {
  min-width: 0;
}

/* Inline variant grows the field to fill the row. The stacked variant must NOT
   set a flex-basis here — in a column flex that becomes the field's height. */
.ea-form--inline .ea-form__input {
  flex: 1 1 15rem;
}

/* Inline: label is for screen readers only; button sits beside the input. */
.ea-form--inline {
  max-width: 32rem;
}

.ea-form--inline .ea-form__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ea-form--inline .ea-form__button {
  flex: 0 0 auto;
}

/* Stacked: visible label, full-width field and button — for the landing page. */
.ea-form--stacked .ea-form__row {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.ea-form--stacked .ea-form__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
}

.ea-form--stacked .ea-form__button {
  margin-top: 0.4rem;
  width: 100%;
}

/* === Standalone /early-access/ landing page === */
.ea-landing {
  display: flex;
  align-items: center;
  min-height: 62vh;
}

.ea-landing__inner {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}

.ea-landing__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}

/* Landing page wears a slightly smaller eyebrow than the thanks page. */
.ea-landing__eyebrow--sm {
  font-size: calc(var(--fs-eyebrow) * 0.88);
}

.ea-landing__title {
  margin: 0 0 1rem;
}

.ea-landing__lede {
  color: var(--text-muted);
  line-height: var(--lh-prose);
  margin: 0 auto 2rem;
  max-width: 30rem;
  text-wrap: pretty;
}

.ea-landing .ea-form {
  max-width: 26rem;
  margin-inline: auto;
  text-align: left;
}

/* Center the Turnstile widget under the centered landing form. */
.ea-landing .ea-form__turnstile {
  display: flex;
  justify-content: center;
}

.ea-landing__actions {
  justify-content: center;
}

/* === Embedded placements === */
/* Home hero + final CTA: the form is the primary call to action. */
.hero-actions--early-access {
  display: block;
}

/* Small "or request a demo" line under the HOARDE CTAs. */
.cta-alt {
  margin: 0.9rem 0 0;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.cta-alt a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cta-alt a:hover {
  color: var(--accent-bright);
}