/* ============================================
   MBC Blog Post Body
   Figma: Section (1280 container, 1024 content row, 240 sidebar + 720 body)
   Layout/typography are LOCKED with !important so editors cannot break the
   design from the Bricks "Style" panel.
   ============================================ */

/* ---------- Layout caркас (locked) ---------- */

.mbc-blog-body {
    --mbc-bb-side-w: 240px;
    --mbc-bb-main-w: 720px;
    --mbc-bb-gap: 64px;
    --mbc-bb-container-max: 1280px;

    display: block !important;
    width: 100% !important;
    background: #FFFFFF;
}

.mbc-blog-body__container {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: var(--mbc-bb-container-max) !important;
    margin: 0 auto !important;
    padding: 0 32px !important;
}

.mbc-blog-body__grid {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: var(--mbc-bb-gap) !important;
    width: 100% !important;
    max-width: 1024px !important;
}

.mbc-blog-body--no-sidebar .mbc-blog-body__grid {
    justify-content: center !important;
}

.mbc-blog-body__sidebar {
    flex: 0 0 var(--mbc-bb-side-w) !important;
    width: var(--mbc-bb-side-w) !important;
    min-width: var(--mbc-bb-side-w) !important;
    max-width: var(--mbc-bb-side-w) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 32px !important;
}

.mbc-blog-body__sidebar.is-sticky {
    position: sticky !important;
    top: 96px !important;
}

.mbc-blog-body__main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: var(--mbc-bb-main-w) !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

/* Mobile-only blocks are hidden on desktop */
.mbc-blog-body__toc--mobile,
.mbc-blog-body__share--mobile {
    display: none !important;
}

/* ---------- Sidebar internals ---------- */

.mbc-blog-body__divider {
    width: 100%;
    height: 1px;
    margin: 0;
    border: 0;
    background: #E4E7EC;        /* Gray/200 */
}

.mbc-blog-body__toc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 16px;
}

.mbc-blog-body__toc-label {
    width: 100%;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #44403C;             /* MBClinic Brand/600 */
}

.mbc-blog-body__toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mbc-blog-body__toc-item {
    margin: 0;
    padding: 0;
}

.mbc-blog-body__toc-item--h3 {
    padding-left: 16px;
}

.mbc-blog-body__toc-item--h4 {
    padding-left: 32px;
}

.mbc-blog-body__toc-link {
    display: inline-flex;
    align-items: center;
    width: 100%;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #475467;             /* Gray/600 */
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
    transition: color 0.15s ease;
}

.mbc-blog-body__toc-link:hover {
    color: #34312E;             /* MBClinic Brand/700 */
}

.mbc-blog-body__toc-link.is-active {
    color: #34312E;
    font-weight: 700;
}

.mbc-blog-body__toc-empty {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #98A2B3;             /* Gray/400 */
    font-style: italic;
}

/* ---------- Social share buttons ---------- */

.mbc-blog-body__share {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.mbc-blog-body__share-btn {
    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 10px;
    background: #FFFFFF;
    border: 1px solid #D0D5DD;  /* Gray/300 */
    border-radius: 8px;
    /* Skeuomorphic shadow per spec */
    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.05),
        inset 0 0 0 1px rgba(16, 24, 40, 0.18),
        inset 0 -2px 0 rgba(16, 24, 40, 0.05);
    color: #344054;             /* Gray/700 */
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.mbc-blog-body__share-btn:hover {
    background: #F9FAFB;
    border-color: #98A2B3;
}

.mbc-blog-body__share-btn:active {
    transform: translateY(1px);
}

.mbc-blog-body__share-btn svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.mbc-blog-body__share-feedback {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 4px 8px;
    background: #101828;        /* Gray/900 */
    color: #FFFFFF;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.mbc-blog-body__share-btn.is-copied .mbc-blog-body__share-feedback {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---------- Categories badges row (multi-color rotation) ---------- */

.mbc-blog-body__categories {
    box-sizing: border-box;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #E4E7EC;  /* Gray/200 */
}

.mbc-blog-body__badge {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    height: 24px;
    border-radius: 16px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    border-style: solid;
    border-width: 1px;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

a.mbc-blog-body__badge:hover {
    opacity: 0.85;
}

/* Color palettes (rotated stably by term_id) */
.mbc-blog-body__badge--c0 { background: #FCFAF6; border-color: #EBEADE; color: #44403C; } /* MBClinic Brand */
.mbc-blog-body__badge--c1 { background: #EEF4FF; border-color: #C7D7FE; color: #3538CD; } /* Indigo */
.mbc-blog-body__badge--c2 { background: #ECFDF3; border-color: #ABEFC6; color: #067647; } /* Success/Green */
.mbc-blog-body__badge--c3 { background: #FDF2FA; border-color: #FCCEEE; color: #C11574; } /* Pink */
.mbc-blog-body__badge--c4 { background: #FFF6ED; border-color: #F9DBAF; color: #B93815; } /* Orange */
.mbc-blog-body__badge--c5 { background: #F4F3FF; border-color: #D9D6FE; color: #5925DC; } /* Purple */

/* ============================================
   .mbc-blog-prose — typography for the rich-text body
   Applied to the slot wrapper; all native HTML the editor types ends up here.
   ============================================ */

.mbc-blog-prose {
    width: 100%;
    max-width: var(--mbc-bb-main-w, 720px);
    color: #475467;            /* Gray/600 */
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Default paragraph: Text lg/Regular 18/28 */
.mbc-blog-prose p {
    margin: 0 0 18px;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #475467;
}

/* Lead paragraph (first p OR explicit .mbc-lead): Text xl/Regular 20/30 */
.mbc-blog-prose > p:first-of-type,
.mbc-blog-prose p.mbc-lead {
    font-size: 20px;
    line-height: 30px;
}

/* H2: Display sm/Semibold 30/38, with measured top/bottom spacing */
.mbc-blog-prose h2 {
    margin: 40px 0 20px;
    font-weight: 600;
    font-size: 30px;
    line-height: 38px;
    letter-spacing: -0.01em;
    color: #101828;            /* Gray/900 */
}

/* First H2 should not have top margin (lives right after lead) */
.mbc-blog-prose > h2:first-child {
    margin-top: 0;
}

/* H3: Display xs/Semibold 24/32 */
.mbc-blog-prose h3 {
    margin: 32px 0 16px;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #101828;
}

/* H4: smaller emphasis */
.mbc-blog-prose h4 {
    margin: 24px 0 12px;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    color: #101828;
}

.mbc-blog-prose strong,
.mbc-blog-prose b {
    font-weight: 600;
    color: #344054;
}

.mbc-blog-prose a {
    color: #34312E;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}

.mbc-blog-prose a:hover {
    color: #1F1D1A;
}

/* Lists */
.mbc-blog-prose ul,
.mbc-blog-prose ol {
    margin: 0 0 18px;
    padding-left: 24px;
}

.mbc-blog-prose li {
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 28px;
    color: #475467;
}

.mbc-blog-prose li::marker {
    color: #98A2B3;
}

/* Images, figures with rounded corners + measured spacing */
.mbc-blog-prose img,
.mbc-blog-prose figure img,
.mbc-blog-prose .wp-block-image img {
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 12px;
    display: block;
}

.mbc-blog-prose figure,
.mbc-blog-prose .wp-block-image {
    margin: 48px 0;
}

.mbc-blog-prose figcaption {
    margin-top: 12px;
    font-size: 14px;
    line-height: 20px;
    color: #98A2B3;
    text-align: center;
}

/* Horizontal rule = section divider with 32px breathing room */
.mbc-blog-prose hr {
    margin: 32px 0;
    border: 0;
    height: 1px;
    background: #E4E7EC;
}

/* Blockquote */
.mbc-blog-prose blockquote {
    margin: 24px 0;
    padding: 16px 24px;
    border-left: 3px solid #34312E;
    background: #FCFAF6;
    border-radius: 0 8px 8px 0;
    font-size: 20px;
    line-height: 30px;
    color: #344054;
    font-style: italic;
}

.mbc-blog-prose blockquote p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

/* Code */
.mbc-blog-prose code {
    padding: 2px 6px;
    background: #F9FAFB;
    border: 1px solid #E4E7EC;
    border-radius: 4px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    color: #344054;
}

.mbc-blog-prose pre {
    margin: 24px 0;
    padding: 16px;
    background: #F9FAFB;
    border: 1px solid #E4E7EC;
    border-radius: 8px;
    overflow-x: auto;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
    line-height: 22px;
    color: #344054;
}

.mbc-blog-prose pre code {
    padding: 0;
    background: none;
    border: 0;
}

/* Tables */
.mbc-blog-prose table {
    width: 100%;
    margin: 24px 0;
    border-collapse: collapse;
    font-size: 16px;
    line-height: 24px;
}

.mbc-blog-prose th,
.mbc-blog-prose td {
    padding: 12px 16px;
    border-bottom: 1px solid #E4E7EC;
    text-align: left;
}

.mbc-blog-prose th {
    font-weight: 600;
    color: #101828;
    background: #F9FAFB;
}

/* Last child should not add extra margin */
.mbc-blog-prose > *:last-child {
    margin-bottom: 0;
}

/* ============================================
   Mobile TOC accordion (≤991px)
   ============================================ */

.mbc-blog-body__toc-toggle {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    background: #FCFAF6;          /* MBClinic Brand/50 */
    border: 1px solid #EBEADE;    /* MBClinic Brand/200 */
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    text-align: left;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mbc-blog-body__toc-toggle:hover {
    background: #F7F4EC;
    border-color: #DCD9C8;
}

.mbc-blog-body__toc-toggle:focus-visible {
    outline: 2px solid #34312E;
    outline-offset: 2px;
}

.mbc-blog-body__toc-toggle-label {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #34312E;               /* MBClinic Brand/700 */
}

.mbc-blog-body__toc-toggle-count {
    flex: 0 0 auto;
    margin-left: 8px;
    margin-right: 12px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #98A2B3;
}

.mbc-blog-body__toc-toggle-chevron {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: #34312E;
    transition: transform 0.2s ease;
}

.mbc-blog-body__toc-toggle[aria-expanded="true"] .mbc-blog-body__toc-toggle-chevron {
    transform: rotate(180deg);
}

.mbc-blog-body__toc-toggle[aria-expanded="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.mbc-blog-body__toc-panel {
    box-sizing: border-box;
    width: 100%;
    margin-top: -1px;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid #EBEADE;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    animation: mbc-toc-slide 0.2s ease;
}

.mbc-blog-body__toc-panel[hidden] {
    display: none;
}

@keyframes mbc-toc-slide {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mbc-blog-body__toc--mobile .mbc-blog-body__toc-list {
    gap: 14px;
}

/* ============================================
   Mobile Social Share row (≤991px)
   ============================================ */

.mbc-blog-body__share--mobile {
    box-sizing: border-box;
    flex-direction: column !important;
    align-items: flex-start;
    gap: 12px !important;
    width: 100%;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid #E4E7EC;
}

.mbc-blog-body__share-label {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #475467;
}

.mbc-blog-body__share-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 991px) {
    .mbc-blog-body__container {
        padding: 0 24px !important;
    }

    .mbc-blog-body__grid {
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* Hide the desktop sidebar entirely — TOC and Share are repositioned in main */
    .mbc-blog-body__sidebar {
        display: none !important;
    }

    .mbc-blog-body__main {
        max-width: 100% !important;
        gap: 0 !important;
    }

    /* Reveal mobile blocks */
    .mbc-blog-body__toc--mobile {
        display: block !important;
        width: 100%;
        margin-bottom: 32px;
    }

    .mbc-blog-body__share--mobile {
        display: flex !important;
    }

    /* Categories spacing on mobile */
    .mbc-blog-body__categories {
        margin-top: 32px;
    }
}

@media (max-width: 640px) {
    .mbc-blog-body__container {
        padding: 0 16px !important;
    }

    .mbc-blog-prose > p:first-of-type,
    .mbc-blog-prose p.mbc-lead {
        font-size: 18px;
        line-height: 28px;
    }

    .mbc-blog-prose h2 {
        font-size: 24px;
        line-height: 32px;
        margin: 32px 0 16px;
    }

    .mbc-blog-prose h3 {
        font-size: 20px;
        line-height: 30px;
        margin: 24px 0 12px;
    }

    .mbc-blog-prose figure,
    .mbc-blog-prose .wp-block-image {
        margin: 32px 0;
    }

    .mbc-blog-body__toc-toggle {
        padding: 12px 14px;
    }

    .mbc-blog-body__toc-toggle-label {
        font-size: 15px;
    }
}