/* ---------- assets/css/frontend.css ---------- */
/**
 * EM Forms — Frontend Styles
 *
 * Uses --cvn-* design tokens from the Convenely parent theme and
 * --wp--preset--* tokens from theme.json. No hardcoded colour values.
 *
 * @package EarthmanMedia\Forms
 */

/* --------------------------------------------------------------------------
   Form wrapper
   -------------------------------------------------------------------------- */

.emform-embed-wrapper {
  container-type: inline-size;
  width: 100%;
}

.emform-form {
  display: flex;
  flex-direction: column;
  gap: var( --cvn-spacing-field-gap, var( --wp--preset--spacing--30, 1.25rem ) );
}

/* Authored content (core headings/paragraphs/lists) takes the form container's
   colour, beating ancestor section rules like `.phf-dark h3` (0,1,1) that would
   otherwise paint white text on a light form card. Own emform-* classes keep
   their plugin colours. */
.emform-embed-wrapper .emform-form :is(h1, h2, h3, h4, h5, h6, p, li, legend):not([class*="emform-"]) {
  color: inherit;
}

/* --------------------------------------------------------------------------
   Field wrappers
   -------------------------------------------------------------------------- */

.emform-field {
  display: flex;
  flex-direction: column;
  gap: var( --cvn-spacing-label-gap, 0.375rem );
}

/* Hidden fields (conditional logic) */
.emform-field--hidden {
  display: none !important;
}

/* Disabled fields (conditional logic — enable/disable actions) */
.emform-field--disabled {
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}

/* --------------------------------------------------------------------------
   Labels
   -------------------------------------------------------------------------- */

.emform-label {
  display: block;
  font-size: var( --cvn-font-size-label, var( --wp--preset--font-size--small, 0.875rem ) );
  font-weight: var( --cvn-font-weight-label, 600 );
  color: var( --cvn-color-label, var( --wp--preset--color--foreground, currentColor ) );
}

.emform-label.sr-only,
.emform-label--sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect( 0, 0, 0, 0 );
  white-space: nowrap;
  border: 0;
}

.emform-required {
  color: var( --cvn-color-error, var( --wp--preset--color--vivid-red, #cc0000 ) );
  margin-inline-start: 0.2em;
}

/* --------------------------------------------------------------------------
   Inputs — shared base
   -------------------------------------------------------------------------- */

.emform-form input:not( [type="submit"] ):not( [type="checkbox"] ):not( [type="radio"] ):not( [type="hidden"] ):not( [type="range"] ),
.emform-form select,
.emform-form textarea {
  display: block;
  width: 100%;
  padding: var( --cvn-input-padding-y, 0.625rem ) var( --cvn-input-padding-x, 0.875rem );
  font-size: var( --cvn-font-size-input, var( --wp--preset--font-size--medium, 1rem ) );
  font-family: inherit;
  line-height: var( --cvn-line-height-input, 1.5 );
  color: var( --cvn-color-input-text, var( --wp--preset--color--foreground, inherit ) );
  background-color: var( --cvn-color-input-bg, var( --wp--preset--color--base, #fff ) );
  border: var( --cvn-input-border-width, 1px ) solid
    var( --cvn-color-input-border, var( --wp--preset--color--contrast-2, #ccc ) );
  border-radius: var( --cvn-input-border-radius, var( --wp--preset--border-radius--sm, 4px ) );
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
}

.emform-form input:not( [type="submit"] ):not( [type="checkbox"] ):not( [type="radio"] ):not( [type="hidden"] ):not( [type="range"] ):focus,
.emform-form select:focus,
.emform-form textarea:focus {
  outline: none;
  border-color: var( --cvn-color-input-border-focus, var( --wp--preset--color--primary, #0073aa ) );
  box-shadow: 0 0 0 var( --cvn-input-focus-ring-width, 3px )
    var( --cvn-color-input-focus-ring, color-mix( in srgb, var( --wp--preset--color--primary, #0073aa ) 25%, transparent ) );
}

/* Invalid state */
.emform-form input.emform-input--invalid,
.emform-form select.emform-input--invalid,
.emform-form textarea.emform-input--invalid {
  border-color: var( --cvn-color-error, var( --wp--preset--color--vivid-red, #cc0000 ) );
}

/* --------------------------------------------------------------------------
   Textarea
   -------------------------------------------------------------------------- */

.emform-form textarea {
  min-height: var( --cvn-textarea-min-height, 8rem );
  resize: vertical;
}

/* --------------------------------------------------------------------------
   Select
   -------------------------------------------------------------------------- */

.emform-form select {
  background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23555' d='M4 6l4 4 4-4'/%3E%3C/svg%3E" );
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1em;
  padding-inline-end: 2.5rem;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Range slider
   -------------------------------------------------------------------------- */

.emform-range {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.emform-range__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.25rem;
  background: transparent;
  cursor: pointer;
  margin: 0;
  display: flex;
  align-items: center;
}

.emform-range__input::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var( --cvn-input-border-radius, var( --wp--preset--border-radius--sm, 4px ) );
  background: var( --cvn-color-input-border, var( --wp--preset--color--contrast-2, #ccc ) );
}

.emform-range__input::-moz-range-track {
  height: 6px;
  border-radius: var( --cvn-input-border-radius, var( --wp--preset--border-radius--sm, 4px ) );
  background: var( --cvn-color-input-border, var( --wp--preset--color--contrast-2, #ccc ) );
}

.emform-range__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.35rem;
  border-radius: 50%;
  background: var( --cvn-color-input-border-focus, var( --wp--preset--color--primary, #0073aa ) );
  border: none;
  cursor: pointer;
}

.emform-range__input::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var( --cvn-color-input-border-focus, var( --wp--preset--color--primary, #0073aa ) );
  border: none;
  cursor: pointer;
}

.emform-range__input:focus-visible {
  outline: none;
}

.emform-range__input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 var( --cvn-input-focus-ring-width, 3px )
    var( --cvn-color-input-focus-ring, color-mix( in srgb, var( --wp--preset--color--primary, #0073aa ) 25%, transparent ) );
}

.emform-range__input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 var( --cvn-input-focus-ring-width, 3px )
    var( --cvn-color-input-focus-ring, color-mix( in srgb, var( --wp--preset--color--primary, #0073aa ) 25%, transparent ) );
}

.emform-range__value {
  align-self: flex-end;
  min-width: 2em;
  padding: 0.125rem 0.5rem;
  border-radius: var( --cvn-input-border-radius, var( --wp--preset--border-radius--sm, 4px ) );
  background: var( --cvn-color-surface-alt, var( --wp--preset--color--base-2, #f0f0f1 ) );
  font-size: var( --cvn-font-size-small, var( --wp--preset--font-size--small, 0.8125rem ) );
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var( --cvn-color-input-text, var( --wp--preset--color--foreground, inherit ) );
}

.emform-range__labels {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: var( --cvn-font-size-small, var( --wp--preset--font-size--small, 0.8125rem ) );
  color: var( --cvn-color-text-muted, #646970 );
}

.emform-range__label--min {
  text-align: left;
}

.emform-range__label--max {
  text-align: right;
}

/* --------------------------------------------------------------------------
   Checkboxes and radios
   -------------------------------------------------------------------------- */

.emform-field--checkbox .emform-options,
.emform-field--radio    .emform-options {
  display: flex;
  flex-direction: column;
  gap: var( --cvn-spacing-option-gap, 0.5rem );
}

.emform-option-label {
  display: flex;
  align-items: center;
  gap: var( --cvn-spacing-option-label-gap, 0.5rem );
  cursor: pointer;
  font-size: var( --cvn-font-size-input, 1rem );
}

.emform-option-label input[type="checkbox"],
.emform-option-label input[type="radio"] {
  width: var( --cvn-checkbox-size, 1.125rem );
  height: var( --cvn-checkbox-size, 1.125rem );
  flex-shrink: 0;
  accent-color: var( --cvn-color-primary, var( --wp--preset--color--primary, #0073aa ) );
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Consent field
   -------------------------------------------------------------------------- */

.emform-field--consent .emform-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
  font-size: var( --cvn-font-size-input, 1rem );
}

.emform-field--consent .emform-consent-checkbox {
  width: var( --cvn-checkbox-size, 1.125rem );
  height: var( --cvn-checkbox-size, 1.125rem );
  flex-shrink: 0;
  margin-top: 0.15em;
  accent-color: var( --cvn-color-primary, var( --wp--preset--color--primary, #0073aa ) );
}

/* --------------------------------------------------------------------------
   Field error messages
   -------------------------------------------------------------------------- */

.emform-field-error,
.emform-consent-error {
  font-size: var( --cvn-font-size-error, 0.8125rem );
  color: var( --cvn-color-error, var( --wp--preset--color--vivid-red, #cc0000 ) );
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Submit button
   -------------------------------------------------------------------------- */

.emform-field--submit {
  flex-direction: row;
}

.emform-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: var( --cvn-btn-padding-y, 0.75rem ) var( --cvn-btn-padding-x, 1.5rem );
  font-size: var( --cvn-font-size-btn, var( --wp--preset--font-size--medium, 1rem ) );
  font-family: inherit;
  font-weight: var( --cvn-font-weight-btn, 600 );
  line-height: 1;
  color: var( --cvn-color-btn-text, var( --wp--preset--color--base, #fff ) );
  background-color: var( --cvn-color-btn-bg, var( --wp--preset--color--primary, #0073aa ) );
  border: var( --cvn-btn-border-width, 2px ) solid
    var( --cvn-color-btn-border, var( --wp--preset--color--primary, #0073aa ) );
  border-radius: var( --cvn-btn-border-radius, var( --wp--preset--border-radius--sm, 4px ) );
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
}

.emform-submit-btn:hover:not( :disabled ) {
  background-color: var( --cvn-color-btn-bg-hover, color-mix( in srgb, var( --wp--preset--color--primary, #0073aa ) 85%, #000 ) );
  border-color: var( --cvn-color-btn-bg-hover, color-mix( in srgb, var( --wp--preset--color--primary, #0073aa ) 85%, #000 ) );
}

.emform-submit-btn:focus-visible {
  outline: var( --cvn-input-focus-ring-width, 3px ) solid
    var( --cvn-color-input-border-focus, var( --wp--preset--color--primary, #0073aa ) );
  outline-offset: 2px;
}

.emform-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.emform-submit__spinner {
  width: 1em;
  height: 1em;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: emform-spin 0.65s linear infinite;
}

@keyframes emform-spin {
  to { transform: rotate( 360deg ); }
}

/* Submitting state */
.emform-form.emform-is-submitting .emform-submit-btn {
  opacity: 0.7;
  cursor: wait;
}

/* --------------------------------------------------------------------------
   Success / error message banner
   -------------------------------------------------------------------------- */

.emform-messages {
  min-height: 0;
}

.emform-message {
  padding: var( --cvn-message-padding, 0.875rem 1rem );
  border-radius: var( --cvn-input-border-radius, 4px );
  font-size: var( --cvn-font-size-input, 1rem );
  line-height: 1.5;
}

.emform-message--success {
  color: var( --cvn-color-success-text, var( --wp--preset--color--foreground, #155724 ) );
  background-color: var( --cvn-color-success-bg, color-mix( in srgb, var( --wp--preset--color--secondary, #28a745 ) 12%, transparent ) );
  border: 1px solid var( --cvn-color-success-border, color-mix( in srgb, var( --wp--preset--color--secondary, #28a745 ) 35%, transparent ) );
}

.emform-message--error {
  color: var( --cvn-color-error-text, var( --cvn-color-error, var( --wp--preset--color--vivid-red, #cc0000 ) ) );
  background-color: var( --cvn-color-error-bg, color-mix( in srgb, var( --wp--preset--color--vivid-red, #cc0000 ) 10%, transparent ) );
  border: 1px solid var( --cvn-color-error-border, color-mix( in srgb, var( --wp--preset--color--vivid-red, #cc0000 ) 30%, transparent ) );
}

/* --------------------------------------------------------------------------
   Honeypot — accessibility-safe hiding
   -------------------------------------------------------------------------- */

.emform-hp {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@container ( max-width: 480px ) {
  .emform-field--submit {
    flex-direction: column;
  }

  .emform-submit-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
 * Side-by-side field rows.
 *
 * Dragging fields next to each other in the form editor wraps them in a core
 * Row (group with flex layout). Flex children default to flex-grow:0, so two
 * fields sat at intrinsic width (~thirds) instead of sharing the row. Equal
 * flexible tracks: N fields in a row each take 1/N of the width automatically
 * (2 → halves, 3 → thirds). min-width:0 lets inputs shrink inside the track.
 * ------------------------------------------------------------------------- */

.emform-form .is-layout-flex > .emform-field {
  flex: 1 1 0;
  min-width: 0;
}

/* Rows align fields to the TOP: WP's flex rows default to center, which
 * mis-aligns neighbours of different heights (descriptions, taller labels). */
.emform-form .is-layout-flex {
  align-items: flex-start;
}

/* --------------------------------------------------------------------------
   Multi-step wizard — em/form-step panels + rail + Back/Next nav
   (assets/js/frontend.js EmFormStepWizard). Token names mirror the wizard
   kit's --emw-* front skin (em-crew/docs/ui/wizard-framework.md §4) remapped
   onto --cvn-* and --wp--preset--* so a step-form reads as the same wizard
   visual language as the event/crew wizards, with a literal fallback last.
   -------------------------------------------------------------------------- */

.emform-form {
  --emform-wizard-accent:    var( --cvn-color-primary, var( --wp--preset--color--primary, #0073aa ) );
  --emform-wizard-border:    var( --cvn-color-border, var( --wp--preset--color--border, #e2e2e2 ) );
  --emform-wizard-muted:     var( --cvn-color-text-muted, #6b7280 );
  --emform-wizard-surface:   var( --cvn-surface, var( --wp--preset--color--base, #fff ) );
  --emform-wizard-radius:    var( --cvn-btn-border-radius, var( --wp--preset--border-radius--sm, 8px ) );
}

.emform-step {
  display: flex;
  flex-direction: column;
  gap: var( --cvn-spacing-field-gap, var( --wp--preset--spacing--30, 1.25rem ) );
}

/* The wizard JS pages steps with the `hidden` attribute; the flex rule above
   would otherwise out-rank the UA [hidden] style and show every step at once. */
.emform-step[hidden] {
  display: none;
}

.emform-step__header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.emform-step__title {
  margin: 0;
  font-size: var( --cvn-size-h4, var( --wp--preset--font-size--large, 1.25rem ) );
  font-weight: var( --cvn-font-weight-heading, 700 );
}

.emform-step__description {
  margin: 0;
  color: var( --emform-wizard-muted );
}

.emform-step__body {
  display: flex;
  flex-direction: column;
  gap: var( --cvn-spacing-field-gap, var( --wp--preset--spacing--30, 1.25rem ) );
}

/* Rail -------------------------------------------------------------------- */

.emform-wizard-rail {
  margin-bottom: var( --cvn-spacing-field-gap, var( --wp--preset--spacing--30, 1.25rem ) );
}

.emform-wizard-rail__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.emform-wizard-rail__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var( --emform-wizard-muted );
}

.emform-wizard-rail__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var( --emform-wizard-border );
  font-size: 0.8125rem;
  font-weight: 700;
  color: var( --emform-wizard-muted );
  background: var( --emform-wizard-surface );
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.emform-wizard-rail__item.is-current .emform-wizard-rail__marker {
  border-color: var( --emform-wizard-accent );
  color: var( --emform-wizard-accent );
}

.emform-wizard-rail__item.is-current .emform-wizard-rail__label {
  color: var( --cvn-color-text, var( --wp--preset--color--contrast, #1e1e1e ) );
  font-weight: 600;
}

.emform-wizard-rail__item.is-done .emform-wizard-rail__marker {
  background: var( --emform-wizard-accent );
  border-color: var( --emform-wizard-accent );
  color: var( --cvn-color-btn-text, var( --wp--preset--color--base, #fff ) );
}

/* Narrow viewports: collapse the rail to a compact step counter so labels
   don't wrap awkwardly on a phone-width form embed. */
@container ( max-width: 480px ) {
  .emform-wizard-rail__label {
    display: none;
  }

  .emform-wizard-rail__list {
    gap: 0.375rem;
  }
}

/* Back/Next nav ------------------------------------------------------------ */

.emform-wizard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: var( --cvn-spacing-field-gap, var( --wp--preset--spacing--30, 1.25rem ) );
}

.emform-wizard-nav__status {
  flex: 1 1 auto;
  font-size: 0.875rem;
  color: var( --cvn-color-error, #d63638 );
  text-align: center;
}

.emform-wizard-nav__back,
.emform-wizard-nav__next {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: var( --cvn-btn-padding-y, 0.75rem ) var( --cvn-btn-padding-x, 1.5rem );
  font-size: var( --cvn-font-size-btn, var( --wp--preset--font-size--medium, 1rem ) );
  font-family: inherit;
  font-weight: var( --cvn-font-weight-btn, 600 );
  line-height: 1;
  border-radius: var( --emform-wizard-radius );
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.emform-wizard-nav__back {
  flex: 0 0 auto;
  color: var( --cvn-color-text, var( --wp--preset--color--contrast, #1e1e1e ) );
  background-color: transparent;
  border: var( --cvn-btn-border-width, 2px ) solid var( --emform-wizard-border );
}

.emform-wizard-nav__back:hover {
  border-color: var( --emform-wizard-accent );
  color: var( --emform-wizard-accent );
}

.emform-wizard-nav__next {
  flex: 0 0 auto;
  margin-left: auto;
  color: var( --cvn-color-btn-text, var( --wp--preset--color--base, #fff ) );
  background-color: var( --emform-wizard-accent );
  border: var( --cvn-btn-border-width, 2px ) solid var( --emform-wizard-accent );
}

.emform-wizard-nav__next:hover {
  background-color: var( --cvn-color-btn-bg-hover, color-mix( in srgb, var( --emform-wizard-accent ) 85%, #000 ) );
  border-color: var( --cvn-color-btn-bg-hover, color-mix( in srgb, var( --emform-wizard-accent ) 85%, #000 ) );
}

.emform-wizard-nav__back:focus-visible,
.emform-wizard-nav__next:focus-visible {
  outline: var( --cvn-input-focus-ring-width, 3px ) solid var( --emform-wizard-accent );
  outline-offset: 2px;
}

/* Last step's nav row holds the real submit button (relocated by JS) —
   align it the same as a Next button. */
.emform-wizard-nav .emform-field--submit {
  flex: 0 0 auto;
  margin-left: auto;
}

/* Step transition — gated under prefers-reduced-motion so a user who has
   asked for reduced motion gets an instant swap (JS also skips the smooth
   scrollIntoView in that case). */
@media ( prefers-reduced-motion: no-preference ) {
  .emform-step:not( [ hidden ] ) {
    animation: emform-step-in 0.2s ease;
  }
}

@keyframes emform-step-in {
  from {
    opacity: 0;
    transform: translateY( 4px );
  }
  to {
    opacity: 1;
    transform: translateY( 0 );
  }
}


/* ---------- assets/css/signature.css ---------- */
/**
 * EM Forms — Signature Pad
 *
 * Styles for .emform-field--signature and its inner elements.
 *
 * @package EarthmanMedia\Forms
 */

.emform-signature-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.emform-signature-pad {
  display: block;
  width: 100%;
  height: 160px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: crosshair;
  touch-action: none;
}

/* Visible baseline rule inside the signing area */
.emform-signature-pad::after {
  content: '';
}

.emform-signature-wrap::before {
  content: '';
  display: block;
  position: relative;
}

/* Baseline visual — rendered via a background gradient on the canvas wrapper */
.emform-signature-wrap {
  position: relative;
}

.emform-signature-clear {
  align-self: flex-end;
  padding: 4px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f5f5f5;
  color: #333;
  font-size: 0.875em;
  cursor: pointer;
  line-height: 1.4;
}

.emform-signature-clear:hover,
.emform-signature-clear:focus-visible {
  background: #e8e8e8;
  border-color: #aaa;
  outline-offset: 2px;
}

/* Validation error state */
.emform-field--signature.emform-field--error .emform-signature-pad {
  border-color: #c00;
}