/* Cornerstone Chronicle signup: footer band, inline blocks, floating button + dialog.
   Shared by every site design; colors come from each design's own tokens. */
.nl-form, .nl-block, .nl-footer, .nl-dialog {
  --nl-accent: var(--green, #338546);
  --nl-accent-ink: #fff;
  --nl-line: var(--line, #e6e6e6);
  --nl-muted: var(--muted, #6b6b6b);
  --nl-ink: var(--ink, #2b2b2b);
  --nl-soft: var(--bg-soft, #f7f7f7);
  --nl-radius: 6px;
}

/* ---- form ---- */
.nl-form { margin: 0; }
.nl-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.nl-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 200px; min-width: 0; }
.nl-field label { font-size: 14px; font-weight: 600; }
.nl-optional { font-weight: 400; opacity: .75; }
.nl-field input {
  width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 12px;
  font: inherit; font-size: 16px; /* 16px stops iOS zooming in on focus */
  color: #222; background: #fff; border: 1px solid #b9c0c6; border-radius: var(--nl-radius);
}
.nl-field input:focus { outline: 3px solid color-mix(in srgb, var(--nl-accent) 45%, transparent); outline-offset: 1px; border-color: var(--nl-accent); }
.nl-submit {
  flex: 0 0 auto; min-height: 46px; padding: 10px 24px; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 700; color: var(--nl-accent-ink);
  background: var(--nl-accent); border: 0; border-radius: var(--nl-radius);
}
.nl-submit:hover { filter: brightness(1.08); }
.nl-submit:focus-visible { outline: 3px solid color-mix(in srgb, var(--nl-accent) 45%, transparent); outline-offset: 2px; }
.nl-note { margin: 8px 0 0; font-size: 13px; opacity: .8; }
.nl-status { margin: 8px 0 0; font-weight: 600; }
.nl-status:empty { display: none; }
.nl-form.is-sent .nl-fields, .nl-form.is-sent .nl-note { display: none; }
.nl-form.is-sent .nl-status { padding: 12px 14px; border-radius: var(--nl-radius); background: color-mix(in srgb, var(--nl-accent) 12%, transparent); }
.nl-trap { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- shared text ---- */
.nl-kicker { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--nl-accent); }
.nl-title { margin: 0 0 6px; font-size: 24px; line-height: 1.25; }
.nl-lead { margin: 0 0 16px; }

/* ---- inline block (blog posts, blog list, events) ---- */
.nl-block {
  margin: 40px 0 8px; padding: 24px; text-align: left; color: var(--nl-ink);
  background: var(--nl-soft); border: 1px solid var(--nl-line); border-left: 4px solid var(--nl-accent); border-radius: var(--nl-radius);
}
.content .nl-block h2.nl-title { text-align: left; }

/* ---- footer band ---- */
.nl-footer { padding: 0 0 32px; margin: 0 0 32px; border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.nl-footer-inner { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px 40px; align-items: start; }
.nl-footer .nl-title { color: inherit; }
.nl-footer .nl-field label { color: inherit; }
@media (max-width: 820px) { .nl-footer-inner { grid-template-columns: 1fr; } }

/* ---- floating button (wide screens only) ---- */
.nl-fab-wrap { position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; align-items: center; gap: 4px;
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.nl-fab-wrap.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.nl-fab-wrap[hidden] { display: none; }
.nl-fab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px 0 16px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; color: #fff; background: var(--green, #338546);
  border: 0; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.22);
}
.nl-fab:hover { filter: brightness(1.08); }
.nl-fab:focus-visible, .nl-fab-hide:focus-visible { outline: 3px solid var(--blue, #3474b5); outline-offset: 3px; }
.nl-fab-hide {
  width: 28px; height: 28px; padding: 0; cursor: pointer; font-size: 18px; line-height: 1; color: #444;
  background: #fff; border: 1px solid #ccc; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
/* Phones (narrow, or landscape-short) never get the floating button; they use the inline forms. */
@media (max-width: 767px), (max-height: 559px) { .nl-fab-wrap { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .nl-fab-wrap { transition: none; } }

/* ---- dialog ---- */
.nl-dialog {
  width: min(520px, calc(100vw - 32px)); box-sizing: border-box; padding: 32px 28px 24px; color: var(--nl-ink);
  background: #fff; border: 0; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.nl-dialog::backdrop { background: rgba(10, 20, 30, .55); }
.nl-dialog .nl-field { flex-basis: 100%; }
.nl-dialog .nl-submit { width: 100%; }
.nl-dialog-close {
  position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; padding: 0; cursor: pointer;
  font-size: 26px; line-height: 1; color: #555; background: none; border: 0; border-radius: 50%;
}
.nl-dialog-close:hover { background: #f0f0f0; }