/* CSS for Single post page Hero Banner */
.single-post-hero-banner {
  --color-lite: #fbfaf2;
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--dark);
  overflow: hidden;
  z-index: 1;
}

/* Background & Grid Lines: Size 40px 40px (same as inner page banner) */
.single-post-hero-banner .grid-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Bottom blend gradient overlay */
.single-post-hero-banner .grid-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, #000000 100%);
  pointer-events: none;
  z-index: 1;
}

/* Noise Overlay */
.single-post-hero-banner .noise-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background-image: var(--noise-banner-url);
  background-repeat: repeat;
  opacity: 0.8;
}

/* Cursor Layer */
.single-post-hero-banner .cursor-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Moving Grid Cell */
.single-post-hero-banner .grid-cursor {
  position: absolute;
  width: 40px;
  height: 40px;
  pointer-events: none;
  background: var(--color-lite);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 3;
}

/* Trail Grid Cell */
.single-post-hero-banner .grid-trail {
  position: absolute;
  width: 40px;
  height: 40px;
  pointer-events: none;
  background: var(--color-lite);
  animation: fadeOutHero 0.4s ease-out forwards;
}

@keyframes fadeOutHero {
  0% {
    background-color: var(--color-lite);
    opacity: 0.75;
  }
  50% {
    background-color: #71717a;
    opacity: 0.4;
  }
  100% {
    background-color: #27272a;
    opacity: 0;
  }
}

/* Floating pixel decorations (TL, TR, BL, BR) */
.single-post-hero-banner .banner-pixel-decorations {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.single-post-hero-banner .banner-corner-pixels {
  position: absolute;
  width: 32px;
  height: 32px;
}

.single-post-hero-banner .banner-corner-pixels::before,
.single-post-hero-banner .banner-corner-pixels::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: #ffffff;
}

/* Diagonal Type A (TL): Bottom-left and Top-right squares */
.single-post-hero-banner .pixel-tl::before {
  left: 0;
  bottom: 0;
}
.single-post-hero-banner .pixel-tl::after {
  right: 0;
  top: 0;
}

/* Diagonal Type B (TR): Top-left and Bottom-right squares */
.single-post-hero-banner .pixel-tr::before {
  left: 0;
  top: 0;
}
.single-post-hero-banner .pixel-tr::after {
  right: 0;
  bottom: 0;
}

/* Single square for BL & BR */
.single-post-hero-banner .pixel-bl::before,
.single-post-hero-banner .pixel-br::before {
  left: 0;
  bottom: 0;
}
.single-post-hero-banner .pixel-bl::after,
.single-post-hero-banner .pixel-br::after {
  display: none;
}

/* Positions matching screenshot */
.single-post-hero-banner .pixel-tl {
  top: 180px;
  left: 4%;
}
.single-post-hero-banner .pixel-tr {
  top: 100px;
  right: 8%;
}
.single-post-hero-banner .pixel-bl {
  top: 100px;
  left: 55%;
}
.single-post-hero-banner .pixel-br {
  bottom: 120px;
  left: 66%;
}

/* Align text centered on single post page banner */
.single-post-hero-banner .banner-content-wrapper {
  position: relative;
  z-index: 110;
  text-align: center;
  width: 100%;
}

.single-post-title {
  color: #ffffff;
  font-family: var(--font-secondary), "Funnel Display", sans-serif;
  font-size: clamp(2rem, 2.5vw + 1rem, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 20px;
}

.single-post-title .text-highlight {
  color: #ed9d21 !important;
}

/* Overlapping Featured Image wrapper */
.blog-featured-image-section {
  position: relative;
  z-index: 15;
  background-color: #000000;
  width: 100%;
}

.blog-featured-image-wrapper {
  margin-top: -160px; /* Negative margin to shift image upwards over the banner */
  text-align: center;
  position: relative;
  z-index: 20;
  margin-bottom: 60px;
  font-weight: 400;
  /* font-size: 16px; */
  font-size: clamp(0.875rem, 0.8286rem + 0.1905vw, 1rem);
  line-height: 120%;
  letter-spacing: 0%;
}

.blog-featured-img {
  width: 100%;
  height: 630px; /* Exact height required */
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* Content layout */
.blog-single-layout {
  position: relative;
  z-index: 15;
  background-color: #000000;
  padding-bottom: 80px;
  width: 100%;
}

.blog-single-container {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.blog-single-container .entry-content,
.blog-single-container .entry-content p,
.blog-single-container .entry-content li,
.blog-single-container .entry-content ul,
.blog-single-container .entry-content ol,
.blog-single-container .entry-content span {
  color: #cccccc;
  font-family: var(--font-primary), "Funnel Sans", sans-serif;
  font-weight: 400;
  font-size: clamp(0.875rem, 0.8286rem + 0.1905vw, 1rem);
  line-height: 120%;
  letter-spacing: 0%;
  opacity: 0.9;
}

.blog-single-container .entry-content p,
.blog-single-container .entry-content ul,
.blog-single-container .entry-content ol {
  margin-bottom: 25px;
}

.blog-single-container .entry-content li {
  margin-bottom: 10px;
}

.blog-single-container .entry-content h1,
.blog-single-container .entry-content h2,
.blog-single-container .entry-content h3,
.blog-single-container .entry-content h4,
.blog-single-container .entry-content h5,
.blog-single-container .entry-content h6 {
  color: #ffffff;
  margin-top: 40px;
  margin-bottom: 20px;
  font-family: var(--font-secondary), "Funnel Display", sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 1.3143rem + 0.7619vw, 2rem);
  line-height: 120%;
  letter-spacing: 0%;
  text-transform: capitalize;
}

/* Sidebar Styles */
.blog-single-sidebar-wrapper {
  position: relative;
  height: 100%;
}

.blog-single-sidebar.sticky-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 140px; /* Offset from top of viewport to align nicely under header */
  height: fit-content;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  padding-left: 20px;
}

.blog-single-sidebar.sticky-sidebar::-webkit-scrollbar {
  display: none; /* Hide scrollbar for clean index appearance */
}

.sidebar-other-label {
  margin-bottom: 25px;
}

.sidebar-posts-list {
  display: flex;
  flex-direction: column;
}

.sidebar-post-item {
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  transition: border-bottom-color 0.3s ease;
}

.sidebar-post-item.active {
  border-bottom-color: #ffffff;
}

.sidebar-post-item.toc-depth-3 {
  padding-left: 20px;
}

.sidebar-post-item:first-child {
  padding-top: 0;
}

.sidebar-post-link {
  font-family: var(--font-primary), "Funnel Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 120%;
  letter-spacing: 0%;
  color: #ffffff !important;
  opacity: 0.8;
  text-decoration: none;
  transition: opacity 0.3s ease;
  display: block;
}

.sidebar-post-link:hover,
.sidebar-post-link.active {
  opacity: 1;
  color: #ffffff !important;
  text-decoration: none;
}

@media (max-width: 991px) {
  .single-post-hero-banner {
    min-height: 460px;
  }
  .single-post-hero-banner .banner-pixel-decorations {
    display: block;
  }
  .single-post-hero-banner .banner-corner-pixels {
    width: 20px;
    height: 20px;
  }
  .single-post-hero-banner .banner-corner-pixels::before,
  .single-post-hero-banner .banner-corner-pixels::after {
    width: 10px;
    height: 10px;
  }

  /* Shape adjustments for mobile */
  .single-post-hero-banner .pixel-tl::before,
  .single-post-hero-banner .pixel-bl::before {
    left: 0;
    bottom: 0;
  }
  .single-post-hero-banner .pixel-tl::after,
  .single-post-hero-banner .pixel-bl::after {
    display: block;
    right: 0;
    top: 0;
  }

  .single-post-hero-banner .pixel-tr::before,
  .single-post-hero-banner .pixel-br::before {
    left: auto;
    right: 0;
    top: 0;
  }
  .single-post-hero-banner .pixel-tr::after,
  .single-post-hero-banner .pixel-br::after {
    display: none;
  }

  .single-post-hero-banner .pixel-tl {
    top: 175px;
    left: 6%;
  }
  .single-post-hero-banner .pixel-tr {
    top: 75px;
    right: 8%;
  }
  .single-post-hero-banner .pixel-bl {
    opacity: 0;
  }
  .single-post-hero-banner .pixel-br {
    bottom: 460px;
    right: 8%;
  }

  .blog-featured-img {
    height: 480px;
  }

  .blog-single-sidebar-wrapper {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .blog-featured-img {
    height: 300px;
  }
  .blog-featured-image-wrapper {
    margin-top: -60px;
  }
}

/* Blog Card Styles (matching blogs listing page) */
.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 40px;
  overflow: hidden;
}

.blog-card-image-wrapper {
  width: 100%;
  height: 280px;
  overflow: hidden;
  margin-bottom: 20px;
}

.blog-card-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition:
    transform 0.4s ease,
    filter 0.4s ease;
}

.blog-card:hover .blog-card-image-wrapper img {
  transform: scale(1.05);
  filter: grayscale(0%);
}

.blog-card-title {
  text-align: left;
  font-family: var(--font-secondary), "Funnel Display", sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}

.blog-card-title a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.blog-card-title a:hover {
  color: var(--color-1, #e65125);
  text-decoration: none;
}

.blog-card-desc {
  text-align: left;
  color: #cccccc;
  font-family: var(--font-primary), "Funnel Sans", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 991px) {
  .blog-card-image-wrapper {
    height: 240px;
  }
}

@media (max-width: 767px) {
  .blog-card-image-wrapper {
    height: 280px;
  }
}

/* Continue Reading Section styles */
.continue-reading-heading {
  font-family: var(--font-secondary), "Funnel Display", sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 1.3143rem + 0.7619vw, 2rem);
  line-height: 120%;
  letter-spacing: 0%;
  text-align: center;
  text-transform: capitalize;
  color: #ffffff;
}

.continue-reading-heading .text-highlight {
  color: #ed9d21;
}

@media (max-width: 767px) {
  .recent-blog-card-col.card-2,
  .recent-blog-card-col.card-3 {
    display: none !important;
  }
  .continue-reading-btn-row {
    display: flex !important;
    margin-top: 30px;
  }
}

@media (min-width: 768px) {
  .continue-reading-btn-row {
    display: none !important;
  }
}

/* Case Study Hero Banner Styles */
.case-study-hero-banner {
  --color-lite: #fbfaf2;
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--dark, #000000);
  overflow: hidden;
  z-index: 1;
}

.case-study-hero-banner .grid-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 40px 40px;
}

.case-study-hero-banner .grid-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, #000000 100%);
  pointer-events: none;
  z-index: 1;
}

.case-study-hero-banner .noise-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background-image: var(--noise-banner-url);
  background-repeat: repeat;
  opacity: 0.8;
}

.case-study-hero-banner .banner-pixel-decorations {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.case-study-hero-banner .banner-corner-pixels {
  position: absolute;
  width: 32px;
  height: 32px;
}

.case-study-hero-banner .banner-corner-pixels::before,
.case-study-hero-banner .banner-corner-pixels::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: #ffffff;
}

.case-study-hero-banner .pixel-tl::before {
  left: 0;
  bottom: 0;
}
.case-study-hero-banner .pixel-tl::after {
  right: 0;
  top: 0;
}

.case-study-hero-banner .pixel-tr::before {
  left: 0;
  top: 0;
}
.case-study-hero-banner .pixel-tr::after {
  right: 0;
  bottom: 0;
}

.case-study-hero-banner .pixel-bl::before,
.case-study-hero-banner .pixel-br::before {
  left: 0;
  bottom: 0;
}
.case-study-hero-banner .pixel-bl::after,
.case-study-hero-banner .pixel-br::after {
  display: none;
}

.case-study-hero-banner .pixel-tl {
  top: 180px;
  left: 4%;
}
.case-study-hero-banner .pixel-tr {
  top: 100px;
  right: 8%;
}
.case-study-hero-banner .pixel-bl {
  top: 100px;
  left: 55%;
}
.case-study-hero-banner .pixel-br {
  bottom: 120px;
  left: 66%;
  opacity: 0;
}

@media (max-width: 991px) {
  .case-study-hero-banner .banner-pixel-decorations {
    display: block;
  }
  .case-study-hero-banner .banner-corner-pixels {
    width: 20px;
    height: 20px;
  }
  .case-study-hero-banner .banner-corner-pixels::before,
  .case-study-hero-banner .banner-corner-pixels::after {
    width: 10px;
    height: 10px;
  }

  .case-study-hero-banner .pixel-tl::before,
  .case-study-hero-banner .pixel-bl::before {
    left: 0;
    bottom: 0;
  }
  .case-study-hero-banner .pixel-tl::after,
  .case-study-hero-banner .pixel-bl::after {
    display: block;
    right: 0;
    top: 0;
  }

  .case-study-hero-banner .pixel-tr::before,
  .case-study-hero-banner .pixel-br::before {
    left: auto;
    right: 0;
    top: 0;
  }
  .case-study-hero-banner .pixel-tr::after,
  .case-study-hero-banner .pixel-br::after {
    display: none;
  }

  .case-study-hero-banner .pixel-tl {
    top: 175px;
    left: 6%;
  }
  .case-study-hero-banner .pixel-tr {
    top: 75px;
    right: 8%;
  }
  .case-study-hero-banner .pixel-bl {
    opacity: 0;
  }
  .case-study-hero-banner .pixel-br {
    bottom: 460px;
    right: 8%;
  }
}

.case-study-hero-banner .banner-content-wrapper {
  position: relative;
  z-index: 110;
  text-align: center;
  width: 100%;
}

.case-study-banner-title {
  font-family: "Funnel Display", var(--font-secondary), sans-serif;
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3.2rem);
  font-weight: 700;
  line-height: 120%;
  color: #ffffff;
  text-align: center;
  max-width: 900px;
  margin-top: 60px;
}

.case-study-banner-title .text-highlight {
  color: #ed9d21;
}

/* Metrics styles in Banner */
.case-study-banner-metrics {
  margin-top: 30px;
}

.case-study-banner-metrics .metric-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.case-study-banner-metrics .metric-percentage {
  font-family: "Funnel Display", var(--font-secondary), sans-serif;
  font-size: clamp(1.8rem, 1.4rem + 1.5vw, 3rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 110%;
}

.case-study-banner-metrics .metric-label {
  font-family: "Funnel Sans", var(--font-primary), sans-serif;
  font-size: 13px;
  line-height: 130%;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
}

/* Centered Featured Image below Banner */
.case-study-featured-image-section {
  position: relative;
  z-index: 10;
  margin-top: -80px; /* Overlap image slightly into the banner gradient */
  margin-bottom: 60px;
}

.case-study-featured-image-wrapper {
  width: 100%;
  max-width: 100%;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.case-study-featured-img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 991px) {
  .case-study-hero-banner {
    min-height: 460px;
  }
  .case-study-featured-image-section {
    margin-top: -40px;
  }
}

@media (max-width: 767px) {
  .case-study-hero-banner {
    min-height: 380px;
  }
  .case-study-featured-image-section {
    margin-top: 0;
  }
  .case-study-banner-title {
    margin-top: 40px;
  }
}

/* Social Follow Icons wrapper */
.social-icons-wrp-blogs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 24px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  margin-top: 40px;
  margin-bottom: 40px;
  box-sizing: border-box;
}

.social-follow-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social-follow-left .follow-flag-icon {
  color: #ffffff;
  display: block;
}

.social-follow-left .follow-text {
  font-family: "Funnel Sans", var(--font-primary), sans-serif;
  font-size: 14px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.8);
}

.social-links-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social-link-item {
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  transition:
    color 0.3s ease,
    transform 0.2s ease;
  text-decoration: none !important;
}

.social-link-item svg {
  display: block;
}