/* =============================================================================
   Newsletter Signup — reusable component (block + shortcode + PHP include)
   Standalone plain CSS (plugin has no access to the theme's SCSS pipeline).

   All colors/spacing/typography are exposed as CSS custom properties on
   .newsletter-signup below, so the component is themeable without editing
   this file — e.g. from a theme's own stylesheet:

     .newsletter-signup { --csnl-color-primary: #123456; }

   or per-instance via an inline style on the wrapper. Values here are
   literal copies of the Cedar Springs design tokens ($cs-* in the theme's
   assets/scss/abstracts/_variables.scss) at the time this plugin was split
   out — there's no shared source of truth between plugin and theme CSS, so
   update both places if the theme's palette changes.
   ============================================================================= */

.newsletter-signup {
  /* ── Brand colors ─────────────────────────────────────────────────── */
  --csnl-color-white: #ffffff;
  --csnl-color-white-rgb: 255, 255, 255;
  --csnl-color-primary: #365b46;
  --csnl-color-primary-rgb: 54, 91, 70;
  --csnl-color-shadow-rgb: 26, 38, 32;

  /* ── Semantic / status colors ─────────────────────────────────────── */
  --csnl-color-error: #ef4444;
  --csnl-color-error-rgb: 239, 68, 68;
  --csnl-color-success: #22c55e;
  --csnl-color-disabled-bg: #f7f5ef;
  --csnl-color-surface-hover: #fafaf8;

  /* ── Alpha scale (reused across borders/backgrounds/rings) ────────── */
  --csnl-alpha-subtle: 0.1;
  --csnl-alpha-border: 0.35;
  --csnl-alpha-border-compact: 0.2;
  --csnl-alpha-strong: 0.7;
  --csnl-alpha-focus-bg: 0.18;
  --csnl-alpha-shadow-1: 0.08;
  --csnl-alpha-shadow-2: 0.06;
  --csnl-alpha-spinner-track: 0.3;
  --csnl-alpha-error-ring: 0.18;

  /* ── Opacity states ────────────────────────────────────────────────── */
  --csnl-opacity-disabled: 0.7;
  --csnl-opacity-submit-disabled: 0.75;
  --csnl-opacity-loading-text: 0.85;

  /* ── Typography ────────────────────────────────────────────────────── */
  --csnl-font-heading: "Raleway", sans-serif;
  --csnl-font-body: "Montserrat", sans-serif;
  --csnl-font-size-heading: 22px;
  --csnl-font-size-body: 14px;
  --csnl-font-weight-bold: 600;
  --csnl-line-height-description: 1.75;
  --csnl-line-height-message: 1.2;
  --csnl-letter-spacing-button: 0.4px;

  /* ── Spacing scale ─────────────────────────────────────────────────── */
  --csnl-space-xs: 8px;
  --csnl-space-sm: 16px;
  --csnl-space-md: 24px;
  --csnl-space-lg: 32px;
  --csnl-control-height: 48px;
  --csnl-spinner-size: 14px;
  --csnl-border-width: 1px;
  --csnl-border-width-thick: 2px;
  --csnl-outline-width: 3px;

  /* ── Default-variant text/surface (currently a light-on-dark glass card) ──
     Composed from the primitives above — override these three (not the
     primitives) to restyle just the default card's text/surface. ── */
  --csnl-color-heading: var(--csnl-color-white);
  --csnl-color-description: var(--csnl-color-white);
  --csnl-color-input-text: var(--csnl-color-white);
  --csnl-color-input-placeholder: var(--csnl-color-white);
  --csnl-card-bg: rgba(var(--csnl-color-white-rgb), var(--csnl-alpha-subtle));
  --csnl-card-border: rgba(var(--csnl-color-white-rgb), var(--csnl-alpha-border));
  --csnl-input-bg: rgba(var(--csnl-color-white-rgb), var(--csnl-alpha-subtle));
  --csnl-input-border: rgba(var(--csnl-color-white-rgb), var(--csnl-alpha-border));
  --csnl-input-focus-ring: rgba(var(--csnl-color-white-rgb), var(--csnl-alpha-border));

  /* ── Radius / shape ────────────────────────────────────────────────── */
  --csnl-radius-card: 12px;
  --csnl-radius-control: 0;

  /* ── Motion ────────────────────────────────────────────────────────── */
  --csnl-transition-duration: 0.25s;
  --csnl-transition-ease: ease;
  --csnl-spin-duration: 0.7s;

  max-width: 640px;

  /* Default variant: self-contained card */
  background: var(--csnl-card-bg);
  border: var(--csnl-border-width) solid var(--csnl-card-border);
  border-radius: var(--csnl-radius-card);
  padding: var(--csnl-space-lg);
  box-shadow: 0 1px 4px rgba(var(--csnl-color-shadow-rgb), var(--csnl-alpha-shadow-1)),
    0 1px 2px rgba(var(--csnl-color-shadow-rgb), var(--csnl-alpha-shadow-2));
}
.newsletter-column {
  margin-top:auto !important;
}
.newsletter-signup__heading {
  margin: 0 0 var(--csnl-space-xs);
  font-family: var(--csnl-font-heading);
  font-size: var(--csnl-font-size-heading);
  font-weight: var(--csnl-font-weight-bold);
  color: var(--csnl-color-heading);
}

.newsletter-signup__description {
  margin: 0 0 var(--csnl-space-md);
  font-size: var(--csnl-font-size-body);
  line-height: var(--csnl-line-height-description);
  color: var(--csnl-color-description);
}

.newsletter-signup__form {
  display: flex;
  flex-direction: column;
  gap: var(--csnl-space-sm);
}

.newsletter-signup__row {
  display: flex;
  gap: var(--csnl-space-sm);
}

@media (max-width: 639px) {
  .newsletter-signup__row {
    flex-direction: column;
  }
}

.newsletter-signup__field {
  flex: 1;
  min-width: 0;
}

.newsletter-signup__input {
  width: 100%;
  height: var(--csnl-control-height);
  padding: 0 var(--csnl-space-sm);
  font-family: var(--csnl-font-body);
  font-size: var(--csnl-font-size-body);
  color: var(--csnl-color-input-text);
  background: var(--csnl-input-bg);
  border: var(--csnl-border-width) solid var(--csnl-input-border);
  border-radius: var(--csnl-radius-control);
  transition: all var(--csnl-transition-duration) var(--csnl-transition-ease);
}

.newsletter-signup__input::placeholder {
  color: var(--csnl-color-input-placeholder);
}

.newsletter-signup__input:focus-visible {
  outline: var(--csnl-outline-width) solid var(--csnl-input-focus-ring);
  outline-offset: 0;
  border-color: var(--csnl-input-focus-ring);
}

.newsletter-signup__input:focus {
  outline: none;
  border-color: var(--csnl-input-focus-ring);
  box-shadow: 0 1px 4px rgba(var(--csnl-color-shadow-rgb), var(--csnl-alpha-shadow-1)),
    0 1px 2px rgba(var(--csnl-color-shadow-rgb), var(--csnl-alpha-shadow-2));
}

.newsletter-signup__input.has-error {
  border-color: var(--csnl-color-error);
}

.newsletter-signup__input.has-error:focus,
.newsletter-signup__input.has-error:focus-visible {
  box-shadow: 0 0 0 var(--csnl-outline-width) rgba(var(--csnl-color-error-rgb), var(--csnl-alpha-error-ring));
}

.newsletter-signup__input:disabled {
  background: var(--csnl-color-disabled-bg);
  opacity: var(--csnl-opacity-disabled);
}

.newsletter-signup__submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--csnl-space-xs);
  height: var(--csnl-control-height);
  padding: 0 var(--csnl-space-lg);
  background: var(--csnl-color-white);
  color: var(--csnl-color-primary);
  font-family: var(--csnl-font-body);
  font-size: var(--csnl-font-size-body);
  font-weight: var(--csnl-font-weight-bold);
  letter-spacing: var(--csnl-letter-spacing-button);
  text-transform: uppercase;
  white-space: nowrap;
  border: none;
  border-radius: var(--csnl-radius-control);
  cursor: pointer;
  transition: background-color var(--csnl-transition-duration) var(--csnl-transition-ease);
}

.newsletter-signup__submit:hover {
  background: var(--csnl-color-surface-hover);
}

.newsletter-signup__submit:focus-visible {
  outline: var(--csnl-outline-width) solid var(--csnl-color-primary);
  outline-offset: 2px;
}

.newsletter-signup__submit:disabled {
  cursor: not-allowed;
  opacity: var(--csnl-opacity-submit-disabled);
}

.newsletter-signup__spinner {
  display: none;
  width: var(--csnl-spinner-size);
  height: var(--csnl-spinner-size);
  border: var(--csnl-border-width-thick) solid rgba(var(--csnl-color-primary-rgb), var(--csnl-alpha-spinner-track));
  border-top-color: var(--csnl-color-primary);
  border-radius: 50%;
}

.newsletter-signup__form.is-loading .newsletter-signup__spinner {
  display: inline-block;
  animation: csnl-spin var(--csnl-spin-duration) linear infinite;
}

.newsletter-signup__form.is-loading .newsletter-signup__submit-text {
  opacity: var(--csnl-opacity-loading-text);
}

/* Honeypot — hidden from sighted users, still reachable by simple bots. */
.newsletter-signup__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.newsletter-signup__message {
  min-height: 1.4em;
  font-size: var(--csnl-font-size-body);
  line-height: var(--csnl-line-height-message);
}

.newsletter-signup__message--success {
  color: var(--csnl-color-success);
}

.newsletter-signup__message--error {
  color: var(--csnl-color-error);
}

/* Compact variant: inline pill, for use on colored/gradient sections */
.newsletter-signup--compact {
  max-width: 560px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  .newsletter-signup__form {
    gap:0;
  }
}
.newsletter-signup--compact .newsletter-signup__form {
    gap:0;
  }
  .newsletter-signup--compact .newsletter-signup__message {
    min-height: 0;
  }
.newsletter-signup--compact .newsletter-signup__heading,
.newsletter-signup--compact .newsletter-signup__description {
  color: inherit;
}

.newsletter-signup--compact .newsletter-signup__row--email {
  flex-direction: row;
  gap: 0;
}

@media (max-width: 639px) {
  .newsletter-signup--compact .newsletter-signup__row--email {
    flex-direction: column;
    gap: var(--csnl-space-sm);
  }
}
.newsletter-signup--compact .newsletter-signup__row--email {
  backdrop-filter: blur(5px);
  background: rgba(var(--csnl-color-white-rgb), var(--csnl-alpha-subtle));
  border-color: rgba(var(--csnl-color-white-rgb), var(--csnl-alpha-border-compact));
  border-width: var(--csnl-border-width);
  border-style: solid;
  color: var(--csnl-color-white);
  border-radius: var(--csnl-radius-control) 0 0 var(--csnl-radius-control);
  padding: 5px;
}

.newsletter-signup--compact .newsletter-signup__input {
  backdrop-filter: none;
  background: transparent;
  border-color: transparent;
  color: var(--csnl-color-white);
  border-radius: var(--csnl-radius-control) 0 0 var(--csnl-radius-control);
}

.newsletter-signup--compact .newsletter-signup__input::placeholder {
  color: rgba(var(--csnl-color-white-rgb), var(--csnl-alpha-strong));
}

.newsletter-signup--compact .newsletter-signup__input:focus-visible {
  outline: var(--csnl-outline-width) solid rgba(var(--csnl-color-white-rgb), var(--csnl-alpha-border));
  background: rgba(var(--csnl-color-white-rgb), var(--csnl-alpha-focus-bg));
  border-color: rgba(var(--csnl-color-white-rgb), var(--csnl-alpha-border));
}

@media (max-width: 639px) {
  .newsletter-signup--compact .newsletter-signup__input {
    border-radius: var(--csnl-radius-control);
  }
}

.newsletter-signup--compact .newsletter-signup__submit {
  background: var(--csnl-color-white);
  color: var(--csnl-color-primary);
  border-radius: 0 var(--csnl-radius-control) var(--csnl-radius-control) 0;
}

.newsletter-signup--compact .newsletter-signup__submit:hover {
  background: var(--csnl-color-surface-hover);
}

@media (max-width: 639px) {
  .newsletter-signup--compact .newsletter-signup__submit {
    border-radius: var(--csnl-radius-control);
    width: 100%;
  }
}

@keyframes csnl-spin {
  to {
    transform: rotate(360deg);
  }
}