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

   Styled to match the EveryAction form treatment used on the 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. */

.cnl-signup {
  --cnl-su-navy: #2c3659;
  --cnl-su-red: #9f3c39;
  --cnl-su-accent: #f24f49; /* link/error accent from the site's form styling */
  --cnl-su-ink: #22293f;
  font-family: "Domine", Georgia, "Times New Roman", serif;
  color: #fff;
  max-width: 560px;
  margin: 0 auto;
  box-sizing: border-box;
  /* Lets the name row respond to the card's own width, not the viewport —
     a narrow Squarespace 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: "ff-tisa-web-pro", Georgia, serif;
  font-weight: 800;
  font-size: 26px;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 6px;
}

.cnl-signup .cnl-su-subheading {
  font-family: "Domine", Georgia, serif;
  font-size: 15px;
  line-height: 1.5;
  color: #fff;
  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: "ff-tisa-web-pro", Georgia, serif;
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  margin: 0 0 6px;
}

.cnl-signup .cnl-su-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-family: "Domine", Georgia, serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}

/* 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: "Domine", Georgia, serif;
  font-size: 16px;
  line-height: normal;
  color: var(--cnl-su-ink);
  background: #fff;
  border: none;
  border-radius: 6px;
  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: #8a8fa3;
  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: "Domine", Georgia, serif;
  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;
}

/* First + last name share a row when the card itself is wide enough; in a
   narrow container (phone, or a skinny Squarespace 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: "Domine", Georgia, serif;
  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: 6px;
  background: rgba(242, 79, 73, 0.12);
}

.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 white 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: "pragmatica-extended", "Arial Black", sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  background: var(--cnl-su-navy);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 5px 5px 0 #fff;
  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 #fff;
}

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

.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);
  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: "ff-tisa-web-pro", Georgia, serif;
  font-weight: 800;
  font-size: 24px;
  color: #fff;
  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: "Domine", Georgia, serif;
  font-size: 15px;
  line-height: 1.5;
  color: #fff;
  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;
}