/* ============================================================
   Newsletter — shared page-scoped styles for /newsletter/ and
   /newsletter/manage/. Loaded via `pageCss: newsletter.css`.
   Tokens only (mirrors design-tokens.css).

   This file holds ONLY the page chrome (hub layout, buttons, the
   blog/social "below" block, and the manage-page wrapper). All form
   controls — fields, chips, comboboxes, the subscribe/unsubscribe
   overlays, and success/error states — now live in the canonical form
   atoms (assets/css/forms.css + the wz-form-* / wz-newsletter-modals
   includes), driven by assets/js/forms.js. The legacy nl-/nlm- form,
   chip, combobox, modal, and success blocks were removed 2026-06-02 once
   both pages were rebuilt on the atoms; forms.js superseded newsletter.js.
   ============================================================ */

/* ---- Centered hub (/newsletter/) ---------------------------- */
.nl-hub-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.nl-hub-eyebrow { justify-content: center; }
.nl-hub-lead { margin-left: auto; margin-right: auto; max-width: 540px; }
.nl-hub-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-sm); margin-top: var(--gap-lg); }
.nl-hub-fine { margin-top: var(--gap-md); color: var(--color-text-secondary); font-size: var(--text-sm); }

/* Buttons removed 2026-06-05 — the hub now uses the canonical wz-button.njk
   atom (.btn / intent primary + secondary) instead of bespoke .nl-submit /
   .nl-ghost classes, matching the subscribe/unsubscribe modal CTAs. */

/* ---- Below: blog + socials --------------------------------- */
.nl-below-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.nl-blog-list { list-style: none; margin: var(--gap-lg) auto 0; padding: 0; max-width: 540px; text-align: left; }
.nl-blog-list li { padding: var(--gap-md) 0; border-bottom: 1px solid var(--color-border); }
.nl-blog-list li:first-child { padding-top: 0; }
.nl-blog-list a { color: var(--color-text-primary); font-weight: var(--fw-semibold); text-decoration: none; font-size: var(--text-sm); }
.nl-blog-list a:hover { color: var(--brand-green-text); }
.nl-blog-all { display: inline-block; margin-top: var(--gap-lg); color: var(--brand-green-text); font-weight: var(--fw-semibold); text-decoration: none; }
.nl-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-sm); margin-top: var(--gap-lg); }
.nl-social {
  display: inline-flex; align-items: center; gap: var(--gap-xs);
  padding: var(--gap-xs) var(--gap-md);
  border: 1px solid var(--color-border); border-radius: var(--r-lg);
  background: var(--surface-card); color: var(--color-text-secondary);
  font-weight: var(--fw-semibold); font-size: var(--text-sm); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-color), color var(--dur-fast) var(--ease-color);
}
.nl-social:hover { border-color: var(--brand-green); color: var(--brand-green-deep); }

/* ============================================================
   Manage page (/newsletter/manage/) — nlm-* layout chrome only.
   The prefs form itself is built from the form atoms.
   ============================================================ */
.nlm-wrap { max-width: 720px; }
.nlm-lead { font-size: var(--text-md); }

/* ---- Leave / re-subscribe block (overlay triggers) --------- */
.nlm-leave { border-top: 1px solid var(--color-border); }

/* ---- Explore Workzoom (internal links + trust) ------------- */
.nlm-explore { border-top: 1px solid var(--color-border); }
.nlm-explore .s-header { max-width: 640px; margin-left: auto; margin-right: auto; }
.nlm-explore-grid {
  list-style: none; margin: var(--gap-lg) auto 0; padding: 0;
  max-width: 720px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap-sm);
}
.nlm-explore-grid a {
  display: block;
  padding: var(--gap-sm) var(--gap-md);
  border: 1px solid var(--color-border); border-radius: var(--r-md);
  background: var(--surface-card); color: var(--color-text-primary);
  font-weight: var(--fw-semibold); font-size: var(--text-sm); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-color), color var(--dur-fast) var(--ease-color);
}
.nlm-explore-grid a:hover { border-color: var(--brand-green); color: var(--brand-green-deep); }
.nlm-explore-trust {
  max-width: 640px; margin: var(--gap-lg) auto 0;
  text-align: center; color: var(--color-text-secondary); font-size: var(--text-sm);
}
.nlm-explore-trust a { color: var(--brand-green-text); text-decoration: none; }
.nlm-explore-trust a:hover { text-decoration: underline; }
.nlm-explore-cta { display: flex; justify-content: center; margin-top: var(--gap-lg); }