/* Sign-up nudges inside articles (inc/nudges.php): [hc_signup], [hc_callout], [hc_cta].
   Built from the v2 article's end cards (share band, disclosure, cutout) so they sit in the
   744 column without competing with the prose. */
.hc-nudge {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 40px 0;
  padding: 28px 32px;
  border-radius: 24px;
  background: var(--hc-alt);
  box-shadow: inset 0 0 0 1px var(--hc-hair);
}
:root[data-theme="dark"] .hc-nudge { background: var(--hc-card-on-band); }
/* Astra's .entry-content p margin (0,1,1) would open gaps inside the card. */
.hc-nudge p { margin: 0; }
.hc-nudge .hc-nudge__body p { margin: 0 0 10px; }
.hc-nudge .hc-nudge__body p:last-child { margin: 0; }
.hc-nudge__h { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 400; letter-spacing: -0.4px; color: var(--hc-text); }
.hc-nudge__p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--hc-body); }
.hc-nudge .hc-wl { margin-top: 6px; }
.hc-nudge .hc-btn { align-self: flex-start; margin-top: 6px; }

/* Callout: a quieter box; the tone sets only the left rule. */
.hc-nudge--callout {
  gap: 8px;
  padding: 20px 24px;
  border-radius: 18px;
  background: var(--hc-card-on-band);
  box-shadow: inset 0 0 0 1px var(--hc-hair), inset 3px 0 0 var(--hc-strong);
}
.hc-nudge--tip { box-shadow: inset 0 0 0 1px var(--hc-hair), inset 3px 0 0 var(--hc-brand); }
.hc-nudge--caution { box-shadow: inset 0 0 0 1px var(--hc-hair), inset 3px 0 0 var(--hc-accent); }
.hc-nudge__t { margin: 0; font-size: 17px; font-weight: 600; color: var(--hc-text); }
.hc-nudge__body { font-size: 17px; line-height: 1.65; color: var(--hc-body); }
.hc-nudge__body a { color: var(--hc-accent); text-decoration: underline; text-underline-offset: 4px; }

/* CTA on the moment colour. */
.hc-nudge--dark { background: var(--hc-moment); box-shadow: none; }
:root[data-theme="dark"] .hc-nudge--dark { background: var(--hc-moment); }
.hc-nudge--dark .hc-nudge__h { color: var(--hc-m-text); font-weight: 300; font-size: 28px; }
.hc-nudge--dark .hc-nudge__p { color: var(--hc-m-body); }

@media (max-width: 900px) {
  .hc-nudge { padding: 24px 22px; }
  .hc-nudge .hc-wl { flex-direction: column; }
}