/* ──────────────────────────────────────────────────────────────
   Post TOC — sidebar on desktop, accordion on mobile.
   Only loaded on single posts via DA_PostToc::enqueue_assets.
   ────────────────────────────────────────────────────────────── */

/* ── H1 + excerpt spacing in the hero block ──
   With an excerpt, tighten H1 bottom to 20px. Without one, hold at
   40px (the theme ships a 60px !important elsewhere that reads too
   loose, especially on mobile). */
.da-post-has-excerpt .blog_header h1 {
    margin: 0 auto 20px !important;
}
.da-post-has-toc:not(.da-post-has-excerpt) .blog_header h1 {
    margin-bottom: 40px !important;
}

/* Scoped under .blog_header — the element is only ever rendered inside
   the hero, and the class name is generic enough that scoping protects
   against future collisions. */
.blog_header .da-post-excerpt {
    max-width: 740px;
    margin: 0 auto 30px;
    color: #5a5a5a;
    font-size: 1.05rem;
    line-height: 1.6;
    text-align: center;
}

@media (max-width: 1024px) {
    .blog_header .da-post-excerpt {
        margin-bottom: 20px;
    }
}

/* ── Desktop two-column layout (only when TOC is enabled) ──
   Overrides the existing `.single_blog .my_section { width: 68% }` that
   would otherwise force the content to a centered column, leaving the
   TOC stranded on its own row. */
.da-post-has-toc .content-container {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    max-width: 1280px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 140px;
}

.da-post-has-toc .content-container > .my_section {
    width: auto;
    max-width: none;
    margin: 0;
    flex: 1 1 0;
    min-width: 0;
    align-items: stretch;
    display: block;
}

/* Overflow:hidden on .wrapper.single_blog prevents position:sticky from
   pinning, so we neutralise it when TOC is enabled. */
.da-post-has-toc .wrapper.single_blog {
    overflow: visible;
}

.da-post-has-toc .da-toc {
    flex: 0 0 280px;
    max-width: 280px;
    margin: 0;
    position: sticky;
    top: 120px;
}

/* ── TOC card ── */
.da-toc {
    box-sizing: border-box;
    padding: 22px 22px;
    border: 1px solid #ededed;
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
}

/* ── Header (button) ── */
.da-toc__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #3a3a3a;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    cursor: default;
    text-align: left;
    font-family: inherit;
}

.da-toc__header:focus-visible {
    outline: 2px solid #b83426;
    outline-offset: 3px;
}

/* Chevron — CSS caret built from two borders. Desktop hides it because
   the sidebar TOC is always expanded. DOWN when closed, UP when open. */
.da-toc__chevron {
    display: none;
    width: 9px;
    height: 9px;
    margin-left: 12px;
    border-right: 2px solid #6b6b6b;
    border-bottom: 2px solid #6b6b6b;
    transform: rotate(45deg); /* DOWN */
    transition: transform 0.25s ease;
    flex: 0 0 auto;
    margin-top: -3px;
}

/* ── List ── Items break out by 23px (container padding + 1px border)
   so the red active-item accent sits flush with, and covers, the grey
   left border line. */
.da-toc__list {
    list-style: none;
    margin: 14px -23px 0;
    padding: 0;
}

.da-toc__item {
    position: relative;
    margin: 0;
    padding: 0;
}

.da-toc__link {
    display: block;
    padding: 7px 22px 7px 22px;
    color: #3a3a3a;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.15s ease;
}

.da-toc__link:hover,
.da-toc__link:focus {
    color: #b83426;
    text-decoration: none;
}

/* Active item accent — thin red bar sitting on the container's left
   grey border, height hugs the first line of text. */
.da-toc__item.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 40px;
    background: #b83426;
}

.da-toc__item.is-active .da-toc__link {
    color: #b83426;
    font-weight: 500 !important;
}

/* ── Author bio + collections, inline inside the content column when
   the TOC is enabled. ── */
.da-post-meta-inline {
    margin: 0 0 28px;
    padding: 0;
}
.da-post-meta-inline > * + * {
    margin-top: 14px;
}

/* ── When TOC is NOT enabled, the share_strip renders in its original
   position above the content column. Its inner .container inherits
   Bootstrap's 15px horizontal padding, which makes the bio block
   narrower than the post content. Zero out just this instance so the
   widths align. ── */
body:not(.da-post-has-toc) .share_strip.container > .container {
    padding-left: 0;
    padding-right: 0;
}

/* Italicise and add breathing room to just the collections line when
   the TOC is enabled. Targeting the inner .col-md-12.padding-left-none
   keeps the author bio block (when visible) untouched. */
.da-post-has-toc .destination-and-experience-display .collection-text .col-md-12.padding-left-none {
    font-style: italic;
    margin-bottom: 28px;
}

/* ── Post content constraints under .da-post-has-toc ──
   The content column is narrower than the legacy 68% width, so images
   and wide blocks can no longer bleed past the edge. Author/expert
   avatars (44px circles) are excluded so they don't stretch. */
.da-post-has-toc .single_blog .post_copy img:not(.pin, .single_safari_card_thumb, .related-dest > img, .stars_tbl_td > img, .author-img, .expert-img) {
    width: 100% !important;
    margin: 0 !important;
}

.da-post-has-toc .single_blog .post_copy figure.wp-caption,
.da-post-has-toc .single_blog .post_copy .expert-insight-block {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Figures need breathing room between them and the next heading /
   paragraph — 40px matches the general spacing between major items. */
.da-post-has-toc .single_blog .post_copy figure.wp-caption.alignnone,
.da-post-has-toc .single_blog .post_copy figure.wp-caption {
    margin-bottom: 40px !important;
}

/* figcaption sits inside the figure — zero horizontal margin to match. */
.da-post-has-toc .single_blog .post_copy figure figcaption {
    margin: 6px 0 0;
}

/* ── Mobile: accordion ── */
@media (max-width: 1024px) {
    .da-post-has-toc .content-container {
        display: block;
        width: 100%;
        max-width: none;
        padding-top: 0;
    }
    /* Right column goes full width at this breakpoint — Bootstrap-style
       15px gutters on the content column (and matching horizontal
       margin on the TOC card) keep everything aligned with other
       sections rather than touching the viewport edges. */
    .da-post-has-toc .content-container > .my_section {
        display: flex;
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }
    /* Bootstrap's .col-xs-12 { width: 100% } on the inner .row combined
       with the flex parent causes the post body to overflow the 15px
       gutter on mobile. Unsetting the width (with !important to beat
       Bootstrap) lets the flex context size it naturally. */
    .da-post-has-toc .content-container > .my_section > .row.col-xs-12 {
        width: unset !important;
    }
    .da-post-has-toc .da-toc {
        position: static;
        flex: 1 1 auto;
        max-width: none;
        width: auto;
        margin: 1em 0 1.5em;
    }

    /* Tighter figure spacing on mobile — 20px top / bottom reads better
       than the 30px desktop spacing in a narrower column. */
    .da-post-has-toc .single_blog .post_copy figure {
        margin-top: 20px !important;
    }
    .da-post-has-toc .single_blog .post_copy figure.wp-caption,
    .da-post-has-toc .single_blog .post_copy figure.wp-caption.alignnone {
        margin-bottom: 20px !important;
    }

    .da-toc__chevron {
        display: inline-block;
    }
    .da-toc__header {
        cursor: pointer;
    }

    /* Closed by default on mobile — no flash of expanded content. */
    .da-toc .da-toc__list {
        max-height: 0;
        margin-top: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.2s ease, margin-top 0.2s ease;
    }
    .da-toc.is-open .da-toc__list {
        max-height: 1200px;
        margin-top: 14px;
        opacity: 1;
    }
    .da-toc.is-open .da-toc__chevron {
        transform: rotate(225deg); /* UP */
    }
}

/* ── Per-post presentation toggles (apply regardless of TOC) ── */
.da-post-image-border .post_copy img {
    border: 1px solid #ededed;
    border-radius: 10px;
    box-sizing: border-box;
}

/* White background only on <img>, not the figure, so figcaptions don't
   inherit the white treatment. */
.da-post-image-white-bg .post_copy img {
    background-color: #fff;
}

/* ── Scroll offset so browser-native anchor jumps still land below the
   sticky header even without JS smooth-scroll. ── */
.single_blog .post_copy h2[id] {
    scroll-margin-top: 140px;
}

/* ── Responsive H2 sizing ──
   The theme pins .single_blog .post_copy h2 to 40px and then only
   loosens it via a less-specific `.post_copy h2` rule at 991px / 520px,
   which gets out-specificed. Mirror those breakpoints under our
   selector so H2s scale properly when the TOC is enabled. */
@media (max-width: 991px) {
    .da-post-has-toc .single_blog .post_copy h2 {
        font-size: 34px;
        line-height: 44px;
    }
}

@media (max-width: 520px) {
    .da-post-has-toc .single_blog .post_copy h2 {
        font-size: 28px;
        line-height: 38px;
        padding-bottom: 20px;
    }
}