@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════
   Supsystic blog post — November 2026 (templates/blog/single2.php)
   Builds on templates/hp/style2.css (.hp2) and templates/blog/style2.css (cards).
   ═══════════════════════════════════════════════════════════════════ */

/* the theme prints breadcrumbs under the header; the hero has its own */
.single-blog .breadcrumbs-wrapper{ display: none; }

/* ─── Reading progress ─── */
.bs2Progress{ position: fixed; left: 0; right: 0; top: var(--hdr-h, 68px); z-index: 9989; height: 3px; pointer-events: none; }
body.admin-bar .bs2Progress{ top: calc(var(--hdr-h, 68px) + 32px); }
@media screen and (max-width: 782px){ body.admin-bar .bs2Progress{ top: calc(var(--hdr-h, 68px) + 46px); } }
.bs2Progress span{ display: block; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #52bac5, #377dff); box-shadow: 0 0 10px rgba(82, 186, 197, 0.7); }

/* ─── Hero ─── */
.bs2HeroGrid{ position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
.bs2HeroNoPic{ grid-template-columns: minmax(0, 860px); }
.bs2Crumbs{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.45); }
.bs2Crumbs a{ color: var(--hp-brand-l) !important; text-decoration: none !important; }
.bs2Crumbs a:hover{ color: #fff !important; }
.hp2 .bs2Title{ font-size: clamp(30px, 3.4vw, 46px); line-height: 1.12; margin-bottom: 20px; }
.bs2Meta{ display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; color: rgba(255, 255, 255, 0.62); }
.bs2Meta span{ display: inline-flex; align-items: center; gap: 7px; }
.bs2Meta svg{ width: 15px; height: 15px; color: var(--hp-brand-l); }
.bs2Upd{ padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 700; color: #3ddc97; background: rgba(61, 220, 151, 0.1); }
.bs2Cover{ position: relative; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 34px 80px -28px rgba(0, 0, 0, 0.8); }
.bs2Cover img{ display: block; width: 100%; height: auto; }

/* ─── Layout ─── */
.bs2Body{ background: #fff; }
.bs2Grid{
  display: grid;
  grid-template-columns: 230px minmax(0, 760px) 270px;
  justify-content: center;
  gap: 48px;
  align-items: start;
  padding-top: 64px;
  padding-bottom: 80px;
}
.bs2NoToc{ grid-template-columns: minmax(0, 760px) 270px; }
.bs2Toc, .bs2Aside{ position: sticky; top: calc(var(--hdr-h, 68px) + 32px); }
body.admin-bar .bs2Toc, body.admin-bar .bs2Aside{ top: calc(var(--hdr-h, 68px) + 64px); }

/* ─── Table of contents ─── */
.bs2TocBox{ border-radius: 16px; background: var(--hp-off); padding: 6px 6px 10px; }
.bs2TocBox > summary{ display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hp-brand); cursor: pointer; list-style: none; }
.bs2TocBox > summary::-webkit-details-marker{ display: none; }
.bs2TocList{ display: grid; gap: 2px; max-height: calc(100vh - 220px); overflow-y: auto; scrollbar-width: thin; }
.bs2TocList a{
  position: relative;
  display: block;
  padding: 7px 12px 7px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--hp-text2) !important;
  text-decoration: none !important;
  transition: var(--hp-t);
}
.bs2TocList a::before{ content: ""; position: absolute; left: 6px; top: 50%; width: 3px; height: 0; border-radius: 3px; background: var(--hp-brand); transform: translateY(-50%); transition: height 0.25s; }
.bs2TocList a:hover{ color: var(--hp-navy) !important; background: rgba(13, 131, 141, 0.06); }
.bs2TocList a.is-on{ color: var(--hp-navy) !important; font-weight: 700; background: #fff; box-shadow: 0 6px 16px -10px rgba(30, 45, 61, 0.4); }
.bs2TocList a.is-on::before{ height: 60%; }
.bs2TocList .planTag3, .bs2TocList .planTag4, .bs2TocList .planTag5, .bs2TocList .planTag6{ padding-left: 28px; font-size: 13px; }

/* ─── Article typography ─── */
.bs2Prose{ font-size: 17px; line-height: 1.8; color: #34465c; overflow-wrap: break-word; }
.bs2Prose > *:first-child{ margin-top: 0; }
.bs2Prose p{ margin: 0 0 1.15em; font-size: inherit; line-height: inherit; color: inherit; }
.bs2Prose h1, .bs2Prose h2, .bs2Prose h3, .bs2Prose h4, .bs2Prose h5, .bs2Prose h6{
  font-family: var(--hp-font-h);
  font-weight: 800;
  color: var(--hp-navy);
  letter-spacing: -0.015em;
  text-transform: none;
  scroll-margin-top: 120px;
}
.bs2Prose h1, .bs2Prose h2{ margin: 1.9em 0 0.6em; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.25; }
.bs2Prose h3{ margin: 1.6em 0 0.5em; font-size: 21px; line-height: 1.3; }
.bs2Prose h4, .bs2Prose h5, .bs2Prose h6{ margin: 1.4em 0 0.4em; font-size: 18px; line-height: 1.35; }
.bs2Prose [id^="textPlan"]{ scroll-margin-top: 120px; }
.bs2Prose a{ color: var(--hp-brand) !important; font-weight: 600; text-decoration: underline !important; text-decoration-color: rgba(13, 131, 141, 0.35) !important; text-underline-offset: 3px; }
.bs2Prose a:hover{ text-decoration-color: var(--hp-brand) !important; }
.bs2Prose strong, .bs2Prose b{ color: var(--hp-navy); }
.bs2Prose ul, .bs2Prose ol{ margin: 0 0 1.3em; padding-left: 0; }
.bs2Prose li{ position: relative; margin: 0 0 0.55em; padding-left: 30px; font-size: inherit; line-height: 1.7; list-style: none; }
.bs2Prose ul > li::before{ content: ""; position: absolute; left: 8px; top: 0.72em; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--hp-brand-l), var(--hp-brand)); }
.bs2Prose ol{ counter-reset: bs2ol; }
.bs2Prose ol > li{ counter-increment: bs2ol; }
.bs2Prose ol > li::before{ content: counter(bs2ol); position: absolute; left: 0; top: 0.2em; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 800; line-height: 22px; text-align: center; color: var(--hp-brand); background: rgba(13, 131, 141, 0.1); }
.bs2Prose img{ max-width: 100%; height: auto; border-radius: 14px; }
.bs2Prose figure, .bs2Prose .wp-block-image, .bs2Prose .wpb_single_image{ margin: 1.6em 0; }
.bs2Prose figure img, .bs2Prose .wpb_single_image img{ box-shadow: 0 20px 44px -28px rgba(30, 45, 61, 0.55); border: 1px solid var(--hp-border); }
.bs2Prose figcaption{ margin-top: 10px; font-size: 13.5px; text-align: center; color: var(--hp-text3); }
.bs2Prose blockquote{ margin: 1.6em 0; padding: 18px 22px; border-left: 4px solid var(--hp-brand-l); border-radius: 0 14px 14px 0; background: var(--hp-off); font-size: 17px; color: var(--hp-navy); }
.bs2Prose blockquote p:last-child{ margin-bottom: 0; }
.bs2Prose code{ padding: 2px 7px; border-radius: 6px; font-size: 0.88em; color: #0b6e76; background: rgba(13, 131, 141, 0.08); }
.bs2Prose pre{ margin: 1.4em 0; padding: 18px 20px; border-radius: 14px; overflow-x: auto; font-size: 14px; line-height: 1.6; color: #d5e3f0; background: #0f1720; }
.bs2Prose pre code{ padding: 0; color: inherit; background: none; }
.bs2Prose table{ width: 100%; margin: 1.6em 0; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.bs2Prose th, .bs2Prose td{ padding: 11px 14px; border-bottom: 1px solid #e3eaf2; text-align: left; vertical-align: top; }
.bs2Prose th{ font-weight: 800; color: var(--hp-navy); background: var(--hp-off); }
.bs2Prose iframe{ display: block; max-width: 100%; border: 0; border-radius: 14px; }
.bs2Prose iframe[src*="youtube"], .bs2Prose iframe[src*="vimeo"]{ width: 100%; height: auto; aspect-ratio: 16 / 9; box-shadow: 0 24px 50px -30px rgba(15, 23, 42, 0.7); }
.bs2Prose hr{ margin: 2.2em 0; border: 0; border-top: 1px solid var(--hp-border); }
/* WPBakery rows inside the post: no extra gutters */
.bs2Prose .vc_row{ margin-left: 0; margin-right: 0; }
.bs2 .bs2Prose .vc_row > .vc_column_container, .bs2Prose .vc_column_container > .vc_column-inner{ padding-left: 0; padding-right: 0; }
.bs2Prose .wpb_content_element, .bs2Prose .wpb_text_column{ margin-bottom: 0; }
.bs2Prose .vc_custom_heading{ margin-top: 1.9em; }
.bs2Seo{ margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--hp-border); font-size: 15px; }

/* ─── After the article ─── */
.bs2End{ display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; margin-top: 48px; }
.bs2Feedback, .bs2Share{ padding: 22px 24px; border-radius: 18px; background: var(--hp-off); }
.bs2FbAsk b, .bs2FbDone b{ display: block; font-family: var(--hp-font-h); font-size: 17px; font-weight: 800; color: var(--hp-navy); }
.bs2FbAsk > span{ display: block; margin-top: 4px; font-size: 14px; color: var(--hp-text2); }
.bs2FbBtns{ display: flex; gap: 10px; margin-top: 14px; }
.hp2 .bs2FbBtns button, .hp2 .bs2ShareBtns button{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 0;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  color: var(--hp-navy);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--hp-border);
  cursor: pointer;
  transition: var(--hp-t);
}
.bs2FbBtns button svg, .bs2ShareBtns button svg{ width: 17px; height: 17px; }
.bs2FbBtns button:hover{ color: var(--hp-brand); box-shadow: inset 0 0 0 1.5px var(--hp-brand-l); }
.bs2FbDone b{ display: flex; align-items: center; gap: 8px; }
.bs2FbDone b::before{ content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: 14px; color: #fff; background: #16a36b; }
.bs2Share > span{ display: block; font-family: var(--hp-font-h); font-size: 17px; font-weight: 800; color: var(--hp-navy); }
.bs2ShareBtns{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bs2ShareBtns a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--hp-navy) !important;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--hp-border);
  transition: var(--hp-t);
}
.bs2ShareBtns a svg{ width: 17px; height: 17px; }
.bs2ShareBtns a:hover, .hp2 .bs2ShareBtns button:hover{ color: var(--hp-brand) !important; box-shadow: inset 0 0 0 1.5px var(--hp-brand-l); transform: translateY(-2px); }
.hp2 .bs2ShareBtns button{ padding: 0 14px; height: 42px; border-radius: 12px; }
.bs2ShareBtns button em{ font-style: normal; }
.hp2 .bs2ShareBtns button.is-done{ color: #fff; background: #16a36b; box-shadow: none; }

/* ─── Plugin card next to the post ─── */
.bs2Promo{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 22px 22px;
  border-radius: 20px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.7);
  background:
    radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--c) 26%, transparent), transparent 70%),
    linear-gradient(160deg, #1a2333 0%, #0f1720 100%);
  box-shadow: 0 24px 50px -30px rgba(15, 23, 42, 0.8);
}
.bs2PromoIco{ display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 12px; border-radius: 14px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }
.bs2PromoIco svg{ width: 24px; height: 24px; }
.bs2PromoKicker{ font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hp-brand-l); }
.bs2Promo b{ font-family: var(--hp-font-h); font-size: 19px; font-weight: 800; line-height: 1.25; color: #fff; }
.bs2Promo small{ font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.bs2PromoBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1a1a1a !important;
  text-decoration: none !important;
  background: var(--hp-amber);
  box-shadow: 0 10px 24px -12px rgba(255, 190, 43, 0.9);
  transition: var(--hp-t);
}
.bs2PromoBtn svg, .bs2PromoLink svg{ width: 15px; height: 15px; }
.bs2PromoBtn:hover{ color: #1a1a1a !important; background: var(--hp-amber-d); transform: translateY(-1px); }
.bs2PromoLink{ display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--hp-brand-l) !important; text-decoration: none !important; }
.bs2PromoLink:hover{ color: #fff !important; }

/* related posts */
.bs2Related .bl2Grid{ margin-top: 8px; }
.bs2AllBtn{ color: var(--hp-navy) !important; }

/* ─── Responsive ─── */
@media (max-width: 1240px){
  .bs2Grid{ grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
  .bs2NoToc{ grid-template-columns: minmax(0, 760px); }
  .bs2Aside{ position: static; grid-column: 2; max-width: 760px; }
  .bs2NoToc .bs2Aside{ grid-column: 1; }
  .bs2Promo{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico kick btn" "ico name btn" "ico sub link"; column-gap: 16px; align-items: center; }
  .bs2PromoIco{ grid-area: ico; margin: 0; }
  .bs2PromoKicker{ grid-area: kick; }
  .bs2Promo b{ grid-area: name; }
  .bs2Promo small{ grid-area: sub; }
  .bs2PromoBtn{ grid-area: btn; margin: 0; }
  .bs2PromoLink{ grid-area: link; margin: 0; }
}
@media (max-width: 1000px){
  .bs2HeroGrid{ grid-template-columns: 1fr; gap: 36px; padding-top: 48px; padding-bottom: 48px; }
  .bs2Grid, .bs2NoToc{ grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 32px; }
  .bs2Toc{ position: static; }
  .bs2Aside{ grid-column: 1; }
  .bs2TocBox:not([open]){ padding-bottom: 6px; }
  .bs2TocBox > summary{ padding-bottom: 12px; }
  .bs2TocBox > summary::after{ content: "+"; font-size: 18px; line-height: 1; }
  .bs2TocBox[open] > summary::after{ content: "−"; }
  .bs2TocList{ max-height: none; }
}
@media (max-width: 640px){
  .bs2Prose{ font-size: 16px; }
  /* posts indent sub-headings and lists with inline padding-left: 40px; too deep on a phone */
  .bs2Prose [style*="padding-left"]{ padding-left: 14px !important; }
  .bs2End{ grid-template-columns: 1fr; }
  .bs2Promo{ display: flex; }
  .bs2Prose table{ display: block; overflow-x: auto; }
}