/* TM CMS Page */
html { scroll-behavior: smooth; scroll-padding-top: 145px; }
    h1 { line-height: 1.4; }
    h2 { display: block; position: relative; font-size: 28px; line-height: 1.4; }
    h3 { display: block; font-size: 18px; margin: 0px; position: relative; }
    main { min-height: 100vh; }
    .main-container { 
        /* height: calc(100vh - 40px);  */
        padding: 0px 0px 40px 0px; margin: 0px; background-color: #ffffff; }
    .hero-image {
        padding: 0px 0px 60px 0px;
    }
 
    .blog-post-page { 
        max-width: 1200px; 
        margin: 0 auto; 
        display: grid; 
        grid-template-columns: 250px 1fr; 
        gap: 40px; 
        height: 100vh;
        height: auto;
  align-items: start;
    }
    .post-side-nav { 
        position: sticky; 
        top: 0; 
        height: 100%; 
        overflow-y: auto; 
        padding-right: 20px;
        padding-top: 0px;
        position: sticky;
  top: 125px; /* matches the fixed header bottom (70px top + 55px height) */
  height: fit-content;
    }
    .post-side-nav .nav-inner {
        padding: 20px 0px 0px 0px;
    }
    .post-content { 
        height: 100%;
        overflow-y: auto;
        padding: 3rem 0 0 0;
        box-sizing: border-box;
    }
    .container {
        height: 100%;
    }

    .content-image-container {
        padding: 20px 0px 40px 0px;
    }
    
    /* Responsive design */
    @media (max-width: 768px) {
        .main-container { height: auto; padding: 0px; margin: 0px; }
        div.container { height: auto; }
        .blog-post-page {
            grid-template-columns: 1fr;
            gap: 20px;
            height: unset;
        }
        .post-side-nav {
            position: static;
            height: auto;
            padding-right: 0;
        }
        .post-side-nav .table-of-contents{
            display: none;
        }
        .post-content {
            height: auto;
            overflow-y: visible;
            padding: 0px;
        }
    }

    .post-side-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        padding-top: 20px;
    }
    .post-side-nav ul li {
        margin-bottom: 16px;
    }
    .post-side-nav ul li a {
        text-decoration: none;
        padding: 4px 0px 4px 8px;
        display: block;
        line-height: 1.3;
        font-size: 14px;
    }
    .post-side-nav ul li a:hover {
        color: var(--primary);
    }
    .post-side-nav ul li a.active {
        font-weight: bold;
        border-radius: 4px;
        
        border-left: 3px solid var(--blue);
    }