/* =========================================================================
   Scrivens Blog Archive - careers-style restyle.
   Scoped under .scr-blog-* / .scrivens-blog-archive-wrap so the legacy
   .blog-wrapper styles (used by single-blog.php) are untouched.
   Brand: blue #213d90 / #003065, teal #1198ba.
   Blog font: canada-type-gibson (Adobe Fonts).
   Fonts: canada-type-gibson (Adobe Fonts via Typekit).
   ========================================================================= */

/* Blog font base: canada-type-gibson across archive + single (both render paths). */
.scrivens-blog-archive-wrap,
.scrivens-blog-single-blocks,
.scrivens-blog-single-wrap {
    font-family: "canada-type-gibson", sans-serif;
    color: #3f4040;
}

/* Blog page default text color: #3f4040 for all content (custom + built-in
   blocks), overriding the theme base body { color: #535454 }. Set at the body
   level so chrome blocks rendered outside the content wrappers inherit it too. */
body.single-blog,
body.post-type-archive-blog {
    color: #3f4040;
    font-family: "canada-type-gibson", sans-serif;
}

/* Low-specificity default <p> margin on blog pages. :where() contributes 0
   specificity, so this rule is (0,0,1) — same as the theme base
   `p { margin-bottom: 1.5em }` (styles.css) but wins by source order
   (blog.css loads later), and is overridden by any more specific paragraph
   rule. Acts as a baseline margin for blog <p> elements that don't have their
   own margin set. */
:where(body.single-blog, body.post-type-archive-blog) p {
    margin: 8px 0 4px;
}

/* ---- Post Archive block section spacing (desktop) ---- */
.scr-blog-archive-block {
    padding: 50px 0;
}


/* ---- Page heading ---- */
.scr-blog-archive-head {
    margin-top: 24px;
    margin-bottom: 24px;
}
.scr-blog-archive-title {
    margin: 0;
    color: #1c1c1c;
    font-family: "canada-type-gibson", sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.2;
}

/* ---- Layout: main card list + archive sidebar ---- */
.scr-blog-archive-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 40px;
    align-items: start;
}
.scr-blog-archive-main {
    min-width: 0;
}

/* ---- Filter groups (categories row + archive sidebar) ---- */
.scr-blog-filter-group {
    margin-bottom: 28px;
}
.scr-blog-filter-title {
    margin: 0 0 14px;
    color: #383838;
    font-family: "canada-type-gibson", sans-serif;
    font-weight: 600;
    font-size: 32px;
}
.scr-blog-filter-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.scr-blog-filter-links-months {
    flex-direction: column;
    align-items: stretch;
}
.scr-blog-filter-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 8px 16px;
    border: 1px solid #213d90;
    border-radius: 8px;
    color: #213d90;
    background: #fff;
    font-family: "canada-type-gibson", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.scr-blog-filter-link:hover,
.scr-blog-filter-link:focus-visible,
.scr-blog-filter-link:active {
    color: #fff;
    background: #1198ba;
    border-color: #1198ba;
}
.scr-blog-filter-link.active {
    color: #fff;
    background: #213d90;
    border-color: #213d90;
}
.scr-blog-archive-sidebar {
    justify-self: end;
}
.scr-blog-archive-sidebar .scr-blog-filter-link {
    width: 100%;
    max-width: 160px;
}

/* ---- Card list ---- */
.scr-blog-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 32px;
}
.scr-blog-item {
    border: 2px solid #213d90;
    border-radius: 0;
    background: #fff;
    padding: 24px 32px;
}

/* ---- Card: title + category tags ---- */
.scr-blog-title {
    margin: 0 0 20px;
    color: #383838;
    font-family: "canada-type-gibson", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 30px;
    line-height: 42px;
    letter-spacing: 0;
}
.scr-blog-title-link {
    color: #383838;
    text-decoration: none;
}
.scr-blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.scr-blog-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #eaf2fb;
    color: #213d90;
    font-family: "canada-type-gibson", sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
.scr-blog-tag:hover,
.scr-blog-tag:focus-visible {
    background: #213d90;
    color: #fff;
}

/* ---- Card: content row (text + image) ---- */
.scr-blog-content-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 26%;
    gap: 28px;
    align-items: start;
}
.scr-blog-content-left {
    min-width: 0;
}

/* ---- Card: meta (author + date + read time) ---- */
.scr-blog-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 18px;
}
.scr-blog-author-image {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.scr-blog-author-initials {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #c5c5c5;
    color: #fff;
    font-family: "canada-type-gibson", sans-serif;
    font-weight: 700;
    font-size: 22px;
}
.scr-blog-meta-text {
    align-items: center;
    color: #3f4040;
    -moz-column-gap: 18px;
    column-gap: 18px;
    display: grid;
    font-family: "canada-type-gibson", sans-serif;
    font-size: 19px;
    font-style: normal;
    font-weight: 500;
    grid-template-columns: repeat(3, minmax(0, max-content));
    letter-spacing: 0;
    line-height: 27px;
    margin: 0;
    row-gap: 8px;
}
.scr-blog-meta-text strong {
    font-weight: 500;
}
.scr-blog-author-name {
    font-weight: 400;
}

/* ---- Card: excerpt + thumbnail ---- */
.scr-blog-excerpt {
    margin: 0;
    color: #3f4040;
    font-family: "canada-type-gibson", sans-serif;
    font-size: 16px;
    line-height: 1.6;
}
.scr-blog-excerpt p:last-child {
    margin-bottom: 0;
}
.scr-blog-excerpt .more-link {
    text-decoration: underline;
    color: inherit;
}
.scr-blog-excerpt .more-link:hover,
.scr-blog-excerpt .more-link:focus-visible {
    text-decoration: none;
}
.scr-blog-thumbnail-wrap {
    width: 100%;
}
.scr-blog-thumbnail-link {
    display: block;
}
.scr-blog-thumbnail {
    display: block;
    height: auto;
    margin-bottom: 30px;
    min-height: 200px;
    object-fit: cover;
    width: 100%;
}

/* ---- Card: read more (full-width bar) ---- */
.scr-blog-read-more {
    display: block;
    margin: 0 -32px -24px;
    padding: 14px 32px;
    background: #213d90;
    color: #fff;
    font-family: "canada-type-gibson", sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    text-decoration: none;
    text-align: left;
    transition: background-color .2s ease;
}
.scr-blog-read-more:hover,
.scr-blog-read-more:focus-visible {
    background: #1198ba;
    color: #fff;
}

/* ---- Pagination ---- */
.scr-blog-pagination {
    margin-top: 28px;
}
.scr-blog-pagination ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.scr-blog-pagination li {
    display: inline-flex;
}
.scr-blog-pagination a,
.scr-blog-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #213d90;
    border-radius: 8px;
    color: #213d90;
    background: #fff;
    text-decoration: none;
    font-family: "canada-type-gibson", sans-serif;
    font-weight: 600;
    font-size: 15px;
}
.scr-blog-pagination a:hover,
.scr-blog-pagination a:focus-visible {
    background: #1198ba;
    color: #fff;
    border-color: #1198ba;
}
.scr-blog-pagination .current {
    color: #fff;
    background: #213d90;
    border-color: #213d90;
}

/* ---- Back link (category archive) + empty state ---- */
.scr-blog-back {
    display: inline-block;
    margin-top: 24px;
    color: #213d90;
    font-family: "canada-type-gibson", sans-serif;
    font-weight: 600;
    text-decoration: none;
}
.scr-blog-back:hover {
    color: #003065;
    text-decoration: underline;
}
.scr-blog-empty {
    font-family: "canada-type-gibson", sans-serif;
    color: #3f4040;
}

/* ---- Responsive ---- */
@media screen and (max-width: 1024px) {
    .scr-blog-archive-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .scr-blog-archive-sidebar {
        justify-self: stretch;
        order: -1;
    }
    .scr-blog-archive-sidebar .scr-blog-filter-link {
        max-width: none;
    }
    .scr-blog-filter-links-months {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .scr-blog-filter-links-months .scr-blog-filter-link:first-child {
        grid-column: 1 / -1;
    }
}
@media screen and (max-width: 768px) {
    .scr-blog-archive-title {
        font-size: 28px;
    }
    .scr-blog-title {
        font-size: 22px;
        line-height: 28px;
    }
    .scr-blog-filter-title {
        font-size: 22px;
    }
    .scr-blog-content-row {
        grid-template-columns: 1fr;
    }
    .scr-blog-meta-text {
        grid-template-columns: 1fr;
    }
    .scr-blog-item {
        padding: 24px 36px;
    }
    .scr-blog-read-more {
        margin: 0 -36px -24px;
        padding: 14px 36px;
    }
}
@media screen and (max-width: 480px) {
    .scr-blog-archive-title {
        font-size: 24px;
    }
    .scr-blog-title {
        font-size: 20px;
    }
    .scr-blog-author-image,
    .scr-blog-author-initials {
        width: 60px;
        height: 60px;
        font-size: 18px;
    }
    .scr-blog-filter-link {
        width: 100%;
        justify-content: flex-start;
    }
}

/* =========================================================================
   Single blog post (careers-style restyle). Scoped under .scrivens-blog-single-*
   and .scr-blog-*; reuses the archive .scr-blog-author-image / .scr-blog-meta /
   .scr-blog-filter-link / .scr-blog-tag styles where they already exist.
   ========================================================================= */

.scrivens-blog-single-wrap {
    padding: 24px 20px;
}

/* ---- Breadcrumb ----
   Shared by the classic single-blog.php nav and the Breadcrumb block (which
   also carries the .scr-blog-breadcrumb class so it inherits these styles).
   Override the theme's `.breadcrumbs-wrap .breadcrumbs` styling (which uses
   a different markup structure and selector) — the block's nav would
   otherwise render grey text and "/" separators. */
.scr-blog-breadcrumb {
    margin: 0 0 20px;
    font-family: "canada-type-gibson", sans-serif;
    font-size: 15px;
    color: #3f4040;
    line-height: 1.4;
}
.scr-blog-breadcrumb.breadcrumb-block {
    margin: 20px 0 10px;
}
.scr-blog-breadcrumb a {
    color: #213d90;
    text-decoration: none;
}
.scr-blog-breadcrumb a:hover,
.scr-blog-breadcrumb a:focus-visible {
    text-decoration: underline;
}
.scr-blog-breadcrumb .sep {
    margin: 0 8px;
    color: #9b9c9c;
}
.scr-blog-breadcrumb .current {
    color: #1c1c1c;
}

/* Breadcrumb block on blog posts lives inside a wrapping
   .breadcrumb-block-container.container that already inherits the theme
   .container padding (0 15px) and max-width, so the breadcrumb aligns
   horizontally with the rest of the page content (Post Archive Header, body
   group, etc.). No padding override needed — the previous zero-padding rule
   made the breadcrumb render flush against the container edge while the
   body content stayed inset, so they visually misaligned. */

/* ---- Hero image ---- */
.scr-blog-single-hero {
    margin: 0 0 28px;
}
.scr-blog-single-hero img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 16 / 6;
}

/* ---- Post header (title + meta + share + tags) ---- */
.scr-blog-single-header {
    max-width: none;
    margin: 0 0 28px;
}
.scr-blog-single-title {
    margin: 15px 0 20px;
    color: #1c1c1c;
    font-family: "canada-type-gibson", sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.2;
}
.scr-blog-single-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    border-bottom: 1px solid #1198ba;
}
.scr-blog-single-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.scr-blog-single-meta-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    grid-template-columns: none;
    column-gap: 0;
    row-gap: 0;
}
.scr-blog-single-meta-text .scr-blog-meta-item + .scr-blog-meta-item::before {
    content: "|";
    margin: 0 10px;
}

/* ---- Share (Font Awesome 4 icons) ---- */
.scr-blog-share {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.scr-blog-share-label {
    color: #383838;
    font-family: canada-type-gibson, sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
}
.scr-blog-share-link {
    align-items: center;
    display: inline-flex;
    height: 58px;
    justify-content: center;
    position: relative;
    text-decoration: none;
    width: 58px;
}
.scr-blog-share-link img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.scr-blog-share-link .icon-default {
    opacity: 1;
}
.scr-blog-share-link .icon-hover {
    opacity: 0;
}
.scr-blog-share-link:hover .icon-default,
.scr-blog-share-link:focus-visible .icon-default,
.scr-blog-share-link:active .icon-default {
    opacity: 0;
}
.scr-blog-share-link:hover .icon-hover,
.scr-blog-share-link:focus-visible .icon-hover,
.scr-blog-share-link:active .icon-hover {
    opacity: 1;
}

/* ---- Body content (prose) ----
   Gibson reads smaller than Lato at equal px, so the body font-size is bumped
   to 18px (line-height 1.75) to match the perceived size of the Lato 16px / 1.3
   body content used on other site pages (e.g. /opticians/). */
.scr-blog-single-content {
    max-width: none;
    margin: 0 0 32px;
    font-family: "canada-type-gibson", sans-serif;
    font-size: 18px;
    line-height: 1.75;
    color: #363836;
}
.scr-blog-single-content p {
    margin: 0 0 18px;
}
.scr-blog-single-content h2,
.scr-blog-single-content h3,
.scr-blog-single-content h4 {
    color: #1c1c1c;
    font-family: "canada-type-gibson", sans-serif;
    font-weight: 400;
    line-height: 1.3;
    margin: 28px 0 12px;
}
.scr-blog-single-content h2 { font-size: 26px; }
.scr-blog-single-content h3 { font-size: 21px; }
.scr-blog-single-content a {
    color: #213d90;
    text-decoration: underline;
}
.scr-blog-single-content a:hover,
.scr-blog-single-content a:focus-visible {
    color: #003065;
}
.scr-blog-single-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 18px 0;
}
.scr-blog-single-content ul,
.scr-blog-single-content ol {
    margin: 0 0 18px;
    padding-left: 24px;
}
.scr-blog-single-content li {
    margin-bottom: 6px;
}
/* List items inside the blog body should match the body paragraph font
   (18px / line-height 1.7) so <ul>/<ol> read at the same size as <p>.
   Applies to both the legacy .scr-blog-single-content path and the block
   path's .scrivens-blog-single-blocks wrapper. The :where() keeps specificity
   at 0 so the body's theme-level list styles can still win on tie-breaks. */
:where(.scrivens-blog-single-blocks, .scr-blog-single-content) ul,
:where(.scrivens-blog-single-blocks, .scr-blog-single-content) ol {
    font-size: 18px;
    line-height: 1.7;
}
:where(.scrivens-blog-single-blocks, .scr-blog-single-content) li {
    font-size: 18px;
    line-height: 1.7;
}/* Quote / highlight blocks */
.scr-blog-single-content blockquote {
    margin: 24px 0;
    padding: 16px 24px;
    border-left: 4px solid #1198ba;
    background: #f4fbfa;
    border-radius: 0 6px 6px 0;
    color: #1c1c1c;
    font-style: italic;
    font-size: 1.12em;
    line-height: 1.6;
}
.scr-blog-single-content blockquote p:last-child {
    margin-bottom: 0;
}
.scr-blog-single-content mark,
.scr-blog-single-content .scr-blog-highlight {
    background: #d6f7f4;
    color: #003065;
    padding: 2px 4px;
    border-radius: 3px;
}

/* ---- Optional CTA block ---- */
.scr-blog-single-cta {
    margin: 0 0 40px;
    padding: 36px 40px;
    border-radius: 8px;
}
.scr-blog-single-cta--bar {
    background: #1198ba;
    color: #fff;
    text-align: center;
}
.scr-blog-single-cta--large {
    background: linear-gradient(135deg, #213d90 0%, #003065 100%);
    color: #fff;
    text-align: left;
}
.scr-blog-single-cta-title {
    margin: 0 0 12px;
    font-family: "canada-type-gibson", sans-serif;
    font-weight: 600;
    color: #fff;
    font-size: 26px;
    line-height: 1.2;
}
.scr-blog-single-cta-text {
    margin: 0 0 20px;
    font-family: "canada-type-gibson", sans-serif;
    font-size: 17px;
    line-height: 1.6;
}
.scr-blog-single-cta--bar .scr-blog-single-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 230px;
    min-height: 56px;
    padding: 12px 24px;
    border: 2px solid #fff;
    background: #fff;
    color: #0d98ba;
    text-decoration: none;
    font-family: "canada-type-gibson", sans-serif;
    font-weight: 600;
    font-size: 16px;
    border-radius: 4px;
}
.scr-blog-single-cta--bar .scr-blog-single-cta-button:hover,
.scr-blog-single-cta--bar .scr-blog-single-cta-button:focus-visible {
    background: transparent;
    color: #fff;
}
.scr-blog-single-cta--large .scr-blog-single-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 230px;
    min-height: 56px;
    padding: 12px 24px;
    border: 2px solid #1198ba;
    background: #1198ba;
    color: #003065;
    text-decoration: none;
    font-family: "canada-type-gibson", sans-serif;
    font-weight: 600;
    font-size: 16px;
    border-radius: 4px;
}
.scr-blog-single-cta--large .scr-blog-single-cta-button:hover,
.scr-blog-single-cta--large .scr-blog-single-cta-button:focus-visible {
    background: transparent;
    color: #fff;
}

/* ---- Footer bar (back + share) ---- */
.scr-blog-single-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-top: 1px solid #d5d5d5;
    padding: 20px 0;
    margin: 8px 0 40px;
}

/* ---- Similar stories ---- */
.scr-blog-similar {
    margin-top: 8px;
}

/* Offset the #scr-blog-similar anchor target so it isn't hidden behind the
   fixed #header (position: fixed, z-index 9999). The filter links in both the
   classic (single-blog.php) and block (post-archive-footer) paths jump to
   #scr-blog-similar, so this target needs scroll-margin-top equal to the
   header height. Values mirror the body padding-top breakpoints in styles.css
   (135 / 114 / 6em / 70px) so the section sits just below the header.

   A 32px safety buffer is added for logged-in users via the --scr-admin-bar-h
   custom property (WordPress adds body.admin-bar and a 32px admin bar). This
   also keeps the filter row clear of the header's mega-menu dropdown when the
   user scrolls right to the top. */
#scr-blog-similar {
    --scr-admin-bar-h: 32px;
    scroll-margin-top: calc(135px + var(--scr-admin-bar-h));
}
body.admin-bar #scr-blog-similar {
    --scr-admin-bar-h: 32px;
}
@media screen and (max-width: 1310px) {
    #scr-blog-similar {
        scroll-margin-top: calc(114px + var(--scr-admin-bar-h));
    }
}
@media screen and (max-width: 767px) {
    #scr-blog-similar {
        scroll-margin-top: calc(6em + var(--scr-admin-bar-h));
    }
}
@media screen and (max-width: 425px) {
    #scr-blog-similar {
        scroll-margin-top: calc(70px + var(--scr-admin-bar-h));
    }
}
.scr-blog-similar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.scr-blog-similar-heading {
    margin: 0;
    font-family: "canada-type-gibson", sans-serif;
    font-weight: 600;
    font-size: 28px;
    color: #1c1c1c;
}
.scr-blog-similar-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}
.scr-blog-similar-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}
.scr-blog-similar-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    transition: box-shadow .2s ease, border-color .2s ease;
    height: 100%;
}
.scr-blog-similar-card:hover,
.scr-blog-similar-card:focus-within {
    border-color: #213d90;
}
.scr-blog-similar-card-image-link {
    display: block;
    overflow: hidden;
}
.scr-blog-similar-card-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 3 / 2;
    transition: transform .3s ease;
}
.scr-blog-similar-card:hover .scr-blog-similar-card-image,
.scr-blog-similar-card:focus-within .scr-blog-similar-card-image {
    transform: scale(1.05);
}
h3.scr-blog-similar-card-title {
    margin: 0;
    padding: 16px 16px 8px;
    font-family: "canada-type-gibson", sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
}
.scr-blog-similar-card-title a {
    color: #213d90;
    text-decoration: none;
}

.scr-blog-similar-card-read-more {
        color: #213d90;
    display: block;
    font-family: canada-type-gibson, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 32px;
    margin-top: auto;
    padding-right: 12px;
    text-align: right;
    text-decoration: none;
    transition: color .3s ease;
}

.scr-blog-similar-card:hover .scr-blog-similar-card-read-more,
.scr-blog-similar-card:hover .scr-blog-similar-card-title a {
    color: #1198ba;
}

/* ---- Single post responsive ---- */
@media screen and (max-width: 1024px) {
    .scr-blog-similar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .scr-blog-similar-filters {
        justify-content: flex-start;
    }
}
@media screen and (max-width: 768px) {
    .scr-blog-single-title {
        font-size: 28px;
    }
    .scr-blog-single-hero img {
        aspect-ratio: 10 / 6;
    }
    .scr-blog-single-content {
        font-size: 17px;
    }
    .scr-blog-single-cta {
        padding: 24px;
    }
    .scr-blog-single-footer-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .scr-blog-similar-grid {
        grid-template-columns: 1fr;
    }
    .scr-blog-similar-header {
        flex-direction: column;
        align-items: flex-start;
    }
    /* Post Archive Header block: stack author/meta over share, and let the
       meta-text wrap onto its own lines so the row doesn't overflow on
       narrow viewports. Mirrors the .scr-blog-single-meta-row wrap behaviour
       used by the classic single-blog.php path so old + new posts stack the
       same way. */
    /* Post Archive Header block: on mobile the inner row becomes a wrapping
       flex row so .scr-blog-pa-header-meta takes the full width on row 1,
       and the row-copy tags + share share row 2 (50/50). The row-copy
       tags sit at `order: 2` and the share at `order: 3` so they flow in
       source order on row 2. */
    .custom-block.scr-blog-pa-header .scr-blog-pa-header-inner {
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 16px 0;
    }
    .scr-blog-pa-header-meta {
        width: 100%;
        flex-basis: 100%;
        flex-wrap: nowrap;
    }
    /* Block path: hide the inline tags (which sit inside the meta-text-wrap
       and would otherwise appear beneath the meta text on mobile). The
       row copy (a sibling of share) is used instead so tags + share can
       share a single 50/50 row, mirroring the legacy single-blog.php
       mobile layout. */
    .scr-blog-pa-header-meta-text-wrap .scr-blog-pa-header-tags--inline {
        display: none;
    }
    /* Block path: tags (row copy) and share sit on a single row on mobile
       (tags left, share right). The share rule above already sets
       `flex: 0 0 50%` semantics via the explicit !important override for
       the legacy .scr-blog-share rule; the row copy mirrors that. */
    .scr-blog-pa-header-inner .scr-blog-pa-header-tags--row,
    .scr-blog-pa-header-inner .scr-blog-share {
        order: 2;
        width: auto;
        flex: 0 0 50%;
        max-width: 50%;
        box-sizing: border-box;
    }
    .scr-blog-pa-header-inner .scr-blog-pa-header-tags--row {
        min-width: 0;
        align-self: flex-start;
    }
    .scr-blog-pa-header .scr-blog-author-image,
    .scr-blog-pa-header .scr-blog-author-initials {
        width: 60px;
        height: 60px;
    }
    .custom-block .scr-blog-pa-header-meta-text {
        font-size: 16px;
        line-height: 24px;
    }
    /* Drop the "|" separators between meta items on narrow viewports so
       each item sits on its own line for readability. Applies to both the
       classic single-blog.php path and the Post Archive Header block path.
       Each selector is bumped with an extra parent class so specificity
       beats the non-media `content: "|"` rule below (which would otherwise
       win by source order, since this media block appears earlier in the
       file). */
    .scr-blog-meta .scr-blog-single-meta-text .scr-blog-meta-item + .scr-blog-meta-item::before,
    .scr-blog-pa-header-meta .scr-blog-pa-header-meta-text .scr-blog-meta-item + .scr-blog-meta-item::before,
    .custom-block .scr-blog-pa-header-meta .scr-blog-pa-header-meta-text .scr-blog-meta-item + .scr-blog-meta-item::before {
        content: none !important;
    }
    .scr-blog-meta .scr-blog-single-meta-text .scr-blog-meta-item,
    .scr-blog-pa-header-meta .scr-blog-pa-header-meta-text .scr-blog-meta-item,
    .custom-block .scr-blog-pa-header-meta .scr-blog-pa-header-meta-text .scr-blog-meta-item {
        display: block !important;
        padding-right: 8px;
    }
    .scr-blog-share {
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
    }
    /* Block-based (Gutenberg) posts: push the share row to the right edge on
       mobile so it mirrors the desktop layout where share sits opposite the
       author/meta. Applies to both the Post Archive Header (above the body)
       and the Post Archive Footer (below the body). Bumped specificity
       (extra parent class) and !important so this beats the .scr-blog-share
       rule directly above, which has flex-start at equal specificity. */
    .custom-block.scr-blog-pa-header .scr-blog-share,
    .custom-block.scr-blog-pa-footer .scr-blog-share {
        justify-content: flex-end !important;
    }
    /* Shrink the share icon links to 32×32 on mobile viewports so the share
       row doesn't dominate the meta row on narrow screens. */
    .scr-blog-share-link {
        width: 32px;
        height: 32px;
    }
    /* Legacy single-blog.php: drop the 76px left indent on the category tags
       so they span full width on their own row below .scr-blog-meta. Bumped
       specificity (extra parent class) so this beats the non-media
       `margin: 0 0 0 76px` rule (which sits later in the file). */
    .scr-blog-single-header .scr-blog-single-meta-row .scr-blog-tags {
        margin-left: 0;
    }
}
@media screen and (max-width: 480px) {
    .scr-blog-single-title {
        font-size: 24px;
    }
    .scr-blog-similar-heading {
        font-size: 22px;
    }
    .scr-blog-share-label {
        font-size: 16px;
    }
    .scr-blog-share-link {
        font-size: 26px;
    }
}

/* =========================================================================
   Single-post ACF block wrappers (reuse the single-post classes above; these
   just add the block-level layout for the placed blocks).
   ========================================================================= */

.scr-blog-pa-header {
    padding: 12px 0 24px;
}
.scr-blog-pa-header-inner {
    align-items: center;
    border-bottom: 1px solid #1198ba;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    padding-bottom: 16px;
    width: 100%;
}
.scr-blog-pa-header .scr-blog-author-image {
    border-radius: 50%;
    flex-shrink: 0;
    height: 90px;
    -o-object-fit: cover;
    object-fit: cover;
    width: 90px;
}
.scr-blog-pa-header-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.scr-blog-pa-header-meta-text-wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.scr-blog-pa-header-meta-text-wrap .scr-blog-tags {
    margin: 0;
}
/* Classic single-blog.php path: the meta <p> (Author/Date/Read time) sits
   beside the author photo inside .scr-blog-meta. The category tags are
   rendered twice in the markup (so we can place them differently at each
   breakpoint without JS): once inside the meta as .scr-blog-tags--inline
   (sits beneath the meta text on desktop) and once as a sibling in the
   meta-row as .scr-blog-tags--row (used on mobile, in the existing order
   meta → tags → share). Each copy is hidden at the breakpoint where it
   isn't used. */
.scr-blog-meta-text-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}
.scr-blog-meta-text-wrap .scr-blog-tags--inline {
    margin: 0;
}
.scr-blog-single-meta-row .scr-blog-meta {
    order: 1;
}
@media screen and (max-width: 768px) {
    .scr-blog-single-meta-row {
        gap: 0;
        padding-bottom: 18px;
    }
    .scr-blog-meta-text-wrap .scr-blog-tags--inline {
        display: none;
    }
    /* Tags and share share a single row on mobile: tags on the left, share
       on the right. The base .scr-blog-share rule has width: 100% (intended
       for the footer bar), so we scope to the meta-row and force both
       columns to 50% each via flex: 0 0 50% so they sit side-by-side.
       Tags use `min-width: 0` so long category names can wrap inside their
       half without forcing the share onto a new line. */
    .scr-blog-single-meta-row .scr-blog-tags--row,
    .scr-blog-single-meta-row .scr-blog-share {
        order: 2;
        width: auto;
        flex: 0 0 50%;
        max-width: 50%;
        box-sizing: border-box;
        justify-content: flex-end;
    }
    .scr-blog-single-meta-row .scr-blog-tags--row {
        min-width: 0;
    }
}
@media screen and (min-width: 769px) {
    .scr-blog-single-meta-row .scr-blog-share {
        order: 2;
    }
    .scr-blog-single-meta-row .scr-blog-tags--row {
        display: none;
    }
    /* Block path: hide the row copy of the category tags on desktop. The
       inline copy (inside the meta-text-wrap) is used instead so the tags
       sit beneath the meta text, matching the legacy desktop layout. */
    .scr-blog-pa-header-inner .scr-blog-pa-header-tags--row {
        display: none;
    }
}
.custom-block .scr-blog-pa-header-meta-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    grid-template-columns: none;
    column-gap: 0;
    row-gap: 0;
    font-size: 19px;
    line-height: 27px;
}
.custom-block .scr-blog-pa-header-meta-text .scr-blog-meta-item + .scr-blog-meta-item::before {
    content: "|";
    margin: 0 10px;
}
.scr-blog-pa-featured {
    padding: 8px 0;
}
.scr-blog-pa-footer {
    padding: 24px 0 60px;
}
.scr-blog-pa-footer-top {
    margin-bottom: 32px;
    border-color: #1198ba;
}
.scr-blog-pa-footer-cta {
    margin: 0 0 40px;
}

/* Block-composed single post wrapper (blocks carry their own layout). */
.scrivens-blog-single-blocks {
    min-height: 1px;
}

/* =========================================================================
   Generic Banner block (full-width banner over a background image).
   Defaults to the global Theme Options banner; per-block settings override.
   ========================================================================= */

.scr-blog-generic-banner {
    width: 100%;
    min-height: 420px;
    background-color: #1c1c1c;
    color: #fff;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.scr-blog-generic-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1c1c1c;
    z-index: 0;
}
.scr-blog-generic-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.scr-blog-generic-banner-img.darken {
    opacity: 0.6;
}
.scr-blog-generic-banner-wrapper {
    max-width: 942px;
    margin: 20px auto;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    position: relative;
    z-index: 1;
}
.scr-blog-generic-banner .scr-blog-generic-banner-title {
    margin: 0;
    color: #fff;
    font-family: "canada-type-gibson", sans-serif;
    font-weight: 400;
    font-size: 52px;
    line-height: 62px;
}
.scr-blog-generic-banner .scr-blog-generic-banner-subtitle {
    margin: 0 0 6px;
    color: #fff;
    font-family: "canada-type-gibson", sans-serif;
    font-weight: 300;
    font-size: clamp(24px, 4.5vw, 48px);
    line-height: 1.2;
}
.scr-blog-generic-banner .scr-blog-generic-banner-blurb {
    margin-top: 0;
    padding: 0;
    color: #fff;
    font-family: "canada-type-gibson", sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
}
.scr-blog-generic-banner-cta {
    margin-top: 18px;
}

/* CTA button styles for the Generic Banner (ported from careers site). */
.scr-blog-generic-banner .btn {
    cursor: pointer;
    border: 1px solid transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}
.scr-blog-generic-banner .btn:hover {
    background-color: transparent;
}
.scr-blog-generic-banner .btn.large {
    width: 300px;
    height: 80px;
    font-size: 24px;
    line-height: 28px;
}
.scr-blog-generic-banner .btn.large.auto-width {
    min-width: 300px;
    padding: 0 30px;
}
.scr-blog-generic-banner .btn.white-teal,
.scr-blog-generic-banner .btn.white-blue {
    border-color: #fff;
    background-color: #fff;
}
.scr-blog-generic-banner .btn.white-teal {
    color: #1198ba;
}
.scr-blog-generic-banner .btn.white-blue {
    color: #213d90;
}
.scr-blog-generic-banner .btn.white-teal:hover,
.scr-blog-generic-banner .btn.white-blue:hover {
    background-color: transparent;
    color: #fff;
}

.scr-blog-generic-banner .btn.teal {
    border-color: #1198ba;
    background-color: #1198ba;
    color: #fff;
}
.scr-blog-generic-banner .btn.teal:hover {
    color: transparent;
    background-clip: text;
}

.scr-blog-generic-banner .btn.teal.inverted {
    border-color: #1198ba;
    background-clip: text;
    color: #1198ba;
}
.scr-blog-generic-banner .btn.teal.inverted:hover {
    background-clip: unset;
    background-color: #1198ba;
    color: #fff;
}

.scr-blog-generic-banner .btn.blue {
    border-color: #213d90;
    background-color: #213d90;
    color: #fff;
}
.scr-blog-generic-banner .btn.blue:hover {
    color: transparent;
    background-clip: text;
}

.scr-blog-generic-banner .btn.blue.inverted {
    border-color: #213d90;
    background-clip: text;
    color: #213d90;
}
.scr-blog-generic-banner .btn.blue.inverted:hover {
    background-clip: unset;
    background-color: #213d90;
    color: #fff;
}

.scr-blog-generic-banner .btn.blue-white {
    border-color: #213d90;
    background-color: #213d90;
    color: #fff;
}
.scr-blog-generic-banner .btn.blue-white:hover {
    color: #213d90;
    background-color: #fff;
    border-color: #fff;
}

/* ---- Banner button colour pin (workaround for the global utility class)
   -----------------------------------------------------------------------
   The theme's `-themeExtension.css` defines `.blue { color: #014189 !important }`
   and `.white { color: #fff !important }` as bare utility classes. Any element
   that carries `.blue` on the page (e.g. the Generic Banner's `.btn.large.blue`
   CTA, or `.btn.large.blue.inverted`) inherits the `!important` blue text
   colour, beating the rules above. The careers site these buttons were
   ported from doesn't have that utility class, so its colour rules apply
   cleanly.

   Re-declare only the colour rules with `!important` and a higher-specificity
   selector (`.scr-blog-generic-banner .btn.large.<variant>`) so they win the
   `!important` tie-break against the bare utility class. Backgrounds, borders
   and hover effects keep the rules above. The careers site intends:
     • .blue / .teal              white text on solid brand colour, hover shows
                                   page background through the text
                                   (background-clip: text + color: transparent)
     • .blue.inverted / .teal.inverted
                                  brand-coloured text on transparent background,
                                  hover fills with the brand colour + white text
   The `!important` pin below only changes the text colour where the global
   utility class would have overwritten it — backgrounds/borders are correct
   via the non-`!important` rules above. */
.scr-blog-generic-banner .btn.large.white-teal { color: #1198ba !important; }
.scr-blog-generic-banner .btn.large.white-blue { color: #213d90 !important; }
.scr-blog-generic-banner .btn.large.white-teal:hover,
.scr-blog-generic-banner .btn.large.white-blue:hover { color: #fff !important; }
.scr-blog-generic-banner .btn.large.teal { color: #fff !important; }
.scr-blog-generic-banner .btn.large.teal:hover { color: transparent !important; }
.scr-blog-generic-banner .btn.large.teal.inverted { color: #1198ba !important; }
.scr-blog-generic-banner .btn.large.teal.inverted:hover { color: #fff !important; }
.scr-blog-generic-banner .btn.large.blue { color: #fff !important; }
.scr-blog-generic-banner .btn.large.blue:hover { color: transparent !important; }
.scr-blog-generic-banner .btn.large.blue.inverted { color: #213d90 !important; }
.scr-blog-generic-banner .btn.large.blue.inverted:hover { color: #fff !important; }
.scr-blog-generic-banner .btn.large.blue-white { color: #fff !important; }
.scr-blog-generic-banner .btn.large.blue-white:hover { color: #213d90 !important; }

@media screen and (max-width: 768px) {
    .scr-blog-generic-banner {
        min-height: 320px;
    }
}
@media screen and (max-width: 480px) {
    .scr-blog-generic-banner {
        min-height: 280px;
    }
    .scr-blog-generic-banner-wrapper {
        margin: 16px auto;
    }
}

/* =========================================================================
   Built-in (core) block styles — parity with the careers single-post body.
   Scoped to blog pages via :where(body.single-blog, body.post-type-archive-blog)
   so the .wp-block-quote / .wp-block-heading / .wp-block-group.container rules
   do NOT leak onto other block-editor pages (e.g. /glasses/, which uses
   page-template-template-block and also emits wp-block-* classes). :where()
   adds 0 specificity, so behaviour on blog pages is unchanged. Body paragraphs
   stay scoped to the two single wrappers. Quote border uses #1198ba (teal).
   ========================================================================= */

/* "Container Group" — the careers group pattern with the container class. */
:where(body.single-blog, body.post-type-archive-blog) .wp-block-group.container {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

/* WP core's `.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))`
   rule (global-styles inline CSS) sets margin-left/right: auto on every direct
   child of the constrained group, which centres every paragraph, heading and
   list horizontally regardless of text-align. That is correct for the site
   wide block layouts the careers-style blog copied, but on the actual blog
   posts the body content should be left-aligned as prose. Override the auto
   margins with 0 on blog page body groups so paragraphs, lists and headings
   return to the start of the column. Items with explicit alignment classes
   (alignleft/alignright/alignfull/aligncenter) keep their behaviour since the
   :not() filter still excludes them. !important is needed to beat the
   !important on the WP core rule. */
:where(body.single-blog, body.post-type-archive-blog) .wp-block-group.container.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.aligncenter)) {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Core heading block. */
:where(body.single-blog, body.post-type-archive-blog) h1.wp-block-heading {
    margin: 0 0 16px;
    color: #1c1c1c;
    font-family: "canada-type-gibson", sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.2;
}
:where(body.single-blog, body.post-type-archive-blog) h2.wp-block-heading {
    margin: 28px 0 0;
    color: #1c1c1c;
    font-family: "canada-type-gibson", sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 42px;
}
:where(body.single-blog, body.post-type-archive-blog) h3.wp-block-heading {
    margin: 24px 0 0;
    color: #1c1c1c;
    font-family: "canada-type-gibson", sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 32px;
}

/* Bold text inside blog headings: 500 (the headings themselves are 400 above).
   Scoped to blog pages via :where() and the .wp-block-heading / classic
   .scr-blog-single-content selectors. :is() keeps specificity at 0,1,2 (the
   max of its arguments), so this still overrides the theme base
   `h1 strong... { font-weight: 400 }` (0,0,2) without leaking to non-blog
   block-editor pages. Weight kept at 500 (not 600) so bolded spans inside
   headings read as "emphasis" rather than a heavier heading. */
:where(body.single-blog, body.post-type-archive-blog) :is(h1.wp-block-heading strong, h2.wp-block-heading strong, h3.wp-block-heading strong, h4.wp-block-heading strong, h5.wp-block-heading strong, h6.wp-block-heading strong, .scr-blog-single-content h1 strong, .scr-blog-single-content h2 strong, .scr-blog-single-content h3 strong, .scr-blog-single-content h4 strong, .scr-blog-single-content h5 strong, .scr-blog-single-content h6 strong) {
    font-weight: 500;
}

/* Body paragraphs: classless <p> (core paragraph block). The :not([class])
   keeps the chrome blocks' classed <p> (share label, meta, banner blurb,
   block tips) on their own styles. Font-size bumped from 17px to 18px to
   match the perceived size of Lato 16px content on other site pages — Gibson
   renders smaller than Lato at equal px. */
.scrivens-blog-single-blocks p:not([class]), .scr-blog-single-content p:not([class]) {
    margin: 8px 0 4px;
    color: #363836;
    font-family: "canada-type-gibson", sans-serif;
    font-size: 18px;
    line-height: 1.7;
}

/* Core quote block (careers style). Placed after the paragraph rule so the
   quote's <p> wins on equal specificity. */
:where(body.single-blog, body.post-type-archive-blog) blockquote.wp-block-quote {
    border: 0;
    border-left: 6px solid #1198ba;
    margin: 32px 0;
    padding: 0 0 0 28px;
    background: none;
    font-style: normal;
    border-radius: 0;
}
:where(body.single-blog, body.post-type-archive-blog) blockquote.wp-block-quote p {
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    margin: 0;
    color: #3f4040;
    font-family: "canada-type-gibson", sans-serif;
    font-style: normal;
}
:where(body.single-blog, body.post-type-archive-blog) blockquote.wp-block-quote cite,
:where(body.single-blog, body.post-type-archive-blog) blockquote.wp-block-quote footer {
    display: block;
    margin-top: 12px;
    color: #3f4040;
    font-family: "canada-type-gibson", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
}

@media screen and (max-width: 768px) {
    :where(body.single-blog, body.post-type-archive-blog) blockquote.wp-block-quote {
        border-left-width: 4px;
        padding-left: 20px;
    }
    :where(body.single-blog, body.post-type-archive-blog) blockquote.wp-block-quote p {
        font-size: 20px;
        line-height: 28px;
    }
}
@media screen and (max-width: 480px) {
    :where(body.single-blog, body.post-type-archive-blog) blockquote.wp-block-quote p {
        font-size: 18px;
        line-height: 26px;
    }
    :where(body.single-blog, body.post-type-archive-blog) h1.wp-block-heading {
        font-size: 28px;
    }
    :where(body.single-blog, body.post-type-archive-blog) h2.wp-block-heading {
        font-size: 26px;
        line-height: 34px;
    }
}

/* =========================================================================
   Post Archive Long Button block.
   Full-width pill CTA. Brand: teal #1198ba (rest), blue #213d90 (hover).
   ========================================================================= */
.custom-block.scr-blog-long-button {
    padding: 24px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.scr-blog-long-button-link {
    width: 100%;
    min-height: 60px;
    border-radius: 999px;
    background: #1198ba;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 12px 0 40px;
    font-family: "canada-type-gibson", sans-serif;
    transition: background-color .2s ease;
}
.scr-blog-long-button-link:hover,
.scr-blog-long-button-link:focus-visible,
.scr-blog-long-button-link:active {
    background: #213d90;
    color: #fff;
}
.scr-blog-long-button-link[aria-disabled="true"] {
    opacity: .6;
    cursor: not-allowed;
}
.scr-blog-long-button-text {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
}
.scr-blog-long-button-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: #fff;
    color: #213d90;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.scr-blog-long-button-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    object-fit: contain;
}
@media screen and (max-width: 576px) {
    .scr-blog-long-button-text {
        font-size: 20px;
        line-height: 28px;
    }
    .scr-blog-long-button-link {
        padding-left: 24px;
    }
}

/* =========================================================================
   Full-width content page layout (default template toggle).
   When "Full-width content" is enabled on a page, the .container wrapper is
   omitted so blocks can span the viewport. Zero the .section vertical margins
   so a full-bleed banner sits flush under the header.
   ========================================================================= */
.section.scr-full-width-content {
    margin-top: 0;
    margin-bottom: 0;
}
.section.scr-full-width-content .wysiwyg {
    max-width: none;
}

/* =========================================================================
   Wide container page setting (1458px).
   When "Wide container (1458px)" is enabled on a page, a body.scr-wide-container
   class is added and all .container elements widen to 1458px (matches the
   careers site). Higher specificity than the theme .container breakpoint rules.
   ========================================================================= */
body.scr-wide-container .container {
    max-width: 1458px;
}

/* =========================================================================
   Blog single page: force canada-type-gibson on every element so all blocks
   (core headings, paragraphs, lists, quotes, buttons, etc.) match the blog
   font, overriding the theme base Lato/Montserrat. Scoped to the single-post
   wrappers and placed last in this stylesheet so it wins same-specificity ties
   (e.g. .btn).
   ========================================================================= */
.scrivens-blog-single-blocks *,
.scrivens-blog-single-wrap * {
    font-family: "canada-type-gibson", sans-serif;
}

/* Force the blog font on every element on blog pages, except the site
   header/footer (#header / #footer) which keep their own fonts. Extends the
   narrower .scrivens-blog-single-blocks / .scrivens-blog-single-wrap * rule
   above so archive content and chrome blocks rendered outside those wrappers
   also pick up canada-type-gibson. :not() excludes #header/#footer and their
   descendants. The narrower rule above stays as a fallback for browsers that
   do not support complex selectors inside :not(). */
body.single-blog :not(#header, #footer, #header *, #footer *),
body.post-type-archive-blog :not(#header, #footer, #header *, #footer *) {
    font-family: "canada-type-gibson", sans-serif;
}