/* =========================================================
   DWU - GUIDE SUBMISSION FORM
   inc/dwu-pov-form.css

   Enqueued by pov-submit-form.php, only on pages that render
   the shortcode.

   Two things this fixes.

   The honeypot was visible. That is now handled inline in the
   PHP as well, because a hidden field that depends on a
   stylesheet loading is not hidden - it is hidden most of the
   time, which is worse. The rule below is belt and braces.

   The inputs were rendering as solid inky-green bars. Nothing
   in dwu-styles.css styles a bare text input on a page, so the
   theme's own dark treatment was showing through, with no text
   colour set against it. Typed text was close to invisible.
   These now match the search and facet fields in section 10 of
   dwu-styles.css, which is the site's established form
   language: paper ground, hairline border, inky text.

   Tokens come from dwu-styles.css. Fallbacks are included so a
   load-order accident degrades to the right colours rather than
   to black on white.
   ========================================================= */

/* --- Honeypot ------------------------------------------- */

.dwu-pov__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* --- Layout --------------------------------------------- */

.dwu-pov {
  max-width: 640px;
  margin: 0 auto;
}

.fl-page .dwu-pov__group {
  margin: 0 0 var(--space-10, 2.5rem);
  padding: 0;
  border: 0;
}

.fl-page .dwu-pov__legend {
  display: block;
  width: 100%;
  margin: 0 0 var(--space-2, 0.5rem);
  padding: 0 0 var(--space-3, 0.75rem);
  border-bottom: 1px solid var(--color-inky-hairline, rgba(15, 46, 38, 0.15));
  font-family: var(--font-body);
  font-size: var(--text-2xs, 0.8125rem);
  line-height: 1.2;
  letter-spacing: var(--tracking-label, 0.22em);
  text-indent: var(--tracking-label, 0.22em);
  text-transform: uppercase;
  color: var(--color-mauve-text, #803139);
}

.fl-page .dwu-pov__intro {
  margin: 0 0 var(--space-6, 1.5rem) !important;
  max-width: 54ch !important;
  font-size: 0.9375rem !important;
  line-height: 1.6 !important;
  color: rgba(15, 46, 38, 0.7) !important;
}

.dwu-pov__field {
  margin: 0 0 var(--space-6, 1.5rem) !important;
  max-width: none !important;
}

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

.fl-page .dwu-pov label,
.fl-page .dwu-pov__label {
  display: block;
  margin: 0 0 var(--space-2, 0.5rem);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-inky-green, #0f2e26);
}

.dwu-pov__req {
  color: var(--color-mauve-text, #803139);
}

/* Helper text sits under the field it explains, not above the
   next one - the margin is deliberately small for that reason. */
.fl-page .dwu-pov__help {
  display: block;
  margin: 6px 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(15, 46, 38, 0.6);
}

/* --- Fields --------------------------------------------- */

.fl-page .dwu-pov input[type="text"],
.fl-page .dwu-pov input[type="email"],
.fl-page .dwu-pov textarea {
  box-sizing: border-box !important;
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px 16px !important;
  background-color: var(--color-paper, #faf7f1) !important;
  background-image: none !important;
  border: 1px solid var(--color-inky-hairline, rgba(15, 46, 38, 0.15)) !important;
  border-radius: 10px !important;
  color: var(--color-inky-green, #0f2e26) !important;
  font-family: var(--font-body) !important;
  /* 16px minimum, or iOS zooms the page on focus. */
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fl-page .dwu-pov input[type="text"],
.fl-page .dwu-pov input[type="email"] {
  height: 50px;
  min-height: 50px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.fl-page .dwu-pov textarea {
  min-height: 118px;
  resize: vertical;
}

.fl-page .dwu-pov input::placeholder,
.fl-page .dwu-pov textarea::placeholder {
  color: rgba(15, 46, 38, 0.45) !important;
  opacity: 1;
}

.fl-page .dwu-pov input[type="text"]:focus,
.fl-page .dwu-pov input[type="email"]:focus,
.fl-page .dwu-pov textarea:focus {
  border-color: var(--color-forest-green, #0f5a38) !important;
  box-shadow: 0 0 0 3px rgba(15, 90, 56, 0.18) !important;
  outline: none;
}

/* Chrome's autofill paints its own pale blue over the field. */
.fl-page .dwu-pov input:-webkit-autofill,
.fl-page .dwu-pov input:-webkit-autofill:hover,
.fl-page .dwu-pov input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-inky-green, #0f2e26);
  box-shadow: 0 0 0 1000px var(--color-paper, #faf7f1) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* --- Radios and checkboxes ------------------------------ */

.fl-page .dwu-pov__radio,
.fl-page .dwu-pov__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 0.9375rem;
  line-height: 1.5;
  cursor: pointer;
}

.fl-page .dwu-pov__radio input,
.fl-page .dwu-pov__check input {
  flex: none;
  width: 18px;
  height: 18px;
  /* Optical alignment with the first line of the label, which a
     baseline-aligned checkbox never quite manages. */
  margin: 3px 0 0 !important;
  accent-color: var(--color-forest-green, #0f5a38);
  cursor: pointer;
}

/* The three consents carry more weight than the photo radios, so
   they get a surface of their own rather than more type size. */
.dwu-pov__consent {
  padding: 14px 16px;
  background: rgba(15, 46, 38, 0.035);
  border-radius: 10px;
}

.dwu-pov__consent + .dwu-pov__consent {
  margin-top: -8px !important;
}

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

.dwu-pov__actions {
  margin: var(--space-8, 2rem) 0 0 !important;
  max-width: none !important;
  text-align: center;
}

.fl-page .dwu-pov__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--space-10, 2.5rem) !important;
  background-color: var(--color-inky-green, #0f2e26) !important;
  border: 1px solid var(--color-inky-green, #0f2e26) !important;
  border-radius: var(--border-radius-full, 999px) !important;
  color: var(--color-cream, #f2ebe0) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-2xs, 0.8125rem) !important;
  line-height: 1 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.fl-page .dwu-pov__submit:hover {
  background-color: var(--color-forest-green, #0f5a38) !important;
  border-color: var(--color-forest-green, #0f5a38) !important;
}

.fl-page .dwu-pov__note {
  display: block;
  margin: 14px auto 0;
  max-width: 46ch;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(15, 46, 38, 0.6);
}

/* --- Error ---------------------------------------------- */

.fl-page .dwu-pov__error {
  margin: 0 0 var(--space-6, 1.5rem) !important;
  max-width: none !important;
  padding: 14px 16px;
  background: rgba(197, 48, 48, 0.08);
  border-left: 3px solid var(--color-error, #c53030);
  border-radius: 6px;
  font-size: 0.9375rem !important;
  line-height: 1.5 !important;
  color: var(--color-inky-green, #0f2e26) !important;
}

/* --- Thanks --------------------------------------------- */

.dwu-pov__thanks {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-10, 2.5rem);
  background: var(--color-paper, #faf7f1);
  border: 1px solid var(--color-inky-hairline, rgba(15, 46, 38, 0.15));
  border-radius: 14px;
  text-align: center;
}

.fl-page .dwu-pov__thanks-eyebrow {
  margin: 0 0 10px !important;
  max-width: none !important;
  font-size: var(--text-2xs, 0.8125rem) !important;
  line-height: 1.2 !important;
  letter-spacing: var(--tracking-label, 0.22em);
  text-indent: var(--tracking-label, 0.22em);
  text-transform: uppercase;
  color: var(--color-mauve-text, #803139) !important;
}

.fl-page .dwu-pov__thanks-title {
  margin: 0 0 var(--space-4, 1rem) !important;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  line-height: 1.2;
  color: var(--color-inky-green, #0f2e26);
  text-wrap: balance;
}

.fl-page .dwu-pov__thanks p {
  margin: 0 auto var(--space-4, 1rem) !important;
  max-width: 44ch !important;
  font-size: 0.9375rem !important;
  line-height: 1.6 !important;
  color: rgba(15, 46, 38, 0.72) !important;
}

.fl-page .dwu-pov__thanks-link {
  display: inline-flex;
  align-items: center;
  height: 38px;
  border-bottom: 1px solid rgba(15, 46, 38, 0.28);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-inky-green, #0f2e26) !important;
}

.fl-page .dwu-pov__thanks-link:hover {
  color: var(--color-dusty-mauve, #803139) !important;
  border-bottom-color: var(--color-dusty-mauve, #803139);
}

@media (max-width: 600px) {
  .dwu-pov__thanks { padding: var(--space-6, 1.5rem); }

  .fl-page .dwu-pov__submit { width: 100%; }
}