/* ============================================================
 * Momentum OP - Blog Article  (single-post.css v1.0.2)
 * Template: single-post.php  |  Root: .mop-blog-post
 * Loaded on blog articles only (single-post.php section 0, or
 * inc/base-template-assets.php when it loads single-post.css itself).
 * Inherits: MOP-DSM-20261015 (Avada Global Options), MOP-RCM-20261016
 * (mop-btn-arrow, mop-btn-outline, mop-eyebrow, mop-prose, mop-rise,
 * mop-reveal, --mop-ease). This file holds only article layout deltas.
 *
 *  1. Page shell (full-width content area on articles only)
 *  2. Root
 *  3. Reading progress bar
 *  4. Article top (back link, title, meta, share)
 *  5. Featured image
 *  6. Body grid, contents list and article text
 *  7. Call to action box
 *  8. Related articles
 *  9. Hover, focus and reduced motion
 * ============================================================ */


/* ============================================================
 * 1. PAGE SHELL
 * Avada wraps singles in #main > .fusion-row at Site Width. Each
 * section centers its own row with 32px side padding, so on articles
 * only the content row is let out to the full width (no 100vw, so no
 * sideways scroll). The doubled #main ID outranks every Avada #main
 * rule.
 * ============================================================ */

html body.single-post #main#main {
    padding-right: 0;
    padding-left: 0;
}

html body.single-post #main#main > .fusion-row {
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

/* Avada lays #main > .fusion-row out as a wrapping flex row, so this root
 * is a flex item, and a flex item never shrinks below its widest content
 * by default. The reviews carousel (and the Compare table on /classes/)
 * have very wide content, which stretched the whole page to about 1440px
 * on phones. min-width: 0 keeps the root at the row's width; wide widgets
 * clip or scroll inside their own boxes instead. */
html body.single-post #main#main > .fusion-row > .mop-blog-post {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
}


/* ============================================================
 * 2. ROOT
 * ============================================================ */

.mop-blog-post {
    --mop-blog-post-y: clamp(112px, 14vw, 192px);
    --mop-blog-post-media: #15123a; /* DSM 15 media placeholder (local component color) */
    color: var(--awb-color8);
    line-height: normal;
}

.mop-blog-post :where(h1, h2, h3, ul) {
    margin: 0;
}

.mop-blog-post :where(.mop-blog-post__grid-cards) {
    padding: 0;
    list-style: none;
}

.mop-blog-post :where(.mop-blog-post__item) {
    margin: 0;
}

.mop-blog-post :where(.mop-blog-post__item)::before {
    content: none;
}

.mop-blog-post [hidden] {
    display: none !important;
}

.mop-blog-post__inner {
    max-width: 1375px;
    margin: 0 auto;
}

.mop-blog-post__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}


/* ============================================================
 * 3. READING PROGRESS BAR
 * A 3px orange line under the header that fills as the article is
 * read (width set by single-post.js). Decorative.
 * ============================================================ */

.mop-blog-post__progress {
    position: fixed;
    top: 68px;
    right: 0;
    left: 0;
    z-index: 48;
    height: 3px;
    pointer-events: none;
}

body.admin-bar .mop-blog-post__progress {
    top: 100px;
}

@media (max-width: 782px) {
    body.admin-bar .mop-blog-post__progress {
        top: 114px;
    }
}

.mop-blog-post__progress-bar {
    height: 100%;
    background: var(--awb-color5);
    transform: scaleX(0);
    transform-origin: 0 50%;
}


/* ============================================================
 * 4. ARTICLE TOP
 * The header floats over the page, so the top padding includes it.
 * ============================================================ */

.mop-blog-post__top {
    padding: clamp(140px, 16vw, 200px) 32px 56px;
}

.mop-blog-post__top-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
}

.mop-blog-post .mop-blog-post__back {
    margin: -12px 0;
    padding: 12px 0;
    color: var(--awb-color5);
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
    transition: color .3s;
}

.mop-blog-post .mop-blog-post__h1 {
    color: var(--awb-color8);
    font-size: clamp(42px, 5.6vw, 80px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.04em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.mop-blog-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 24px;
    color: var(--awb-color11);
    font-size: 15px;
    line-height: normal;
}

.mop-blog-post__byline {
    color: var(--awb-color9);
    font-weight: 600;
}

.mop-blog-post .mop-blog-post__cat {
    display: inline-block;
    margin: -12px 0;
    padding: 12px 0;
    color: var(--awb-color11);
    text-decoration: none;
    transition: color .3s;
}

.mop-blog-post .mop-blog-post__share {
    margin: -12px 0;
    padding: 12px 0;
    border: 0;
    background: none;
    color: var(--awb-color5);
    font: inherit;
    font-weight: 600;
    line-height: normal;
    cursor: pointer;
    transition: color .3s;
}


/* ============================================================
 * 5. FEATURED IMAGE
 * ============================================================ */

.mop-blog-post__hero {
    padding: 0 32px;
}

.mop-blog-post__hero-media {
    position: relative;
    max-width: 1375px;
    margin: 0 auto;
    aspect-ratio: 21 / 9;
    overflow: hidden;
    border-radius: 28px;
    background: var(--mop-blog-post-media);
}

@media (max-width: 640px) {
    .mop-blog-post__hero-media {
        aspect-ratio: 16 / 11;
        border-radius: 24px;
    }
}


/* ============================================================
 * 6. BODY GRID, CONTENTS LIST AND ARTICLE TEXT
 * Above 1100px (design): a 240px sticky contents list beside the
 * 720px article. At 1100px and below, or with fewer than two H2s, the
 * article runs alone (the list is hidden). Text styles are the RCM
 * mop-prose blog default; the lead paragraph is this template's.
 * ============================================================ */

.mop-blog-post__body {
    padding: clamp(72px, 9vw, 120px) 32px var(--mop-blog-post-y);
}

.mop-blog-post__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: clamp(48px, 7vw, 112px);
    max-width: 1375px;
    margin: 0 auto;
}

.mop-blog-post__toc {
    display: none;
}

@media (min-width: 1101px) {
    .mop-blog-post__grid:not(.mop-blog-post__grid--solo) {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .mop-blog-post__toc {
        position: sticky;
        top: 120px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    body.admin-bar .mop-blog-post__toc {
        top: 152px;
    }
}

.mop-blog-post__grid--solo .mop-blog-post__main {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.mop-blog-post__toc-h {
    color: var(--awb-color5);
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
}

.mop-blog-post .mop-blog-post__toc-link {
    color: var(--awb-color11);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    text-decoration: none;
    transition: color .3s;
}

.mop-blog-post .mop-blog-post__toc-link.is-active {
    color: var(--awb-color9);
    font-weight: 600;
}

.mop-blog-post__main {
    display: flex;
    flex-direction: column;
    gap: 56px;
    min-width: 0;
    max-width: 720px;
}

/* Article text spacing and headings.
   Posts can be written in the WordPress editor (headings and paragraphs
   side by side) or with Avada Builder elements (each Title and Text Block
   in its own wrapper, often with inline sizes and margin:0). Spacing is
   therefore set on each element, not on neighbors, and the heading size
   overrides Avada's global H2 (64px) and any element-level size, so every
   article reads at the design scale:
   paragraph to paragraph 20px, heading to its text 20px, text to the next
   H2 56px (20px margin + 36px padding, which never collapses), text to an
   H3 32px. */
.mop-blog-post .mop-blog-post__content :is(p, ul, ol, blockquote, figure, table, h3, h4, h5, h6) {
    margin: 0 0 20px !important;
}

.mop-blog-post .mop-blog-post__content p {
    color: var(--awb-color10);
    font-size: 18px;
    line-height: 1.7;
}

.mop-blog-post .mop-blog-post__content h2 {
    margin: 0 0 20px !important;
    padding-top: 36px !important;
    color: var(--awb-color8);
    font-size: clamp(28px, 2.6vw, 36px) !important;
    font-weight: 700;
    line-height: 1.15 !important;
    letter-spacing: -.03em !important;
    text-wrap: balance;
    scroll-margin-top: 64px;
}

.mop-blog-post .mop-blog-post__content :is(h3, h4, h5, h6) {
    padding-top: 12px;
}

/* A heading that opens the article needs no space above it. */
.mop-blog-post .mop-blog-post__content > :first-child,
.mop-blog-post .mop-blog-post__content > :first-child > :first-child {
    padding-top: 0 !important;
}

/* The last block's 20px is taken back, so the call to action box keeps
   the design's 56px gap. */
.mop-blog-post .mop-blog-post__content {
    margin-bottom: -20px;
}

/* Avada Title element wrappers: their own margins and separator lines
   would add space the design does not have. */
.mop-blog-post .mop-blog-post__content .fusion-title {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.mop-blog-post .mop-blog-post__content .fusion-title .title-sep-container {
    display: none;
}

.mop-blog-post .mop-blog-post__content p.mop-blog-post__lead {
    margin-bottom: 24px !important;
    color: var(--awb-color9);
    font-size: clamp(21px, 1.8vw, 24px);
    line-height: 1.6;
}

.mop-blog-post__content img {
    max-width: 100%;
    height: auto;
    border-radius: 24px;
}


/* ============================================================
 * 7. CALL TO ACTION BOX
 * ============================================================ */

.mop-blog-post__cta {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: clamp(32px, 4vw, 48px);
    border-radius: 28px;
    background: var(--awb-color2);
}

.mop-blog-post .mop-blog-post__cta-h2 {
    color: var(--awb-color8);
    font-size: clamp(28px, 2.6vw, 36px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.mop-blog-post .mop-blog-post__cta-text,
.mop-blog-post .mop-blog-post__cta-closer {
    margin: 0;
    color: var(--awb-color11);
    font-size: 17px;
    line-height: 1.6;
}

.mop-blog-post .mop-blog-post__cta-closer {
    color: var(--awb-color9);
    font-weight: 600;
}

.mop-blog-post__cta-btn {
    margin-top: 8px;
}

/* The button label must always show in full. On phones the box's side
   padding drops to 16px and its button to a 15px label with a tighter
   start and gap (14px and 16px below 375px), through the RCM button API
   so the chip, fill and roll still work. */
@media (max-width: 480px) {
    .mop-blog-post__cta {
        padding-right: 16px;
        padding-left: 16px;
    }

    body .mop-blog-post__cta .fusion-button.mop-btn-arrow {
        --mop-btn-fs: 15px;
        --mop-btn-pad-start: 20px;
        --mop-btn-gap: 10px;
    }
}

@media (max-width: 374px) {
    body .mop-blog-post__cta .fusion-button.mop-btn-arrow {
        --mop-btn-fs: 14px;
        --mop-btn-pad-start: 16px;
    }
}


/* ============================================================
 * 8. RELATED ARTICLES
 * Heading left, View All Articles right (wraps under on narrow
 * screens); cards follow the Blog page grid.
 * ============================================================ */

.mop-blog-post__related {
    padding: 0 32px var(--mop-blog-post-y);
    scroll-margin-top: 68px;
}

.mop-blog-post__rel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 56px;
}

.mop-blog-post__rel-copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 780px;
}

.mop-blog-post .mop-blog-post__h2 {
    color: var(--awb-color8);
    font-size: clamp(38px, 4.6vw, 64px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.mop-blog-post__grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(220px, calc(33.333% - 16px))), 1fr));
    gap: 56px 24px;
}

.mop-blog-post__item {
    min-width: 0;
}

.mop-blog-post .mop-blog-post__card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    color: var(--awb-color9);
    text-decoration: none;
}

.mop-blog-post__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    border-radius: 24px;
    background: var(--mop-blog-post-media);
}

.mop-blog-post__card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 4px;
}

.mop-blog-post__card-cat {
    color: var(--awb-color5);
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
}

.mop-blog-post .mop-blog-post__card-title {
    color: var(--awb-color9);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.025em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.mop-blog-post__card-text {
    color: var(--awb-color11);
    font-size: 16px;
    line-height: 1.55;
    text-wrap: pretty;
}

.mop-blog-post__card-meta {
    color: var(--awb-color13);
    font-size: 14px;
    line-height: normal;
}


/* ============================================================
 * 9. HOVER, FOCUS AND REDUCED MOTION
 * Design states: category links, Share article and contents links
 * turn white on hover (.3s); the current contents link is white and
 * bold. The back link keeps its orange. Cards have no hover change.
 * Keyboard focus shows a visible white ring. Buttons keep their RCM
 * states.
 * ============================================================ */

.mop-blog-post .mop-blog-post__back:is(:hover, :focus, :active, :visited) {
    color: var(--awb-color5);
}

.mop-blog-post .mop-blog-post__cat:is(:hover, :focus-visible),
.mop-blog-post .mop-blog-post__share:is(:hover, :focus-visible),
.mop-blog-post .mop-blog-post__toc-link:is(:hover, :focus-visible) {
    color: var(--awb-color9);
}

.mop-blog-post .mop-blog-post__card:is(:hover, :focus, :active, :visited) {
    color: var(--awb-color9);
}

.mop-blog-post .mop-blog-post__back:focus-visible,
.mop-blog-post .mop-blog-post__cat:focus-visible,
.mop-blog-post .mop-blog-post__share:focus-visible,
.mop-blog-post .mop-blog-post__toc-link:focus-visible {
    outline: 2px solid var(--awb-color9);
    outline-offset: 3px;
    border-radius: 4px;
}

.mop-blog-post .mop-blog-post__card:focus-visible {
    outline: none;
}

.mop-blog-post .mop-blog-post__card:focus-visible .mop-blog-post__media {
    outline: 2px solid var(--awb-color9);
    outline-offset: 3px;
}

.mop-blog-post .mop-blog-post__card:focus-visible .mop-blog-post__card-title {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .mop-blog-post .mop-blog-post__back,
    .mop-blog-post .mop-blog-post__cat,
    .mop-blog-post .mop-blog-post__share,
    .mop-blog-post .mop-blog-post__toc-link {
        transition: none;
    }
}