/* ==========================================================================
   Feedback footer. Replaces the old link footer with a pre-launch
   "share your feedback" contact form. Uses existing design tokens only.
   ========================================================================== */

.feedback {
  border-top: 1px solid var(--color-divider);
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
  background:
    radial-gradient(120% 80% at 15% 0%, var(--color-primary-highlight) 0%, transparent 55%),
    var(--color-surface-offset);
}

.feedback__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: start;
}

.feedback__intro .brand {
  margin-bottom: var(--space-5);
}

.feedback__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: 1.08;
  margin-bottom: var(--space-4);
  max-width: 16ch;
}

.feedback__lede {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 46ch;
}

/* Form */
.feedback__form {
  display: grid;
  gap: var(--space-5);
}

.feedback__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}

.field label .req {
  color: var(--color-primary);
}

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  transition:
    border-color var(--transition-interactive),
    box-shadow var(--transition-interactive);
}

.field textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.55;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}

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

/* Honeypot: visually and functionally hidden from humans, present for bots */
.feedback__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.feedback__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}

.feedback__status {
  font-size: var(--text-sm);
  min-height: 1.2em;
}

.feedback__status--ok {
  color: var(--color-primary);
}

.feedback__status--err {
  color: #d98a6a;
}

.feedback__form button[type="submit"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Cloudflare Turnstile widget spacing */
.cf-turnstile {
  min-height: 65px;
}

/* Slim meta line under the form (kept from the old footer) */
.feedback__meta {
  margin-top: clamp(var(--space-12), 6vw, var(--space-16));
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.feedback__meta-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.feedback__meta-nav a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.feedback__meta-nav a:hover {
  color: var(--color-text);
}

@media (max-width: 820px) {
  .feedback__grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .feedback__row { grid-template-columns: 1fr; }
}