/* BeeSmart IT Solutions - Blog Details Page
   - Keep ONLY the navigation sticky (handled globally like other pages)
   - Hero/banner scrolls normally with the page (no sticky hero / no overlap)
*/

/* Wrapper limits how long the hero stays sticky.
   This prevents the "jump back" / jitter seen in some browsers when sticky + overlap sections are combined. */
.bsit-hero-wrap{
  position: relative;
  height: auto;
  min-height: 0;
}

/* Responsive hero sizing tokens (used by BOTH Blog Details + Case Study Details)
   - Keeps the hero height driven by content, while preserving a premium minimum height.
   - Uses svh/dvh when available to avoid mobile address-bar "vh" jumps.
*/
:root{
  --bsit-surface-overlap: clamp(22px, 4.8vw, 64px);
  --bsit-hero-pad-top: clamp(42px, 5.5vw, 92px);
  --bsit-hero-pad-bottom: clamp(26px, 4.5vw, 64px);
}

.bsit-blog-hero{
  position: relative;
  top: auto;
  /* Height is content-driven; min-height keeps the cinematic look.
     This also prevents titles from being clipped on large headings. */
  height: auto;
  min-height: clamp(340px, 52vh, 640px);
  z-index: 1;
  overflow: hidden;
  background: #0b0b0b;
}

@supports (height: 1svh){
  .bsit-blog-hero{ min-height: clamp(340px, 52svh, 640px); }
}

@supports (height: 1dvh){
  .bsit-blog-hero{ min-height: clamp(340px, 52dvh, 640px); }
}

.bsit-blog-hero-bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* keep stable (no scroll-driven transforms to avoid jitter) */
  transform: none;
  will-change: auto;
  filter: saturate(1.04);
}

.bsit-blog-hero-overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 560px at 12% 82%, rgba(239,180,5,0.14), transparent 58%),
    /* Dark overlay so the hero title stays readable on any banner image */
    linear-gradient(to bottom, rgba(0,0,0,0.78), rgba(0,0,0,0.92));
}

.bsit-blog-hero-inner{
  position: relative;
  /* Responsive paddings + safe-area handling.
     Bottom padding includes the surface overlap so CTA/buttons never hide behind the white wrapper. */
  padding-top: calc(var(--bsit-hero-pad-top) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--bsit-hero-pad-bottom) + var(--bsit-surface-overlap) + env(safe-area-inset-bottom, 0px));
  transform: none;
  opacity: 1;
  will-change: auto;
}

.bsit-blog-breadcrumb{
  font-size: 14px;
  opacity: .92;
  margin-bottom: 12px;
}
.bsit-blog-breadcrumb a{ color: #fff; text-decoration: none; }
.bsit-blog-breadcrumb span{ color: rgba(255,255,255,.7); margin: 0 6px; }

/* Breadcrumb placed at the bottom of hero (after CTA buttons) */
.bsit-blog-breadcrumb--bottom{
  margin-top: 14px;
  margin-bottom: 0;
}

.bsit-blog-hero-meta{
  display:flex;
  align-items:center;
  flex-wrap: wrap;
  gap:10px;
  margin-bottom: 14px;
  /* Ensure read-time stays visible on dark hero across browsers */
  color: rgba(255,255,255,.88);
}
.bsit-blog-meta-dot{ color: rgba(255,255,255,.75); }

/* Read-time text (e.g., "6 min read") */
.bsit-blog-hero-meta #bsitBlogRead,
.bsit-blog-hero-meta #bsitCaseRead{
  color: rgba(255,255,255,.88);
  font-weight: 600;
}

.bsit-blog-title{
  color:#fff;
  font-weight: 800;
  line-height: 1.08;
  margin-bottom: 10px;
  font-size: clamp(28px, 4.2vw, 54px);
  overflow-wrap: anywhere; /* prevents overflow on very long words / small widths */
}

.bsit-blog-sub{
  color: rgba(255,255,255,.86);
  max-width: 860px;
  font-size: 16px;
  margin-bottom: 18px;
}

.bsit-blog-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* Secondary CTA button (Back to blogs) hover should match BeeSmart hover state */
.bsit-blog-hero-actions .btn-bsit-secondary{
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  color: #fff !important;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.bsit-blog-hero-actions .btn-bsit-secondary:hover,
.bsit-blog-hero-actions .btn-bsit-secondary:focus{
  background: var(--bsit-gold, #efb405);
  border-color: var(--bsit-gold, #efb405);
  color: #111 !important;
  text-decoration: none;
  transform: translateY(-1px);
}
.bsit-blog-hero-actions .btn-bsit-secondary:active{
  transform: translateY(0);
}

/* Page background behind the white content surface */
body.bsit-blog-details-page{ background: #f7f7f7; }

/* Content surface: rounded white wrapper that overlaps the hero */
.bsit-blog-body{
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--bsit-surface-overlap)); /* pulls the white surface up over the hero */
  padding-top: 0;
  background: transparent;
}

.bsit-blog-body > .container{
  background:#fff;
  border-radius: 26px;
  box-shadow: 0 18px 44px rgba(0,0,0,.10);
  padding-top: 34px;
  padding-bottom: 22px;
}

/* Article */
.bsit-blog-article{
  color: #1f1f1f;
  font-size: 16px;
  line-height: 1.75;
  padding-bottom: 30px;
}

.bsit-blog-article h2,
.bsit-blog-article h3,
.bsit-blog-article h6{
  color:#101010;
  margin-top: 22px;
  margin-bottom: 10px;
  font-weight: 800;
}

.bsit-blog-article ul{ padding-left: 18px; }
.bsit-blog-article strong{ color:#111; }

/* Images inside blog content */
.bsit-blog-article img,
.bsit-blog-article .bsit-article-img{
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}
.bsit-blog-article .bsit-article-figure{
  margin: 18px 0 22px;
  overflow: hidden;
  border-radius: 16px;
}

.bsit-blog-article blockquote,
.bsit-blog-article .blog-quote{
  margin: 18px 0;
  padding: 14px 16px;
  border-left: 4px solid #efb405;
  background: rgba(239,180,5,.08);
  border-radius: 10px;
}

.bsit-blog-article .blog-footer{
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.08);
}

/* Sidebar */
.bsit-blog-sidebar{
  position: sticky;
  top: 24px;
  /* JS sets this var to prevent the bottom "resize" glitch */
  transform: translate3d(0, var(--bsit-sidebar-dy, 0px), 0);
  will-change: transform;
  /* Smooth when fixed header toggles (top changes) */
  transition: top .28s ease;
}

.bsit-side-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 14px 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.bsit-side-title{
  color:#101010;
  font-weight: 800;
  margin-bottom: 10px;
}

.bsit-toc a{
  display:block;
  color: rgba(0,0,0,.78);
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px;
}
.bsit-toc a:hover{ background: rgba(0,0,0,.04); }
.bsit-toc a.active{ background: rgba(239,180,5,.18); color:#111; }

.bsit-share{ display:flex; flex-direction:column; gap:10px; }
.bsit-share-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.10);
  color:#111;
  text-decoration:none;
  cursor:pointer;
}
.bsit-share-btn i{ color:#111; }
.bsit-share-btn:hover{
  background: rgba(0,0,0,.06);
  border-color: rgba(239,180,5,.35);
}
.bsit-copy-toast{
  display:none;
  margin-top: 10px;
  font-size: 13px;
  color: rgba(0,0,0,.78);
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.10);
}

/* Related */
.bsit-related-wrap{ padding: 10px 0 50px; }
.bsit-related-title{ color:#101010; font-weight:900; }
.bsit-related-link{ color:#b88600; text-decoration:none; font-weight:800; }

/* CTA */
.bsit-blog-cta{ padding: 40px 0 70px; background: #f7f7f7; }
.bsit-cta-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding: 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
}
.bsit-cta-card h3{ color:#101010; margin-bottom: 6px; font-weight:900; }
.bsit-cta-card p{ margin:0; color: rgba(0,0,0,.72); }

@media (max-width: 991.98px){
  .bsit-blog-sidebar{ position: relative; top:auto; margin-top: 22px; }
  .bsit-hero-wrap{ height: auto; min-height: 0; }
  /* Keep a small overlap even on mobile so the design stays consistent.
     Also helps avoid the "big gap" look on short banners. */
  .bsit-blog-body{ margin-top: -18px; padding-top: 0; }
  .bsit-blog-body > .container{ border-radius: 18px; padding-top: 24px; padding-bottom: 14px; }
  .bsit-blog-hero-inner{
    padding-top: calc(clamp(34px, 7vw, 56px) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(clamp(22px, 6vw, 46px) + 18px + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================
   Sticky sidebar offset + end gap (Blog Details)
   ============================ */
:root{
  --bsit-fixed-header-h: 0px; /* set by JS when .lower-header.is-fixed */
  --bsit-sidebar-gap: 24px;
  --bsit-sidebar-end-gap: 32px;
}

.bsit-sidebar-col{ position: relative; }

@media (min-width: 992px){
  .bsit-blog-sidebar{
    top: calc(var(--bsit-fixed-header-h, 0px) + var(--bsit-sidebar-gap, 24px));
    z-index: 20;
  }
}

/* Make TOC/anchor jumps land below the fixed header */
.bsit-blog-article h2,
.bsit-blog-article h3,
.bsit-blog-article h4,
.bsit-blog-article h5,
.bsit-blog-article h6{
  scroll-margin-top: calc(var(--bsit-fixed-header-h, 0px) + 90px);
}

/* ============================
   Hero/banner collapsing animation (safe, no scroll-lock)
   ============================ */
.bsit-blog-hero{ will-change: transform; }
.bsit-blog-hero-bg{
  will-change: transform;
  transform: translate3d(0, var(--bsit-hero-bg-y, 0px), 0) scale(var(--bsit-hero-bg-scale, 1));
  transform-origin: center;
}

.bsit-blog-hero-inner{
  will-change: transform, opacity;
  transform: translate3d(0, var(--bsit-hero-inner-y, 0px), 0) scale(var(--bsit-hero-inner-scale, 1));
  opacity: var(--bsit-hero-inner-a, 1);
}

@media (prefers-reduced-motion: reduce){
  .bsit-blog-hero-bg,
  .bsit-blog-hero-inner{
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Anchor offset for the quote section when using the top nav link */
#get-quote{ scroll-margin-top: calc(var(--bsit-fixed-header-h, 0px) + 24px); }