/* ===== Easy Table of Contents — Full Fixed Styling ===== */

/* Main TOC box */
#ez-toc-container {
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  box-shadow: none;
  padding: 22px 26px 26px;
  box-sizing: border-box;
  width: 100%;
}

/* TOC title */
#ez-toc-container .ez-toc-title {
  color: #5f6b7a;
  font-weight: 600;
  font-size: 19px;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ececec;
}

/* Hide expand/collapse icon */
#ez-toc-container .ez-toc-title-toggle {
  display: none !important;
}

/* List reset */
#ez-toc-container ul.ez-toc-list {
  counter-reset: ezx;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nested list reset */
#ez-toc-container ul.ez-toc-list ul {
  counter-reset: ezx;
  list-style: none;
  margin: 4px 0;
  padding-left: 1.2em;
}

/* List item */
#ez-toc-container ul.ez-toc-list li {
  counter-increment: ezx;
  position: relative;
  padding-left: 2.3em;
  margin: 0 0 7px;
}

/* Nested list item */
#ez-toc-container ul.ez-toc-list ul li {
  padding-left: 3em;
}

/* Numbering */
#ez-toc-container ul.ez-toc-list li::before {
  content: counters(ezx, ".") ".";
  position: absolute;
  left: 0;
  top: 0;
  color: #6b7280;
  font-size: 15px;
  line-height: 1.85;
}

/* Links */
#ez-toc-container ul.ez-toc-list a {
  color: #6b7280;
  text-decoration: none;
  font-size: 15px;
  line-height: 1.85;
  display: inline-block;
}

/* Link hover */
#ez-toc-container ul.ez-toc-list a:hover {
  color: #111827;
}

/* Diamond before child headings */
#ez-toc-container ul.ez-toc-list ul li > a::before {
  content: "\25C6\00a0";
  color: #9aa3af;
  font-size: 10px;
}

/* Hide auto-inserted TOC inside article body, keep Elementor sidebar shortcode TOC */
.single-post .elementor-widget-theme-post-content #ez-toc-container,
.single-post .entry-content > #ez-toc-container,
.single-post .post-content > #ez-toc-container {
  display: none !important;
}

/* Prevent Elementor containers from cutting sticky TOC */
.single-post .elementor-section,
.single-post .elementor-container,
.single-post .elementor-column,
.single-post .elementor-widget-wrap,
.single-post .e-con,
.single-post .e-con-inner {
  overflow: visible !important;
}

/* Sticky sidebar TOC on desktop */
@media (min-width: 1025px) {
  .single-post .elementor-widget-shortcode:has(#ez-toc-container) {
    position: sticky;
    top: 80px;
    align-self: flex-start;
    overflow: visible !important;
    z-index: 10;
  }

  .single-post .elementor-widget-shortcode:has(#ez-toc-container) #ez-toc-container {
    max-height: calc(100vh - 110px);
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 30px;
  }

  /* Scrollbar */
  .single-post .elementor-widget-shortcode:has(#ez-toc-container) #ez-toc-container::-webkit-scrollbar {
    width: 6px;
  }

  .single-post .elementor-widget-shortcode:has(#ez-toc-container) #ez-toc-container::-webkit-scrollbar-track {
    background: transparent;
  }

  .single-post .elementor-widget-shortcode:has(#ez-toc-container) #ez-toc-container::-webkit-scrollbar-thumb {
    background: #c7ccd3;
    border-radius: 10px;
  }
}

/* Tablet and mobile */
@media (max-width: 1024px) {
  #ez-toc-container {
    max-height: none !important;
    overflow: visible !important;
  }

  .single-post .elementor-widget-shortcode:has(#ez-toc-container) {
    position: static !important;
  }
}

/* ===== Force sidebar TOC to be scrollable ===== */

@media (min-width: 1025px) {

  /* Make the Elementor shortcode widget sticky */
  .single-post .elementor-widget-shortcode {
    position: sticky !important;
    top: 90px !important;
    align-self: flex-start !important;
    overflow: visible !important;
    z-index: 20;
  }

  /* Make the TOC box itself scrollable */
  .single-post .elementor-widget-shortcode #ez-toc-container {
    height: calc(100vh - 120px) !important;
    max-height: calc(100vh - 120px) !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    display: block !important;
    padding-bottom: 35px !important;
  }

  /* Better scrollbar */
  .single-post .elementor-widget-shortcode #ez-toc-container::-webkit-scrollbar {
    width: 7px;
  }

  .single-post .elementor-widget-shortcode #ez-toc-container::-webkit-scrollbar-track {
    background: transparent;
  }

  .single-post .elementor-widget-shortcode #ez-toc-container::-webkit-scrollbar-thumb {
    background: #c7ccd3;
    border-radius: 10px;
  }
}