/* ==========================================================================
   "Stay in touch" band.

   Geometry traced from the mockup and fitted to a circle, residual under half a
   pixel across 387 sampled edge points:

     radius    0.8659 x band height
     centre x  32.18% of the band width
     centre y  0.7213 x band height from the top

   The shape is a UNION of a rectangle and a circle, not a clipped path: the
   Sandstone ground sits under everything, the photograph is laid over its right
   portion, and a Sandstone circle is laid back over the photograph's left edge.
   That reproduces the concave bite exactly, needs no clip-path or mask, and
   degrades to a plain rectangle if anything fails rather than to nothing.
   ========================================================================== */

.gsjc-signup {
  --gsjc-arc-r:  0.8659;   /* x band height */
  --gsjc-arc-cx: 32.18%;   /* of band width  */
  --gsjc-arc-cy: 72.13%;   /* of band height */

  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--gsjc-surface-alt);
  min-height: clamp(24rem, 32vw, 29rem);
  display: flex;
  align-items: center;
}

/* The photograph must begin to the RIGHT of the circle's leftmost point, not
   the left of it — starting further left exposes a wedge of photo above the
   arc, where the circle has narrowed and no longer covers it. That is exactly
   what 8% did.

   The circle is narrowest at the band's top row, where its left edge sits at
   cx - sqrt(r^2 - cy^2) = 0.3218W - 0.4791H. At the mockup's proportions that
   is 20.6% of the width, and it rises as the band gets wider relative to its
   height — 23.6% at 2560px. 30% clears every plausible case with margin while
   still leaving the photo the larger share of the band. */
.gsjc-signup__photo {
  position: absolute;
  inset: 0 0 0 30%;
  z-index: 0;
  background-image: var(--gsjc-photo-sm);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 1025px) {
  .gsjc-signup__photo { background-image: var(--gsjc-photo); }
}

@media (min-width: 1800px) {
  .gsjc-signup__photo { background-image: var(--gsjc-photo-lg); }
}

/* height as a percentage of the band, then aspect-ratio to make the width
   follow — a width percentage would resolve against the band's WIDTH and the
   circle would distort as the viewport changed. */
.gsjc-signup__arc {
  position: absolute;
  z-index: 1;
  height: calc(var(--gsjc-arc-r) * 200%);
  aspect-ratio: 1;
  left: var(--gsjc-arc-cx);
  top: var(--gsjc-arc-cy);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--gsjc-surface-alt);
  pointer-events: none;
}

/* Aligns with ordinary page content — see watch.css for the reasoning. */
.gsjc-signup__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--global-content-width, var(--gsjc-container));
  margin-inline: auto;
  padding-inline: var(--global-content-edge-padding, 1.5rem);
}

.gsjc-signup__panel {
  /* Wide enough for First and Last side by side. The arc reaches roughly 860px
     at 1440, so a 30rem panel starting at the container edge still sits well
     clear of it. */
  max-width: 30rem;
  padding-block: var(--gsjc-space-2xl);
}

.gsjc-signup .gsjc-signup__title {
  margin: 0;
  font-size: var(--gsjc-fs-h1);
  color: var(--gsjc-ink);
}

.gsjc-signup .gsjc-signup__text {
  margin: var(--gsjc-space-2xs) 0 var(--gsjc-space-md);
  font-size: var(--gsjc-fs-small);
  color: var(--gsjc-ink-muted);
}

/* --- Gravity Forms -------------------------------------------------------
   Gravity Forms 2.9 ships a theme framework ("orbital") whose styling is driven
   by CSS custom properties. Restyling it by out-specifying its selectors is a
   fight that has to be re-fought at every plugin update, so the brand is
   applied through its OWN variables instead — the supported route, and it
   reaches states like hover and validation that hand-written overrides miss.

   Only colours and radii are set. Sizing, spacing and layout are left to the
   framework, which already places First and Last side by side and hides its
   honeypot field correctly.

   Contrast, on the Sandstone panel and white fields:
     field text   Umber on white        19.45:1
     labels       #5b5148 on Sandstone   5.90:1
     button       white on Aubergine    10.92:1
     button hover white on Umber        19.33:1
   -------------------------------------------------------------------------- */
/* Set on the FORM, not the wrapper, and that is the whole trick.
   Gravity Forms emits a per-form style block keyed by ID —
   `#gform_wrapper_2[data-form-index="0"].gform-theme { --gf-ctrl-... }` — and an
   ID beats any number of classes, so no class selector on the wrapper can win.
   Two earlier attempts lost silently and only partially: the button took the
   brand colour because GF does not set that one on the wrapper, while field
   borders and labels quietly kept GF's defaults.
   Custom properties resolve by INHERITANCE rather than specificity, so
   redefining them one level in — on the form inside the wrapper — beats the
   outer definition for everything the form contains, with no ID hard-coded and
   no !important. */
.gsjc-signup__form .gform_wrapper form {
  --gf-ctrl-bg-color: var(--gsjc-white);
  --gf-ctrl-border-color: var(--gsjc-line);
  --gf-ctrl-border-color-focus: var(--gsjc-primary);
  --gf-ctrl-color: var(--gsjc-ink);
  --gf-ctrl-radius: var(--gsjc-radius-sm);

  --gf-ctrl-label-color-primary: var(--gsjc-ink-muted);
  --gf-ctrl-label-color-secondary: var(--gsjc-ink-muted);
  --gf-ctrl-label-color-tertiary: var(--gsjc-ink-muted);
  --gf-ctrl-label-color-quaternary: var(--gsjc-ink-muted);
  --gf-ctrl-label-color-req: var(--gsjc-primary);

  --gf-ctrl-btn-bg-color-primary: var(--gsjc-primary);
  --gf-ctrl-btn-bg-color-hover-primary: var(--gsjc-umber);
  --gf-ctrl-btn-color-primary: var(--gsjc-white);
  --gf-ctrl-btn-color-hover-primary: var(--gsjc-white);
  --gf-ctrl-btn-border-color-primary: transparent;
  --gf-ctrl-btn-border-color-hover-primary: transparent;
  --gf-ctrl-btn-radius: var(--gsjc-radius-sm);
  --gf-ctrl-btn-text-transform: uppercase;
  --gf-ctrl-btn-letter-spacing: 0.08em;
  --gf-ctrl-btn-font-weight: var(--gsjc-weight-caption);
}

.gsjc-signup__form .gform_wrapper form { margin: 0; }

/* Labels are hidden VISUALLY, not removed. They stay in the DOM and stay
   associated with their inputs, so the field name is still announced; the
   prompt a sighted user sees comes from the placeholder set in inc/signup.php.
   The clip-based pattern rather than display:none, which would take them out of
   the accessibility tree and defeat the point.

   Three classes rather than !important: GF's own label rule is two, so this
   wins on specificity alone. The first version reached for !important and the
   suite rejected it, correctly. */
.gsjc-signup__form .gform_wrapper .gfield_label,
.gsjc-signup__form .gform_wrapper .ginput_complex label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* With the labels out of flow the rows sit far too far apart, so the gap is set
   here rather than left to the framework's label-aware spacing. */
.gsjc-signup__form .gform_wrapper .gform_fields {
  row-gap: var(--gsjc-space-2xs);
}

.gsjc-signup__form .gform_wrapper .gfield { margin: 0; }
.gsjc-signup__form .gform_wrapper .gform_footer { margin-top: var(--gsjc-space-sm); }

/* Editors only. */
.gsjc-signup .gsjc-signup__todo {
  margin: 0;
  padding: var(--gsjc-space-sm);
  background: var(--gsjc-accent);
  color: var(--gsjc-umber);
  font-size: var(--gsjc-fs-small);
}

.gsjc-signup__todo code { background: rgba(17, 12, 8, 0.12); padding: 0 0.25em; }

/* --- Narrow screens -------------------------------------------------------
   The arc is a wide-screen device. Below the breakpoint the photograph moves
   under the panel at full width and the circle is removed — scaled down it
   would crop the photo to a sliver and read as a mistake. */
/* 767, not 782. The old value was the WordPress admin's breakpoint and had no
   relationship to this band; 767 is the boundary the footer already used and
   the one Kadence treats as the top of "narrow". Measured before moving it:
   with the stacking rule suppressed at a 755px layout width, all four corners
   of both the title and the form still fall inside the cream circle, so the
   arc is legible well below where it used to be abandoned. The band therefore
   GAINS the 768-782 range rather than losing anything. */
@media (max-width: 767px) {
  .gsjc-signup {
    display: block;
    min-height: 0;
  }
  .gsjc-signup__arc { display: none; }
  .gsjc-signup__photo {
    position: relative;
    inset: auto;
    height: clamp(12rem, 45vw, 20rem);
  }
  .gsjc-signup__panel {
    max-width: none;
    padding-block: var(--gsjc-space-xl);
  }
}