/**
 * Blog restyle — archive cards and single post reading experience.
 *
 * Loaded only on the blog index, archives and single posts, after
 * 'saasland-root', so no rule here needs !important.
 *
 * Tokens follow the site's existing purple (#7f53b4 banner, #8053b5 accents)
 * and Poppins, so the blog reads as part of wpos.app rather than a bolt-on.
 */

:root {
    --sc-brand: #7444fd;
    --sc-brand-dark: #5e2ced;
    --sc-heading: #22223f;
    --sc-body: #545b76;
    --sc-muted: #8a91a8;
    --sc-line: #e6e9f2;
    --sc-bg-soft: #f8f9fd;
    --sc-radius: 10px;
    --sc-shadow: 0 4px 18px rgba(0, 11, 40, .06);
    --sc-shadow-lift: 0 18px 34px rgba(0, 11, 40, .12);
}

/* =====================================================================
   Archive cards
   ================================================================== */

/* Bootstrap columns are block by default, so two cards in a row end up at
   different heights. Making the column a flex container lets the card fill it. */
.blog_grid_info > .row > [class*="col-lg-"],
.blog_grid_info > .row > [class*="col-sm-"] {
    display: flex;
    margin-bottom: 30px;
}

.sc-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-radius);
    background: #fff;
    box-shadow: var(--sc-shadow);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.sc-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--sc-shadow-lift);
}

.sc-card__media {
    display: block;
    overflow: hidden;
    line-height: 0;
}

.sc-card__media img {
    width: 100%;
    height: auto;
    transition: transform .4s ease;
}

.sc-card:hover .sc-card__media img {
    transform: scale(1.04);
}

/* The parent zeroes this padding from two directions — `.blog_list_item_two
   .blog_content` kills left, right and bottom, and `.no-post-thumbnail
   .blog_content` kills the top. Both are (0,2,0), so a lone `.sc-card__body`
   loses on specificity no matter how late it loads. Qualifying with the two
   classes already on the article element takes it to (0,3,0) and wins without
   reaching for !important. */
.sc-card.blog_list_item_two .sc-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 26px 28px 24px;
}

/* --- meta row --- */

.sc-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 20px;
    color: var(--sc-muted);
}

.sc-card__cat {
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(116, 68, 253, .09);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sc-brand-dark);
    transition: background .2s ease;
}

.sc-card__cat:hover {
    background: rgba(116, 68, 253, .16);
    color: var(--sc-brand-dark);
}

.sc-card__dot {
    color: var(--sc-line);
}

/* --- title --- */

.sc-card__title {
    margin: 0 0 12px;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.4;
}

.sc-card--related .sc-card__title {
    font-size: 18px;
}

.sc-card__title a {
    /* The parent theme truncated titles server-side at 50 characters, cutting
       words in half. Clamping here keeps the card tidy and the full title in
       the markup for search engines and screen readers. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--sc-heading);
    transition: color .2s ease;
}

.sc-card__title a:hover {
    color: var(--sc-brand-dark);
}

/* --- excerpt --- */

.sc-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 27px;
    color: var(--sc-body);
}

/* --- footer --- */

.sc-card__foot {
    margin-top: auto;
    padding-top: 4px;
    border: 0;
}

.sc-card__foot .learn_btn_two {
    font-size: 14px;
    font-weight: 500;
    color: var(--sc-brand-dark);
}

.sc-card__foot .learn_btn_two i {
    transition: transform .2s ease;
}

.sc-card__foot .learn_btn_two:hover i {
    transform: translateX(4px);
}

/* =====================================================================
   Single post
   ================================================================== */

.sc-single.sec_pad {
    padding-top: 70px;
}

.sc-article {
    border: 0;
    box-shadow: none;
}

/* --- meta bar (replaces the duplicate <h1> the parent printed here) --- */

.sc-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 760px;
    margin: 0 auto 34px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--sc-line);
    font-size: 14px;
    line-height: 22px;
    color: var(--sc-muted);
}

.sc-article__cat {
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(116, 68, 253, .09);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sc-brand-dark);
}

.sc-article__by {
    font-weight: 500;
    color: var(--sc-heading);
}

.sc-article__dot {
    color: var(--sc-line);
}

.sc-article__hero {
    max-width: 900px;
    margin: 0 auto 44px;
}

.sc-article__hero img {
    width: 100%;
    height: auto;
    border-radius: var(--sc-radius);
}

/* --- the reading column ---
   The parent laid the article out in a full-width col-lg-12, giving lines of
   roughly 150 characters. 70ch is the readable measure typography has settled
   on; everything below is scoped to it. */

.sc-article__body {
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
    font-size: 17px;
    line-height: 1.75;
    color: var(--sc-body);
}

.sc-article__body > p {
    margin: 0 0 26px;
}

/* Opening paragraph carries the reader in, so it gets a little more air. */
.sc-article__body > p:first-child {
    font-size: 19px;
    line-height: 1.7;
    color: var(--sc-heading);
}

.sc-article__body h2 {
    margin: 56px 0 18px;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sc-heading);
}

.sc-article__body h3 {
    margin: 38px 0 14px;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sc-heading);
}

.sc-article__body h2 + h3 {
    margin-top: 24px;
}

.sc-article__body strong {
    font-weight: 600;
    color: var(--sc-heading);
}

.sc-article__body a {
    color: var(--sc-brand-dark);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .2s ease;
}

.sc-article__body a:hover {
    color: var(--sc-heading);
}

/* --- lists --- */

.sc-article__body ul,
.sc-article__body ol {
    margin: 0 0 26px;
    padding-left: 22px;
}

.sc-article__body li {
    margin-bottom: 12px;
    padding-left: 6px;
}

.sc-article__body li::marker {
    color: var(--sc-brand);
}

.sc-article__body ol li::marker {
    font-weight: 600;
}

/* --- separators, quotes, code --- */

.sc-article__body .wp-block-separator {
    max-width: 100%;
    margin: 52px 0;
    border: 0;
    border-top: 1px solid var(--sc-line);
    opacity: 1;
}

.sc-article__body blockquote {
    margin: 34px 0;
    padding: 6px 0 6px 26px;
    border-left: 3px solid var(--sc-brand);
    font-size: 19px;
    font-style: italic;
    color: var(--sc-heading);
}

.sc-article__body code {
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--sc-bg-soft);
    border: 1px solid var(--sc-line);
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88em;
    color: var(--sc-heading);
}

.sc-article__body pre,
.sc-article__body .wp-block-preformatted {
    overflow-x: auto;
    margin: 0 0 26px;
    padding: 22px 26px;
    border: 1px solid var(--sc-line);
    border-left: 3px solid var(--sc-brand);
    border-radius: var(--sc-radius);
    background: var(--sc-bg-soft);
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 15px;
    line-height: 1.7;
    color: var(--sc-heading);
}

.sc-article__body pre code {
    padding: 0;
    border: 0;
    background: none;
}

.sc-article__body img,
.sc-article__body figure {
    max-width: 100%;
    height: auto;
    border-radius: var(--sc-radius);
}

.sc-article__body table {
    width: 100%;
    margin-bottom: 26px;
    border-collapse: collapse;
    font-size: 15px;
}

.sc-article__body th,
.sc-article__body td {
    padding: 12px 14px;
    border: 1px solid var(--sc-line);
    text-align: left;
}

.sc-article__body th {
    background: var(--sc-bg-soft);
    font-weight: 600;
    color: var(--sc-heading);
}

/* --- share row and tags --- */

.sc-article__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 48px;
    padding-top: 26px;
    border-top: 1px solid var(--sc-line);
}

.sc-article__body .single_post_tags {
    margin-top: 22px;
    font-size: 13px;
    letter-spacing: .03em;
    color: var(--sc-muted);
}

.sc-article__body .single_post_tags a {
    text-decoration: none;
}

/* =====================================================================
   Related posts and comments
   ================================================================== */

.sc-related {
    max-width: 1140px;
    margin: 80px auto 0;
    padding-top: 60px;
    border-top: 1px solid var(--sc-line);
}

.sc-related .blog_titles {
    margin-bottom: 34px;
    font-size: 26px;
    font-weight: 600;
    color: var(--sc-heading);
}

/* On single posts only, the parent theme forces
   `.single .blog_single_info .blog_list_item_two .blog_content { padding-top: 0 }`
   at (0,4,0), which strips the top padding from the related-post cards and
   leaves their text hugging the border. (Archive cards are unaffected — that
   rule is scoped to .single.) Restore it at (0,5,0) so it wins. */
.single .blog_single_info .sc-card.blog_list_item_two .sc-card__body {
    padding-top: 26px;
}

.blog_single_info .comment-respond,
.blog_single_info .comments-area {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
}

/* =====================================================================
   Breakpoints
   ================================================================== */

@media (max-width: 991px) {
    .sc-article__body h2 {
        margin-top: 44px;
        font-size: 26px;
    }

    .sc-related {
        margin-top: 60px;
        padding-top: 44px;
    }
}

@media (max-width: 767px) {
    .sc-single.sec_pad {
        padding-top: 45px;
    }

    .sc-article__meta {
        justify-content: flex-start;
        margin-bottom: 26px;
        padding-bottom: 20px;
    }

    .sc-article__body {
        font-size: 16px;
    }

    .sc-article__body > p:first-child {
        font-size: 17px;
    }

    .sc-article__body h2 {
        font-size: 23px;
    }

    .sc-article__body h3 {
        font-size: 19px;
    }

    .sc-card.blog_list_item_two .sc-card__body {
        padding: 22px 22px 20px;
    }

    .sc-card__title {
        font-size: 19px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sc-card,
    .sc-card__media img,
    .sc-card__foot .learn_btn_two i {
        transition: none;
    }

    .sc-card:hover {
        transform: none;
    }

    .sc-card:hover .sc-card__media img {
        transform: none;
    }
}

/* =====================================================================
   Header nav on blog pages
   ================================================================== */

/* Keep the top-menu links white on blog, archive and single-post pages,
   where the header sits over the coloured banner. */
.blog .menu > .nav-item.active .nav-link,
.blog .menu > .nav-item:hover .nav-link,
.blog .menu > .nav-item > .nav-link {
    color: #fff;
}

/* Cart icon in the header, kept white over the coloured banner. This file only
   loads on blog pages, so the rule does not affect the header elsewhere. */
.navbar .search_cart .shpping-cart i {
    color: #fff !important;
}