/* Vault Two Zero — contact form styles.
 *
 * Replaces 660 KB of Gravity Forms CSS (4 stylesheets) with the ~4 KB that
 * actually paints this one form. Every number here was read off the LIVE source
 * with getComputedStyle at 1920x1080 (migration-source/forms/home-form-computed.json)
 * so the rebuilt form renders pixel-for-pixel like the Gravity one it replaces.
 *
 * Loaded at exactly the point in the document where Gravity's first stylesheet
 * used to sit, so the cascade order is unchanged.
 */

/* ---- grid: Gravity's 12-column field grid ---------------------------------
   698px container -> 12 tracks of 43.5px + 11 gaps of 16px. A half-width field
   spans 6 -> 341px, which is what the source measures.                       */
.v20-form { margin: 0; }

.v20-fields {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 16px;
  row-gap: 40px;
}

.v20-field { grid-column: span 12; min-width: 0; }

/* Gravity's only breakpoint is 640px: below it every field is full width. */
@media (min-width: 640px) {
  .v20-field--half { grid-column: span 6; }
}

/* ---- labels --------------------------------------------------------------- */
.v20-label {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20.02px;
  color: #ffffff;
  text-align: left;
}

.v20-sublabel {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: 18.59px;
  color: rgb(88, 94, 106);
  text-align: left;
}

/* ---- name field: two columns inside one full-width field ------------------ */
.v20-name {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: 12px;
  margin-left: -6px;
  margin-right: -6px;
}

.v20-name > span {
  display: block;
  box-sizing: border-box;
  width: 50%;
  padding-left: 6px;
  padding-right: 6px;
}

@media (max-width: 639px) {
  .v20-name > span { width: 100%; }
}

/* ---- controls ------------------------------------------------------------- */
.v20-form input[type="text"],
.v20-form input[type="email"],
.v20-form input[type="tel"],
.v20-form select,
.v20-form textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 12px;
  height: 38px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 38px;
  letter-spacing: normal;
  color: #ffffff;
  background-color: rgb(12, 12, 12);
  border: 1px solid rgb(42, 42, 42);
  border-radius: 3px;
  box-shadow: rgba(18, 25, 97, 0.08) 0 1px 4px 0;
  outline: rgba(0, 0, 0, 0) solid 0;
  -webkit-appearance: none;
  appearance: none;
  transition: 0.15s;
  vertical-align: baseline;
}

.v20-form textarea {
  height: 130px;
  min-height: 96px;
  max-width: none;
  padding: 12px;
  line-height: 21px;
  resize: vertical;
}

/* the chevron is the exact data: URI Gravity paints, so the control is identical */
.v20-form select {
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z' fill='rgba(17, 35, 55, 0.65)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 12px) 50%;
  background-size: 10px;
}

.v20-form ::placeholder { color: #ffffff; opacity: 1; }

.v20-form input:focus,
.v20-form select:focus,
.v20-form textarea:focus {
  border-color: #2ea8f4;
  outline: 2px solid rgba(46, 168, 244, 0.35);
  outline-offset: 0;
}

/* ---- footer + submit ------------------------------------------------------ */
.v20-footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

/* FORM-BIBLE gotcha G7: the footer is a non-wrapping flex row in Gravity, which
   would sit the captcha and the full-width submit side by side. Forcing the
   widget to its own 100% row drops Submit underneath, which is the layout
   Mike/Sarah signed off on. */
.v20-captcha { flex: 1 0 100%; }

.v20-form button[type="submit"] {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0 16px;
  height: 38px;
  min-height: 38px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
  text-transform: uppercase;
  text-align: center;
  color: #ffffff;
  background-color: rgb(46, 168, 244);
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 3px;
  box-shadow: rgba(18, 25, 97, 0.08) 0 1px 4px 0;
  outline: rgba(0, 0, 0, 0) solid 0;
  -webkit-appearance: none;
  appearance: none;
  transition: 0.15s;
  cursor: pointer;
  vertical-align: top;
}

.v20-form button[type="submit"]:hover { background-color: #1f93dc; }
.v20-form button[type="submit"][disabled] { opacity: 0.6; cursor: default; }

/* ---- honeypot: ours, never rendered, never announced ---------------------- */
.v20-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ---- inline error banner (shown when the Worker redirects back with ?error=) */
.v20-alert {
  margin: 0 0 24px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 21px;
  color: #ffffff;
  background: rgba(190, 40, 40, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
}