/* Self-hosted replacement for Squarespace form blocks.
   Inherits the theme's font/colour custom properties where they exist. */

.sprout-form {
  --sf-border: rgba(0, 0, 0, .28);
  --sf-border-focus: rgba(0, 0, 0, .75);
  --sf-radius: 2px;
  --sf-gap: 1.1rem;
  font-family: var(--body-font-font-family, "Helvetica Neue", Helvetica, Arial, sans-serif);
  display: flex;
  flex-direction: column;
  gap: var(--sf-gap);
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
}

.sprout-form .sf-field { display: flex; flex-direction: column; gap: .4rem; }

.sprout-form label,
.sprout-form .sf-label {
  font-size: .82rem;
  letter-spacing: .02em;
  line-height: 1.35;
  font-weight: 500;
}

.sprout-form .req { opacity: .65; }

.sprout-form input[type="text"],
.sprout-form input[type="email"],
.sprout-form input[type="tel"],
.sprout-form textarea {
  font: inherit;
  font-size: .95rem;
  color: inherit;
  width: 100%;
  padding: .62rem .7rem;
  background: transparent;
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius);
  transition: border-color .15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.sprout-form input:focus,
.sprout-form textarea:focus {
  outline: none;
  border-color: var(--sf-border-focus);
}

.sprout-form textarea { resize: vertical; min-height: 6.5rem; }

.sprout-form .sf-row { display: flex; gap: .7rem; flex-wrap: wrap; }
.sprout-form .sf-row > input { flex: 1 1 12rem; }

.sprout-form .sf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}
.sprout-form .sf-grid > input:first-child,
.sprout-form .sf-grid > input:nth-child(2) { grid-column: 1 / -1; }

.sprout-form .sf-checks { display: flex; flex-wrap: wrap; gap: .55rem 1.3rem; margin-top: .15rem; }
.sprout-form .sf-check {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 400;
  cursor: pointer;
}
.sprout-form .sf-check input { width: 1rem; height: 1rem; margin: 0; cursor: pointer; }

/* honeypot - hidden from people, visible to naive bots */
.sprout-form .sf-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.sprout-form .sf-submit {
  font: inherit;
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  align-self: flex-start;
  margin-top: .3rem;
  padding: .78rem 2.1rem;
  color: #fff;
  background: #1c1c1c;
  border: 1px solid #1c1c1c;
  border-radius: var(--sf-radius);
  cursor: pointer;
  transition: opacity .15s ease;
}
.sprout-form .sf-submit:hover { opacity: .82; }
.sprout-form .sf-submit[disabled] { opacity: .5; cursor: default; }

.sprout-form .sf-status {
  font-size: .92rem;
  line-height: 1.5;
  padding: .8rem 1rem;
  border-radius: var(--sf-radius);
}
.sprout-form .sf-status[data-state="error"] {
  color: #8c1d1d;
  background: rgba(140, 29, 29, .08);
  border: 1px solid rgba(140, 29, 29, .3);
}
.sprout-form .sf-status[data-state="ok"] {
  color: inherit;
  background: rgba(0, 0, 0, .04);
  border: 1px solid rgba(0, 0, 0, .12);
}

.sprout-form :invalid.sf-touched { border-color: #8c1d1d; }

/* native <video> replacing the Squarespace video component */
.sprout-video { width: 100%; }
.sprout-video video { background: #000; border-radius: 2px; }

@media (max-width: 640px) {
  .sprout-form .sf-grid { grid-template-columns: 1fr; }
  .sprout-form .sf-submit { align-self: stretch; text-align: center; }
}

/* 16px or Safari zooms the page the moment a field is tapped, and it does not
   zoom back. This sits here rather than in the theme because the theme's bare
   element selectors lose to the class selectors above. */
@media (max-width: 640px) {
  .sprout-form input[type="text"],
  .sprout-form input[type="email"],
  .sprout-form input[type="tel"],
  .sprout-form select,
  .sprout-form textarea { font-size: 16px; }
}

/* ---------- sending ---------- */

/* The seedling draws itself in the order the logo is built: the ground, then
   the stem, then the two leaves, then it clears and starts over. One duration
   on every part keeps them in step, so the loop restarts cleanly. */

.sprout-form .sf-submit.is-sending {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  opacity: 1;
}

.sf-sprout {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  animation: sf-grow-cycle 1.9s ease-in-out infinite;
}

.sf-sprout .sf-leaf { fill: currentColor; stroke: none; }

.sf-sprout > * { transform-box: view-box; }

.sf-soil {
  transform-origin: 12px 20px;
  animation: sf-grow-soil 1.9s ease-out infinite;
}

.sf-stem {
  stroke-dasharray: 12;
  animation: sf-grow-stem 1.9s ease-out infinite;
}

.sf-leaf-l {
  transform-origin: 12px 13.2px;
  animation: sf-grow-leaf 1.9s cubic-bezier(.34, 1.4, .5, 1) infinite;
}

/* its own timeline rather than a delay: a delay runs once, so the stagger
   was lost after the first loop and the leaf hung in the air before the
   stem existed */
.sf-leaf-r {
  transform-origin: 12px 10.4px;
  animation: sf-grow-leaf-late 1.9s cubic-bezier(.34, 1.4, .5, 1) infinite;
}

@keyframes sf-grow-soil {
  0%, 6% { transform: scaleX(0); }
  20%, 100% { transform: scaleX(1); }
}

@keyframes sf-grow-stem {
  0%, 16% { stroke-dashoffset: 12; }
  44%, 100% { stroke-dashoffset: 0; }
}

@keyframes sf-grow-leaf {
  0%, 42% { transform: scale(0); }
  64%, 100% { transform: scale(1); }
}

@keyframes sf-grow-leaf-late {
  0%, 52% { transform: scale(0); }
  74%, 100% { transform: scale(1); }
}

@keyframes sf-grow-cycle {
  0%, 89% { opacity: 1; }
  99%, 100% { opacity: 0; }
}

/* grown, and still, for anyone who asked not to be moved */
@media (prefers-reduced-motion: reduce) {
  .sf-sprout,
  .sf-sprout > * { animation: none; }
  .sf-stem { stroke-dashoffset: 0; }
  .sf-leaf { transform: scale(1); }
}