/*
 * The Kool Life — tkl-optin.css
 * Email opt-in block. Light/editorial styling that matches the white site
 * (appears at the end of every post and on the homepage). Built from the
 * theme's brand tokens; namespaced .tkl-optin-* so nothing collides.
 */

.tkl-optin{
  margin:44px 0 8px;
  border:1px solid var(--gray-light);
  background:var(--off);
  padding:30px 32px;
  position:relative;
}
/* The single yellow touch — a top accent rule */
.tkl-optin::before{
  content:'';position:absolute;top:-1px;left:-1px;right:-1px;
  height:4px;background:var(--yellow);
}

.tkl-optin-kicker{
  font-family:var(--font-mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--gray);margin-bottom:10px;display:block;
}
.tkl-optin-h{
  font-family:var(--font-con);
  font-size:clamp(26px,3.4vw,38px);
  font-weight:900;text-transform:uppercase;
  letter-spacing:-.01em;line-height:.97;
  color:var(--black);margin-bottom:8px;
}
.tkl-optin-p{
  font-family:var(--font-body);font-size:15px;line-height:1.6;
  color:var(--gray);margin-bottom:18px;max-width:520px;
}

.tkl-optin-form{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.tkl-optin-form input{
  flex:1 1 200px;min-width:0;
  font-family:var(--font-body);font-size:15px;color:var(--black);
  background:var(--white);
  border:1px solid var(--gray-light);border-radius:0;
  padding:13px 15px;transition:border-color .15s;
}
.tkl-optin-form input::placeholder{color:var(--gray)}
.tkl-optin-form input:focus{outline:none;border-color:var(--blue)}
.tkl-optin-btn{
  font-family:var(--font-con);font-size:13px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  background:var(--black);color:var(--white);
  border:none;border-radius:0;padding:13px 28px;cursor:pointer;
  white-space:nowrap;transition:background .15s;
}
.tkl-optin-btn:hover{background:var(--blue)}
.tkl-optin-btn[disabled]{opacity:.6;cursor:not-allowed}

.tkl-optin-note{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gray);margin-top:12px;
}
.tkl-optin-error{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:#C0392B;margin-top:10px;min-height:12px;
}

/* Success state */
.tkl-optin.is-done .tkl-optin-form,
.tkl-optin.is-done .tkl-optin-note,
.tkl-optin.is-done .tkl-optin-error{display:none}
.tkl-optin-success{display:none}
.tkl-optin.is-done .tkl-optin-success{
  display:block;
  font-family:var(--font-con);font-size:20px;font-weight:800;
  text-transform:uppercase;letter-spacing:.02em;color:var(--blue);
}

@media(max-width:560px){
  .tkl-optin{padding:24px 22px}
  .tkl-optin-btn{flex:1 1 100%}
}