/* ==========================================================================
   MOBILE PATCH v4.2 — Blog Content Overlap & Layout Fix
   Fixes: TOC overlap, Share bar overlap, WhatsApp widget overlap
   Refinements: Expand/collapse TOC properly, match content width,
   round share icons, edge-to-edge article container.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOC: Expand/Collapse & Width Consistency
   Problem: TOC looks empty/stupid and doesn't align with text width.
   Fix: Hide list, show toggle arrow, match content padding.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    /* Hide list by default */
    .rocks-blog-toc__list {
        display: none !important;
    }

    /* Expand when toggled. 
       NOTE: The JS defaults to aria-expanded="true" on load.
       So the first click changes it to "false". 
       We reverse the logic on mobile: show list when "false". */
    .rocks-blog-toc.rocks-blog-toc--open .rocks-blog-toc__list,
    .rocks-blog-toc:has(.rocks-blog-toc__toggle[aria-expanded="false"]) .rocks-blog-toc__list,
    .rocks-blog-toc[data-mobile-open="true"] .rocks-blog-toc__list {
        display: flex !important;
        margin-top: 1rem;
        flex-direction: column;
    }

    /* Ensure Toggle button is highly visible and works */
    .rocks-blog-toc__header {
        margin-bottom: 0;
        cursor: pointer;
    }

    .rocks-blog-toc__toggle {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        padding: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        -webkit-tap-highlight-color: transparent !important;
        outline: none !important;
        box-shadow: none !important;
        border: none !important;
        position: relative; /* For absolute chevron */
    }

    .rocks-blog-toc__toggle:hover,
    .rocks-blog-toc__toggle:focus,
    .rocks-blog-toc__toggle:active {
        background: transparent !important;
        background-color: transparent !important;
        outline: none !important;
    }

    /* Inject a custom chevron immune to flex-shrink */
    .rocks-blog-toc__toggle::after {
        content: "";
        position: absolute !important;
        right: 0.25rem;
        top: 50%;
        margin-top: -5px; /* Visual center adjustment */
        
        width: 8px !important;
        height: 8px !important;
        min-width: 8px !important;
        min-height: 8px !important;
        
        border-right: 2px solid var(--blog-gold, #C5A059) !important;
        border-bottom: 2px solid var(--blog-gold, #C5A059) !important;
        border-top: 0 !important;
        border-left: 0 !important;
        
        transform: translateY(-50%) rotate(45deg) !important; /* Pointing down when collapsed (aria=true) */
        transition: transform 0.3s ease;
        display: block !important;
        box-sizing: content-box !important;
    }

    /* Pointing up when expanded (aria=false) */
    .rocks-blog-toc:has(.rocks-blog-toc__toggle[aria-expanded="false"]) .rocks-blog-toc__toggle::after,
    .rocks-blog-toc[data-mobile-open="true"] .rocks-blog-toc__toggle::after {
        transform: translateY(-50%) rotate(-135deg) !important; /* Pointing up */
        margin-top: -1px; /* Visual center adjustment */
    }

    /* Hide the default SVG if it's broken */
    .rocks-blog-toc__toggle svg {
        display: none !important;
    }

    /* Clear any sticky/absolute positioning breaking the flow */
    .rocks-blog-sidebar {
        position: static !important;
        margin-top: 0;
        z-index: auto;
    }
}

/* --------------------------------------------------------------------------
   2. Share bar: Prevent Overlap & Egg Shapes
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    body.single-post {
        padding-bottom: 4.5rem !important;
    }
    .rocks-blog-body {
        padding-bottom: 5.5rem !important;
    }

    .rocks-blog-share {
        padding: 0.5rem 0.75rem !important;
        gap: 0.375rem;
        z-index: 9990 !important;
        flex-wrap: nowrap !important;
    }

    /* Strictly enforce square dimensions for perfect circles */
    .rocks-blog-share__btn {
        flex: 0 0 auto !important;
        min-width: 2.25rem !important;
        min-height: 2.25rem !important;
        width: 2.25rem !important;
        height: 2.25rem !important;
        border-radius: 50% !important;
        padding: 0 !important; /* Prevent internal padding from squashing */
        box-sizing: border-box !important;
    }

    .rocks-blog-share__btn--cta {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   3. WhatsApp widget: Move above share bar
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    body.single-post .rocks-wa-widget,
    body.single-post .rocks-wa-btn,
    body.single-post [class*="whatsapp-widget"],
    body.single-post [class*="wa-widget"],
    body.single-post .wa-chat-box-powerd,
    body.single-post #wa-widget,
    body.single-post .rocks-whatsapp-v4 {
        bottom: 5rem !important;
    }
}

/* --------------------------------------------------------------------------
   4. Extra mobile tightening & Layout Consistency (≤767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Share bar super compact */
    .rocks-blog-share {
        padding: 0.375rem 0.5rem !important;
    }

    .rocks-blog-share__btn {
        min-width: 2rem !important;
        min-height: 2rem !important;
        width: 2rem !important;
        height: 2rem !important;
    }

    .rocks-blog-share__btn svg {
        width: 0.875rem !important;
        height: 0.875rem !important;
    }

    /* --------------------------------------------------------------------------
       STRIPPING ELEMENTOR OUTER PADDING
       Guarantee no hidden layouts squashing the text on mobile
       -------------------------------------------------------------------------- */
    body.single-post .elementor-section.elementor-section-boxed > .elementor-container,
    body.single-post .elementor-column-gap-default > .elementor-column > .elementor-element-populated,
    body.single-post .rocks-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --------------------------------------------------------------------------
       THE EXACT BOX MODEL FOR TOC AND ARTICLE
       - Margin: 8px each side (0.5rem total 1rem gap)
       - Width: calc(100% - 1rem) fills screen minus margins
       - Padding: 16px internal (1rem) for text breathing room
       -------------------------------------------------------------------------- */
    
    /* 1. Article Box */
    .rocks-blog-article {
        margin: -2rem auto 0 auto !important; 
        padding: 2rem 1rem !important;     
        width: calc(100% - 1rem) !important;
        max-width: calc(100% - 1rem) !important;
        border-radius: 0.75rem !important;
        box-sizing: border-box !important;
    }

    /* 2. Strip redundant inner padding so text uses full box width */
    .rocks-blog-prose,
    .rocks-blog-author,
    .rocks-blog-lead__container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 2.5 Related Articles edge alignment */
    /* 2.5 Related Articles edge alignment */
    /* Must restore padding because the global reset above stripped .rocks-container */
    body.single-post .rocks-blog-related .rocks-container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
    }
    
    .rocks-blog-related {
        /* Remove the global reset that was shrinking the dark background */
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* 3. TOC Container and Box */
    .rocks-blog-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        display: block !important; /* Ensure it is NOT flex-center */
    }

    .rocks-blog-toc {
        margin: 0 auto 1.5rem auto !important;
        padding: 1rem !important;      
        width: calc(100% - 1rem) !important;
        max-width: calc(100% - 1rem) !important;
        border-radius: 0.75rem !important;  
        box-sizing: border-box !important;
    }

    /* --------------------------------------------------------------------------
       WHATSAPP & FLOATING
       -------------------------------------------------------------------------- */
    body.single-post .rocks-wa-widget,
    body.single-post .rocks-wa-btn,
    body.single-post [class*="whatsapp-widget"],
    body.single-post [class*="wa-widget"],
    body.single-post .wa-chat-box-powerd,
    body.single-post #wa-widget,
    body.single-post .rocks-whatsapp-v4 {
        bottom: 4.5rem !important;
    }
}

/* --------------------------------------------------------------------------
   5. Ultra-small screens (≤480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .rocks-blog-share__btn {
        min-width: 1.75rem !important;
        min-height: 1.75rem !important;
        width: 1.75rem !important;
        height: 1.75rem !important;
    }

    .rocks-blog-share {
        gap: 0.25rem !important;
    }
    
    .rocks-blog-article {
        padding-top: 2rem !important;
    }
}