/* Post TOC: sticky header + mobile fixed TOC bar BELOW header */

.savvy-site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
}

.min-h-screen.md\:overflow-hidden,
.savvy-single-layout,
.bg-white.min-h-screen {
  overflow: visible !important;
}

.savvy-single-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.savvy-toc-icon-close {
  display: none;
}

.savvy-toc-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Desktop ≥1200 */
@media screen and (min-width: 1200px) {
  .savvy-single-layout {
    flex-direction: row;
  }

  .savvy-single-layout > .savvy-single-article,
  .savvy-single-layout > article.savvy-post {
    order: 1;
    width: 75%;
    max-width: 900px;
    padding-right: 2rem;
    min-width: 0;
  }

  .savvy-single-layout > .savvy-single-aside,
  .savvy-single-layout > aside {
    order: 2;
    width: 30%;
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 6rem);
    overflow: visible;
    overscroll-behavior: contain;
  }

  .savvy-toc-icons {
    display: none;
  }

  .savvy-toc-wrap,
  aside > div.sticky,
  aside > .sticky {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: calc(100vh - 5rem);
    overflow: hidden;
  }

  aside .savvy-toc-wrap ~ .savvy-toc-wrap,
  aside > .sticky ~ .sticky {
    display: none !important;
  }

  .savvy-toc-wrap .savvy-table_of_contents,
  aside > div.sticky > .savvy-table_of_contents,
  aside > .sticky > .savvy-table_of_contents,
  aside .savvy-table_of_contents {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    height: 60vh !important;
    max-height: 60vh !important;
    min-height: 0;
    margin-bottom: 0.75rem !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 1;
  }

  .savvy-table_of_contents.active .savvy-table_of_contents_content,
  .savvy-table_of_contents .savvy-table_of_contents_content {
    max-height: none !important;
    overflow: visible !important;
  }

  .savvy-toc-score,
  aside > div.sticky > .ps-article_score,
  aside > .sticky > .ps-article_score {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  }

  .savvy-toc-score .ps-article_score,
  aside > div.sticky > .ps-article_score,
  aside > .sticky > .ps-article_score {
    margin: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background: #fff;
    overflow: visible;
  }
}

/*
 * <1199px: theme uses lg:fixed lg:left-0 (and often lg:top-0),
 * which pins TOC under the header. Force it BELOW the sticky header.
 */
@media screen and (max-width: 1199px) {
  :root {
    --savvy-header-h: 4rem; /* header .h-16 */
    --savvy-toc-bar-h: 3.25rem;
  }

  .savvy-single-layout {
    display: flex !important;
    flex-direction: column !important;
  }

  .savvy-single-layout > .savvy-single-aside,
  .savvy-single-layout > aside {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .savvy-single-layout > .savvy-single-article,
  .savvy-single-layout > article.savvy-post {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
  }

  .bg-white.min-h-screen.mt-20 {
    margin-top: 0.75rem !important;
  }

  aside .savvy-toc-wrap:nth-of-type(n + 2),
  aside > .sticky:nth-of-type(n + 2) {
    display: none !important;
  }

  .savvy-toc-wrap,
  aside > div.sticky,
  aside > .sticky {
    position: static !important;
  }

  /* Override theme lg:fixed + lg:top-0 so TOC sits under header */
  .savvy-table_of_contents,
  .savvy-table_of_contents.lg\:fixed,
  aside .savvy-table_of_contents {
    position: fixed !important;
    top: var(--savvy-header-h) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    z-index: 45 !important; /* below .savvy-site-header z-50 */
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    background: #fff !important;
    padding: 0.75rem 1.25rem !important;
    overflow: visible !important;
  }

  /* Reserve space in flow so content isn't hidden under the fixed bar */
  .savvy-single-layout > .savvy-single-aside::before,
  .savvy-single-layout > aside::before {
    content: "";
    display: block;
    height: var(--savvy-toc-bar-h);
  }

  .savvy-toc-icons {
    display: block;
  }

  .savvy-toc-icon-open {
    display: block;
  }

  .savvy-toc-icon-close {
    display: none;
  }

  .savvy-table_of_contents.active .savvy-table_of_contents_content,
  .savvy-table_of_contents .savvy-table_of_contents_content {
    max-height: 0;
    overflow: hidden;
  }

  .savvy-toc-toggle:checked ~ .savvy-table_of_contents_content,
  .savvy-table_of_contents.active .savvy-toc-toggle:checked ~ .savvy-table_of_contents_content {
    max-height: min(60vh, calc(100vh - var(--savvy-header-h) - 4rem));
    overflow: auto;
  }

  .savvy-toc-toggle:checked ~ .savvy-toc-toggle-label .savvy-toc-icon-open {
    display: none;
  }

  .savvy-toc-toggle:checked ~ .savvy-toc-toggle-label .savvy-toc-icon-close {
    display: block;
  }

  .savvy-toc-score {
    display: none;
  }
}