/* TAF 2026 — Newsletter subscribe page
   Full file header, design notes and per-rule rationale: docs/design/css-rationale/taf-subscribe.css.md */

/* ---- 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; }

/* .taf-sub__hero — rationale: docs/design/css-rationale/taf-subscribe.css.md#taf-sub-hero */
.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;
  /* .entry-content .taf-sub .wp-block-group.taf-sub__form — rationale: docs/design/css-rationale/taf-subscribe.css.md#entry-content-taf-sub-wp-block-group-taf-sub-form */
  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;
}
/* .taf-sub__form .formkit-form > div[data-style="clean"], .t… — rationale: docs/design/css-rationale/taf-subscribe.css.md#taf-sub-form-formkit-form-div-data-style-clean-taf-sub-form- */
.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; }
}

/* .taf-magnet .formkit-form ul.formkit-alert, .taf-magnetban… — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/taf-subscribe.css.md#taf-magnet-formkit-form-ul-formkit-alert-taf-magnetband-form */

/* ---- 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;
}

/* .formkit-input:focus-visible — rationale: docs/design/css-rationale/taf-subscribe.css.md#formkit-input-focus-visible */
.formkit-input:focus-visible { border-color: var(--rose) !important; }

/* ---- 2. Guard modal chrome (selectors are Kit-owned — see header) ---- */
body > .formkit-overlay {
  /* body > .formkit-overlay — rationale: docs/design/css-rationale/taf-subscribe.css.md#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; }
  /* .entry-content .taf-sub .wp-block-group.taf-sub__form — rationale: docs/design/css-rationale/taf-subscribe.css.md#entry-content-taf-sub-wp-block-group-taf-sub-form-2 */
  .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); }
}