/* ═══════════════════════════════════════════════════════════════════════════
   blog-modal.css — CTA + HubSpot-meeting-modal recovery for the modern posts.

   The 16 "modern" posts (and ~106 plain posts) shipped an inline HubSpot
   meeting modal (.vshr-meeting-overlay) plus CTA <button>s wired to
   onclick="...classList.add('active')". WordPress kses stripped the inline
   <style> AND the <script src="...MeetingsEmbedCode.js"> on import, so:
     • the modal markup is orphaned (un-styled, never populated, never opens),
     • every opener button is a DEAD trigger (the embed JS that would render the
       meeting iframe is gone),
     • the post's own .closing-cta duplicates the frame's .bp-cta band.

   DECISION (no live modal): the single-post FRAME already provides working
   closing CTAs (.bp-cta → /contact/ and .bp-promo → /contact/). So we
     1. HIDE the orphaned meeting-modal markup (no broken/empty overlay),
     2. HIDE the post-level .closing-cta (duplicate of .bp-cta),
     3. STYLE the surviving in-body .cta-btn elements as clean brand links;
        single-post.js rewrites their dead onclick to navigate to /contact/
        so the in-body call-to-action still works without the modal.

   Everything is scoped to .vshr-blog (or .e-content) so it cannot leak to the
   166 plain posts. Brand: navy #07192E, blue #2170b5, accent magenta #ea1c72.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Hide the orphaned HubSpot meeting modal (kses stripped its embed JS) ──
   Scoped to .e-content so only the in-article copy is removed, never any
   site-level modal. The overlay default is display:none anyway, but kill it
   hard so a stray .active class (or surviving inline JS) can't flash an empty
   white box, and remove it from the a11y/tab order. */
.e-content .vshr-meeting-overlay,
.e-content #vshr-meeting-modal { display: none !important; }

/* ── 2. Hide the post-level closing CTA: the frame's .bp-cta already renders a
   navy "Have a question on this?" band → /contact/. Two stacked closing CTAs
   read as double chrome, so the in-content one is suppressed. ── */
.e-content .closing-cta { display: none !important; }

/* ── 3. In-body CTA buttons/links (the mid-article ones that are NOT inside the
   hidden .closing-cta). single-post.js converts each surviving .cta-btn to a
   real link to /contact/. Style them as a clean brand-magenta pill so the
   in-flow call-to-action still looks intentional. ──
   We deliberately re-declare the look here (the original inline .cta-btn CSS
   was stripped) and keep it tight to .vshr-blog. */
.vshr-blog .cta-btn,
.vshr-blog a.cta-btn,
.vshr-blog button.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px 0;
  padding: 13px 28px;
  border: none;
  border-radius: 8px;
  background: #ea1c72;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(234, 28, 114, 0.22);
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

/* keep the underline-on-hover link rule from blog-content.css off these pills */
.vshr-blog a.cta-btn { text-decoration: none; }
.vshr-blog a.cta-btn:hover { color: #fff; text-decoration: none; }

.vshr-blog .cta-btn:hover,
.vshr-blog a.cta-btn:hover,
.vshr-blog button.cta-btn:hover {
  background: #d0186a;
  box-shadow: 0 6px 18px rgba(234, 28, 114, 0.3);
  transform: translateY(-1px);
}

.vshr-blog .cta-btn:focus-visible,
.vshr-blog button.cta-btn:focus-visible {
  outline: 3px solid rgba(33, 112, 181, 0.45);
  outline-offset: 2px;
}

/* small variant used mid-article (.cta-btn-sm) */
.vshr-blog .cta-btn-sm {
  padding: 9px 18px;
  font-size: 13.5px;
  box-shadow: 0 3px 10px rgba(234, 28, 114, 0.2);
}

/* secondary inline link that sometimes sits beside the primary CTA
   (.cta-btn-secondary / .closing-secondary live in a hidden .closing-cta, but
   .cta-btn-secondary can appear standalone — render it as a quiet blue link) */
.vshr-blog a.cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 13px 22px;
  border: 1px solid #c8d4e2;
  border-radius: 8px;
  background: #fff;
  color: #1665a8;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  box-shadow: none;
}
.vshr-blog a.cta-btn-secondary:hover {
  background: #f6f8fb;
  color: #07192E;
  border-color: #2170b5;
  text-decoration: none;
  transform: none;
}

/* mid-article CTA wrapper, when a button sits in its own row */
.vshr-blog .mid-cta,
.vshr-blog .cta-prompt {
  margin: 26px 0;
}

@media (max-width: 640px) {
  .vshr-blog .cta-btn,
  .vshr-blog a.cta-btn,
  .vshr-blog button.cta-btn { width: 100%; }
}