/* ============================================
   SINGLE BLOG POST — FIGMA v3.5
   TOC Sidebar + Content Layout
   CONFLICT-PROOF: Section wrappers prefixed py_sb_
   Dev: Paul .Y 20260329

   v3.5: Fix prod spacing gaps caused by Elementor wrapper conflicts
         - Replaced gap:56px with margin-based spacing on direct children
         - More aggressive Elementor widget margin resets
         - Added .elementor-widget-text-editor margin normalization
   v3.4: Mobile breadcrumb title wraps + aligns to "Blogs"
         Related posts section hidden (PHP side)
   v3.3: Per-section 100vw breakout (proven technique)
         No parent breakout, no cancel logic
         Related post cards reuse blog-card from blog-archive.css
         Section wrappers use py_sb_ prefix
   v3.0: TOC sidebar auto-detect headings
   v2.0: Afacad Flux + Figma token migration
   v1.0: Initial single blog styles

   Figma tokens:
   Dark-Text:       #2A2A2A
   Light-Text:      #666666
   Primary:         #928572
   Complimentary-4: #C4A97D (progress indicator)
   bg-200:          #EFEDEB
   bg-100:          #FAF9F7
   outline-400:     #CCC8C0
   ============================================ */


/* ===================================
   CSS VARIABLES
   =================================== */

.al-single-blog {
    --sb-dark-text: #2A2A2A;
    --sb-light-text: #666666;
    --sb-primary: #928572;
    --sb-comp4: #C4A97D;
    --sb-200: #EFEDEB;
    --sb-100: #FAF9F7;
    --sb-400: #CCC8C0;
    --sb-white: #FFFFFF;
}


/* ===================================
   FULL-WIDTH — PER SECTION BREAKOUT
   Each section breaks out individually.
   Proven technique from blog-fullwidth-fix.css.
   =================================== */

/* Overflow fix for sticky sidebar */
.al-single-blog,
.al-single-blog .py_sb_body_section,
.al-single-blog .py_sb_body_container,
#primary.al-single-blog,
.site-main.al-single-blog,
.elementor-widget-container:has(.al-single-blog) {
    overflow: visible !important;
}

/* Breadcrumb */
.al-single-blog .py_sb_breadcrumb_section {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-top: 0 !important;
}

/* Back button */
.al-single-blog .py_sb_back_section {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}

/* Post header */
.al-single-blog .py_sb_post_header {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}

/* Body section (sidebar + content) */
.al-single-blog .py_sb_body_section {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}

/* Related posts */
.al-single-blog .py_sb_related_posts {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}


/* ===================================
   BREADCRUMB
   =================================== */

.al-single-blog .py_sb_breadcrumb_section {
    background: var(--sb-200);
    display: flex;
    justify-content: center;
}

.al-single-blog .py_sb_breadcrumb_container {
    width: 100%;
    max-width: 1440px;
    padding: 14px 120px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
}

.al-single-blog .py_sb_breadcrumb {
    width: 100%;
    max-width: 1200px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
}

.al-single-blog .py_sb_breadcrumb_link {
    color: var(--sb-dark-text);
    font-weight: 300;
    text-decoration: none;
    transition: color 0.2s ease;
}

.al-single-blog .py_sb_breadcrumb_link:hover {
    color: var(--sb-primary);
}

.al-single-blog .py_sb_breadcrumb_sep {
    color: var(--sb-dark-text);
    font-weight: 300;
}

.al-single-blog .py_sb_breadcrumb_current {
    color: var(--sb-dark-text);
    font-weight: 400;
}


/* ===================================
   BACK BUTTON
   =================================== */

.al-single-blog .py_sb_back_section {
    background: var(--sb-white);
    display: flex;
    justify-content: center;
}

.al-single-blog .py_sb_back_container {
    width: 100%;
    max-width: 1440px;
    padding: 30px 120px 0 120px;
    box-sizing: border-box;
}

.al-single-blog .py_sb_back_link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--sb-primary);
    text-decoration: none;
    text-transform: capitalize;
    transition: color 0.2s ease;
}

.al-single-blog .py_sb_back_link svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--sb-primary);
    transition: color 0.2s ease;
}

.al-single-blog .py_sb_back_link:hover {
    color: #7A7062;
}

.al-single-blog .py_sb_back_link:hover svg {
    color: #7A7062;
}


/* ===================================
   POST HEADER
   =================================== */

.al-single-blog .py_sb_post_header {
    background: var(--sb-white);
    display: flex;
    justify-content: center;
    padding: 20px 0 0 0;
}

.al-single-blog .py_sb_content_container {
    width: 100%;
    max-width: 1440px;
    padding: 0 120px;
    box-sizing: border-box;
}

.al-single-blog .py_sb_header_inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Badge */
.al-single-blog .py_sb_category_badge {
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--sb-dark-text);
    padding: 5px 14px;
    border: 0.5px solid var(--sb-dark-text);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    align-self: flex-start;
}

/* Title */
.al-single-blog .py_sb_post_title {
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 36px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--sb-dark-text);
    margin: 0;
}

/* Date */
.al-single-blog .py_sb_post_date {
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: var(--sb-light-text);
}


/* ===================================
   BODY SECTION — SIDEBAR + CONTENT
   =================================== */

.al-single-blog .py_sb_body_section {
    background: var(--sb-white);
    display: flex;
    justify-content: center;
    padding: 40px 0 80px 0;
}

.al-single-blog .py_sb_body_container {
    width: 100%;
    max-width: 1440px;
    padding: 0 120px;
    box-sizing: border-box;
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

/* No TOC — content goes full width */
.al-single-blog .py_sb_body_container.no-toc {
    justify-content: center;
}

.al-single-blog .py_sb_body_container.no-toc .py_sb_main_content {
    max-width: 1200px;
    width: 100%;
}


/* ===================================
   TOC SIDEBAR
   =================================== */

.al-single-blog .py_sb_toc_sidebar {
    width: 256px;
    min-width: 256px;
    flex-shrink: 0;
    position: sticky;
    top: 120px;
    display: flex;
    gap: 28px;
    align-items: flex-start;
    align-self: flex-start;
}

.al-single-blog .py_sb_toc_track {
    width: 3px;
    flex-shrink: 0;
    position: relative;
    align-self: stretch;
    min-height: 100%;
}

.al-single-blog .py_sb_toc_track_bg {
    width: 3px;
    height: 100%;
    background: #F4F4F5;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
}

.al-single-blog .py_sb_toc_track_indicator {
    width: 3px;
    height: 40px;
    background: var(--sb-comp4);
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    transition: top 0.3s ease, height 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}

.al-single-blog .py_sb_toc_nav {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
}

.al-single-blog .py_sb_toc_link {
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--sb-light-text);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.al-single-blog .py_sb_toc_link:hover {
    color: var(--sb-dark-text);
}

.al-single-blog .py_sb_toc_link.active {
    color: var(--sb-dark-text);
}


/* ===================================
   MAIN CONTENT AREA
   =================================== */

.al-single-blog .py_sb_main_content {
    flex: 1;
    max-width: 820px;
    min-width: 0;
    overflow: hidden;
}

.al-single-blog .py_sb_content_hero {
    width: 100%;
    margin-bottom: 28px;
}

.al-single-blog .py_sb_content_hero img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center;
    display: block;
}


/* ===================================
   POST CONTENT TYPOGRAPHY
   =================================== */

.al-single-blog .py_sb_post_content {
    width: 100%;
    max-width: 820px;
    background: transparent;
    padding: 0;
    display: block;
}

/* -----------------------------------------------
   v3.5 FIX: Replace gap:56px with margin-based spacing
   
   The gap approach breaks on prod because Elementor
   injects extra wrapper divs (.elementor-section,
   .elementor-widget-wrap, etc.) that become flex children.
   Each wrapper gets 56px gap applied, causing spacing
   to compound/multiply on prod but not local (different
   Elementor versions = different DOM nesting).
   
   Solution: Use margin-top on content-level elements only,
   skip all Elementor structural wrappers.
   ----------------------------------------------- */

.al-single-blog .py_sb_content_inner {
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 0; /* v3.5: REMOVED gap:56px — use margins instead */
    max-width: 820px;
}

/* Content-level spacing: headings get top margin for visual sections */
.al-single-blog .py_sb_content_inner h2 {
    margin-top: 46px;
}

.al-single-blog .py_sb_content_inner h3 {
    margin-top: 32px;
}

.al-single-blog .py_sb_content_inner h4 {
    margin-top: 24px;
}

/* First child never gets top margin */
.al-single-blog .py_sb_content_inner > *:first-child,
.al-single-blog .py_sb_content_inner > .elementor:first-child,
.al-single-blog .py_sb_content_inner .elementor-widget-wrap > .elementor-element:first-child,
.al-single-blog .py_sb_content_inner .elementor-widget-text-editor:first-child h2,
.al-single-blog .py_sb_content_inner .elementor-widget-text-editor:first-child h3,
.al-single-blog .py_sb_content_inner .elementor-widget-text-editor:first-child h4 {
    margin-top: 0 !important;
}


/* -----------------------------------------------
   v3.5 FIX: Nuclear Elementor margin/padding reset
   
   Covers ALL known Elementor wrapper levels.
   Forces 0 margin/padding on structural wrappers
   so only our content-level margins control spacing.
   ----------------------------------------------- */

.al-single-blog .py_sb_content_inner .elementor,
.al-single-blog .py_sb_content_inner .elementor-inner,
.al-single-blog .py_sb_content_inner .elementor-widget-container,
.al-single-blog .py_sb_content_inner .elementor-element {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.al-single-blog .py_sb_content_inner .elementor-section,
.al-single-blog .py_sb_content_inner .elementor-section-wrap,
.al-single-blog .py_sb_content_inner .elementor-container,
.al-single-blog .py_sb_content_inner .elementor-column,
.al-single-blog .py_sb_content_inner .elementor-column-wrap,
.al-single-blog .py_sb_content_inner .elementor-widget-wrap {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.al-single-blog .py_sb_content_inner .elementor-section.elementor-section-boxed > .elementor-container,
.al-single-blog .py_sb_content_inner .elementor-section.elementor-section-stretched {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
}

.al-single-blog .py_sb_content_inner .elementor-widget-image img {
    max-width: 100% !important;
    height: auto !important;
}

/* -----------------------------------------------
   v3.5 FIX: Elementor widget-level spacing reset
   
   .elementor-widget adds its own margin-bottom (usually 20px).
   .elementor-widget-text-editor often has bottom margin too.
   These are the ghost gaps you see on prod.
   ----------------------------------------------- */

.al-single-blog .py_sb_content_inner .elementor-widget {
    margin-bottom: 0 !important;
}

.al-single-blog .py_sb_content_inner .elementor-widget-text-editor {
    margin-bottom: 0 !important;
}

/* Elementor section gaps (the gap between sections in the editor) */
.al-single-blog .py_sb_content_inner .elementor-section {
    margin-bottom: 0 !important;
}

.al-single-blog .py_sb_content_inner .elementor-section + .elementor-section {
    margin-top: 0 !important;
}

/* Elementor top/bottom section padding (editor adds 10px default) */
.al-single-blog .py_sb_content_inner .elementor-section > .elementor-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Elementor column gap resets */
.al-single-blog .py_sb_content_inner .elementor-column-gap-default > .elementor-column > .elementor-element-populated,
.al-single-blog .py_sb_content_inner .elementor-column-gap-narrow > .elementor-column > .elementor-element-populated,
.al-single-blog .py_sb_content_inner .elementor-column-gap-extended > .elementor-column > .elementor-element-populated,
.al-single-blog .py_sb_content_inner .elementor-column-gap-wide > .elementor-column > .elementor-element-populated,
.al-single-blog .py_sb_content_inner .elementor-column-gap-wider > .elementor-column > .elementor-element-populated {
    padding: 0 !important;
}

/* Elementor widget spacing that varies between versions */
.al-single-blog .py_sb_content_inner .elementor-widget:not(:last-child) {
    margin-bottom: 0 !important;
}

/* Elementor spacer widget — kill it inside blog content */
.al-single-blog .py_sb_content_inner .elementor-widget-spacer {
    display: none !important;
}


/* First paragraph */
.al-single-blog .py_sb_content_inner > p:first-of-type,
.al-single-blog .py_sb_content_inner .elementor-widget-text-editor:first-child p {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--sb-dark-text);
    margin: 0;
}

/* Regular paragraphs */
.al-single-blog .py_sb_content_inner p {
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--sb-dark-text);
    margin: 0 0 10px 0;
}

/* Headings */
.al-single-blog .py_sb_content_inner h2 {
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--sb-dark-text);
    margin-bottom: 10px;
    scroll-margin-top: 130px;
}

.al-single-blog .py_sb_content_inner h3 {
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--sb-dark-text);
    margin-bottom: 10px;
}

.al-single-blog .py_sb_content_inner h4 {
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--sb-dark-text);
    margin-bottom: 10px;
}

.al-single-blog .py_sb_content_inner ul,
.al-single-blog .py_sb_content_inner ol {
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--sb-dark-text);
    margin: 0 0 10px 0;
    padding-left: 30px;
}

.al-single-blog .py_sb_content_inner li {
    margin-bottom: 12px;
}

.al-single-blog .py_sb_content_inner a {
    color: var(--sb-primary);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.al-single-blog .py_sb_content_inner a:hover {
    color: #7A7062;
}

.al-single-blog .py_sb_content_inner blockquote {
    font-size: 20px;
    font-weight: 300;
    font-style: italic;
    line-height: 1.6;
    color: var(--sb-dark-text);
    margin: 0;
    padding: 30px;
    background: var(--sb-200);
    border-left: 4px solid var(--sb-primary);
}

.al-single-blog .py_sb_content_inner img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0;
}

.al-single-blog .py_sb_content_inner .wp-block-image,
.al-single-blog .py_sb_content_inner figure {
    margin: 0;
}

.al-single-blog .py_sb_content_inner figcaption {
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
    color: var(--sb-light-text);
    text-align: center;
    margin-top: 12px;
}

.al-single-blog .py_sb_content_inner strong,
.al-single-blog .py_sb_content_inner b {
    font-weight: 500;
}


/* ===================================
   RELATED POSTS SECTION
   Section wrapper: py_sb_ prefixed
   Cards: reuse blog-card from blog-archive.css
   NOTE: Currently hidden via PHP (v3.4)
   =================================== */

.al-single-blog .py_sb_related_posts {
    background: var(--sb-100);
    padding: 80px 0;
    display: flex;
    justify-content: center;
}

.al-single-blog .py_sb_related_posts .py_sb_content_container {
    max-width: 1440px;
    padding: 0 120px;
}

.al-single-blog .py_sb_related_title {
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--sb-dark-text);
    margin: 0 0 40px 0;
    text-align: center;
}

.al-single-blog .py_sb_related_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* blog-card styles come from blog-archive.css — no duplication here */


/* ===================================
   RESPONSIVE: Large Desktop (1440px+)
   =================================== */

@media (min-width: 1441px) {
    .al-single-blog .py_sb_body_container {
        max-width: 1440px;
    }
}


/* ===================================
   RESPONSIVE: Tablet Landscape (1024px - 1279px)
   =================================== */

@media (max-width: 1279px) {
    .al-single-blog .py_sb_breadcrumb_container,
    .al-single-blog .py_sb_back_container,
    .al-single-blog .py_sb_content_container,
    .al-single-blog .py_sb_body_container {
        padding-left: 60px;
        padding-right: 60px;
    }

    .al-single-blog .py_sb_body_container {
        gap: 40px;
    }

    .al-single-blog .py_sb_toc_sidebar {
        width: 220px;
        min-width: 220px;
    }

    .al-single-blog .py_sb_toc_link {
        font-size: 16px;
    }

    .al-single-blog .py_sb_toc_nav {
        gap: 20px;
    }
}


/* ===================================
   RESPONSIVE: Tablet Portrait (768px - 1023px)
   =================================== */

@media (max-width: 1023px) {
    .al-single-blog .py_sb_breadcrumb_container,
    .al-single-blog .py_sb_back_container,
    .al-single-blog .py_sb_content_container,
    .al-single-blog .py_sb_body_container {
        padding-left: 40px;
        padding-right: 40px;
    }

    .al-single-blog .py_sb_post_title {
        font-size: 28px;
    }

    .al-single-blog .py_sb_toc_sidebar {
        display: none !important;
    }

    .al-single-blog .py_sb_body_container {
        flex-direction: column;
        gap: 0;
    }

    .al-single-blog .py_sb_main_content {
        max-width: 100%;
    }

    .al-single-blog .py_sb_post_content {
        max-width: 100%;
    }

    .al-single-blog .py_sb_content_inner {
        max-width: 100%;
    }

    .al-single-blog .py_sb_content_hero img {
        height: 350px;
    }

    .al-single-blog .py_sb_post_content {
        padding: 0;
    }

    .al-single-blog .py_sb_related_grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
    }

    .al-single-blog .py_sb_related_title {
        font-size: 28px;
    }
}


/* ===================================
   RESPONSIVE: Mobile (≤767px)
   =================================== */

@media (max-width: 767px) {
    .al-single-blog .py_sb_breadcrumb_container,
    .al-single-blog .py_sb_back_container,
    .al-single-blog .py_sb_content_container,
    .al-single-blog .py_sb_body_container {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* --- Breadcrumb mobile: inline horizontal, natural wrap --- */
    .al-single-blog .py_sb_breadcrumb {
        font-size: 12px;
        display: inline;
        line-height: 1.5;
    }

    .al-single-blog .py_sb_breadcrumb_link,
    .al-single-blog .py_sb_breadcrumb_sep,
    .al-single-blog .py_sb_breadcrumb_current {
        display: inline;
    }

    .al-single-blog .py_sb_breadcrumb_current {
        word-break: break-word;
    }

    .al-single-blog .py_sb_back_link {
        font-size: 16px;
    }

    .al-single-blog .py_sb_post_title {
        font-size: 24px;
    }

    .al-single-blog .py_sb_category_badge {
        font-size: 14px;
        padding: 4px 12px;
    }

    .al-single-blog .py_sb_post_date {
        font-size: 14px;
    }

    .al-single-blog .py_sb_body_section {
        padding: 30px 0 50px 0;
    }

    .al-single-blog .py_sb_toc_sidebar {
        display: none !important;
    }

    .al-single-blog .py_sb_content_hero img {
        height: 250px;
    }

    .al-single-blog .py_sb_content_inner p {
        font-size: 16px;
    }

    .al-single-blog .py_sb_content_inner h2 {
        font-size: 20px;
        margin-top: 36px;
    }

    .al-single-blog .py_sb_content_inner h3 {
        font-size: 18px;
        margin-top: 24px;
    }

    .al-single-blog .py_sb_content_inner ul,
    .al-single-blog .py_sb_content_inner ol {
        font-size: 16px;
        padding-left: 25px;
    }

    .al-single-blog .py_sb_content_inner blockquote {
        font-size: 18px;
        padding: 20px;
    }

    .al-single-blog .py_sb_related_posts {
        padding: 50px 0;
    }

    .al-single-blog .py_sb_related_title {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .al-single-blog .py_sb_related_grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}


/* ===================================
   RESPONSIVE: Small Mobile (≤480px)
   =================================== */

@media (max-width: 480px) {
    .al-single-blog .py_sb_content_hero img {
        height: 200px;
    }

    .al-single-blog .py_sb_post_title {
        font-size: 20px;
    }

    .al-single-blog .py_sb_content_inner p,
    .al-single-blog .py_sb_content_inner ul,
    .al-single-blog .py_sb_content_inner ol {
        font-size: 15px;
    }

    .al-single-blog .py_sb_content_inner h2 {
        font-size: 18px;
    }

    .al-single-blog .py_sb_content_inner blockquote {
        font-size: 16px;
        padding: 15px;
    }
}


/* ===================================
   PRINT
   =================================== */

@media print {
    .al-single-blog .py_sb_toc_sidebar {
        display: none;
    }

    .al-single-blog .py_sb_back_section {
        display: none;
    }
}