/* Standalone public blog adjustments. */
.blog-page .blog-con {
    padding: 90px 0 110px;
}

.blog-page .blog-con .article_content {
    margin-bottom: 44px;
}

.blog-page .blog-con .article_content h2 {
    color: var(--e-global-color-primary);
    margin-bottom: 0;
}

.blog-page .blog-con .article_content h2::after {
    background-color: #006b8f;
    content: "";
    display: block;
    height: 3px;
    margin-top: 16px;
    width: 64px;
}

.blog-page .blog-con .article_content .blog-lead {
    color: var(--e-global-color-text);
    font-size: 17px;
    line-height: 28px;
    margin-bottom: 0;
    margin-top: 20px;
    max-width: 640px;
    padding-right: 0;
}

.blog-page .article-box {
    position: relative;
    transition: transform 0.3s ease-in-out;
}

.blog-page .article-box .box-content {
    background-color: var(--e-global-color-white);
    border: 1px solid #eef5f7;
    border-radius: 15px;
    box-shadow: 0 19px 54px rgb(0 0 0 / 5%);
    display: flex;
    flex-direction: column;
    padding: 32px 32px 28px;
    transition: box-shadow 0.3s ease-in-out;
}

.blog-page .article-box:hover {
    transform: translateY(-4px);
}

.blog-page .article-box:hover .box-content {
    box-shadow: 0 24px 64px rgb(0 0 0 / 12%);
}

/* AOS hides its elements until the script initialises them. If the script
   never runs the cards would stay invisible, so the hidden state only applies
   once AOS has claimed the card. */
.blog-page .article-box[data-aos]:not(.aos-init) {
    opacity: 1;
    transform: none;
}

.blog-page .article-box .box-content .span_wrapper {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* The three meta items sit on one line inside a 286px column, so the size and
   tracking are tuned to fit the longest author name without wrapping the
   reading time onto a line of its own. */
.blog-page .article-box .box-content .span_wrapper span {
    color: #006b8f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 18px;
    text-transform: uppercase;
}

/* The separator trails its item rather than leading the next one, so that if a
   long author name ever pushes the reading time onto a second line that line
   starts with the text instead of an orphaned dot. */
.blog-page .article-box .box-content .span_wrapper span:not(:last-child)::after {
    content: "\00b7";
    font-weight: 400;
    margin: 0 6px;
}

.blog-page .article-box .box-content h3 {
    color: var(--e-global-color-primary);
    font-size: 22px;
    font-weight: 700;
    line-height: 30px;
    margin-bottom: 12px;
    transition: color 0.3s ease-in-out;
}

/* The theme's base `a` rule is 16px, inline-block and relatively positioned.
   The card needs the link inline and inheriting the heading type, and needs it
   statically positioned so the stretched overlay below anchors to the card
   rather than to the link's own box. */
.blog-page .article-box .box-content h3 a {
    color: inherit;
    display: inline;
    font-size: inherit;
    line-height: inherit;
    position: static;
    text-decoration: none;
}

/* Stretch the title link across the whole card so the click target is the card
   itself, without rendering a second link to the same post. */
.blog-page .article-box .box-content h3 a::after {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.blog-page .article-box .box-content h3 a:focus {
    outline: 2px solid #006b8f;
    outline-offset: 3px;
}

.blog-page .article-box:hover h3,
.blog-page .article-box .box-content h3:hover {
    color: #006b8f;
}

/* The card is given text that has already been cut at a word boundary on the
   server, so the browser no longer clips the paragraph; the overflow guard only
   covers a single word longer than the card. */
.blog-page .article-box .box-content p {
    color: var(--e-global-color-text);
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 24px;
    overflow-wrap: break-word;
    padding-right: 0;
}

/* The read more link is an affordance rather than the card's real target, so it
   only has to sit above the stretched title link's overlay to stay clickable. */
.blog-page .article-box .box-content .read-more {
    align-items: center;
    color: #006b8f;
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    position: relative;
    text-decoration: none;
    z-index: 2;
}

.blog-page .article-box .box-content .read-more:hover {
    text-decoration: underline;
}

.blog-page .article-box .box-content .read-more i {
    font-size: 12px;
    transition: transform 0.3s ease-in-out;
}

.blog-page .article-box:hover .box-content .read-more i {
    transform: translateX(5px);
}

/* Tag badges are labels rather than links: the whole card is already one link,
   so making them interactive would nest one target inside another. */
.blog-page .article-box .box-content .blog-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.blog-page .article-box .box-content .blog-card-tag {
    background: #eef5f7;
    border-radius: 3px;
    color: #006b8f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 18px;
    overflow-wrap: anywhere;
    padding: 4px 10px;
    text-transform: uppercase;
}

/* The footer is pushed to the bottom of the card so that cards of different
   text lengths still line their footers up across a row. */
.blog-page .article-box .box-content .blog-card-foot {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
}

.blog-page .article-box .box-content .blog-views {
    align-items: center;
    color: var(--e-global-color-text);
    display: inline-flex;
    font-size: 13px;
    gap: 6px;
    line-height: 20px;
    margin-left: auto;
}

.blog-page .article-box .box-content .blog-views i {
    color: #8a8a8a;
}

/* A post that carries a downloadable document is marked here, beside the
   read-more link and the view count. */
.blog-page .article-box .box-content .blog-card-file {
    background: #006b8f;
    border-radius: 3px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 18px;
    padding: 4px 10px;
    text-transform: uppercase;
}

@media (max-width: 991px) {
    .blog-page .blog-con {
        padding: 70px 0 80px;
    }
}

@media (max-width: 767px) {
    .blog-page .blog-con {
        padding: 60px 0 70px;
    }

    .blog-page .blog-con .article_content {
        margin-bottom: 32px;
    }

    .blog-page .blog-con .article_content .blog-lead {
        font-size: 16px;
        line-height: 26px;
    }

    /* The column classes stop applying below 768px, so the card has to claim
       the full width itself and recreate the column gutter as padding. */
    .blog-page .article-box {
        margin: 0;
        padding-left: 15px;
        padding-right: 15px;
        text-align: left;
        width: 100%;
    }
}

@media (max-width: 575px) {
    .blog-page .article-box .box-content {
        padding: 24px 20px 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-page .article-box,
    .blog-page .article-box .box-content,
    .blog-page .article-box .box-content h3,
    .blog-page .article-box .box-content .read-more i {
        transition: none;
    }

    .blog-page .article-box:hover {
        transform: none;
    }

    .blog-page .article-box[data-aos] {
        opacity: 1;
        transform: none;
    }
}

/* The tag filter reuses the pill language of the tags shown on a post, but it
   sits above the grid rather than below the body, so it carries only the space
   under it. */
.blog-page .blog-con .blog-tags {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 40px;
}

.blog-page .blog-con .blog-tags .blog-tags-label {
    color: #006b8f;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    margin-right: 5px;
    text-transform: uppercase;
}

.blog-page .blog-con .blog-tags .blog-tag {
    background-color: #eef5f7;
    border-radius: 3px;
    color: #006b8f;
    display: inline-block;
    font-size: 14px;
    line-height: 1.4;
    padding: 8px 16px;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.blog-page .blog-con .blog-tags .blog-tag:hover,
.blog-page .blog-con .blog-tags .blog-tag:focus {
    background-color: #006b8f;
    color: #ffffff;
}

/* The tag being viewed is filled rather than outlined, the same treatment it
   gets on hover, so the row shows where you are even before you reach for it. */
.blog-page .blog-con .blog-tags .blog-tag.is-active {
    background-color: #006b8f;
    color: #ffffff;
}

/* The row stacks on a narrow screen, so it is tightened here to keep it from
   pushing the first card most of a viewport down the page. This block has to
   follow the pill rules above: it carries the same specificity, so only source
   order puts it on top. */
@media (max-width: 575px) {
    .blog-page .blog-con .blog-tags {
        gap: 8px;
        margin-bottom: 30px;
    }

    .blog-page .blog-con .blog-tags .blog-tag {
        font-size: 13px;
        padding: 7px 13px;
    }
}

/* The pager continues the pill language of the tag row, but it closes the grid
   rather than opening it, so it carries the space above it and is centred under
   the cards. */
.blog-page .blog-con .blog-pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 40px;
}

.blog-page .blog-con .blog-pagination .blog-pagination-link {
    background-color: #eef5f7;
    border-radius: 3px;
    color: #006b8f;
    display: inline-block;
    font-size: 14px;
    line-height: 1.4;
    min-height: 44px;
    padding: 11px 16px;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.blog-page .blog-con .blog-pagination .blog-pagination-link:not(.is-disabled):hover,
.blog-page .blog-con .blog-pagination .blog-pagination-link:not(.is-disabled):focus {
    background-color: #006b8f;
    color: #ffffff;
}

/* The unavailable side is a label rather than a target, so it keeps the muted
   tone and gains no hover treatment. */
.blog-page .blog-con .blog-pagination .blog-pagination-link.is-disabled {
    color: #b8c7cc;
}

.blog-page .blog-con .blog-pagination .blog-pagination-status {
    color: #5a6b70;
    font-size: 14px;
    line-height: 1.4;
    padding: 11px 6px;
}

@media (max-width: 575px) {
    .blog-page .blog-con .blog-pagination {
        gap: 8px;
        margin-top: 30px;
    }

    .blog-page .blog-con .blog-pagination .blog-pagination-link {
        font-size: 13px;
        padding: 10px 13px;
    }
}

.blog-page .blog-empty,
.blog-page .blog-not-found {
    color: var(--e-global-color-text);
    min-height: 250px;
}

.blog-page .blog-detail {
    padding: 90px 0 110px;
}

.blog-page .blog-detail h1 {
    color: var(--e-global-color-primary);
}

.blog-page .blog-detail .blog-meta {
    color: #006b8f;
    margin-bottom: 30px;
}

/* The detail byline reuses the cards' view indicator, but the card's alignment
   rule is scoped to the card body, so the byline supplies its own. The count is
   pushed to the far end of the metadata line and both the eye and the number are
   the same grey, so the indicator reads as one unit rather than a teal label
   with a stray icon beside it. */
.blog-page .blog-detail .blog-meta {
    align-items: center;
    display: flex;
}

.blog-page .blog-detail .blog-meta .blog-views {
    align-items: center;
    color: #8a8a8a;
    display: inline-flex;
    gap: 6px;
    margin-left: auto;
}

.blog-page .blog-detail .blog-meta .blog-views i {
    color: #8a8a8a;
}

.blog-page .blog-detail .blog-body {
    color: var(--e-global-color-text);
}

.blog-page .blog-detail .blog-body h1,
.blog-page .blog-detail .blog-body h2,
.blog-page .blog-detail .blog-body h3,
.blog-page .blog-detail .blog-body h4,
.blog-page .blog-detail .blog-body h5,
.blog-page .blog-detail .blog-body h6 {
    color: var(--e-global-color-primary);
}

.blog-page .blog-detail .blog-body p,
.blog-page .blog-detail .blog-body li,
.blog-page .blog-detail .blog-body blockquote,
.blog-page .blog-detail .blog-body table,
.blog-page .blog-detail .blog-body th,
.blog-page .blog-detail .blog-body td {
    font-size: 20px;
}

/* Running prose is justified at every width. Tables, code and headings keep
   their natural alignment, so the justify stays scoped to the prose elements
   rather than the body wrapper. */
.blog-page .blog-detail .blog-body p,
.blog-page .blog-detail .blog-body li,
.blog-page .blog-detail .blog-body blockquote {
    hyphens: auto;
    text-align: justify;
}

.blog-page .blog-detail .blog-body blockquote {
    border-left: 4px solid #006b8f;
    color: var(--e-global-color-text);
    font-style: italic;
    margin: 1.5rem 0;
    padding: 0.75rem 1.25rem;
}

.blog-page .blog-detail .blog-body code {
    background-color: #eef5f7;
    border-radius: 3px;
    color: #006b8f;
    font-size: 0.9em;
    padding: 0.15em 0.35em;
}

.blog-page .blog-detail .blog-body pre {
    background-color: #f1f3f5;
    border-radius: 4px;
    color: var(--e-global-color-text);
    overflow-x: auto;
    padding: 1rem;
}

.blog-page .blog-detail .blog-body pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
}

.blog-page .blog-detail .blog-body table {
    border-collapse: collapse;
    border: 1px solid #b8c7cc;
    width: 100%;
}

.blog-page .blog-detail .blog-body th,
.blog-page .blog-detail .blog-body td {
    border: 1px solid #b8c7cc;
    padding: 0.75rem;
    text-align: left;
}

.blog-page .blog-detail .blog-body th {
    background-color: #eef5f7;
    font-weight: 700;
}

.blog-page .blog-detail .blog-body hr {
    border: 0;
    border-top: 1px solid #b8c7cc;
    margin: 2rem 0;
}

.blog-page .blog-detail .blog-body sup,
.blog-page .blog-detail .blog-body sub {
    font-size: 0.75em;
    line-height: 0;
}

.blog-page .blog-detail .blog-body a,
.blog-page .blog-back {
    color: #006b8f;
}

.blog-page .blog-detail .blog-related {
    border-top: 1px solid #b8c7cc;
    margin-top: 50px;
    padding-top: 40px;
}

.blog-page .blog-detail .blog-related h2 {
    color: var(--e-global-color-primary);
    margin-bottom: 30px;
}

/* The related cards reuse the listing's card component, so only the grid is
   placed here: three cards fill one row on a wide screen, and centring keeps a
   half-filled row under the article rather than hugging the left edge. */
.blog-page .blog-detail .blog-related .row {
    justify-content: center;
}

.blog-page .blog-detail .blog-adjacent {
    border-top: 1px solid #b8c7cc;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 50px;
    padding-top: 40px;
}

.blog-page .blog-detail .blog-adjacent .blog-adjacent-link {
    color: #006b8f;
    display: block;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.blog-page .blog-detail .blog-adjacent .blog-adjacent-link .blog-adjacent-label {
    color: #006b8f;
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.blog-page .blog-detail .blog-adjacent .blog-adjacent-link .blog-adjacent-title {
    color: var(--e-global-color-primary);
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}

.blog-page .blog-detail .blog-adjacent .blog-adjacent-link:hover .blog-adjacent-title,
.blog-page .blog-detail .blog-adjacent .blog-adjacent-link:focus .blog-adjacent-title {
    color: #006b8f;
}

@media (min-width: 768px) {
    .blog-page .blog-detail .blog-adjacent {
        flex-direction: row;
        justify-content: space-between;
    }

    .blog-page .blog-detail .blog-adjacent .blog-adjacent-older {
        margin-right: 20px;
        text-align: left;
    }

    .blog-page .blog-detail .blog-adjacent .blog-adjacent-newer {
        margin-left: auto;
        text-align: right;
    }
}

.blog-page .blog-detail .blog-tags {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
    margin-top: 40px;
}

.blog-page .blog-detail .blog-tags .blog-tags-label {
    color: #006b8f;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    margin-right: 5px;
    text-transform: uppercase;
}

.blog-page .blog-detail .blog-tags .blog-tag {
    background-color: #eef5f7;
    border-radius: 3px;
    color: #006b8f;
    display: inline-block;
    font-size: 14px;
    line-height: 1.4;
    padding: 8px 16px;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.blog-page .blog-detail .blog-tags .blog-tag:hover,
.blog-page .blog-detail .blog-tags .blog-tag:focus {
    background-color: #006b8f;
    color: #ffffff;
}

.blog-page .blog-detail .blog-download {
    margin-bottom: 30px;
    margin-top: 30px;
}

.blog-page .blog-detail .blog-download .blog-download-link {
    align-items: center;
    background-color: #eef5f7;
    border-radius: 3px;
    color: #006b8f;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    gap: 4px 12px;
    line-height: 1.4;
    padding: 14px 18px;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.blog-page .blog-detail .blog-download .blog-download-link:hover,
.blog-page .blog-detail .blog-download .blog-download-link:focus {
    background-color: #006b8f;
    color: #ffffff;
}

.blog-page .blog-detail .blog-download .blog-download-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.blog-page .blog-detail .blog-download .blog-download-meta {
    color: #5a6b70;
    font-size: 12px;
    text-transform: uppercase;
    white-space: nowrap;
}

.blog-page .blog-detail .blog-download .blog-download-link:hover .blog-download-meta,
.blog-page .blog-detail .blog-download .blog-download-link:focus .blog-download-meta {
    color: #ffffff;
}