/**
 * fm-form.css — Vitasiti editorial aesthetic for the fm-form plugin.
 *
 * The plugin ships structure-only CSS at `plugins/fm-form/assets/public/css/fm-form.css`.
 * This file is the theme's visual styling layer, applied to the new
 * `.vita-form__*` BEM classes emitted by the plugin's Renderer.
 *
 * Design principles:
 *  - Hairline rules between fields
 *  - Mono-caps step legend
 *  - Burgundy required asterisks
 *  - Generous spacing
 *  - Animated step transitions (slide + fade)
 */

/* ── Form root ─────────────────────────────────────────────────────────────── */

.vita-form {
  --fm-form-hairline: var(--wp--preset--color--hairline, #e0e0e0);
  --fm-form-muted:    var(--wp--preset--color--text-muted, #888);
  --fm-form-accent:   var(--wp--preset--color--burgundy, #6d1f35);
  --fm-form-text:     var(--wp--preset--color--text, #1a1a1a);
  --fm-form-bg:       var(--wp--preset--color--background, #fff);
  --fm-form-error:    #c4262e;
  font-family: var(--wp--preset--font-family--serif, Georgia, serif);
  color: var(--fm-form-text);
  display: block;
}

/* ── Progress strip ────────────────────────────────────────────────────────── */

.vita-form__progress {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  font-family: var(--wp--preset--font-family--mono, 'Courier New', monospace);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fm-form-muted);
  border-bottom: 1px solid var(--fm-form-hairline);
  padding-bottom: 0.75rem;
}

.vita-form__progress-step {
  position: relative;
  padding-bottom: 0.25rem;
}

.vita-form__progress-step.is-active {
  color: var(--fm-form-text);
}

/* Active-step underline — a tabs-mode treatment. Scoped out of stepper mode:
   the plugin draws the stepper's connecting line as `::after` on each step,
   and an unscoped `.is-active::after` here would hijack that pseudo-element
   (its position:absolute pulls the connector out of the flow). */
.vita-form:not(.vita-form--mode-stepper) .vita-form__progress-step.is-active::after {
  content: "";
  position: absolute;
  bottom: -0.875rem;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--fm-form-accent);
}

/* ── Step fieldset with slide animation ────────────────────────────────────── */

/* Steps wrapper — present whether or not equal-step-heights is on. */
.vita-form__steps {
  position: relative;
}

.vita-form__step {
  border: 0;
  margin: 0;
  padding: 0;
}

.vita-form__step[hidden] {
  display: none;
}

/*
 * Equal-step heights mode (settings.equal_step_heights = true).
 *
 * Steps are CSS-grid stacked in the same cell. The container's height grows
 * to the tallest step's natural height, so the nav buttons below it stay
 * pinned to one position across steps. The runtime keeps every step in the
 * DOM (no hidden attr) and toggles `is-active` for visibility.
 */
.vita-form--equal-steps .vita-form__steps {
  display: grid;
  grid-template-areas: "stack";
  align-items: start;
}

.vita-form--equal-steps .vita-form__step {
  grid-area: stack;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.vita-form--equal-steps .vita-form__step.is-active {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}

/* Animated entry — applied by the runtime when a step becomes active. */
.vita-form__step.is-entering-forward {
  animation: vita-form-slide-in-right 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.vita-form__step.is-entering-backward {
  animation: vita-form-slide-in-left 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes vita-form-slide-in-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes vita-form-slide-in-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .vita-form__step.is-entering-forward,
  .vita-form__step.is-entering-backward {
    animation: none;
  }
}

.vita-form__step legend {
  /* The renderer puts the step title in a screen-reader-text legend.
     The visible step title lives in the progress strip above. */
}

/* ── Field grid layout per step ────────────────────────────────────────────── */

.vita-form__step {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 1.5rem;
}

.vita-form__field {
  grid-column: span 12;
  padding: 1rem 0;
  /* No border-bottom: the input is already underline-styled (see the
     input border-bottom below). A field separator here would double the
     rule — two parallel hairlines a few px apart under every field. */
}

.vita-form__field--half  { grid-column: span 6; }
.vita-form__field--third { grid-column: span 4; }

@media (max-width: 640px) {
  .vita-form__field--half,
  .vita-form__field--third {
    grid-column: span 12;
  }
}

.vita-form__field.is-hidden {
  display: none;
}

/* ── Labels ────────────────────────────────────────────────────────────────── */

.vita-form__field > label,
.vita-form__field legend {
  display: block;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fm-form-muted);
  margin-bottom: 0.4rem;
  font-family: var(--wp--preset--font-family--mono, 'Courier New', monospace);
  font-weight: 500;
}

.vita-form__required {
  color: var(--fm-form-accent);
  margin-left: 0.2em;
  font-weight: 700;
}

/* ── Inputs ────────────────────────────────────────────────────────────────── */

.vita-form__field input[type="text"],
.vita-form__field input[type="email"],
.vita-form__field input[type="tel"],
.vita-form__field input[type="url"],
.vita-form__field input[type="number"],
.vita-form__field input[type="password"],
.vita-form__field input[type="date"],
.vita-form__field input[type="time"],
.vita-form__field input[type="datetime-local"],
.vita-form__field select,
.vita-form__field textarea {
  width: 100%;
  padding: 0.625rem 0;
  font-size: 1rem;
  font-family: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--fm-form-hairline);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease;
}

.vita-form__field input:focus,
.vita-form__field select:focus,
.vita-form__field textarea:focus {
  outline: none;
  border-bottom-color: var(--fm-form-accent);
}

.vita-form__field textarea {
  resize: vertical;
  min-height: 6rem;
  border: 1px solid var(--fm-form-hairline);
  padding: 0.625rem 0.75rem;
}

.vita-form__field textarea:focus {
  border-color: var(--fm-form-accent);
}

.vita-form__field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%23888' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.25rem center;
  background-size: 10px 6px;
  padding-right: 1.5rem;
}

/* ── Radio + checkbox groups ───────────────────────────────────────────────── */

.vita-form__field--radio label,
.vita-form__field--checkbox_group label,
.vita-form__field--checkbox label {
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fm-form-text);
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 1.5rem;
  margin-bottom: 0.5rem;
}

.vita-form__field--radio input[type="radio"],
.vita-form__field--checkbox_group input[type="checkbox"],
.vita-form__field--checkbox input[type="checkbox"] {
  accent-color: var(--fm-form-accent);
}

/* ── Help + error ──────────────────────────────────────────────────────────── */

.vita-form__help {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--fm-form-muted);
}

.vita-form__help:empty {
  display: none;
}

.vita-form__error {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--fm-form-error);
  min-height: 0;
}

.vita-form__error:empty {
  display: none;
}

.vita-form__field.is-error input,
.vita-form__field.is-error textarea,
.vita-form__field.is-error select {
  border-bottom-color: var(--fm-form-error);
}

/* ── Nav row ───────────────────────────────────────────────────────────────── */

.vita-form__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  gap: 1rem;
}

.vita-form__prev,
.vita-form__next,
.vita-form__submit {
  font-family: var(--wp--preset--font-family--mono, 'Courier New', monospace);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.875rem 1.5rem;
  border: 0;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
  background: transparent;
}

.vita-form__next,
.vita-form__submit {
  background: var(--fm-form-accent);
  color: #fff;
  border-radius: 2px;
  margin-left: auto;
}

.vita-form__next:hover,
.vita-form__submit:hover,
.vita-form__next:focus-visible,
.vita-form__submit:focus-visible {
  opacity: 0.85;
}

.vita-form__next:active,
.vita-form__submit:active {
  transform: translateY(1px);
}

.vita-form__prev {
  color: var(--fm-form-muted);
  background: transparent;
  padding-left: 0;
}

.vita-form__prev:hover,
.vita-form__prev:focus-visible {
  color: var(--fm-form-text);
}

/* ── Success / error summary ───────────────────────────────────────────────── */

.vita-form__success {
  padding: 1.5rem;
  background: rgba(109, 31, 53, 0.04);
  border-left: 3px solid var(--fm-form-accent);
  margin: 1rem 0;
  font-size: 1.0625rem;
}

.vita-form__error-summary {
  padding: 1rem 1.25rem;
  background: rgba(196, 38, 46, 0.04);
  border-left: 3px solid var(--fm-form-error);
  margin: 1rem 0;
  color: var(--fm-form-error);
  font-size: 0.875rem;
}

/* ── Composite fields (name, address) ──────────────────────────────────────── */

.vita-form__field--name .vita-form__subfields,
.vita-form__field--address .vita-form__subfields {
  display: grid;
  gap: 0.5rem 1rem;
}

.vita-form__field--name .vita-form__subfields {
  grid-template-columns: 1fr 1fr;
}

.vita-form__field--address .vita-form__subfields {
  grid-template-columns: 2fr 1fr 1fr 1fr;
}

@media (max-width: 640px) {
  .vita-form__field--name .vita-form__subfields,
  .vita-form__field--address .vita-form__subfields {
    grid-template-columns: 1fr;
  }
}

/* ── Rating field ──────────────────────────────────────────────────────────── */

.vita-form__field--rating .vita-form__rating {
  display: inline-flex;
  gap: 0.5rem;
  font-size: 1.5rem;
  color: var(--fm-form-muted);
  cursor: pointer;
}

.vita-form__field--rating input[type="radio"] {
  display: none;
}

/* ── Signature canvas ──────────────────────────────────────────────────────── */

.vita-form__field--signature canvas {
  display: block;
  width: 100%;
  height: 200px;
  border: 1px solid var(--fm-form-hairline);
  border-radius: 2px;
  touch-action: none;
  background: #fff;
}

/* ── HTML block / section break ───────────────────────────────────────────── */

.vita-form__field--section_break {
  padding-top: 1.5rem;
  border-top: 1px solid var(--fm-form-hairline);
  border-bottom: 0;
}

.vita-form__field--section_break h3 {
  font-family: var(--wp--preset--font-family--mono, 'Courier New', monospace);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8125rem;
  color: var(--fm-form-muted);
  margin: 0 0 0.5rem;
}

.vita-form__field--html {
  border-bottom: 0;
}

/* ── Honeypot (off-screen) ─────────────────────────────────────────────────── */

.vita-form__honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
}