/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* row: */

.blog-post__row {
    display: flex;
    gap: 60px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* content side: */

.blog-post__content {
    flex-grow: 1;
}

/* Migrated posts carry raw <img> tags with no width/height and no size class, so
   full-res uploads render at their intrinsic pixel width and blow out the column.
   The content column runs to 1240px on a no-sidebar post — far wider than a body
   image wants to be — so cap well short of it and centre what's left. */
.blog-post__content img {
    display: block;
    max-width: min(100%, 800px);
    height: auto;
    margin: 24px auto;
    border-radius: var(--box-border-radius-sm);
}

/* WP's align classes are unstyled in this theme, so the editor's left/right/center
   choices had no effect and every image rendered full width. Centring is the base
   above, so aligncenter and alignnone both need no extra rule. */

.blog-post__content img.alignleft {
    float: left;
    max-width: 50%;
    margin: 8px 24px 16px 0;
}

.blog-post__content img.alignright {
    float: right;
    max-width: 50%;
    margin: 8px 0 16px 24px;
}

@media (max-width: 768px) {
    .blog-post__content img.alignleft,
    .blog-post__content img.alignright {
        float: none;
        max-width: 100%;
        margin: 24px 0;
    }
}

.blog-post__content h2 {
    margin-bottom: 20px;

    color: var(--blue-dk);
}
.blog-post__content h3 {
    margin-bottom: 12px;

    color: var(--purple-dk);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* toc (sidebar): */

.blog-post__sidebar {
    flex: 0 0 26%;
}

.blog-post__sidebar .sidebar-nav-container {
    margin: 16px 0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* pagination: */

nav.blog-post__pagination {
    margin-top: 36px;
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
}

nav.blog-post__pagination a {
    display: block;
    padding: 16px 20px;

    background: var(--blue-dk);
    border-radius: var(--box-border-radius-sm);

    font-size: 18px;
    color: var(--white);
}
nav.blog-post__pagination a:hover {
    background: var(--purple-dk);
}

@media (max-width: 992px) {
    nav.blog-post__pagination a {
        padding: 10px 12px;
    }
}