/* ─────────────────────────────────────────────────────────────────────
   bdc_toc — sticky right sidebar table of contents.

   Layout behaviour:
     - Mobile (< 768px):   collapsed by default; user can toggle open
     - Tablet (768–1279):  inline block, static (scrolls with content)
     - Desktop (≥ 1280):   floated right sidebar, position: sticky, so
                           it stays visible as the reader scrolls
                           through the article

   No JS-required for layout — the CSS handles all breakpoints. JS is
   only for content generation, smooth scroll, and scrollspy.
   ───────────────────────────────────────────────────────────────────── */

.bdc-toc-wrap {
    /* Reset any inherited alignment from the centered header stack */
    text-align: left;
    margin: 0 0 24px;
    /* Reserved for the sticky-top offset (set via inline style so
       the editor's `sticky_offset` control drives layout). */
    --bdc-toc-sticky-top: 100px;
}

.bdc-toc {
    background: var(--bdc-ink-7, #f6f6f4);
    border-radius: 12px;
    padding: 16px 20px;
    font: 400 14px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
    max-width: 100%;
}

.bdc-toc__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.bdc-toc__title {
    font: 700 11px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bdc-ink-3, #6b6b68);
}

.bdc-toc__toggle {
    display: none; /* only shown on mobile */
    appearance: none;
    background: transparent;
    border: 0;
    padding: 4px 6px;
    cursor: pointer;
    color: var(--bdc-ink-3, #6b6b68);
    font: 500 12px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
    align-items: center;
    gap: 4px;
}

.bdc-toc__toggle-icon {
    width: 14px;
    height: 14px;
    transition: transform 200ms ease;
}

.bdc-toc__toggle[aria-expanded="false"] .bdc-toc__toggle-icon {
    transform: rotate(-90deg);
}

.bdc-toc__toggle-label {
    /* Only readable to AT — the icon carries the visual meaning */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.bdc-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Prevent long article titles from making the sidebar too wide */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.bdc-toc__item { margin: 0; }

.bdc-toc__link {
    display: block;
    padding: 6px 0 6px 12px;
    color: var(--bdc-ink-2, #4a4a48);
    text-decoration: none;
    border-left: 2px solid var(--bdc-ink-6, #eeece5);
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
    font-size: 14px;
    line-height: 1.4;
}

.bdc-toc__link:hover {
    color: var(--bdc-sage, #3d5844);
    background: rgba(61, 88, 68, 0.04);
    border-left-color: var(--bdc-ink-4, #8a8a86);
}

/* Active section — set by scrollspy JS. */
.bdc-toc__link--active {
    color: var(--bdc-sage, #3d5844);
    border-left-color: var(--bdc-sage, #3d5844);
    font-weight: 600;
}

/* Nested h3 items — indent to visually communicate hierarchy. */
.bdc-toc__item--h3 .bdc-toc__link {
    padding-left: 24px;
    font-size: 13px;
    color: var(--bdc-ink-3, #6b6b68);
}

.bdc-toc__empty {
    margin: 0;
    padding: 8px 0;
    color: var(--bdc-ink-3, #6b6b68);
    font-size: 13px;
    font-style: italic;
}

/* ─── Mobile: collapsed by default ─── */
@media (max-width: 767px) {
    .bdc-toc__toggle {
        display: inline-flex;
    }
    .bdc-toc__list[aria-hidden="true"],
    .bdc-toc__empty[aria-hidden="true"] {
        display: none;
    }
}

/* ─── Widescreen: sticky right-sidebar ───

   Strategy: the wrapper positions absolute against the 800px
   Elementor container that hosts the article (`.e-con-inner`).
   `left: 100%` places it right at the container's right edge;
   the additional 24px gap keeps it visually detached from the
   text column.

   We enforce `position: relative` on `.e-con-inner` inside the
   Single Post location because Elementor doesn't set it by
   default — without a positioned ancestor, our absolute wrapper
   would fall back to the viewport, which is exactly the wrong
   coordinate origin (we'd land at the far right of the browser,
   not the right of the article column).

   Threshold at 1280px chosen because with 800px content column
   + 220px TOC + gutter, we need at least ~1120px viewport before
   the TOC has anywhere to live without overlapping content. Any
   narrower and it collapses to inline block above the article. */
/* The sticky-sidebar wrapper positions absolute against the closest
   positioned ancestor. We make it the content-region container
   (introduced in the template restructure) so the TOC anchors to
   the top of the reading region, NOT the top of the whole article
   (which would put it over the hero). */
.elementor-location-single .bdc-content-region .e-con-inner,
.elementor-location-single .bdc-content-region {
    position: relative;
}

@media (min-width: 1280px) {
    /* Elementor wraps every widget in `.elementor-widget-container`
       with `position: relative` by default. That makes it the
       containing block for our absolute wrap — killing the "stretch
       to article height" trick since the widget container is only
       ~200px tall. Reset the chain to static so our absolute wrap
       resolves against the outer `.e-con-inner` we made positioned. */
    .elementor-widget-bdc_toc,
    .elementor-widget-bdc_toc .elementor-widget-container,
    .elementor-widget-bdc_toc .bdc-v3 {
        position: static;
    }

    .bdc-toc-wrap {
        /* Absolute-positioned inside the content-region container,
           which starts BELOW the meta row. `top: 0` = top of that
           region (not the article top), `bottom: 0` = end of the
           content region. Full stretch means the sticky child has
           the entire article-body scroll range to work with.

           `right: 24px` positions the TOC INSIDE the 1360px article
           container's right edge, leaving space between it and the
           800px-capped reading column. */
        position: absolute;
        top: 0;
        bottom: 0;
        right: 24px;
        width: 220px;
        margin: 0;
        /* Non-visual — just prevents the wrapper's own dimensions
           from painting anything and blocking clicks in the gutter. */
        pointer-events: none;
    }
    .bdc-toc {
        /* Re-enable interaction on the actual nav (the pointer-events:
           none reset above only applies to the empty gutter area). */
        pointer-events: auto;
        position: sticky;
        top: var(--bdc-toc-sticky-top, 100px);
        max-height: calc(100vh - var(--bdc-toc-sticky-top, 100px) - 24px);
        overflow-y: auto;
    }
    /* Custom scrollbar for the sticky nav when content overflows. */
    .bdc-toc::-webkit-scrollbar { width: 6px; }
    .bdc-toc::-webkit-scrollbar-thumb {
        background: var(--bdc-ink-6, #eeece5);
        border-radius: 3px;
    }
    .bdc-toc::-webkit-scrollbar-thumb:hover {
        background: var(--bdc-ink-4, #8a8a86);
    }
}

/* Below the widescreen breakpoint, the TOC widget lives inline as
   an ordinary block above the content — perfect for tablet + phone
   surfaces where a sidebar has nowhere to go. */