/* MEP blog. Poppins is inherited from the theme; only brand tokens are set here. */
.mep-blog-nav,
.mep-toc,
.mep-post-dates,
.wp-block-file {
    --mep-ink: #1F2A44;
    --mep-champagne: #D7B96E;
    --mep-hairline: rgba(31, 42, 68, .24);
}

/* ---- Category navigation ---- */
.mep-blog-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mep-blog-nav li {
    margin: 0;
    padding: 0;
}

.mep-blog-nav .mep-blog-nav__link {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid var(--mep-hairline);
    border-radius: 999px;
    background: #fff;
    color: var(--mep-ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    transition: border-color .15s ease;
}

.mep-blog-nav .mep-blog-nav__link:hover {
    border-color: var(--mep-ink);
    color: var(--mep-ink);
}

/* Fill alone is 1.9:1 against white, so the ink border and heavier weight carry the current state. */
.mep-blog-nav .mep-blog-nav__link[aria-current="page"] {
    border-color: var(--mep-ink);
    background: var(--mep-champagne);
    font-weight: 600;
}

.mep-blog-nav .mep-blog-nav__link:focus-visible,
.mep-toc summary:focus-visible,
.mep-toc a:focus-visible,
.wp-block-file a:focus-visible {
    outline: 3px solid var(--mep-ink);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    /* The scroller clips its own focus ring, so pad it and pull the padding back out of the layout. */
    .mep-blog-nav--scroll ul {
        position: relative;
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: -6px 0 -6px -5px;
        padding: 6px 0 6px 5px;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    }

    .mep-blog-nav--scroll ul::-webkit-scrollbar {
        display: none;
    }

    /* Added by the script once the strip has moved, so the start is not faded while it is still at rest. */
    .mep-blog-nav--scroll ul.is-scrolled {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    }

    .mep-blog-nav--scroll li {
        flex: 0 0 auto;
    }

    .mep-blog-nav--scroll li:last-child {
        margin-inline-end: 28px;
    }

    .mep-blog-nav--scroll .mep-blog-nav__link {
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mep-blog-nav .mep-blog-nav__link {
        transition: none;
    }
}

/* ---- Table of contents ---- */
.mep-toc {
    margin: 0 0 24px;
    padding: 4px 20px 8px;
    border: 1px solid var(--mep-hairline);
    border-radius: 12px;
    background: #fff;
    color: var(--mep-ink);
}

.mep-toc summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.mep-toc ol {
    margin: 0;
    padding: 0 0 0 1.4em;
}

.mep-toc li {
    margin: 0;
    padding-left: 4px;
    font-size: 15px;
}

.mep-toc a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--mep-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mep-toc a:hover {
    text-decoration-thickness: 2px;
}

/* ---- Post dates ---- */
.mep-post-dates {
    margin: 0 0 16px;
    color: rgba(31, 42, 68, .8);
    font-size: 15px;
}

/* ---- File download row ---- */
.wp-block-file {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid var(--mep-hairline);
    border-radius: 12px;
    background: #fff;
    color: var(--mep-ink);
}

.wp-block-file .wp-block-file__embed {
    flex: 0 0 100%;
}

.wp-block-file a:not(.wp-block-file__button) {
    display: inline-flex;
    flex: 1 1 220px;
    align-items: center;
    min-height: 44px;
    color: var(--mep-ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wp-block-file .wp-block-file__button {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 44px;
    margin: 0;
    padding: 10px 20px;
    border: 1px solid var(--mep-ink);
    border-radius: 999px;
    background: #fff;
    color: var(--mep-ink);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.wp-block-file .wp-block-file__button:hover {
    background: var(--mep-champagne);
    color: var(--mep-ink);
}