/* =========================================================
   YES/NO CUSTOM IMAGE BUTTONS — COMPLETE, DROP-IN
   - hides PF's native labels
   - paints your artwork (normal + pressed)
   - smaller bars + neat vertical gap
   - reasonable max width on desktop, full width on mobile
   ========================================================= */

/* ---------- size knobs (tweak these) ---------- */
:root {
  --yn-height: 42px;     /* desktop bar height (was 56px) */
  --yn-gap: 10px;        /* vertical space between Yes & No */
  --yn-maxw: 400px;      /* max width of the group on desktop */
}
@media (max-width: 520px) {
  :root { --yn-height: 44px; }   /* shorter bars on phones */
}

/* group container: cap width on desktop, keep flush-left */
.YesNo {
  max-width: var(--yn-maxw) !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* each bar fills the group width and uses your artwork */
.btn-raised.YesNo__button {
  display: block !important;
  width: 100% !important;
  height: var(--yn-height) !important;
  min-height: var(--yn-height) !important;

  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;

  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;

  /* nuke any native text just in case */
  color: transparent !important;
  font-size: 0 !important;
  text-shadow: none !important;
  background-color: transparent !important;
}

/* vertical gap between the two bars */
.YesNo .YesNo__button + .YesNo__button {
  margin-top: var(--yn-gap) !important;
}

/* hide PF's built-in option label nodes (belt + suspenders) */
.YesNo__button span,
.YesNo__button .btn__label,
.YesNo__button .label,
.YesNo__button .Answer__label {
  display: none !important;
}

/* NORMAL ARTWORK */
.btn-raised.YesNo__button:first-of-type {
  background-image: url('https://images.squarespace-cdn.com/content/61846170a7ce0e6241804465/88771d2d-167a-4b5e-b14e-5c8549aa618f/form_yes.png?content-type=image%2Fpng') !important;
}
.btn-raised.YesNo__button:last-of-type {
  background-image: url('https://images.squarespace-cdn.com/content/61846170a7ce0e6241804465/8cc7788d-8c49-4362-818a-ccffc494103b/form_no.png?content-type=image%2Fpng') !important;
}

/* PRESSED / SELECTED ARTWORK (cover PF’s various states) */
.btn-raised.YesNo__button:first-of-type[aria-checked="true"],
.btn-raised.YesNo__button:first-of-type.selected,
.btn-raised.YesNo__button:first-of-type.active,
.btn-raised.YesNo__button:first-of-type.btn-primary {
  background-image: url('https://images.squarespace-cdn.com/content/61846170a7ce0e6241804465/8c0be95b-a5a7-4384-a54f-7a0af6221b12/form_yes_pressed.png?content-type=image%2Fpng') !important;
}
.btn-raised.YesNo__button:last-of-type[aria-checked="true"],
.btn-raised.YesNo__button:last-of-type.selected,
.btn-raised.YesNo__button:last-of-type.active,
.btn-raised.YesNo__button:last-of-type.btn-primary {
  background-image: url('https://images.squarespace-cdn.com/content/61846170a7ce0e6241804465/5a7093c9-a942-494d-b618-d808480b483b/form_no_pressed.png?content-type=image%2Fpng') !important;
}

/* keyboard accessibility */
.btn-raised.YesNo__button:focus-visible {
  outline: 3px solid #7aa7ff !important;
  outline-offset: 2px !important;
}

/* ---------- optional utilities ---------- */
/* If art gets cropped when bars are short, add 'YesNo--contain' to that
   question's "Additional CSS classes" and this will preserve the full image. */
.YesNo--contain .btn-raised.YesNo__button { background-size: contain !important; }

/* =========================================================
   YES/NO: row on desktop, stacked on mobile
   ========================================================= */

/* Desktop/wide screens → two columns in one row */
@media (min-width: 820px) {
  .YesNo {
    display: flex !important;
    gap: var(--yn-gap) !important;        /* space between the two bars */
    max-width: var(--yn-maxw) !important; /* keep your cap */
  }
  .YesNo .YesNo__button {
    flex: 1 1 0 !important;               /* equal width columns */
    width: auto !important;               /* ignore 100% from stacked mode */
    margin: 0 !important;                 /* kill vertical margins */
  }
  /* remove the stacked-mode vertical gap on the second bar */
  .YesNo .YesNo__button + .YesNo__button {
    margin-top: 0 !important;
  }
}

/* Mobile/narrow → stacked (already your default) */
@media (max-width: 819.98px) {
  .YesNo {
    display: block !important;
  }
  .YesNo .YesNo__button {
    width: 100% !important;
  }
  .YesNo .YesNo__button + .YesNo__button {
    margin-top: var(--yn-gap) !important;
  }
}

/* Center ONLY the Yes/No buttons (keep everything else left) */
@media (min-width: 820px) {
  .YesNo {
    margin-left: auto !important;
    margin-right: auto !important;   /* centers the pair within its max width */
  }
}

/* ===============================
   Trim the air ABOVE questions
   (One-at-a-Time friendly)
   =============================== */

/* 1) Reduce the page/content top padding inside the form iframe */
.pfe-one-at-a-time .pfe-page,
.one-at-a-time .form__page,
.pf-one-at-a-time .pf-page,
.pfe-one-at-a-time .pfe-content,
.one-at-a-time .form__content,
.pf-one-at-a-time .pf-content {
  padding-top: 8px !important;      /* was ~24–40px in many themes */
}

/* 2) Remove extra top margin from the first visible question on a page */
.pfe-one-at-a-time .pfe-page > .pfe-question:first-of-type,
.one-at-a-time .form__page > .form__question:first-of-type,
.pf-one-at-a-time .pf-page > .pf-question:first-of-type {
  margin-top: 4px !important;       /* keep a tiny buffer so it’s not flush */
}

/* 3) Some themes add top margin on the title rich-text itself — zero it out
      when it’s the first element in the first question */
.pfe-one-at-a-time .pfe-page > *:first-child h1:first-child,
.pfe-one-at-a-time .pfe-page > *:first-child h2:first-child,
.one-at-a-time .form__page > *:first-child h1:first-child,
.one-at-a-time .form__page > *:first-child h2:first-child,
.pf-one-at-a-time .pf-page > *:first-child h1:first-child,
.pf-one-at-a-time .pf-page > *:first-child h2:first-child {
  margin-top: 0 !important;
}

/* 4) Kill any spacer blocks that might sit above the first question */
.pfe-block--spacer, .pf-spacer, .form__spacer {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}