/* ============================================================
   Cornerstone — daily blog subscription form
   ------------------------------------------------------------
   The single source of truth for subscribe-form styling. It is
   loaded by four different kinds of page:

     /blog/*.html      generated by blog/build.mjs (uses blog.css)
     /blog/index.html  generated, the listing
     /index.html       hand-built, has its own inline <style>
     /strategies/*     hand-built, each with its own inline <style>

   Those pages do NOT share a stylesheet — the hand-built ones
   carry inline styles and blog.css would fight them. So this
   lives in its own small file that all of them link, rather than
   being copied into each. A copy in blog.css plus a copy in the
   inline styles is exactly the arrangement that drifts until the
   form looks subtly different depending on where you find it.

   Every page that uses this already defines the brand tokens
   (--navy, --gold, --cream...) in its own styles, but each var()
   carries a literal fallback anyway so a page that forgets them
   still renders correctly rather than transparent-on-transparent.

   Two variants:
     .sub-box   full panel, for the end of an article or page
     .sub-bar   compact horizontal strip, for the top of a listing
   ============================================================ */

/* ── shared form controls ─────────────────────────────────── */
.sub-form {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.sub-form input[type="email"] {
  flex: 1 1 240px; min-width: 0;
  font-family: 'Lato', sans-serif; font-size: 15.5px;
  color: var(--navy, #1C3A5E);
  background: var(--cream, #F8F5EF);
  border: 1px solid var(--rule, #D6C9A8); border-radius: 2px;
  padding: 14px 16px; outline: none; transition: border-color 0.2s;
}
.sub-form input[type="email"]:focus { border-color: var(--gold, #C9A84C); }
.sub-form input[type="email"]::placeholder { color: var(--navy-light, #5A7EA8); }
.sub-form button {
  flex: 0 0 auto; border: none; cursor: pointer;
  background: var(--navy, #1C3A5E); color: #fff;
  font-family: 'Lato', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  padding: 14px 28px; border-radius: 2px; transition: background 0.2s;
}
.sub-form button:hover:not(:disabled) { background: var(--navy-mid, #2B5282); }
.sub-form button:disabled { opacity: 0.55; cursor: default; }

/* Honeypot: positioned off-screen rather than display:none. Some bots skip
   hidden fields but happily fill a positioned one, and aria-hidden keeps it
   away from screen readers. */
.sub-pot {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.sub-status { margin: 14px 0 0; font-size: 14px; line-height: 1.6; min-height: 1em; }
.sub-status-ok    { color: #2E7D52; }
.sub-status-error { color: #B23B3B; }
.sub-status-busy  { color: var(--navy-light, #5A7EA8); }

.sub-fine {
  margin: 12px 0 0;
  font-size: 12.5px; line-height: 1.6; color: var(--navy-light, #5A7EA8);
}

/* ── variant 1: full panel ────────────────────────────────── */
.sub-box {
  background: #fff;
  border: 1px solid var(--rule, #D6C9A8);
  padding: 40px 36px; margin: 40px 0 0; text-align: center;
}
.sub-box .sub-form,
.sub-box .sub-status,
.sub-box .sub-fine { max-width: 460px; margin-left: auto; margin-right: auto; }
.sub-box-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--gold, #C9A84C); margin-bottom: 10px;
}
.sub-box h2 {
  font-family: 'EB Garamond', Georgia, serif; color: var(--navy, #1C3A5E);
  font-size: clamp(23px, 2.6vw, 29px); font-weight: 400; line-height: 1.3;
  margin: 0 0 12px;
}
.sub-box p.sub-lede {
  color: var(--navy-mid, #2B5282); max-width: 480px; margin: 0 auto 26px;
  font-size: 15.5px; line-height: 1.7;
}

/* On a page that ends with a dark booking CTA, the panel sits directly under
   it — a top margin keeps the two from reading as one block. */
.listing .sub-box { margin: 64px auto 0; max-width: 760px; }
.strategy-subscribe { padding: 0 24px 80px; max-width: 1160px; margin: 0 auto; }
.home-subscribe { padding: 0 24px 90px; max-width: 1160px; margin: 0 auto; }

/* ── variant 2: compact bar ───────────────────────────────── */
/* For the top of the blog listing, where a full panel would push the actual
   articles below the fold. Reads as one line on desktop, stacks on mobile. */
.sub-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--rule, #D6C9A8);
  border-left: 3px solid var(--gold, #C9A84C);
  padding: 22px 26px; margin: 0 0 44px;
}
.sub-bar-copy { flex: 1 1 300px; min-width: 0; }
.sub-bar-copy h2 {
  font-family: 'EB Garamond', Georgia, serif; color: var(--navy, #1C3A5E);
  font-size: 21px; font-weight: 400; line-height: 1.3; margin: 0 0 4px;
}
.sub-bar-copy p {
  margin: 0; font-size: 14px; line-height: 1.6;
  color: var(--navy-light, #5A7EA8);
}
.sub-bar .sub-form { flex: 0 1 420px; }
.sub-bar .sub-form input[type="email"] { padding: 12px 14px; font-size: 15px; }
.sub-bar .sub-form button { padding: 12px 22px; }
.sub-bar .sub-status { flex: 1 1 100%; margin-top: 4px; }

@media (max-width: 860px) {
  .sub-bar { gap: 16px; }
  .sub-bar .sub-form { flex: 1 1 100%; }
}
@media (max-width: 560px) {
  .sub-box { padding: 32px 22px; }
  .sub-bar { padding: 20px; }
  .sub-form button { flex: 1 1 100%; }
}