/* Newsletter signup band (template-parts/sections/newsletter.php). Uses the tokens from styles.css. */
.pk-nl{scroll-margin-top:96px}
.pk-nl-inner{display:grid;gap:clamp(24px, 4vw, 48px);align-items:center;grid-template-columns:1fr}
.pk-nl-copy{display:grid;gap:14px;max-width:620px}
.pk-nl-copy h2{font-size:var(--fs-h2)}
.pk-nl-copy .lead{margin:0;max-width:48ch}
.pk-nl-form{display:grid;gap:12px;width:100%;max-width:560px}

.pk-nl-row{display:flex;flex-direction:column;gap:10px}
.pk-nl-input{flex:1 1 auto;width:100%;min-width:0;margin:0;min-height:60px;padding:14px 24px;border:2px solid transparent;border-radius:999px;background:var(--tint);color:var(--ink);font-family:var(--font-body);font-size:var(--fs-body);font-weight:600;-webkit-appearance:none;appearance:none;transition:background-color 150ms ease,border-color 150ms ease}
.pk-nl-input::placeholder{color:var(--muted);opacity:1}
.pk-nl-input:hover{background-color:var(--tint-2)}
.pk-nl-input:focus{outline:none}
.pk-nl-input:focus-visible{background-color:var(--card);border-color:var(--ink);outline:3px solid var(--accent);outline-offset:3px}
.pk-nl-input[aria-invalid="true"]{border-color:#B3132A}
.pk-nl-btn{flex:0 0 auto;min-height:60px;background:var(--accent);border-color:var(--accent);color:var(--card);white-space:nowrap}

/* On a colour band: white field, white button with ink text. */
.band-red .pk-nl-input,.band-ink .pk-nl-input,.band-tint .pk-nl-input{background-color:var(--card)}
.band-red .pk-nl-input:hover,.band-ink .pk-nl-input:hover{background-color:var(--paper)}
.band-red .pk-nl-input:focus-visible,.band-ink .pk-nl-input:focus-visible{outline-color:var(--card);box-shadow:0 0 0 6px var(--ink)}
.band-red .pk-nl-btn,.band-ink .pk-nl-btn{background:var(--card);border-color:var(--card);color:var(--ink)}
.band-red .pk-nl-btn:focus-visible,.band-ink .pk-nl-btn:focus-visible{outline-color:var(--card)}

@media (hover:hover) and (pointer:fine){
  .pk-nl-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
  .band-red .pk-nl-btn:hover,.band-ink .pk-nl-btn:hover{background:var(--tint);border-color:var(--tint)}
}

.pk-nl-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.pk-nl-msg{margin:0;padding:14px 20px;border-radius:16px;font-weight:700}
.pk-nl-msg[hidden]{display:none}
.pk-nl-msg.is-ok{background:var(--ink);color:var(--card)}
.pk-nl-msg.is-err{background:#FBE3E6;color:#7A0E1C}
.band-ink .pk-nl-msg.is-ok{background:var(--card);color:var(--ink)}

.pk-nl-note{margin:0;font-size:var(--fs-small);font-weight:600;color:var(--muted)}
.band-red .pk-nl-note,.band-ink .pk-nl-note{color:var(--on-ink)}

@media (min-width:560px){
  .pk-nl-row{flex-direction:row;gap:0;padding:6px;border-radius:999px;background:var(--tint)}
  .pk-nl-input{min-height:56px;background:transparent}
  .pk-nl-input:hover{background-color:transparent}
  .pk-nl-input:focus-visible{background-color:transparent;border-color:transparent;outline:none;box-shadow:none}
  .pk-nl-row:focus-within{outline:3px solid var(--accent);outline-offset:3px}
  .pk-nl-btn{min-height:56px}
  .band-red .pk-nl-row,.band-ink .pk-nl-row,.band-tint .pk-nl-row{background:var(--card)}
  .band-red .pk-nl-input,.band-ink .pk-nl-input,.band-tint .pk-nl-input,
  .band-red .pk-nl-input:hover,.band-ink .pk-nl-input:hover{background-color:transparent}
  .band-red .pk-nl-input:focus-visible,.band-ink .pk-nl-input:focus-visible{box-shadow:none}
  .band-red .pk-nl-row:focus-within,.band-ink .pk-nl-row:focus-within{outline-color:var(--card);box-shadow:0 0 0 6px var(--ink)}
  .band-red .pk-nl-btn,.band-ink .pk-nl-btn{background:var(--ink);border-color:var(--ink);color:var(--card)}
  .band-red .pk-nl-btn:focus-visible,.band-ink .pk-nl-btn:focus-visible{outline-color:var(--accent)}
}
@media (hover:hover) and (pointer:fine) and (min-width:560px){
  .band-red .pk-nl-btn:hover,.band-ink .pk-nl-btn:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
}

@media (min-width:960px){
  .pk-nl-inner{grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);gap:clamp(32px, 5vw, 72px)}
}

@media (prefers-reduced-motion:reduce){
  .pk-nl-input{transition:none}
}