/*
 * MetaHashtags 2: the free "5-Hashtag Playbook" sign-up (assets/js/leads.js, inc/leads.php):
 * the email form, the home page popup (centred dialog) and phone sheet, the teaser tab, the card
 * under the generator results, the block in the search-limit dialog, the boxes in blog posts, the
 * link on the blog index and the landing page /instagram-hashtag-playbook/.
 * Loaded on generator pages, blog views and the landing page, on top of main.css and its tokens.
 * The sign-up button is blue (an action, main.css colour rules).
 */

/* Optional placements are hidden for subscribers (set before paint by inc/leads.php) and, from
   leads.js, for logged-in visitors. The landing page's forms are not optional. */
.mh-lead-off [data-mh-lead-optional] { display: none !important; }

/* ---------- Form ---------- */
.lead-form { position: relative; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.lead-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lead-row input[type="email"] { flex: 999 1 220px; min-width: 0; min-height: 50px; }
.lead-go { flex: 1 1 auto; min-height: 50px; padding-inline: 20px; font-size: 16px; border-radius: var(--r); }
.lead-go[disabled] { opacity: 0.75; cursor: progress; }
.lead-form input[aria-invalid="true"] { border-color: var(--red); }
.lead-error { margin-top: -2px; }
/* Honeypot: off screen for people, still a normal field for bots */
.lead-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.lead-consent {
  display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 4px 0;
  font-size: 14px; line-height: 1.45; color: var(--ink-2); cursor: pointer;
}
.lead-consent .check { margin-top: 1px; }
.lead-fine { font-size: 13px; line-height: 1.5; color: var(--muted); }
.lead-fine a { color: var(--ink-2); }
.lead-fine a:hover { color: var(--ink); }

/* After the sign-up */
.lead-done { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; outline: none; text-align: left; }
.lead-done-title { display: flex; align-items: center; gap: 10px; font: 900 26px/1.15 var(--font-display); color: var(--ink); letter-spacing: -0.01em; }
.lead-done-check { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--teal); color: var(--teal-dark); }
.lead-download { white-space: normal; text-align: left; }
.lead-done-note { font-size: 15px; color: var(--ink-2); max-width: 52ch; }
.lead-done-note strong { color: var(--ink); overflow-wrap: anywhere; }

/* ---------- Popup (home page): centred dialog on desktop, bottom sheet on phones ---------- */
@media (min-width: 640px) {
  dialog.lead-dialog { width: min(560px, calc(100% - 32px)); }
  dialog.lead-dialog.has-cover { width: min(760px, calc(100% - 32px)); }
}
dialog.lead-dialog .sheet-inner { padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 640px) { dialog.lead-dialog .sheet-inner { padding: 32px; } }
/* The phone sheet ("engaged" trigger) stays at the bottom and covers at most ~60% of the screen. */
dialog.lead-dialog.is-bottom {
  inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%; height: auto;
  max-height: 60vh; max-height: 60dvh; border-radius: 20px 20px 0 0;
}
dialog.lead-dialog.is-bottom[open] { animation: mh-sheet-up 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
dialog.lead-dialog.is-bottom .sheet-inner { max-width: 560px; margin-inline: auto; padding-top: 20px; }

.lead-pop { position: relative; display: grid; gap: 24px; }
.lead-pop > .sheet-x { position: absolute; top: -8px; right: -6px; z-index: 1; }
.lead-cover-col { display: none; }
@media (min-width: 720px) {
  .lead-pop.has-cover { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: center; }
  .lead-cover-col { display: block; }
}
.lead-cover { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 18px 36px -18px rgba(16, 33, 45, 0.55), 0 2px 6px rgba(16, 33, 45, 0.12); transform: rotate(-2deg); }
.lead-pop-text { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lead-kicker { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--blue-wash); color: var(--link); font-weight: 800; font-size: 13px; line-height: 1.35; margin-right: 40px; }
.lead-title { font: 900 28px/1.12 var(--font-display); letter-spacing: -0.02em; outline: none; padding-right: 36px; }
.lead-kicker + .lead-title { padding-right: 0; }
.lead-text { color: var(--ink-2); font-size: 16px; }
.lead-pop .lead-form { margin-top: 4px; }
.lead-no {
  align-self: flex-start; min-height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer;
  font: 700 14px var(--font-body); color: var(--muted); text-decoration: underline; text-underline-offset: 0.2em;
}
.lead-no:hover { color: var(--ink); }
@media (max-width: 639.98px) {
  .lead-title { font-size: 22px; }
  .lead-text { font-size: 15px; }
  .lead-pop { gap: 16px; }
  .lead-pop-text { gap: 10px; }
  .lead-pop .lead-row { flex-direction: column; }
  .lead-pop .lead-row input[type="email"] { flex: none; }
}

/* ---------- Teaser tab (home page, after a dismissal) ---------- */
.lead-teaser {
  position: fixed; z-index: 26; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-pop);
  animation: mh-teaser-in 0.25s ease-out;
}
@media (max-width: 959.98px) { body.has-selbar .lead-teaser { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } }
@keyframes mh-teaser-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lead-teaser-open {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 10px 4px 6px;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font: 800 14px var(--font-body); color: var(--ink);
}
.lead-teaser-open:hover { background: var(--bg); }
.lead-teaser-img { display: block; width: 24px; height: auto; border-radius: 3px; box-shadow: 0 2px 4px rgba(16, 33, 45, 0.2); }
.lead-teaser-x {
  display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer;
}
.lead-teaser-x:hover { background: var(--chip); color: var(--ink); }

/* ---------- Card under the generator results ---------- */
.lead-slot { padding: 16px 22px 22px; border-top: 1px solid var(--line); background: var(--surface); }
.lead-inline { display: flex; gap: 20px; align-items: flex-start; }
.lead-inline-cover { flex: none; display: block; width: 64px; height: auto; border-radius: 4px; box-shadow: 0 8px 18px -10px rgba(16, 33, 45, 0.6); transform: rotate(-3deg); margin-top: 4px; }
.lead-inline-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lead-inline-title { font: 800 19px/1.3 var(--font-display); }
.lead-inline-text { color: var(--ink-2); font-size: 15px; margin-bottom: 8px; }
.lead-form.is-compact { gap: 6px; }
.lead-form.is-compact .lead-row input[type="email"], .lead-form.is-compact .lead-go { min-height: 46px; }
.lead-form.is-compact .lead-consent { font-size: 13px; }
.lead-form.is-compact .lead-fine { font-size: 12px; }
@media (min-width: 960px) and (max-width: 1199.98px) { .lead-slot { padding-inline: 18px; } }
@media (max-width: 639.98px) {
  .lead-slot { margin: 16px -4px 0; padding: 16px 14px; border: 1px solid var(--line); border-radius: 14px; }
  .lead-inline { gap: 14px; }
  .lead-inline-cover { width: 48px; }
  .lead-inline-title { font-size: 17px; }
}

/* ---------- Search limit dialog (sheet.js) ---------- */
.lead-limit { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line); }
.lead-limit-title { font: 800 18px/1.25 var(--font-display); }
.lead-limit-text { font-size: 14px; color: var(--ink-2); margin-bottom: 6px; }
.lead-limit .lead-done-title { font-size: 22px; }

/* ---------- Blog: boxes in posts (on the .post-cta article box) and the index link ---------- */
.prose .lead-box { padding: 18px 20px 16px; }
.lead-box-head { display: flex; gap: 16px; align-items: flex-start; }
.lead-box-head p { margin: 0; font-size: 16px; line-height: 1.55; }
.lead-thumb { flex: none; display: block; width: 54px; height: auto; border-radius: 4px; box-shadow: 0 8px 16px -10px rgba(16, 33, 45, 0.6); margin-top: 3px; }
.prose .lead-box .lead-form { margin-top: 14px; }
.prose .lead-box .lead-form > * + * { margin-top: 0; }
.prose .lead-box .lead-fine a, .prose .lead-box .lead-done a.btn { text-decoration: none; }
.prose .lead-box .lead-fine a { text-decoration: underline; color: var(--ink-2); font-weight: 600; }
.prose .lead-box a.lead-download { color: #fff; font-weight: 800; }
.prose .lead-box .lead-done { margin-top: 12px; }
.prose .lead-box .lead-done > * + * { margin-top: 0; }
.prose .lead-box input[type="email"] { background: var(--surface); }

.blog-playbook {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 14px; margin-top: 8px; max-width: 640px;
  padding: 10px 16px 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  color: var(--ink-2); font-size: 15px; line-height: 1.45; text-decoration: none; box-shadow: var(--shadow-card);
}
.blog-playbook strong { color: var(--ink); }
.blog-playbook img { flex: none; width: 40px; height: auto; border-radius: 3px; box-shadow: 0 4px 10px -6px rgba(16, 33, 45, 0.6); }
.blog-playbook .icon { flex: none; color: var(--link); }
.blog-playbook:hover { border-color: var(--line-strong); color: var(--ink); }

/* ---------- Landing page ---------- */
.pb-hero { background: var(--bg); border-bottom: 1px solid var(--line); }
.pb-hero-inner { display: grid; gap: 32px; align-items: center; padding-top: 36px; padding-bottom: 48px; }
@media (min-width: 900px) {
  .pb-hero-inner { grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; padding-top: 72px; padding-bottom: 80px; }
}
@media (min-width: 1100px) { .pb-hero-inner { grid-template-columns: minmax(0, 1fr) 380px; } }
.pb-hero-text { display: flex; flex-direction: column; gap: 16px; min-width: 0; max-width: 620px; }
.pb-title { font: 900 clamp(38px, 7vw, 60px)/1.02 var(--font-display); letter-spacing: -0.03em; }
.pb-sub { font-size: clamp(17px, 2.4vw, 20px); color: var(--ink-2); max-width: 44ch; }
.pb-form { margin-top: 8px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-panel); }
.pb-form .lead-account { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.pb-form .lead-account[hidden], .pb-form .lead-form[hidden] { display: none; }
/* Phones and tablets: a small cover above the title, so the form stays near the top. */
.pb-cover { margin: 0 0 -16px 4px; order: -1; justify-self: start; width: 112px; }
@media (min-width: 900px) { .pb-cover { order: 0; margin: 0; justify-self: stretch; width: 100%; } }
.pb-cover img {
  display: block; width: 100%; height: auto; border-radius: 8px;
  box-shadow: 0 34px 60px -28px rgba(16, 33, 45, 0.6), 0 4px 12px rgba(16, 33, 45, 0.12);
  transform: rotate(2deg);
}

.pb-chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); counter-reset: none; }
@media (min-width: 720px) { .pb-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; } }
@media (min-width: 1040px) { .pb-chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pb-chapters li {
  display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  font-weight: 800; font-size: 16px; line-height: 1.35; color: var(--ink);
}
.pb-num {
  flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--blue-wash); color: var(--link); font: 900 17px/1 var(--font-display);
}
.pb-chapters li:nth-child(4n+2) .pb-num { background: var(--teal-wash); color: var(--teal-ink); }
.pb-chapters li:nth-child(4n+3) .pb-num { background: var(--orange-wash); color: var(--orange-ink); }
.pb-chapters li:nth-child(4n+4) .pb-num { background: var(--red-wash); color: var(--red-ink); }
.pb-extra { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-weight: 700; color: var(--ink-2); }
.pb-extra .icon { color: var(--teal-link); }

.pb-band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pb-days { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-width: 760px; }
.pb-days li { display: flex; align-items: baseline; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.pb-days li:last-child { border-bottom: 0; }
.pb-day { flex: none; width: 64px; font: 800 13px/1.6 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--link); }
.pb-day-title { font: 800 19px/1.35 var(--font-display); color: var(--ink); }
@media (max-width: 639.98px) {
  .pb-days li { flex-direction: column; gap: 2px; }
  .pb-day-title { font-size: 17px; }
}

.pb-author { display: flex; gap: 18px; align-items: flex-start; max-width: 720px; }
.pb-author > div { display: flex; flex-direction: column; gap: 6px; }
.pb-author-name { font: 800 20px/1.3 var(--font-display); }
.pb-author .avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--blue); color: #fff; font: 900 20px/1 var(--font-display); }

.pb-final-wrap { padding-top: 8px; }
.pb-final {
  display: flex; gap: 32px; align-items: center; padding: 28px; max-width: 920px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-panel);
}
.pb-final-cover { flex: none; width: 120px; height: auto; border-radius: 6px; box-shadow: 0 16px 30px -18px rgba(16, 33, 45, 0.6); transform: rotate(-2deg); }
.pb-final-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pb-final-title { font: 900 30px/1.1 var(--font-display); letter-spacing: -0.02em; }
.pb-final .pb-form { margin-top: 8px; padding: 0; border: 0; box-shadow: none; background: transparent; }
@media (max-width: 719.98px) {
  .pb-final { flex-direction: column; align-items: flex-start; padding: 22px 18px; gap: 18px; }
  .pb-final-cover { width: 88px; }
  .pb-final-title { font-size: 26px; }
}