/*
 * Blog template overrides — scoped CSS that production relies on via
 * Webflow-generated `#w-node-*` IDs which we don't replicate in JSX.
 *
 * Loaded AFTER webflow-page-blog-template.css so these rules win.
 *
 * Used by: app/(frontend)/blog/[slug]/page.tsx
 */

/* Sidebar position: production uses #w-node-... { order: 9999 } to push the
 * <aside> (first in DOM) into the second grid column (narrow right side).
 * Without that node-specific ID we replicate the same effect by class. */
main .blog-wrapper > .blog-sidebar {
  order: 9999;
  /* Do NOT set align-self: start here — sticky descendants (.blog_offer)
   * need the aside to stretch the full grid row height so sticky has room
   * to scroll within. */
}

/* Mobile: when blog-wrapper switches to flex column-reverse, ensure sidebar
 * lands at the bottom (production also uses order:9999 in flex context). */
@media screen and (max-width: 991px) {
  main .blog-wrapper > .blog-sidebar {
    align-self: stretch;
  }
}

/* TOC anchor scroll offset — matches production's 9rem nav offset so
 * clicking a TOC link doesn't hide the heading under the sticky navbar. */
main .blog-rich-text h2[id],
main .blog-rich-text h3[id] {
  scroll-margin-top: 9rem;
}

/* TOC max-height — production page CSS sets this to 45vh; we want 40vh
 * so the TOC list scrolls within a slightly tighter area. */
main .blog-sidebar .summury .toc {
  max-height: 40vh;
}

/* Hide social share row in the blog sidebar for now (deferred decision). */
main .blog-sidebar .html-embed-2.my-20 {
  display: none;
}

/* Vertical spacing between the bottom-of-post sections (final CTA, author
 * block, explore more link). Production uses Webflow node-id margin rules
 * that we don't replicate, so add scoped spacing here. */
main .main-blog-content > .author-block-blog {
  margin-top: 3rem;
}
main .main-blog-content > div > .explore-button-wrapper {
  margin-top: 3rem;
}

/* TOC mobile popup toggle — on mobile/tablet portrait the TOC panel is
 * hidden until the user taps the Summary hamburger (.div-block-246).
 * Production uses a Webflow IX2 interaction we replicate with React state +
 * the `.is-open` class on `.toc-c-wrapper`.
 *
 * Production page CSS has `transform: scale(0)` and `display: none` on
 * `.toc-c-wrapper` at mobile breakpoints — we override BOTH with `.is-open`. */
@media screen and (max-width: 767px) {
  main .blog-sidebar .summury {
    position: relative;
  }
  main .blog-sidebar .summury .toc-c-wrapper.is-open {
    display: block !important;
    transform: scale(1) !important;
    transform-origin: 0 0;
    position: absolute;
    top: 95px;
    left: 0;
    right: 0;
    z-index: 50;
    width: auto;
    transition: transform 0.2s ease;
  }
}