/* =========================================================================
   TAF 2026 — Newsletter subscribe page
   Scope: the .taf-sub block markup on /subscribe/ (body.page-id-37195), PLUS
   — since 2026-07-17 — the sitewide Kit-form hardening section at the bottom
   (magnet alert restyle + "One more step" guard-modal chrome), so the sheet
   now loads wherever a Kit form renders (see $taf_has_kit_form in
   inc/enqueue.php). Loads after main.css; every value comes from the
   main.css tokens.

   VAR-NAME MAP (site vs handoff): the handoff's --sans = Poppins (UI) and
   --body = Mulish (copy). On this site --display = Poppins and --sans =
   Mulish, so: handoff --sans → var(--display), handoff --body → var(--sans).

   KIT FORM: the convertkit/form block (form 9655435) renders as an async
   script embed that injects Kit's .formkit-* markup with inline styles and
   its own <style> (template "clare"), so the restyle below needs !important
   on the props Kit sets inline — same precedent as .taf-magnetband__form in
   main.css. Success: ck.5.js REPLACES the [data-element="fields"] row with
   .formkit-alert-success (so "form row → confirmation line" is Kit's own
   behavior); errors fill the ul[data-element="errors"], reordered below the
   fields row via flex order.
   ========================================================================= */

/* ---- Kadence container neutralizers (house pattern: contact page) ---- */
body.page-id-37195 .page-hero-section { display: none; } /* fallback; the title is answered 'hide' in inc/subscribe-page.php */
body.page-id-37195 .content-area { margin: 0; padding-top: 0; padding-bottom: 0; }
body.page-id-37195 .content-container.site-container { padding: 0; max-width: none; }
body.page-id-37195 .content-wrap { padding: 0; }
body.page-id-37195 article.single-entry.single-entry { margin: 0; background: transparent; box-shadow: none; }
body.page-id-37195 .entry-content-wrap { padding: 0; }
body.page-id-37195 .entry-content { margin: 0; }

/* Kadence/entry-content gives every p a margin; the 7a layout sets its own
   per element, so zero them inside the block and add back below. */
.entry-content .taf-sub p { margin: 0; }

/* =========================================================================
   Hero: promise + form (left), e-book visual (right)
   ========================================================================= */
.taf-sub__hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-64) var(--space-32) var(--space-64);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-64);
  align-items: center;
}

.entry-content .taf-sub .taf-sub__eyebrow {
  font-family: var(--display);
  font-size: var(--fs-eyebrow);       /* 12px */
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-eyebrow);  /* .14em */
  text-transform: uppercase;
  color: var(--rose-deep);
}

.entry-content .taf-sub h1.taf-sub__title {
  font-family: var(--display) !important; /* ties with the Feast-counter inline block; later source order wins */
  font-size: var(--fs-42);
  font-weight: var(--w-semibold);
  line-height: var(--lh-112) !important;
  letter-spacing: var(--ls-display);
  color: var(--chocolate);
  margin: var(--space-12) 0 var(--space-16);
  padding: 0;
  border: 0;
  max-width: 16ch;
}

.entry-content .taf-sub .taf-sub__lede {
  font-family: var(--sans);
  font-size: var(--fs-17);
  line-height: var(--lh-165);
  color: var(--cocoa);
  max-width: 46ch;
  margin: 0;
}

/* ---- Form row (the Kit embed slot): max 480px, 8px gap ---- */
.entry-content .taf-sub .wp-block-group.taf-sub__form {
  margin: var(--space-24) 0 0;
  max-width: 480px;
  /* Reserve the Kit embed's height so its ASYNC injection does not push the
     content below it down (CLS 0.0633 under throttling — the site's worst,
     measured 2026-07-14: a +124px shift of .taf-sub__visual at t≈4.3s). The
     form's pre-submit height is deterministic and equals one 52px control row
     (the Kit input/submit height frozen below). */
  min-height: 52px; /* token-exempt: reserves the Kit form's one-row control height (52px, frozen below) to prevent the async-embed CLS */
}
.taf-sub__form .convertkit-form { margin: 0; }
.taf-sub__form .formkit-form,
.taf-sub__form form {
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
/* Flex column so the error list (first child in Kit's markup) can be
   ordered BELOW the fields row (handoff: error line under the input).
   Kit's element-query CSS pads this wrapper (56px 10px 10px below its
   400px break) — zero it at data-uid strength. */
.taf-sub__form .formkit-form > div[data-style="clean"],
.taf-sub__form .formkit-form[data-uid] > div[data-style="clean"] {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
}
.taf-sub__form .formkit-fields,
.taf-sub__form [data-element="fields"],
.taf-sub__form .seva-fields {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: var(--space-8);
  margin: 0 !important;
  padding: 0 !important;
}
/* Spec: single email field + button. The bread-magnet form carries an
   OPTIONAL Name field (no required attr in the embed markup) — hidden here,
   not removed from the Kit config. */
.taf-sub__form .formkit-field:has(input[name="fields[name]"]) { display: none !important; }
.taf-sub__form .formkit-field {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}
.taf-sub__form .formkit-input {
  /* token-frozen: must match ConvertKit's injected inline styles
     T6 must NOT remap these values to a scale — tokenize at parity only. */
  width: 100%;
  height: 52px;
  border: var(--bw-15) solid var(--line) !important;   /* Kit inline: #e3e3e3 */
  border-radius: var(--radius-sm) !important;   /* Kit inline: 4px */
  background: var(--paper);
  padding: 0 var(--space-18);
  font-family: var(--sans) !important;
  font-size: var(--fs-16) !important;
  font-weight: var(--w-regular) !important;
  color: var(--chocolate) !important;           /* Kit inline: #959599 */
  box-shadow: none;
  outline: none;
  transition: border-color var(--speed) var(--ease);
}
/* Kit's own template CSS addresses inputs at .formkit-form[data-uid] depth
   (0,3,0) with its own border/padding — outrank it. */
.taf-sub__form .formkit-form[data-uid] .formkit-input {
  border-width: var(--bw-15) !important;
  border-style: solid !important;
  border-color: var(--line) !important;
  padding: 0 var(--space-16) !important;
  height: 52px !important;
}
.taf-sub__form .formkit-input::placeholder { color: var(--cocoa); opacity: var(--o-7); }
.taf-sub__form .formkit-form[data-uid] .formkit-input:focus,
.taf-sub__form .formkit-input:focus {
  border-color: var(--rose) !important;
  outline: none;
  box-shadow: none;
}
.taf-sub__form .formkit-submit,
.taf-sub__form .formkit-form[data-uid] .formkit-submit {
  /* token-frozen: must match ConvertKit's injected inline styles
     T6 must NOT remap these values to a scale — tokenize at parity only. */
  flex: 0 0 auto !important;
  width: auto !important;
  height: 52px;
  margin: 0 !important; /* Kit element-query: 0 5px 15px below 400px */
  padding: 0 var(--space-24) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rose) !important;
  color: var(--color-on-accent) !important;
  font-family: var(--display) !important;
  font-size: var(--fs-16) !important;
  font-weight: var(--w-bold) !important;
  border: none;
  border-radius: var(--radius-sm) !important;   /* Kit inline: 4px */
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--speed) var(--ease);
}
.taf-sub__form .formkit-submit:hover,
.taf-sub__form .formkit-submit:focus-visible { background: var(--rose-deep) !important; }
.taf-sub__form .formkit-submit > span { margin: 0; padding: 0; color: var(--color-on-accent); background: transparent; } /* Kit's template paints the inner span its own bg — clear it so the button reads one rose */

/* ---- Kit alerts: error under the field, success = confirmation line ---- */
.taf-sub__form .formkit-form ul.formkit-alert {
  order: 10;                 /* below the fields row */
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left;
}
.taf-sub__form .formkit-form ul.formkit-alert:empty { display: none; }
.taf-sub__form .formkit-form .formkit-alert-error li {
  font-family: var(--sans);
  font-size: var(--fs-15);
  color: var(--rose-deep);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}
/* Success: ck.5.js swaps the fields row for this div (copy is Kit-side). */
.taf-sub__form .formkit-form .formkit-alert-success {
  font-family: var(--sans) !important;
  font-size: var(--fs-16) !important;
  font-weight: var(--w-bold) !important;
  color: var(--rose-deep) !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  text-align: left;
}
/* Handoff: the fine print vanishes with the form row on success. */
.taf-sub__copy:has(.formkit-alert-success) .taf-sub__fine { display: none; }

.entry-content .taf-sub .taf-sub__fine {
  font-family: var(--sans);
  font-size: var(--fs-13);
  color: var(--cocoa);
  margin: var(--space-12) 0 0;
}

/* ---- Right column: photo + offer card ---- */
.taf-sub__visual {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 400px;
}
.entry-content .taf-sub .taf-sub__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar-4-5);
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 0;
}
.taf-sub__offer {
  position: absolute;
  left: -36px;
  bottom: 28px;
  max-width: 240px;
  background: var(--paper);
  border: var(--bw-1) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-16) var(--space-20);
}
.entry-content .taf-sub .taf-sub__offer-label {
  font-family: var(--display);
  font-size: var(--fs-12);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-08em);
  text-transform: uppercase;
  color: var(--rose-deep);
}
.entry-content .taf-sub .taf-sub__offer-title {
  font-family: var(--display);
  font-size: var(--fs-20);
  font-weight: var(--w-semibold);
  line-height: var(--lh-125);
  letter-spacing: var(--ls-display);
  color: var(--chocolate);
  margin: var(--space-8) 0 0;
}
.entry-content .taf-sub .taf-sub__offer-meta {
  font-family: var(--sans);
  font-size: var(--fs-13);
  line-height: var(--lh-15);
  color: var(--cocoa);
  margin: var(--space-4) 0 0;
}

/* =========================================================================
   "What lands in your inbox" band (cream)
   ========================================================================= */
.taf-sub__band {
  background: var(--cream);
  padding: var(--space-48) var(--space-32) var(--space-64);
  margin: 0;
}
.taf-sub__band-inner { max-width: 1080px; margin: 0 auto; }
.entry-content .taf-sub h2.taf-sub__band-title {
  font-family: var(--display);
  font-size: var(--fs-30);
  font-weight: var(--w-semibold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--chocolate);
  text-align: center;
  margin: 0;
  padding: 0;
  border: 0;
}
.entry-content .taf-sub .taf-sub__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
  margin: var(--space-32) 0 0;
}
.taf-sub__card {
  background: var(--paper);
  border: var(--bw-1) solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-24) var(--space-24);
}
.taf-sub__card-icon {
  display: block;
  width: 26px;
  height: 26px;
  color: var(--rose-deep);
  fill: currentColor;
}
.entry-content .taf-sub .taf-sub__card-title {
  font-family: var(--display);
  font-size: var(--fs-17);
  font-weight: var(--w-bold);
  line-height: var(--lh-135);
  color: var(--chocolate);
  margin: var(--space-12) 0 0;
}
.entry-content .taf-sub .taf-sub__card-body {
  font-family: var(--sans);
  font-size: var(--fs-15);
  line-height: var(--lh-16);
  color: var(--cocoa);
  margin: var(--space-8) 0 0;
}

/* =========================================================================
   Note from the author
   ========================================================================= */
.taf-sub__note {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-48) var(--space-32) var(--space-64);
  display: flex;
  align-items: center;
  gap: var(--space-24);
}
.entry-content .taf-sub .taf-sub__note-photo {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-round);
  object-fit: cover;
  flex: none;
  margin: 0;
}
.entry-content .taf-sub .taf-sub__note-quote {
  font-family: var(--sans);
  font-size: var(--fs-17);
  line-height: var(--lh-165);
  color: var(--chocolate);
}
.entry-content .taf-sub .taf-sub__note-meta {
  font-family: var(--sans);
  font-size: var(--fs-13);
  color: var(--cocoa);
  margin: var(--space-8) 0 0;
}

/* Handoff: transitions are background/border only, killed for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .taf-sub__form .formkit-input,
  .taf-sub__form .formkit-submit { transition: none; }
}

/* =========================================================================
   Responsive
   ========================================================================= */

/* Tablet and down: hero stacks, copy + form first (source order) */
@media (max-width: 899.98px) {
  .taf-sub__hero {
    grid-template-columns: 1fr;
    gap: var(--space-40);
  }
  .taf-sub__visual { justify-self: start; }
}

/* =========================================================================
   Kit form hardening — SITEWIDE Kit-form contexts, not just /subscribe/.
   Since 2026-07-17 this sheet loads wherever a Kit signup form renders
   (subscribe page, home/about magnet bands, magnet-mapped category
   archives) — see the $taf_has_kit_form condition in inc/enqueue.php.
   Everything below is scoped to Kit's injected markup, so it was inert on
   /subscribe/-only loads and stays inert on pages without a Kit form.

   1. MAGNET FORM ALERTS (.taf-magnet card, .taf-magnetband__form home band):
      Kit's server rejects malformed emails ("Email address is invalid") and
      ck.5.js fills ul[data-element="errors"].formkit-alert-error — by
      default an orange (#f2643b) bordered box, off the Warm Oven palette.
      Restyled to the subscribe-page treatment: Mulish, --rose-deep — AA on
      every ground it appears on (computed 2026-07-17: paper 6.4:1, milk
      6.2:1, cream 5.6:1, rose-tint 5.4:1). Unlike .taf-sub__form above, the
      alert is NOT reordered below the fields row: that needs a flex rewrite
      of Kit's wrapper, and the magnet bands' idle geometry is verified
      pixel-parity — recolor only, zero idle-layout risk (the empty alert
      stays display:none).

   2. THE "ONE MORE STEP" CAPTCHA GUARD MODAL. When Kit's server quarantines
      a submission (bot heuristics; JSON {"status":"quarantined"}), ck.5.js
      appends a full-viewport overlay to <body>:

        div.seva-overlay.formkit-overlay[data-object="overlay"][data-active]
        └─ div.seva-modal.formkit-modal.guard[data-object="modal"]
           ├─ iframe (app.kit.com guard page — the "One more step" heading,
           │ serif copy and the reCAPTCHA widget live INSIDE this
           │ CROSS-ORIGIN iframe and cannot be styled from here;
           │ the only lever for those is Kit-side)
           └─ button.formkit-close[data-formkit-close][aria-label="Close"]

      Selector tree verified on the rendered page 2026-07-17 (guard
      path exercised in-browser; ck.5.js built this DOM itself).
      ⚠️ ALL of these classes are KIT-OWNED (f.convertkit.com/ckjs/ck.5.js)
      and may drift with Kit script updates — re-verify against the rendered
      DOM before editing, and expect this block to fail soft back to Kit's
      defaults if Kit renames them.

      Kit injects its own <style> INSIDE the overlay div — later in DOM
      order than this sheet — so overrides need !important (same precedent
      as the .formkit-* restyles above). We brand the modal CHROME only:
      chocolate scrim, paper ground, house radius/shadow, close button.
      The modal's inline width/height are driven by the iframe's postMessage
      sizing — never set dimensions here.
   ========================================================================= */

/* ---- 1. Magnet form alerts ---- */
.taf-magnet .formkit-form ul.formkit-alert,
.taf-magnetband__form .formkit-form ul.formkit-alert {
  list-style: none;
  margin: 0 0 var(--space-8) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left;
}
.taf-magnet .formkit-form ul.formkit-alert:empty,
.taf-magnetband__form .formkit-form ul.formkit-alert:empty { display: none; }
.taf-magnet .formkit-form .formkit-alert-error li,
.taf-magnetband__form .formkit-form .formkit-alert-error li {
  font-family: var(--sans);
  font-size: var(--fs-15);
  color: var(--rose-deep);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Success: ck.5.js swaps the fields row for this div (copy is Kit-side). */
.taf-magnet .formkit-form .formkit-alert-success,
.taf-magnetband__form .formkit-form .formkit-alert-success {
  font-family: var(--sans) !important;
  font-size: var(--fs-16) !important;
  font-weight: var(--w-bold) !important;
  color: var(--rose-deep) !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  text-align: left;
}

/* Keyboard focus on any Kit input takes the rose border — the :focus rules above
   only cover the subscribe form's scope; this catches the magnet/about surfaces.
   !important: main.css pins the idle border with !important (Kit inline styles),
   and this (0,2,0) selector out-specifies that (0,1,0) pin while focused. */
.formkit-input:focus-visible { border-color: var(--rose) !important; }

/* ---- 2. Guard modal chrome (selectors are Kit-owned — see header) ---- */
body > .formkit-overlay {
  /* Kit default: rgba(77,77,77,.8) gray. House scrim ink instead.
     token-exempt: rgba(var(--ink-rgb), .6) IS tokenized ink — the scanner
     cannot parse a var() inside rgba() and misreads it as a color literal. */
  background: rgba(var(--ink-rgb), .6) !important;
}
.formkit-modal.guard {
  background: var(--paper) !important;     /* paper ground while the iframe loads */
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-hover) !important;
  overflow: hidden;
}
.formkit-modal.guard > iframe {
  border-radius: inherit;
  background: var(--paper);
}
.formkit-modal.guard .formkit-close {
  background: var(--paper) !important;
  color: var(--chocolate) !important;
  border-radius: var(--radius-round) !important;
  box-shadow: var(--shadow);
  opacity: var(--o-1);
  transition: background var(--speed) var(--ease);
}
.formkit-modal.guard .formkit-close:hover,
.formkit-modal.guard .formkit-close:focus-visible {
  background: var(--cream) !important;
  color: var(--rose-deep) !important;
}
@media (prefers-reduced-motion: reduce) {
  .formkit-modal.guard .formkit-close { transition: none; }
}

/* Phone (handoff 390 spec): form row stacks full-width, offer card inset
   16px, cards stack, controls >= 44px + 16px input text (no iOS zoom) */
@media (max-width: 699.98px) {
  .taf-sub__hero { padding: var(--space-40) var(--space-20) var(--space-48); gap: var(--space-32); }
  .entry-content .taf-sub h1.taf-sub__title { font-size: var(--fs-36); } /* site mobile hero scale (--fs-hero) */
  .taf-sub__form .formkit-fields,
  .taf-sub__form [data-element="fields"],
  .taf-sub__form .seva-fields { flex-wrap: wrap !important; }
  .taf-sub__form .formkit-field { flex: 1 1 100% !important; }
  .taf-sub__form .formkit-submit,
  .taf-sub__form .formkit-form[data-uid] .formkit-submit { flex: 1 1 100% !important; width: 100% !important; }
  /* Phone: the field row wraps, so input + 8px gap + submit stack into two
     52px control rows (measured 112px). Match the reservation so the async
     embed still lands into pre-reserved space (no CLS). */
  .entry-content .taf-sub .wp-block-group.taf-sub__form { min-height: 112px; } /* token-exempt: two stacked 52px Kit controls + var(--space-8) gap; reserves the async-embed height to prevent CLS */
  .taf-sub__visual { max-width: none; }
  .taf-sub__offer { left: 16px; bottom: 16px; }
  .taf-sub__band { padding: var(--space-40) var(--space-20) var(--space-48); }
  .entry-content .taf-sub h2.taf-sub__band-title { font-size: var(--fs-24); } /* site mobile h2 scale (--fs-h2) */
  .entry-content .taf-sub .taf-sub__cards { grid-template-columns: 1fr; gap: var(--space-16); margin-top: var(--space-24); }
  .taf-sub__note { padding: var(--space-40) var(--space-20) var(--space-64); align-items: flex-start; gap: var(--space-20); }
}