/**
 * Ninja Forms — styled to match the theme chrome.
 *
 * Ninja Forms ships its own stylesheet with high-specificity selectors and
 * inline-ish defaults, so `!important` is unavoidable in places. It is used
 * only where the plugin actually overrides us, not as a blanket habit.
 *
 * Form tokens live here rather than in style.css so this file stays
 * self-contained and drop-in; everything else reuses the theme's tokens.
 */

:root {
  --form-field-h: 52px;
  --form-radius: var(--radius-sm, 4px);
  --form-border: var(--color-border, #e2e2df);
  --form-border-strong: var(--color-text, #16181d);
  --form-error: #c8102e;
  --form-success: #1c7a43;

  /* Themed through tokens rather than a second set of selectors: the base
     rules below carry high specificity (Ninja Forms forces the `:not()`
     chains), so a dark-context override written as extra selectors loses the
     specificity race. Overriding the token wins every time. */
  --form-field-bg: var(--color-surface, #ffffff);
  --form-field-text: var(--color-text, #16181d);
  --form-label: var(--color-text-muted, #61666f);
  --form-placeholder: #9aa0a8;
  --form-control-bg: var(--color-surface, #ffffff);
  --form-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2361666f' stroke-width='1.6' stroke-linecap='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
}

/* =========================================================================
   Shell
   ====================================================================== */
.nf-form-cont {
  background: transparent !important;
  color: var(--color-text);
}

.nf-form-wrap {
  max-width: 100%;
}

.nf-form-title h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-4);
}

/* "Fields marked with * are required" — hidden: the asterisks already say it. */
.nf-form-fields-required {
  display: none !important;
}

/* Honeypot must never be visible. */
.nf-form-hp,
.nf-form-hp * {
  display: none !important;
}

/* =========================================================================
   Field rows and cells
   Ninja Forms lays multi-column forms out with .nf-row / .nf-cell and gives
   cells inline percentage widths, so only the gutters are ours.
   ====================================================================== */
.nf-form-content {
  padding: 0 !important;
  max-width: none;
}

.nf-form-content .nf-row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(-1 * var(--space-2));
}

.nf-form-content .nf-cell {
  padding-inline: var(--space-2) !important;
}

.nf-field-container {
  margin-bottom: var(--space-4) !important;
  padding-inline: 0 !important;
}

/* Ninja Forms writes cell widths as inline styles, so stacking them on a phone
   needs `!important` — a stylesheet rule alone cannot beat a style attribute.
   Two 50% cells at 390px leave roughly 20 characters per field. */
@media (max-width: 600px) {
  .nf-form-content .nf-cell {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* The submit row does not need the same gap below it as a field. */
.submit-container .nf-field-container,
.nf-field-container.submit-container {
  margin-bottom: 0 !important;
}

/* =========================================================================
   Labels, descriptions, required marker
   ====================================================================== */
.nf-form-cont .nf-field-label label,
.nf-form-cont .nf-field-label .nf-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--label-size, 0.72rem) !important;
  letter-spacing: var(--label-tracking, 0.13em);
  text-transform: uppercase;
  font-weight: 500 !important;
  color: var(--form-label) !important;
  margin-bottom: var(--space-2) !important;
  line-height: 1.4;
}

.nf-field-description,
.nf-field-description p {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: var(--space-2) 0 0;
}

.ninja-forms-req-symbol {
  color: var(--form-error) !important;
  margin-left: 2px;
}

/* Label position variants Ninja Forms sets on .field-wrap. */
.field-wrap.label-right .nf-field-label,
.field-wrap.label-left .nf-field-label {
  display: flex;
  align-items: center;
}

.field-wrap.label-hidden .nf-field-label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================================================
   Text-ish inputs, textarea, select
   ====================================================================== */
.nf-form-content input[type="text"],
.nf-form-content input[type="email"],
.nf-form-content input[type="tel"],
.nf-form-content input[type="number"],
.nf-form-content input[type="url"],
.nf-form-content input[type="password"],
.nf-form-content input[type="date"],
.nf-form-content input.ninja-forms-field:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.nf-form-content textarea,
.nf-form-content select.ninja-forms-field:not([multiple]) {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--form-field-h);
  padding: var(--space-3) var(--space-4) !important;
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  line-height: 1.4;
  color: var(--form-field-text) !important;
  background-color: var(--form-field-bg) !important;
  border: 1px solid var(--form-border) !important;
  border-radius: var(--form-radius) !important;
  /* The plugin's default inset shadow reads as a dated bevel. */
  box-shadow: none !important;
  text-align: left !important;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.nf-form-content textarea {
  min-height: 150px;
  resize: vertical;
}

.nf-form-content input::placeholder,
.nf-form-content textarea::placeholder {
  color: var(--form-placeholder) !important;
  opacity: 1;
  font-weight: 400;
  background: transparent !important;
}

/* One focus treatment for every control: darkened border plus a soft ring, so
   the field reads as active without the browser's default outline. */
.nf-form-content input:focus,
.nf-form-content textarea:focus,
.nf-form-content select:focus {
  outline: none !important;
  border-color: var(--form-border-strong) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #1b6ef3) 22%, transparent) !important;
}

.nf-form-content input:disabled,
.nf-form-content textarea:disabled,
.nf-form-content select:disabled {
  background-color: var(--color-bg-alt, #f5f5f3) !important;
  color: var(--color-text-muted) !important;
  cursor: not-allowed;
}

/* --- Select: native arrow removed, chevron drawn to match the nav ------- */
.nf-form-content select.ninja-forms-field:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-6) !important;
  background-image: var(--form-chevron) !important;
  background-repeat: no-repeat !important;
  background-position: right var(--space-4) center !important;
  background-size: 12px 8px !important;
  cursor: pointer;
}

/* =========================================================================
   Checkboxes and radios
   Ninja Forms draws these with pseudo-elements on the label, so the box and
   the tick are both ours to restyle.
   ====================================================================== */
/* Lists of options carry no bullets and no indent. Ninja Forms usually resets
   this itself, but relying on the plugin's reset means a plugin update can put
   bullets back. */
.nf-form-content .listcheckbox-wrap .nf-field-element ul,
.nf-form-content .listradio-wrap .nf-field-element ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nf-form-content .listcheckbox-wrap .nf-field-element li,
.nf-form-content .listradio-wrap .nf-field-element li {
  margin: 0;
}

/* The real control is the styled label; the native input is hidden but kept
   focusable so keyboard and assistive tech still drive it. Hiding it here
   rather than trusting the plugin to do it avoids doubled-up controls. */
.nf-form-content .checkbox-wrap .nf-field-element input[type="checkbox"],
.nf-form-content .listcheckbox-wrap .nf-field-element input[type="checkbox"],
.nf-form-content .listradio-wrap .nf-field-element input[type="radio"] {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.nf-form-content .checkbox-wrap .nf-field-element label,
.nf-form-content .listcheckbox-wrap .nf-field-element label,
.nf-form-content .listradio-wrap .nf-field-element label {
  position: relative;
  display: inline-block;
  padding-left: 30px !important;
  margin-bottom: var(--space-2) !important;
  font-size: 0.92rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 400 !important;
  color: var(--color-text) !important;
  line-height: 1.5;
  cursor: pointer;
}

/* The box / circle. */
.nf-form-content .checkbox-wrap .nf-field-element label::before,
.nf-form-content .listcheckbox-wrap .nf-field-element label::before,
.nf-form-content .listradio-wrap .nf-field-element label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  background: var(--form-control-bg);
  border: 1px solid var(--form-border) !important;
  border-radius: 3px;
  transition: border-color var(--transition-base), background var(--transition-base);
}

.nf-form-content .listradio-wrap .nf-field-element label::before {
  border-radius: 50%;
}

/* The tick / dot, hidden until checked. */
.nf-form-content .checkbox-wrap .nf-field-element label::after,
.nf-form-content .listcheckbox-wrap .nf-field-element label::after,
.nf-form-content .listradio-wrap .nf-field-element label::after {
  content: "";
  position: absolute;
  opacity: 0;
  transition: opacity var(--transition-base);
  border: 0 !important;
  background: none !important;
}

.nf-form-content .checkbox-wrap .nf-field-element label::after,
.nf-form-content .listcheckbox-wrap .nf-field-element label::after {
  left: 6px;
  top: 6px;
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important;
  transform: rotate(45deg);
}

.nf-form-content .listradio-wrap .nf-field-element label::after {
  left: 5px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff !important;
}

.nf-form-content .nf-checked-label::before {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.nf-form-content .nf-checked-label::after {
  opacity: 1;
}

/* Keyboard focus has to be visible on a hidden native input. */
.nf-form-content input[type="checkbox"]:focus-visible + label::before,
.nf-form-content input[type="radio"]:focus-visible + label::before {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #1b6ef3) 22%, transparent);
}

/* A single "label-right" checkbox should not inherit the input frame. */
.nf-form-content .checkbox-container.label-right .field-wrap {
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* =========================================================================
   Submit button — matches the theme's .btn-primary
   ====================================================================== */
.nf-form-content input[type="submit"],
.nf-form-content button[type="submit"],
.nf-form-content .nf-element[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 180px;
  min-height: var(--form-field-h);
  padding: var(--space-3) var(--space-6) !important;
  font-family: var(--font-heading) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--color-primary-contrast, #fff) !important;
  background: var(--color-primary) !important;
  border: 0 !important;
  border-radius: var(--form-radius) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-base);
}

.nf-form-content input[type="submit"]:hover,
.nf-form-content button[type="submit"]:hover,
.nf-form-content input[type="submit"]:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 82%, white) !important;
  transform: translateY(-1px);
}

.nf-form-content input[type="submit"]:disabled {
  opacity: 0.55;
  cursor: progress;
  transform: none;
}

@media (max-width: 560px) {
  .nf-form-content input[type="submit"],
  .nf-form-content button[type="submit"] {
    width: 100%;
  }
}

/* =========================================================================
   Validation and response messages
   ====================================================================== */
.nf-error-msg,
.nf-error .nf-error-msg {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.8rem !important;
  font-weight: 500;
  color: var(--form-error) !important;
  text-align: left !important;
}

.nf-error.field-wrap .nf-field-element input,
.nf-error.field-wrap .nf-field-element textarea,
.nf-error.field-wrap .nf-field-element select,
.nf-error .ninja-forms-field {
  border-color: var(--form-error) !important;
}

/* The plugin appends a glyph via ::after on the element wrapper; the coloured
   border already carries the message, so it is suppressed. */
.nf-error.field-wrap .nf-field-element::after,
.nf-pass.field-wrap .nf-field-element::after {
  display: none !important;
}

/* Form-level error summary. Left in flow rather than the reference's
   position: fixed toast — a message pinned to the viewport corner gets missed
   next to the field that caused it.
   `:not(:empty)` matters: Ninja Forms renders these containers on every page
   load and only fills them later, so styling them unconditionally paints an
   empty coloured block above every form. */
.nf-form-cont .nf-form-errors:not(:empty),
.nf-after-form-content .nf-error-msg:not(:empty) {
  position: static !important;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--form-error) 8%, transparent);
  border-left: 3px solid var(--form-error);
  border-radius: var(--form-radius);
  color: var(--form-error) !important;
  font-size: 0.88rem;
}

.nf-response-msg:not(:empty) {
  display: block;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--form-success) 8%, transparent);
  border-left: 3px solid var(--form-success);
  border-radius: var(--form-radius);
  color: var(--color-text);
  font-size: 0.95rem;
  margin-bottom: var(--space-4);
}

.nf-response-msg:empty {
  display: none;
}

.nf-response-msg p:last-child {
  margin-bottom: 0;
}

/* =========================================================================
   Extras: file upload, date picker, reCAPTCHA, spinner, multi-part
   ====================================================================== */
.nf-form-content .file_upload-wrap .nf-field-element {
  border: 1px dashed var(--form-border);
  border-radius: var(--form-radius);
  padding: var(--space-4);
  text-align: center;
}

.nf-fu-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--color-primary);
}

.nf-form-content .nf-loading-spinner {
  border-top-color: var(--color-primary) !important;
}

.nf-form-content .recaptcha-wrap .nf-field-element {
  overflow-x: auto;
}

.nf-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

.nf-breadcrumbs .nf-breadcrumb {
  color: var(--color-text-muted);
}

.nf-breadcrumbs .nf-breadcrumb-current {
  color: var(--color-text);
  font-weight: 600;
}

.nf-form-content .hr-wrap hr {
  border: 0;
  border-top: 1px solid var(--form-border);
  margin-block: var(--space-4);
}

/* =========================================================================
   Dark context
   Add .lbx-form-dark to any wrapper (a Stackable block, a section) to place a
   form on one of the dark bands. Applied automatically inside the footer.

   Token overrides only, no duplicated selectors, so nothing can lose a
   specificity race against the base rules above.
   ====================================================================== */
.lbx-form-dark,
.site-footer {
  --form-border: rgba(255, 255, 255, 0.22);
  --form-border-strong: #ffffff;
  --form-field-bg: rgba(255, 255, 255, 0.06);
  --form-field-text: var(--color-footer-text, #f2f3f4);
  --form-label: var(--color-footer-muted, #8f959e);
  --form-placeholder: rgba(255, 255, 255, 0.5);
  --form-control-bg: rgba(255, 255, 255, 0.06);
  --form-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
}

.lbx-form-dark .nf-form-cont,
.site-footer .nf-form-cont,
.lbx-form-dark .nf-form-title h3,
.site-footer .nf-form-title h3 {
  color: var(--color-footer-text, #f2f3f4);
}

/* Option labels read as body text, so they follow the field colour rather than
   the muted label colour. */
.lbx-form-dark .nf-form-content .nf-field-element label,
.site-footer .nf-form-content .nf-field-element label {
  color: var(--form-field-text) !important;
}

.lbx-form-dark .nf-field-description,
.lbx-form-dark .nf-field-description p,
.site-footer .nf-field-description,
.site-footer .nf-field-description p {
  color: var(--color-footer-muted, #8f959e);
}

.lbx-form-dark .nf-form-content input:disabled,
.lbx-form-dark .nf-form-content textarea:disabled,
.site-footer .nf-form-content input:disabled,
.site-footer .nf-form-content textarea:disabled {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

/* =========================================================================
   Inline layout
   Add .lbx-form-inline for a newsletter-style single row: field flush against
   the button. Falls back to stacked below 560px.
   ====================================================================== */
@media (min-width: 561px) {
  .lbx-form-inline .nf-form-content .nf-row {
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    margin-inline: 0;
  }

  .lbx-form-inline .nf-form-content .nf-cell {
    padding-inline: 0 !important;
  }

  .lbx-form-inline .nf-field-container {
    margin-bottom: 0 !important;
  }

  .lbx-form-inline .nf-form-content input[type="email"],
  .lbx-form-inline .nf-form-content input[type="text"] {
    border-right: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  .lbx-form-inline .nf-form-content input[type="submit"] {
    min-width: 0;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }

  .lbx-form-inline .nf-form-content input[type="submit"]:hover {
    transform: none;
  }
}

/* =========================================================================
   Motion preferences
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .nf-form-content input,
  .nf-form-content textarea,
  .nf-form-content select,
  .nf-form-content input[type="submit"],
  .nf-form-content label::before,
  .nf-form-content label::after {
    transition: none !important;
  }

  .nf-form-content input[type="submit"]:hover {
    transform: none;
  }
}