/* Extracted from module/computer/blog/sidenav.phtml during audit Step 6c. */

/*
 * Sidenav stays in view as the user scrolls the long post content.
 * Native CSS sticky 2026-05-21 (was jQuery stick_in_parent / sticky-kit
 * — see sidenav.phtml header for the migration rationale). top: 150px
 * matches the old offset_top so positioning is identical relative to
 * the sticky page header.
 */
#sidenavSticksy{
    position: sticky;
    top: 150px;
    align-self: flex-start;
}

/*
 * Zero the top margin of whatever section ends up being the FIRST
 * visible child of the sidenav. Each section has `mt-5` (~45px) which
 * was intended to follow the intro card. When the intro card is
 * hidden (blog index / category list pages), the first remaining
 * section was sitting 45px below the top of the column.
 */
#sidenavSticksy > div:first-child{
    margin-top: 0 !important;
}

/*
 * When "Últimas publicações" is the FIRST visible section (i.e. on the
 * blog index and list pages — intro card hidden, related posts only
 * render on post pages), zero its top padding so the h4 baseline aligns
 * with the topArticle hero's top edge (index) or with the page h1 (list).
 * On post pages the intro card is first, so the `:first-child` selector
 * doesn't match and Últimas publicações keeps its normal `mt-5 p-4`
 * spacing under the intro card.
 */
#sidenavSticksy > .latestPostsSection:first-child{
    padding-top: 0 !important;
}

.mostPopularPost, .relatedPost{
    cursor: pointer;
}

.mostPopularPost b, .relatedPost b{
    font-size: 15px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mostPopularPost img, .relatedPost img{
    border-radius: 4px;
}

.mostPopularArticleTitle, .relatedArticleTitle{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.relatedPostsSection{
    background: linear-gradient(135deg, #fff8f0 0%, #fff 100%);
    border-left: 3px solid var(--lb-brand);
    border-radius: 0 4px 4px 0;
}

.relatedPostsSection h4 i{
    color: var(--lb-brand);
}