/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

.h5 {
  color: #222222;
  font-family: Open Sans;
  font-size: 21px!important;
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0px;
  line-height: 1.1em;
}
.mega  .mega-menu.active {
  padding:30px 0;
}
/*.mega .mega-menu {
  top:160px;
}
.sticky-menu.active .mega .mega-menu {
  top:140px;
}
@media (max-width:1100px) {

  .mega .mega-menu {
    top:140px;
  }
}
*/

/* Table of Contents */
.toc {
  --toc-bg: #f8fafc;
  --toc-border: #e2e8f0;
  --toc-accent: #1f2937;
  background: var(--toc-bg);
  border: 1px solid var(--toc-border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  font-size: 0.95rem;
}
.toc__title { margin: 0 0 .5rem; font-size: 1.125rem; }
.toc ul { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; margin: .4rem 0; }
.toc li::before { content: counters(toc, ".") ". "; font-weight: 600; color: var(--toc-accent); margin-right: .25rem; }
.toc a { text-decoration: none; }
.toc a:where(:hover,:focus-visible) { text-decoration: underline; }
@media (min-width: 992px) { .toc.is-sticky { position: sticky; top: 2rem; } }

/* Anchor jump quality-of-life */
:where(h2[id]) { scroll-margin-top: clamp(72px, 10vh, 96px); }
@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
}

/* Sticky behavior for the Table of Contents on desktop */
@media (min-width: 992px) {
  :root {
    /* Adjust this if you have a sticky header/admin bar */
    --toc-sticky-top: 2rem;
  }

  .toc.is-sticky {
    position: sticky;
    top: var(--toc-sticky-top);
    align-self: start;                 /* helps in grid/flex sidebars */
    max-height: calc(100vh - var(--toc-sticky-top) - 2rem);
    overflow: auto;                    /* scroll the ToC if it gets tall */
    -webkit-overflow-scrolling: touch; /* smoother scroll on iOS */
    z-index: 1;                        /* sit above backgrounds, below navs */
  }
}

/* Space under the Table of Contents */
.toc {
  margin-bottom: clamp(1rem, 2.5vw, 2rem);
}

/* Optional: a touch more space on wide screens */
@media (min-width: 992px) {
  .toc { margin-bottom: 2.25rem; }
}

/* Sticky ToC everywhere */
.toc.is-sticky {
  position: sticky;
  top: var(--toc-sticky-top, 2rem);
  align-self: start;
  z-index: 1;
}

/* Desktop-only niceties */
@media (min-width: 992px) {
  .toc.is-sticky {
    max-height: calc(100vh - var(--toc-sticky-top, 2rem) - 2rem);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 1) Declare your header height once (tweak values to match your theme) */
:root {
  --site-header-height: 88px; /* default/mobile */
}
@media (min-width: 992px) {
  :root { --site-header-height: 104px; } /* desktop header height */
}

/* 2) Keep the sticky ToC below the header */
.toc.is-sticky {
  position: sticky;
  top: calc(var(--site-header-height) + 16px); /* 16px breathing room */
  align-self: start;
  z-index: 1;
  max-height: calc(100vh - var(--site-header-height) - 2rem);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* 3) Make in-page anchor jumps clear the sticky header too */
:where(h2[id]) {
  scroll-margin-top: calc(var(--site-header-height) + 16px);
}

/* 4) Optional: iOS safe-area nicety (notch devices) */
@supports (top: env(safe-area-inset-top)) {
  .toc.is-sticky { top: calc(var(--site-header-height) + env(safe-area-inset-top) + 16px); }
  :where(h2[id]) { scroll-margin-top: calc(var(--site-header-height) + env(safe-area-inset-top) + 16px); }
}

/* 5) HubSpot preview/editor often adds extra bars; keep ancestor overflow visible */
.blog-post__body,
.blog-post__body .dnd-section,
.blog-post__body .dnd-row,
.blog-post__body .dnd-column,
.blog-post__body .hs_cos_wrapper_type_rich_text {
  overflow: visible !important;
}

<nav class="toc is-sticky" aria-label="Table of contents">
  <h2 class="toc__title">Table of Contents</h2>
  <ul>
    <li><a href="#what-hot-stamping-wood">What is hot stamping for wood products and how does it work?</a></li>
    <!-- …the rest similar… -->
  </ul>
</nav>

/* Add this near your ToC styles */
:root {
  /* Extra clearance added on top of your measured header height */
  --toc-extra-offset: 12px;       /* adjust to taste */
}
@media (min-width: 992px) {
  :root { --toc-extra-offset: 16px; }
}

/* Replace your previous sticky/anchor offsets with these */
.toc.is-sticky {
  position: sticky;
  top: calc(var(--site-header-height) + var(--toc-extra-offset) + 16px);
  align-self: start;
  z-index: 1;
  max-height: calc(100vh - var(--site-header-height) - var(--toc-extra-offset) - 2rem);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

:where(h2[id]) {
  scroll-margin-top: calc(var(--site-header-height) + var(--toc-extra-offset) + 16px);
}

/* iOS notch nicety */
@supports (top: env(safe-area-inset-top)) {
  .toc.is-sticky {
    top: calc(var(--site-header-height) + var(--toc-extra-offset) + env(safe-area-inset-top) + 16px);
  }
  :where(h2[id]) {
    scroll-margin-top: calc(var(--site-header-height) + var(--toc-extra-offset) + env(safe-area-inset-top) + 16px);
  }
}