/* CNL sign-up form. Every selector is scoped under .cnl-signup and
   every class is cnl-su- prefixed: this widget lands in a Squarespace or
   WordPress block whose theme CSS styles bare inputs and buttons, so nothing
   here may inherit from or leak into the host page.

   Default look matches the EveryAction form treatment used on the national
   site's dark homepage sections (.cnl-ea-form-wrap): transparent wrapper,
   white text and labels, borderless white 48px inputs, navy submit with a
   hard 5px white offset shadow. Fonts (Domine, ff-tisa-web-pro,
   pragmatica-extended) are loaded by the embed snippet, not here.

   v6: all colors and fonts are custom properties on .cnl-signup, so a
   chapter embed can retheme the form by redefining them on #cnl-signup
   (higher specificity) without touching this file. */

.cnl-signup {
  /* ── Theme variables — override these from the embed snippet ─────────
     e.g.  #cnl-signup { --cnl-su-btn-bg: #7a1f1f; }                      */
  --cnl-su-text: #fff;                          /* headings, labels, body */
  --cnl-su-muted: rgba(255, 255, 255, 0.75);    /* "(optional)" tags      */
  --cnl-su-accent: #f24f49;                     /* errors + focus rings   */
  --cnl-su-input-bg: #fff;
  --cnl-su-input-ink: #22293f;                  /* text typed into inputs */
  --cnl-su-input-placeholder: #8a8fa3;
  --cnl-su-btn-bg: #2c3659;                     /* submit button          */
  --cnl-su-btn-ink: #fff;
  --cnl-su-btn-shadow: #fff;                    /* hard offset shadow     */
  --cnl-su-radius: 6px;                         /* inputs + button        */
  --cnl-su-font-body: "Domine", Georgia, "Times New Roman", serif;
  --cnl-su-font-heading: "ff-tisa-web-pro", Georgia, serif;
  --cnl-su-font-button: "pragmatica-extended", "Arial Black", sans-serif;
  /* ─────────────────────────────────────────────────────────────────── */

  font-family: var(--cnl-su-font-body);
  color: var(--cnl-su-text);
  max-width: 560px;
  margin: 0 auto;
  box-sizing: border-box;
  /* Lets the field rows respond to the card's own width, not the viewport —
     a narrow page column on desktop still gets the stacked layout. */
  container-type: inline-size;
}

.cnl-signup *,
.cnl-signup *::before,
.cnl-signup *::after {
  box-sizing: border-box;
}

/* Transparent over whatever section background the page provides. */
.cnl-signup .cnl-su-card {
  background: transparent;
  padding: 0;
}

.cnl-signup .cnl-su-heading {
  font-family: var(--cnl-su-font-heading);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.2;
  color: var(--cnl-su-text);
  margin: 0 0 6px;
}

.cnl-signup .cnl-su-subheading {
  font-family: var(--cnl-su-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--cnl-su-text);
  margin: 0 0 18px;
}

.cnl-signup .cnl-su-form {
  margin: 0;
  padding: 0;
}

.cnl-signup .cnl-su-field {
  margin: 0 0 14px;
}

.cnl-signup .cnl-su-label {
  display: block;
  font-family: var(--cnl-su-font-heading);
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cnl-su-text);
  margin: 0 0 6px;
}

.cnl-signup .cnl-su-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--cnl-su-font-body);
  font-size: 12px;
  color: var(--cnl-su-muted);
}

/* Matches the site's EveryAction inputs: no border, white fill, 48px tall.
   Squarespace themes style bare input/textarea aggressively; appearance
   reset plus the scoped class out-specifies them without !important. */
.cnl-signup .cnl-su-input {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 48px;
  font-family: var(--cnl-su-font-body);
  font-size: 16px;
  line-height: normal;
  color: var(--cnl-su-input-ink);
  background: var(--cnl-su-input-bg);
  border: none;
  border-radius: var(--cnl-su-radius);
  padding: 0 18px;
  margin: 0;
  transition: box-shadow 0.15s;
}

.cnl-signup .cnl-su-input:focus {
  outline: none; /* replaced by the accent ring below */
  box-shadow: 0 0 0 3px var(--cnl-su-accent);
}

.cnl-signup .cnl-su-input::placeholder {
  color: var(--cnl-su-input-placeholder);
  opacity: 1;
}

.cnl-signup .cnl-su-has-error .cnl-su-input {
  box-shadow: 0 0 0 2.5px var(--cnl-su-accent);
}

.cnl-signup .cnl-su-inline-error {
  font-family: var(--cnl-su-font-body);
  color: var(--cnl-su-accent);
  font-size: 13px;
  line-height: 1.4;
  margin: 6px 0 0;
}

.cnl-signup .cnl-su-inline-error:empty {
  margin: 0;
}

/* Paired fields (first+last, email+ZIP) share a row when the card itself is
   wide enough; in a narrow container (phone, or a skinny page column) they
   stack. Browsers without container-query support keep the stacked layout. */
@container (min-width: 480px) {
  .cnl-signup .cnl-su-row {
    display: flex;
    gap: 14px;
  }
  .cnl-signup .cnl-su-row .cnl-su-field {
    flex: 1;
    min-width: 0;
  }
  /* ZIP is short — fixed width, email takes the rest of the row. */
  .cnl-signup .cnl-su-row .cnl-su-field-zip {
    flex: 0 0 180px;
  }
}

/* Server / network error region above the submit button (aria-live). */
.cnl-signup .cnl-su-form-error {
  font-family: var(--cnl-su-font-body);
  color: var(--cnl-su-accent);
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
}

.cnl-signup .cnl-su-form-error:not(:empty) {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1.5px solid var(--cnl-su-accent);
  border-radius: var(--cnl-su-radius);
  background: rgba(242, 79, 73, 0.12); /* fallback: default accent at 12% */
  background: color-mix(in srgb, var(--cnl-su-accent) 12%, transparent);
}

.cnl-signup .cnl-su-turnstile {
  margin: 10px 0 0;
}

.cnl-signup .cnl-su-turnstile:empty {
  margin: 0;
}

/* Submit matches the site's EveryAction submit: navy, 48px, auto width,
   hard offset shadow; keeps the CNL pop on hover / push on press. */
.cnl-signup .cnl-su-submit {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  width: auto;
  padding: 0 22px;
  height: 48px;
  line-height: 48px;
  margin: 24px 0 8px; /* bottom margin clears the offset shadow */
  font-family: var(--cnl-su-font-button);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
  color: var(--cnl-su-btn-ink);
  background: var(--cnl-su-btn-bg);
  border: none;
  border-radius: var(--cnl-su-radius);
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--cnl-su-btn-shadow);
  transform: translate(0, 0);
  transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cnl-signup .cnl-su-submit:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--cnl-su-btn-shadow);
}

.cnl-signup .cnl-su-submit:active:not(:disabled) {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--cnl-su-btn-shadow);
}

.cnl-signup .cnl-su-submit:focus-visible {
  outline: 3px solid var(--cnl-su-accent);
  outline-offset: 2px;
}

.cnl-signup .cnl-su-submit:disabled {
  background: #8a8fa3;
  box-shadow: 5px 5px 0 rgba(255, 255, 255, 0.45); /* fallback */
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--cnl-su-btn-shadow) 45%, transparent);
  cursor: wait;
}

/* Success state replaces the form in place, so the layout doesn't jump. */
.cnl-signup .cnl-su-success {
  padding: 6px 0;
}

.cnl-signup .cnl-su-success-heading {
  font-family: var(--cnl-su-font-heading);
  font-weight: 800;
  font-size: 24px;
  color: var(--cnl-su-text);
  margin: 0 0 8px;
}

/* The heading receives programmatic focus (screen-reader announcement of
   the confirmation); it isn't interactive, so no visible focus ring. */
.cnl-signup .cnl-su-success-heading:focus {
  outline: none;
}

.cnl-signup .cnl-su-success-body {
  font-family: var(--cnl-su-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--cnl-su-text);
  margin: 0;
}

/* Honeypot: pulled out of the visual and accessibility flow WITHOUT
   display:none, so autofill bots still see a fillable text input. */
.cnl-signup .cnl-su-hp {
  position: absolute !important; /* !important: Squarespace resets position on form elements in some themes */
  left: -9999px !important;      /* !important: must stay off-screen even if host CSS overrides positioning */
  width: 1px;
  height: 1px;
  opacity: 0;
}