/* ============================================================
   KAJABI EMBEDDED FORMS — Charisa Munroe-Wilborn
   ============================================================
   Targets the exact HTML Kajabi injects from:
   charisamunroe.mykajabi.com/forms/.../embed.js

   REAL DOM STRUCTURE (from browser inspect):
   ───────────────────────────────────────────
   div.kajabi-embed                        ← your wrapper
     div#kajabi-form.kajabi-form--inline   ← Kajabi root
       form
         div.kajabi-form__content
           div.kajabi-form__title          ← empty, hidden
           div.kajabi-form__subtitle       ← empty, hidden
           fieldset
             div.text-field.kajabi-form__form-item
               input[type="text"]
             div.email-field.kajabi-form__form-item
               input[type="email"]
             button.kajabi-form__btn
                    .kajabi-form__btn--block-mobile

   WHY !important
   ──────────────
   Kajabi loads its own stylesheet at runtime:
   kajabi-app-assets.kajabi-cdn.com/assets/form_embed-*.css
   That stylesheet uses high-specificity selectors and arrives
   after our CSS. !important is the only reliable override.
   All rules scoped inside .kajabi-embed — nothing leaks out.

   NOTE: Kajabi also loads Open Sans via Google Fonts.
   We override font-family everywhere back to DM Sans.
   ============================================================ */


/* ── RESET KAJABI'S OUTER CONTAINER ─────────────────────── */
.kajabi-embed #kajabi-form,
.kajabi-embed .kajabi-form--inline {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* ── RESET THE <FORM> TAG ────────────────────────────────── */
.kajabi-embed form {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── HIDE EMPTY TITLE / SUBTITLE ────────────────────────── */
.kajabi-embed .kajabi-form__title:empty,
.kajabi-embed .kajabi-form__subtitle:empty {
  display: none !important;
}
.kajabi-embed .kajabi-form__title,
.kajabi-embed .kajabi-form__subtitle {
  font-family: 'DM Sans', sans-serif !important;
  font-family: var(--sans) !important;
  display: none !important;
}

/* ── CONTENT WRAPPER ─────────────────────────────────────── */
.kajabi-embed .kajabi-form__content {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  max-width: 100% !important;
}

/* ── FIELDSET — horizontal flex row ─────────────────────── */
.kajabi-embed fieldset {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: flex-end !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
}

/* ── FIELD WRAPPERS ──────────────────────────────────────── */
.kajabi-embed .kajabi-form__form-item,
.kajabi-embed .text-field,
.kajabi-embed .email-field {
  flex: 1 1 160px !important;
  min-width: 160px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* ── INPUTS ──────────────────────────────────────────────── */
.kajabi-embed input[type="text"],
.kajabi-embed input[type="email"] {
  display: block !important;
  width: 100% !important;
  background: #fff !important;
  border: 1px solid #E4DCCC !important;
  border: 1px solid var(--rule) !important;
  color: #1A1208 !important;
  color: var(--text) !important;
  padding: 13px 16px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-family: var(--sans) !important;
  font-size: .88rem !important;
  line-height: 1.5 !important;
  border-radius: 1px !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color .2s, box-shadow .2s !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Placeholder */
.kajabi-embed input[type="text"]::placeholder,
.kajabi-embed input[type="email"]::placeholder {
  color: #8A7A65 !important;
  color: var(--text-lt) !important;
  opacity: 1 !important;
}

/* Focus ring */
.kajabi-embed input[type="text"]:focus,
.kajabi-embed input[type="email"]:focus {
  border-color: #C9A84C !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 168, 76, .12) !important;
  outline: none !important;
}

/* Parsley validation error border */
.kajabi-embed input.parsley-error,
.kajabi-embed input[aria-invalid="true"] {
  border-color: #A63347 !important;
  border-color: var(--burg-lt) !important;
  box-shadow: none !important;
}


/* ── SUBMIT BUTTON ───────────────────────────────────────── */
/* Exact classes: .kajabi-form__btn.kajabi-form__btn--block-mobile */
.kajabi-embed #kajabi-form .kajabi-form__btn,
.kajabi-embed #kajabi-form button[type="submit"] {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #7D1F2E !important;
  background: var(--burg) !important;
  background-color: #7D1F2E !important;
  background-color: var(--burg) !important;
  color: #fff !important;
  padding: 13px 28px !important;
  border: none !important;
  font-family: 'DM Sans', sans-serif !important;
  font-family: var(--sans) !important;
  font-size: .67rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  border-radius: 1px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background .22s, transform .22s, box-shadow .22s !important;
  /* Override Kajabi's width:100% from .kajabi-form__btn--block-mobile */
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 48px !important;
  align-self: flex-end !important;
  box-shadow: none !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.kajabi-embed #kajabi-form .kajabi-form__btn:hover,
.kajabi-embed #kajabi-form button[type="submit"]:hover {
  background: #A63347 !important;
  background: var(--burg-lt) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(125, 31, 46, .25) !important;
}

/* Disabled / submitting — Kajabi sets [disabled] via data-kjb-disable-on-submit */
.kajabi-embed #kajabi-form .kajabi-form__btn:disabled,
.kajabi-embed #kajabi-form button[type="submit"]:disabled,
.kajabi-embed #kajabi-form button[disabled] {
  opacity: .65 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── PARSLEY VALIDATION ERRORS ───────────────────────────── */
.kajabi-embed .parsley-errors-list,
.kajabi-embed ul.parsley-errors-list {
  list-style: none !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
}
.kajabi-embed .parsley-errors-list li,
.kajabi-embed .parsley-required,
.kajabi-embed .parsley-type {
  font-family: 'DM Sans', sans-serif !important;
  font-family: var(--sans) !important;
  font-size: .68rem !important;
  color: #A63347 !important;
  color: var(--burg-lt) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ── SUCCESS STATE ───────────────────────────────────────── */
/* Kajabi replaces form content with a success message on submit */
.kajabi-embed .kajabi-form__success-message,
.kajabi-embed .kajabi-form__submitted {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-family: var(--serif) !important;
  font-size: clamp(1rem, 1.6vw, 1.15rem) !important;
  font-style: italic !important;
  color: #2D6B74 !important;
  color: var(--teal) !important;
  text-align: center !important;
  padding: 24px 0 !important;
  background: transparent !important;
  line-height: 1.65 !important;
}

/* ── RESPONSIVE — MOBILE 640px ───────────────────────────── */
@media (max-width: 640px) {
  .kajabi-embed fieldset {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .kajabi-embed .kajabi-form__form-item,
  .kajabi-embed .text-field,
  .kajabi-embed .email-field {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: unset !important;
  }
  .kajabi-embed .kajabi-form__btn,
  .kajabi-embed button[type="submit"] {
    width: 100% !important;
    align-self: stretch !important;
  }
}