/* ==========================================================================
   HOD Sanctuary style layer for WPForms (modern markup)
   Household of David website. Load AFTER WPForms' own stylesheet.

   How to use in the theme:
     wp_enqueue_style( 'hod-wpforms', get_theme_file_uri( 'assets/css/hod-wpforms.css' ),
                       array( 'wpforms-full' ), '1.0' );
   Requires: WPForms > Settings > General > "Include Form Styling" = Base and form theme styling,
             and Markup = Modern.

   Optional classes (WPForms field > Advanced > CSS Classes, or the form's CSS class):
     hod-dark      on the FORM: light text for forms placed on navy or red sections
     hod-tick      on a FIELD: keep normal tick boxes instead of pills
     hod-wide      on a FIELD: pills stretch to fill the row (good for 2 to 4 short options)
   ========================================================================== */

/* 1. Design tokens mapped onto WPForms' own variables ------------------------ */
.wpforms-container.wpforms-render-modern,
div.wpforms-container-full.wpforms-render-modern {
  --hod-night: #0A0F2C;
  --hod-red: #D2191F;
  --hod-red-dark: #A3141A;
  --hod-navy: #23307A;
  --hod-mist: #EEF0F6;
  --hod-line: #DCE0EA;
  --hod-muted: #586079;
  --hod-body: #3A4058;

  --wpforms-field-border-radius: 16px !important;
  --wpforms-field-border-size: 2px !important;
  --wpforms-field-border-style: solid !important;
  --wpforms-field-border-color: var(--hod-line) !important;
  --wpforms-field-background-color: #FFFFFF !important;
  --wpforms-field-text-color: #12162A !important;
  --wpforms-field-menu-color: #FFFFFF !important;
  --wpforms-field-size-input-height: 54px !important;
  --wpforms-field-size-input-spacing: 22px !important;
  --wpforms-field-size-font-size: 16px !important;
  --wpforms-field-size-padding-h: 18px !important;
  --wpforms-field-size-checkbox-size: 22px !important;
  --wpforms-field-size-sublabel-spacing: 6px !important;
  --wpforms-field-size-icon-size: 1 !important;

  --wpforms-label-color: var(--hod-night) !important;
  --wpforms-label-sublabel-color: var(--hod-muted) !important;
  --wpforms-label-error-color: var(--hod-red-dark) !important;
  --wpforms-label-size-font-size: 15px !important;
  --wpforms-label-size-line-height: 1.35 !important;
  --wpforms-label-size-sublabel-font-size: 13px !important;
  --wpforms-label-size-sublabel-line-height: 1.4 !important;

  --wpforms-button-background-color: var(--hod-red) !important;
  --wpforms-button-background-color-alt: var(--hod-red) !important;
  --wpforms-button-text-color: #FFFFFF !important;
  --wpforms-button-text-color-alt: #FFFFFF !important;
  --wpforms-button-border-radius: 999px !important;
  --wpforms-button-border-size: 0px !important;
  --wpforms-button-border-style: none !important;
  --wpforms-button-border-color: transparent !important;
  --wpforms-button-size-height: 56px !important;
  --wpforms-button-size-font-size: 17px !important;
  --wpforms-button-size-padding-h: 30px !important;
  --wpforms-button-size-margin-top: 10px !important;

  --wpforms-container-padding: 0px !important;
  --wpforms-container-border-width: 0px !important;
  --wpforms-container-border-radius: 0px !important;
  --wpforms-container-shadow-size-box-shadow: none !important;
  --wpforms-icon-choices-color: var(--hod-navy) !important;

  font-family: 'Archivo', system-ui, sans-serif;
  margin: 0;
}

/* 2. Layout: tidy spacing, two-up name and address rows ------------------- */
.wpforms-render-modern .wpforms-form .wpforms-field { padding: 0 0 var(--wpforms-field-size-input-spacing) 0; }
.wpforms-render-modern .wpforms-form .wpforms-field-container { display: block; }
.wpforms-render-modern .wpforms-form .wpforms-field-row { display: flex !important; flex-wrap: wrap; gap: 12px; max-width: 100% !important; }
.wpforms-render-modern .wpforms-form .wpforms-field-row::before,
.wpforms-render-modern .wpforms-form .wpforms-field-row::after { display: none !important; }
.wpforms-render-modern .wpforms-form .wpforms-field-row .wpforms-field-row-block { float: none !important; margin: 0 !important; padding: 0 !important; width: auto !important; flex: 1 1 200px; min-width: 0; }
.wpforms-render-modern .wpforms-form .wpforms-field-row .wpforms-field-row-block.wpforms-one-half:only-child,
.wpforms-render-modern .wpforms-form .wpforms-field-address .wpforms-field-row:has(> .wpforms-field-row-block:only-child) .wpforms-field-row-block { flex-basis: 100%; }
.wpforms-render-modern .wpforms-form .wpforms-field-row + .wpforms-field-row { margin-top: 12px; }
.wpforms-render-modern .wpforms-form fieldset { min-width: 0; }

/* 3. Labels --------------------------------------------------------------- */
.wpforms-render-modern .wpforms-form .wpforms-field-label,
.wpforms-render-modern .wpforms-form legend.wpforms-field-label {
  font-weight: 700; letter-spacing: 0; margin: 0 0 10px; padding: 0;
}
.wpforms-render-modern .wpforms-form .wpforms-required-label { color: var(--hod-red); font-weight: 700; }
.wpforms-render-modern .wpforms-form .wpforms-field-description { color: var(--hod-muted); font-size: 14px; line-height: 1.5; margin-top: 8px; }
.wpforms-render-modern .wpforms-form .wpforms-field-sublabel { font-weight: 600; }

/* 4. Inputs ----------------------------------------------------------------- */
.wpforms-render-modern .wpforms-form input[type=text],
.wpforms-render-modern .wpforms-form input[type=email],
.wpforms-render-modern .wpforms-form input[type=tel],
.wpforms-render-modern .wpforms-form input[type=url],
.wpforms-render-modern .wpforms-form input[type=number],
.wpforms-render-modern .wpforms-form input[type=date],
.wpforms-render-modern .wpforms-form select,
.wpforms-render-modern .wpforms-form textarea {
  font-family: inherit; box-shadow: none; transition: border-color .25s ease, box-shadow .25s ease;
}
.wpforms-render-modern .wpforms-form textarea { min-height: 160px; padding-top: 14px; line-height: 1.55; }
.wpforms-render-modern .wpforms-form input:not([type=checkbox]):not([type=radio]):focus,
.wpforms-render-modern .wpforms-form select:focus,
.wpforms-render-modern .wpforms-form textarea:focus {
  border-color: var(--hod-navy); box-shadow: 0 0 0 4px rgba(35,48,122,.12); outline: none;
}
.wpforms-render-modern .wpforms-form input::placeholder,
.wpforms-render-modern .wpforms-form textarea::placeholder { color: #8A92B0; opacity: 1; }

/* 5. Choices become pills (radio, checkbox, payment choices) --------------- */
.wpforms-render-modern .wpforms-form .wpforms-field:is(.wpforms-field-radio,.wpforms-field-checkbox,.wpforms-field-payment-multiple,.wpforms-field-payment-checkbox):not(.hod-tick) ul:not(:has(> li:only-child)) {
  display: flex !important; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: none !important;
}
.wpforms-render-modern .wpforms-form .wpforms-field:is(.wpforms-field-radio,.wpforms-field-checkbox,.wpforms-field-payment-multiple,.wpforms-field-payment-checkbox):not(.hod-tick) ul:not(:has(> li:only-child)) > li {
  position: relative; margin: 0 !important; padding: 0 !important; width: auto !important; max-width: 100%;
}
.wpforms-render-modern .wpforms-form .wpforms-field:is(.wpforms-field-radio,.wpforms-field-checkbox,.wpforms-field-payment-multiple,.wpforms-field-payment-checkbox):not(.hod-tick) ul:not(:has(> li:only-child)) > li > input {
  position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important; pointer-events: none;
}
.wpforms-render-modern .wpforms-form .wpforms-field:is(.wpforms-field-radio,.wpforms-field-checkbox,.wpforms-field-payment-multiple,.wpforms-field-payment-checkbox):not(.hod-tick) ul:not(:has(> li:only-child)) > li > label {
  display: inline-flex !important; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px !important;
  border-radius: 999px; border: 2px solid var(--hod-line); background: #FFFFFF; color: var(--hod-night);
  font-weight: 700; font-size: 15px; line-height: 1.2; cursor: pointer; margin: 0 !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.wpforms-render-modern .wpforms-form .wpforms-field:is(.wpforms-field-radio,.wpforms-field-checkbox,.wpforms-field-payment-multiple,.wpforms-field-payment-checkbox):not(.hod-tick) ul:not(:has(> li:only-child)) > li > label::before,
.wpforms-render-modern .wpforms-form .wpforms-field:is(.wpforms-field-radio,.wpforms-field-checkbox,.wpforms-field-payment-multiple,.wpforms-field-payment-checkbox):not(.hod-tick) ul:not(:has(> li:only-child)) > li > label::after { display: none !important; }
.wpforms-render-modern .wpforms-form .wpforms-field:not(.hod-tick) ul:not(:has(> li:only-child)) > li > label:hover { border-color: var(--hod-navy); }
.wpforms-render-modern .wpforms-form .wpforms-field:not(.hod-tick) ul:not(:has(> li:only-child)) > li > input:checked + label {
  background: var(--hod-navy); border-color: var(--hod-navy); color: #FFFFFF;
}
.wpforms-render-modern .wpforms-form .wpforms-field:not(.hod-tick) ul:not(:has(> li:only-child)) > li > input:focus-visible + label {
  outline: 3px solid var(--hod-red); outline-offset: 2px;
}
.wpforms-render-modern .wpforms-form .wpforms-field.hod-wide ul > li { flex: 1 1 0; }
.wpforms-render-modern .wpforms-form .wpforms-field.hod-wide ul > li > label { width: 100%; }

/* Single tick box (consent, "publish my testimony") stays a tick box, styled */
.wpforms-render-modern .wpforms-form .wpforms-field ul:has(> li:only-child) > li,
.wpforms-render-modern .wpforms-form .wpforms-field.hod-tick ul > li {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px !important; border-radius: 16px; background: var(--hod-mist);
}
.wpforms-render-modern .wpforms-form input[type=checkbox]:checked::before { border-color: var(--hod-red); }
.wpforms-render-modern .wpforms-form input[type=checkbox]:checked::after,
.wpforms-render-modern .wpforms-form input[type=radio]:checked::after { border-color: #FFFFFF; }

/* 6. Dropdowns -------------------------------------------------------------- */
.wpforms-render-modern .wpforms-form select { cursor: pointer; }
.wpforms-render-modern .wpforms-form .choices__inner { border-radius: 16px !important; border-width: 2px !important; }

/* 7. File upload --------------------------------------------------------- */
.wpforms-render-modern .wpforms-form .wpforms-uploader {
  border: 2px dashed #AEB5D0 !important; border-radius: 24px !important; background: #F6F7FB !important; padding: 36px 20px !important;
  transition: border-color .25s ease, background-color .25s ease;
}
.wpforms-render-modern .wpforms-form .wpforms-uploader:hover { border-color: var(--hod-navy) !important; background: var(--hod-mist) !important; }
.wpforms-render-modern .wpforms-form .wpforms-uploader .dz-message svg { color: var(--hod-navy); width: 40px; height: 40px; }
.wpforms-render-modern .wpforms-form .wpforms-uploader .modern-title { font-weight: 800; color: var(--hod-night); }

/* 8. Buttons: submit and multi-page --------------------------------------- */
.wpforms-render-modern .wpforms-form .wpforms-submit-container { padding-top: 6px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.wpforms-render-modern .wpforms-form button.wpforms-submit,
.wpforms-render-modern .wpforms-form .wpforms-page-button {
  font-family: inherit !important; font-weight: 700 !important; letter-spacing: 0; white-space: nowrap;
  border-radius: 999px !important; min-height: 56px; height: auto !important; padding: 0 30px !important;
  transition: background-color .25s ease, color .25s ease, transform .25s ease !important;
}
.wpforms-render-modern .wpforms-form button.wpforms-submit:hover,
.wpforms-render-modern .wpforms-form .wpforms-page-button.wpforms-page-next:hover {
  background: var(--hod-night) !important; color: #FFFFFF !important; transform: translateY(-1px);
}
.wpforms-render-modern .wpforms-form .wpforms-page-button.wpforms-page-prev {
  background: transparent !important; color: var(--hod-night) !important; box-shadow: inset 0 0 0 2px var(--hod-line) !important;
}
.wpforms-render-modern .wpforms-form .wpforms-page-button.wpforms-page-prev:hover { box-shadow: inset 0 0 0 2px var(--hod-night) !important; }
.wpforms-render-modern .wpforms-form .wpforms-pagebreak-left,
.wpforms-render-modern .wpforms-form .wpforms-pagebreak-split { display: flex; gap: 12px; flex-wrap: wrap; }
.wpforms-render-modern .wpforms-form .wpforms-submit-spinner,
.wpforms-render-modern .wpforms-form .wpforms-page-button-group img { width: 24px; height: 24px; }

/* 9. Progress indicator (multi-page forms) ---------------------------------- */
.wpforms-render-modern .wpforms-page-indicator { margin: 0 0 24px !important; border: 0 !important; padding: 0 !important; }
.wpforms-render-modern .wpforms-page-indicator .wpforms-page-indicator-page-title,
.wpforms-render-modern .wpforms-page-indicator .wpforms-page-indicator-steps { font-size: 14px !important; font-weight: 700 !important; color: var(--hod-muted) !important; }
.wpforms-render-modern .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress-wrap {
  height: 6px !important; border-radius: 6px !important; background: var(--hod-line) !important; margin-top: 10px !important; overflow: hidden;
}
.wpforms-render-modern .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress {
  background-color: var(--hod-red) !important; border-radius: 6px !important; height: 6px !important;
}
.wpforms-render-modern .wpforms-page-indicator.circles .wpforms-page-indicator-page-number { background: var(--hod-mist) !important; color: var(--hod-night) !important; }
.wpforms-render-modern .wpforms-page-indicator.circles .active .wpforms-page-indicator-page-number { background: var(--hod-red) !important; color: #FFFFFF !important; }

/* 10. Errors ------------------------------------------------------------------- */
.wpforms-render-modern .wpforms-form .wpforms-field input.wpforms-error,
.wpforms-render-modern .wpforms-form .wpforms-field textarea.wpforms-error,
.wpforms-render-modern .wpforms-form .wpforms-field select.wpforms-error { border-color: var(--hod-red) !important; }
.wpforms-render-modern .wpforms-form em.wpforms-error,
.wpforms-render-modern .wpforms-form label.wpforms-error {
  display: flex; align-items: center; gap: 6px; margin-top: 8px; font-style: normal; font-weight: 600; font-size: 14px; color: var(--hod-red-dark);
}
.wpforms-render-modern .wpforms-error-container { border-radius: 16px; background: #FDE8E9; color: var(--hod-red-dark); padding: 14px 18px; font-weight: 600; }

/* 11. Confirmation message (AJAX submit) ---------------------------------------- */
.wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
  background: #FFFFFF !important; border: 0 !important; border-radius: 28px !important; padding: 32px !important;
  color: var(--hod-body, #3A4058) !important; font-family: 'Archivo', system-ui, sans-serif; font-size: 18px; line-height: 1.55;
  box-shadow: inset 6px 0 0 #D2191F;
}
.wpforms-confirmation-container-full p:first-child strong,
.wpforms-confirmation-container-full h3 {
  display: block; margin: 0 0 8px; font-stretch: 125%; font-weight: 900; font-size: clamp(30px, 5vw, 44px); line-height: .92; text-transform: uppercase; color: #0A0F2C;
}

/* 12. Dark surfaces (add class hod-dark to the form) -------------------------- */
div.wpforms-container.wpforms-render-modern.hod-dark,
div.wpforms-container.wpforms-render-modern:has(form.hod-dark) {
  --wpforms-label-color: #FFFFFF !important;
  --wpforms-label-sublabel-color: #C9CEE0 !important;
  --wpforms-field-background-color: rgba(255,255,255,.08) !important;
  --wpforms-field-border-color: rgba(255,255,255,.28) !important;
  --wpforms-field-text-color: #FFFFFF !important;
  --wpforms-label-error-color: #FFB4B7 !important;
  color: #FFFFFF;
}
.wpforms-container:is(.hod-dark,:has(form.hod-dark)) .wpforms-form :is(.wpforms-field-label,.wpforms-field-label-inline,legend,.wpforms-field-sublabel,.wpforms-field-description) { color: var(--wpforms-label-color); }
.wpforms-container:is(.hod-dark,:has(form.hod-dark)) .wpforms-form .wpforms-field-sublabel,
.wpforms-container:is(.hod-dark,:has(form.hod-dark)) .wpforms-form .wpforms-field-description { color: #C9CEE0; }
.wpforms-container:is(.hod-dark,:has(form.hod-dark)) .wpforms-form input:not([type=checkbox]):not([type=radio]):focus,
.wpforms-container:is(.hod-dark,:has(form.hod-dark)) .wpforms-form textarea:focus { border-color: #FFFFFF; box-shadow: 0 0 0 4px rgba(255,255,255,.15); }
.wpforms-container:is(.hod-dark,:has(form.hod-dark)) .wpforms-form .wpforms-field:not(.hod-tick) ul:not(:has(> li:only-child)) > li > label { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.35); }
.wpforms-container:is(.hod-dark,:has(form.hod-dark)) .wpforms-form .wpforms-field:not(.hod-tick) ul:not(:has(> li:only-child)) > li > input:checked + label { background: #FFFFFF; color: #0A0F2C; border-color: #FFFFFF; }
.wpforms-container:is(.hod-dark,:has(form.hod-dark)) .wpforms-form ul:has(> li:only-child) > li { background: rgba(255,255,255,.08); }
.wpforms-container:is(.hod-dark,:has(form.hod-dark)) .wpforms-form button.wpforms-submit:hover { background: #FFFFFF !important; color: #0A0F2C !important; }

/* 13. Phones ----------------------------------------------------------------- */
@media (max-width: 600px) {
  .wpforms-render-modern .wpforms-form .wpforms-field-row { flex-direction: column; }
  .wpforms-render-modern .wpforms-form .wpforms-field-row .wpforms-field-row-block { width: 100% !important; padding: 0 !important; flex: 0 0 auto; }
  .wpforms-render-modern .wpforms-form :is(.wpforms-layout-row, .wpforms-field-layout-columns) { flex-direction: column; flex-wrap: nowrap; }
  .wpforms-render-modern .wpforms-form .wpforms-layout-column { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
  .wpforms-render-modern .wpforms-form button.wpforms-submit { width: 100%; }
  .wpforms-render-modern .wpforms-form .wpforms-field:is(.wpforms-one-half,.wpforms-one-third,.wpforms-two-thirds,.wpforms-one-fourth,.wpforms-three-fourths,.wpforms-one-fifth,.wpforms-two-fifths,.wpforms-three-fifths,.wpforms-four-fifths,.wpforms-one-sixth,.wpforms-five-sixths) { float: none !important; width: 100% !important; margin-left: 0 !important; clear: both; }
}

@media (prefers-reduced-motion: reduce) {
  .wpforms-render-modern .wpforms-form * { transition: none !important; }
}