@charset "UTF-8";
/* ==========================================================================
   The opt-in form — context overrides
   --------------------------------------------------------------------------
   The form's base skin lives in main.css §13. This file carries only what
   changes per CONTEXT, and is enqueued after main.css so these win on source
   order.

   The MARKUP and the submit/validation logic are unchanged — every class,
   name, id and data attribute the handler and optin-form.js rely on is the
   same — so this only restyles what is already there.

   Contexts:
     - the sidebar panel        (.panel, the lime one: .panel--dark)
     - the newsletter band      (.newsletter-band__form, a dark tile)
     - the modal                (.st-modal)
     - page content, via [st_optin_form]
   ========================================================================== */

/* The default (page content) instance is boxed on a readable measure rather
   than stretching the full width of an article. */
.entry-content .st-optin {
	max-width: 460px;
	margin-inline: auto;
	padding: 1.9rem;
	border-radius: var(--r-m);
	border: 1px solid var(--line-strong);
	background: var(--surface);
}

/* ── The lime sidebar panel ─────────────────────────────────────────────
   The panel carries the accent colour, so the field becomes a navy slot cut
   into it and the button inverts to navy with an accent label. */

.panel--dark .st-optin__input {
	background: var(--dk);
	border-color: var(--dk);
	color: #f5f2ea;
}
.panel--dark .st-optin__input::placeholder { color: color-mix(in srgb, #f5f2ea 52%, transparent); }
.panel--dark .st-optin__input:focus {
	border-color: var(--dk);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--dk) 25%, transparent);
}

.panel--dark .st-optin__consent-text { color: var(--text-2); font-size: .74rem; }
.panel--dark .st-optin__consent-text a { color: var(--text); box-shadow: inset 0 -1px 0 var(--text); }
.panel--dark .st-optin__consent-text a:hover { color: var(--text); background: var(--tint); }
.panel--dark .st-optin__checkbox { accent-color: var(--dk); }

.panel--dark .st-optin__submit { background: var(--dk); color: color-mix(in srgb, var(--accent) 78%, #fff); }
.panel--dark .st-optin__submit:hover:not(:disabled) {
	background: #fff;
	color: var(--navy);
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--dk) 18%, transparent);
}

.panel--dark .st-optin__footer {
	border-top-color: var(--line);
	color: var(--text-3);
	font-size: .64rem;
}

.panel--dark .st-optin__message.is-success { color: #0a3d1f; }
.panel--dark .st-optin__message.is-error { color: #7a0f06; }

/* ── The band ───────────────────────────────────────────────────────────
   The band's form already sits on its own dark tile, which supplies the
   padding and the surface — the form must not draw a second one. */

.newsletter-band__form .st-optin {
	padding: 0;
	border: 0;
	background: none;
}

/* ── The modal ──────────────────────────────────────────────────────────
   The one place the form is the entire content of its box, so the submit
   control carries a little more weight. */

.st-modal .st-optin__submit { padding: 1.15rem 1.2rem; }

/* ── States ─────────────────────────────────────────────────────────────
   Once the handler confirms, the fields are no longer actionable, so they
   go and the message carries the panel on its own. */

.st-optin.is-done .st-optin__field,
.st-optin.is-done .st-optin__submit {
	display: none;
}

.st-optin.is-done .st-optin__message {
	font-size: .96rem;
	font-weight: 600;
	padding: .75rem 0 .25rem .9rem;
	border-left: 4px solid var(--pos);
}
.panel--dark .st-optin.is-done .st-optin__message { border-left-color: var(--dk); }

/* While a submission is in flight. The button disables itself, so this only
   has to signal that something is happening. */
.st-optin.is-loading { opacity: .7; }
.st-optin.is-loading .st-optin__submit { cursor: progress; }

/* A field the validator rejected, and the note it inserts after it. */
.st-optin__input.has-error {
	border-color: var(--neg);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--neg) 22%, transparent);
}

.st-optin__field-error {
	display: block;
	margin-top: .45rem;
	font-size: .76rem;
	font-weight: 600;
	color: var(--neg);
}
.panel--dark .st-optin__field-error { color: #7a0f06; }