/* Purpose: Gold-rimmed registration card in the hero, including Contact Form 7 field styling. */

.signup {
  position: relative;
  border-radius: var(--radius);
  padding: var(--space-28) var(--space-22) var(--space-26);
  background: var(--card-form);
  -webkit-backdrop-filter: var(--blur-card);
  backdrop-filter: var(--blur-card);
  box-shadow: var(--shadow-form);
}

/* Foil rim — a masked gradient border so the gold follows the rounded corners. */
.signup::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: var(--rim);
  background: var(--foil);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.signup__title {
  color: var(--color-ink);
  font-size: var(--fs-27);
  line-height: var(--leading-h3);
  margin-bottom: var(--space-6);
}

.signup__note {
  font-size: var(--fs-13-5);
  color: var(--color-ink-3);
  margin-bottom: var(--space-24);
}

.signup__fine {
  font-size: var(--fs-12);
  color: var(--color-muted);
  margin: var(--space-16) 0 0;
  text-align: center;
  letter-spacing: var(--tracking-fine);
}

/* Contact Form 7 emits <p> and <span class="wpcf7-form-control-wrap"> around controls. */
.signup .wpcf7 p {
  margin: 0;
}

.signup .wpcf7-form-control-wrap {
  display: block;
}

.signup .field {
  width: 100%;
  height: 52px;
  padding: 0 var(--space-16);
  margin-bottom: var(--space-11);
  background: var(--color-field-bg);
  color: var(--color-ink);
  border: 1px solid var(--color-field-line);
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  font-size: var(--fs-15-5);
  transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease;
}

.signup .field::placeholder {
  color: var(--color-muted);
}

.signup .field:hover {
  border-color: var(--color-line-3);
}

.signup .field:focus {
  outline: none;
  border-color: var(--color-gold-300);
  background: var(--color-field-bg-focus);
  box-shadow: var(--shadow-field-focus);
}

/* The chevron is a data URI, so its gold is written out literally (#E7C877 = --color-gold-300). */
.signup select.field {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 44px;
  cursor: pointer;
  color: var(--color-ink-3);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23E7C877' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-16) center;
}

.signup select.field option {
  background: var(--color-select-bg);
  color: var(--color-ink);
}

.signup .cta {
  margin-top: var(--space-8);
}

/* The Contact Form 7 stylesheet is dequeued, so these plugin internals are hidden here.
   Leaving them visible adds dead height to the card. */
.signup .hidden-fields-container,
.signup .screen-reader-response {
  display: none;
}

/* CF7 status and validation messaging */
.signup .wpcf7-not-valid-tip {
  display: block;
  color: var(--color-gold-300);
  font-size: var(--fs-12-5);
  margin: calc(var(--space-6) * -1) 0 var(--space-10);
}

.signup .wpcf7-response-output {
  display: none;
  margin: var(--space-16) 0 0;
  padding: var(--space-12) var(--space-14);
  border: 1px solid var(--color-line-2);
  border-radius: var(--radius-xs);
  font-size: var(--fs-14);
  color: var(--color-ink-2);
}

.signup form.sent .wpcf7-response-output,
.signup form.failed .wpcf7-response-output,
.signup form.aborted .wpcf7-response-output,
.signup form.spam .wpcf7-response-output,
.signup form.invalid .wpcf7-response-output,
.signup form.unaccepted .wpcf7-response-output,
.signup form.payment-required .wpcf7-response-output {
  display: block;
}

.signup form.sent .wpcf7-response-output {
  border-color: var(--color-gold-300);
}

.signup .wpcf7-spinner {
  display: none;
  margin: var(--space-10) auto 0;
}

.signup form.submitting .wpcf7-spinner {
  display: block;
}

/* The honeypot pair. Hidden from sight and from assistive tech, but still a real field a bot
   will happily fill in — see inc/spam.php. */
.signup__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 561px) {
  .signup {
    padding: var(--space-36) var(--space-32) var(--space-32);
  }
}