/* ═══════════════════════════════════════════════════════════════════════════
   NEWSLETTER CONFIRMATION PANEL                               (KBM 1.18.2)

   Replaces the form after a successful submit — see newsletter-confirm.js.

   Loaded site-wide because these forms appear in three places across two
   packages (the plugin's home template, and the child theme's footer and
   front-page). Tiny, and one file beats duplicating it per surface.

   Colours come from the --ka-* tokens where they exist, with literal fallbacks,
   because the footer, the homepage newsletter band and the /hello page sit on
   three different grounds and this panel has to read on all of them. Gold sits
   on navy at AA in every one of those contexts.
   ═══════════════════════════════════════════════════════════════════════════ */
.kbm-nl-done {
  display: block;
  max-width: 420px;
  padding: 1rem 1.15rem;
  border: 1px solid var(--ka-gold, #F5D000);
  border-left-width: 3px;
  border-radius: 3px;
  background: rgba(245, 208, 0, .10);
  outline: none;                      /* focused by script; the border is the cue */
}
.kbm-nl-done__h {
  display: block;
  font-family: var(--ka-display, 'Oswald', Impact, sans-serif);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ka-gold, #F5D000);
  margin-bottom: .3rem;
}
.kbm-nl-done__p {
  display: block;
  font-family: var(--ka-body, 'Hanken Grotesk', system-ui, sans-serif);
  font-size: .88rem;
  line-height: 1.5;
  /* Not a token: this panel renders on navy, on royal blue and on the gold band,
     and a fixed light value is legible on the two dark ones while the gold band
     supplies its own override below. */
  color: rgba(238, 242, 248, .82);
}

/* The free-book band on /hello is gold — light-on-gold would vanish. */
.hello-gift .kbm-nl-done {
  border-color: var(--ka-navy, #020F24);
  background: rgba(2, 15, 36, .08);
}
.hello-gift .kbm-nl-done__h { color: var(--ka-navy, #020F24); }
.hello-gift .kbm-nl-done__p { color: rgba(2, 15, 36, .78); }

/* Footer column is narrow; let it fill rather than sit at 420px. */
.ka-site-footer .kbm-nl-done { max-width: 360px; }