/* ==========================================================================
   ARF News — Listing + Detail (public)
   Listing cards mirror `arf-global.css` → `.arf-home-latest-*` (Latest content).
   Archive grid: first row 2 cards, then 3 per row; pattern repeats every 8
   cards (each Ajax Load More batch is its own 2+3+3 group).
   ========================================================================== */

/* Section spacing — mirrors Figma "Section Padding / large" */
.arf-news-listing,
.arf-news-detail,
.arf-news-related-section {
    padding: 96px 0;
    background: #ffffff;
}

/* On wide viewports `min(1280px, calc(100% - 160px))` keeps an 80px gutter
   on each side (matching Figma "Page Padding / global"). On smaller screens
   we shrink the gutter so cards don't get crushed. */
.arf-news-listing-wrap,
.arf-news-detail-wrap {
    width: min(1280px, calc(100% - 32px));
    margin: 0 auto;
    padding: 0;
}

@media (min-width: 1024px) {
    .arf-news-listing-wrap,
    .arf-news-detail-wrap {
        width: min(1280px, calc(100% - 160px));
    }
}

/* -------------------------------------------------------------------------
   Listing — heading block (768px max, centered)
   ------------------------------------------------------------------------- */
.arf-news-listing-header {
    max-width: 768px;
    margin: 0 auto 80px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.arf-news-listing-title {
    font-family: 'Red Hat Display', 'Poppins', Arial, sans-serif;
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    color: #000000;
    margin: 0;
}

.arf-news-listing-subtitle {
    font-family: Tahoma, Arial, sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
    margin: 0;
}

/* -------------------------------------------------------------------------
   Grid — `.arf-news-grid-3` = same as homepage 3-column (related articles).
   `.arf-news-grid-2-plus-3` = news archive: row 1 has 2 cards, then 3 per row;
   repeats every 8 items (2+3+3). Implemented with a 6-column track grid.
   ------------------------------------------------------------------------- */
.arf-news-grid {
    display: grid;
    gap: 65px;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.arf-news-grid-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) {
    .arf-news-grid-3 {
        gap: 40px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .arf-news-grid-3 {
        gap: 65px;
        grid-template-columns: repeat(3, minmax(0, 383.33px));
        justify-content: space-between;
        width: min(1280px, 100%);
        margin: 0 auto;
    }
}

/* Archive / ALM listing — mobile → tablet → desktop 2+3 layout */
.arf-news-grid-2-plus-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) and (max-width: 1023px) {
    .arf-news-grid-2-plus-3 {
        gap: 40px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .arf-news-grid-2-plus-3 > .arf-news-card {
        grid-column: auto;
    }
}

@media (min-width: 1024px) {
    .arf-news-grid-2-plus-3 {
        gap: 65px;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        width: min(1280px, 100%);
        margin: 0 auto;
    }

    /* Default: every card is "span 2" → 3 cards per row in the 6-col grid.
       This is what gets used by the additional batches that Ajax Load More
       appends after the visitor clicks "Load more". */
    .arf-news-grid-2-plus-3 > .arf-news-card,
    .arf-news-alm-wrap .alm-listing.arf-news-grid-2-plus-3 .alm-reveal > .arf-news-card {
        grid-column: span 2;
    }

    /* Only the FIRST batch's first two cards span 3 (wide hero row).
       — Non-ALM: first 2 direct children of the grid.
       — ALM:     first 2 children of the FIRST .alm-reveal block. */
    .arf-news-grid-2-plus-3 > .arf-news-card:nth-child(1),
    .arf-news-grid-2-plus-3 > .arf-news-card:nth-child(2),
    .arf-news-alm-wrap .alm-listing.arf-news-grid-2-plus-3 .alm-reveal:first-of-type > .arf-news-card:nth-child(1),
    .arf-news-alm-wrap .alm-listing.arf-news-grid-2-plus-3 .alm-reveal:first-of-type > .arf-news-card:nth-child(2) {
        grid-column: span 3;
    }

    /* Same two cards get the taller Figma image (607.5 × 404.67). */
    .arf-news-grid-2-plus-3 > .arf-news-card:nth-child(1) .arf-news-card-img,
    .arf-news-grid-2-plus-3 > .arf-news-card:nth-child(2) .arf-news-card-img,
    .arf-news-grid-2-plus-3 > .arf-news-card:nth-child(1) .arf-news-card-placeholder,
    .arf-news-grid-2-plus-3 > .arf-news-card:nth-child(2) .arf-news-card-placeholder,
    .arf-news-alm-wrap .alm-listing.arf-news-grid-2-plus-3 .alm-reveal:first-of-type > .arf-news-card:nth-child(1) .arf-news-card-img,
    .arf-news-alm-wrap .alm-listing.arf-news-grid-2-plus-3 .alm-reveal:first-of-type > .arf-news-card:nth-child(2) .arf-news-card-img,
    .arf-news-alm-wrap .alm-listing.arf-news-grid-2-plus-3 .alm-reveal:first-of-type > .arf-news-card:nth-child(1) .arf-news-card-placeholder,
    .arf-news-alm-wrap .alm-listing.arf-news-grid-2-plus-3 .alm-reveal:first-of-type > .arf-news-card:nth-child(2) .arf-news-card-placeholder {
        height: 404.67px;
    }
}

/* -------------------------------------------------------------------------
   Article card — matches `.arf-home-latest-card` in `arf-global.css`
   (image 255.35px tall, 10px radius; Tahoma title h5 + body; underlined
   purple "Read more" with ↗ via ::after).
   ------------------------------------------------------------------------- */
.arf-news-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow: visible;
    transition: none;
}

/* Homepage latest grid uses a fixed card column width; archive 2+3 grid stretches cells. */
.arf-news-grid-3 .arf-news-card {
    width: 383.33px;
    max-width: 100%;
}

.arf-news-grid-2-plus-3 .arf-news-card {
    width: 100%;
    min-width: 0;
}

.arf-news-card:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
}

.arf-news-card-media {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    background: #f2f2f5;
    line-height: 0;
}

.arf-news-card-img {
    width: 100%;
    height: 255.35px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    margin: 0;
}

.arf-news-card:hover .arf-news-card-img {
    transform: none;
}

/* Placeholder block — same footprint as `.arf-home-latest-image` */
.arf-news-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 255.35px;
    background: #e4e4ea;
    color: #8b8b95;
    border-radius: 10px;
}

.arf-news-card-placeholder::before {
    content: "";
    width: 64px;
    height: 64px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z' fill='black'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z' fill='black'/></svg>") center / contain no-repeat;
}

/* Wrapper lifts title + excerpt into the card flex stack (same as one column of text + link on home). */
.arf-news-card-body {
    display: contents;
}

/* Same as `.arf-home-latest-card h5` */
.arf-news-card-title {
    margin: 0;
    font-size: 24px;
    line-height: 140%;
    font-weight: 400;
    font-family: Tahoma, Arial, sans-serif;
    color: #000;
}

.arf-news-card-title a {
    color: inherit;
    text-decoration: none;
}

.arf-news-card-title a:hover {
    color: #8660e7;
}

/* Same as `.arf-home-latest-card p` */
.arf-news-card-excerpt {
    margin: 0;
    color: #000000;
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
    font-family: Tahoma, Arial, sans-serif;
}

/* Same as `.arf-home-latest-card a` + `a::after`.
   Color = Figma "Accent Purple" #8660E7. Each link state is set
   explicitly so visited-link/plugin styles can't dim it. */
.arf-news-card-cta,
.arf-news-card-cta:link,
.arf-news-card-cta:visited {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    margin: 0;
    padding: 0;
    font-family: Tahoma, Arial, sans-serif;
    font-weight: 400;
    color: #8660e7;
    font-size: 16px;
    line-height: 150%;
    text-decoration: underline;
    text-decoration-color: #8660e7;
    text-underline-offset: 2px;
}

.arf-news-card-cta:hover,
.arf-news-card-cta:focus,
.arf-news-card-cta:active {
    color: #6f33d4;
    text-decoration-color: #6f33d4;
}

.arf-news-card-cta::after {
    content: "↗";
    color: #8660e7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 12.8px;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
}

.arf-news-card-cta:hover::after,
.arf-news-card-cta:focus::after,
.arf-news-card-cta:active::after {
    color: #6f33d4;
}

/* -------------------------------------------------------------------------
   Load More — outline pill (Figma "Button / Lineal")
   ------------------------------------------------------------------------- */
.arf-news-load-more-wrap {
    text-align: center;
    margin-top: 65px;
}

.arf-news-load-more-wrap[hidden] {
    display: none;
}

.arf-news-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9.07px;
    padding: 10px 27.22px;
    background: transparent;
    color: #2a69d0;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    border: 1px solid #2a69d0;
    border-radius: 17px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.arf-news-load-more:hover {
    background: #2a69d0;
    color: #ffffff;
}

.arf-news-load-more.is-loading {
    opacity: 0.7;
    pointer-events: none;
}

.arf-news-empty {
    text-align: center;
    color: #505057;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 16px;
    padding: 32px 0;
}

/* -------------------------------------------------------------------------
   Ajax Load More integration
   -------------------------------------------------------------------------
   ALM markup looks roughly like:
     <div class="ajax-load-more-wrap"> (outer)
       <div class="alm-listing alm-ajax arf-news-grid arf-news-grid-2-plus-3"> (our grid)
         <div class="alm-reveal"> (one per page batch of 8)
           <article class="arf-news-card">…</article>
         </div>
       </div>
       <div class="alm-btn-wrap">
         <button class="alm-load-more-btn">Load More</button>
       </div>
     </div>

   `display: contents` on .alm-reveal lifts the cards into the grid so the
   3-column layout still works after Ajax appends a new batch.
   ------------------------------------------------------------------------- */
.arf-news-alm-wrap .ajax-load-more-wrap {
    width: 100%;
}

.arf-news-alm-wrap .alm-listing.arf-news-grid {
    margin: 0;
    padding: 0;
    list-style: none;
}

.arf-news-alm-wrap .alm-listing .alm-reveal,
.arf-news-alm-wrap .alm-listing .alm-no-results,
.arf-news-alm-wrap .alm-listing > li {
    display: contents;
}

.arf-news-alm-wrap .alm-btn-wrap {
    text-align: center;
    margin-top: 65px;
}

/* Re-skin ALM's button to match the Figma outline pill */
.arf-news-alm-wrap .alm-load-more-btn,
.arf-news-alm-wrap button.alm-load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9.07px;
    padding: 10px 27.22px;
    background: transparent;
    color: #2a69d0;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    border: 1px solid #2a69d0;
    border-radius: 17px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0;
    height: auto;
    width: auto;
}

.arf-news-alm-wrap .alm-load-more-btn:hover,
.arf-news-alm-wrap button.alm-load-more-btn:hover {
    background: #2a69d0;
    color: #ffffff;
}

.arf-news-alm-wrap .alm-load-more-btn.loading,
.arf-news-alm-wrap .alm-load-more-btn.done {
    opacity: 0.7;
    pointer-events: none;
}

.arf-news-alm-wrap .alm-load-more-btn.done {
    display: none;
}

/* -------------------------------------------------------------------------
   Detail page
   ------------------------------------------------------------------------- */
.arf-news-breadcrumb {
    margin-bottom: 32px;
}

.arf-news-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2656d8;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.arf-news-breadcrumb a:hover {
    text-decoration: underline;
}

.arf-news-article {
    background: #ffffff;
    border-radius: 24px;
    padding: 0;
    max-width: 860px;
    margin: 0 auto;
}

.arf-news-article-header {
    margin-bottom: 24px;
}

.arf-news-article-title {
    font-family: 'Red Hat Display', 'Poppins', Arial, sans-serif;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.2;
    color: #0a0a1a;
    margin: 0 0 12px;
}

.arf-news-article-meta {
    font-family: 'Lato', Arial, sans-serif;
    font-size: 14px;
    color: #505057;
    margin: 0;
}

.arf-news-article-hero {
    margin: 0 0 32px;
    border-radius: 20px;
    overflow: hidden;
}

.arf-news-article-hero img {
    width: 100%;
    height: auto;
    display: block;
}

.arf-news-article-body {
    font-family: 'Lato', Arial, sans-serif;
    font-size: 17px;
    line-height: 1.75;
    color: #1f1f2a;
}

.arf-news-article-body h2 {
    font-family: 'Red Hat Display', 'Poppins', Arial, sans-serif;
    font-size: 28px;
    font-weight: 700;
    margin: 40px 0 16px;
    color: #0a0a1a;
}

.arf-news-article-body h3 {
    font-family: 'Red Hat Display', 'Poppins', Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    margin: 32px 0 12px;
    color: #0a0a1a;
}

.arf-news-article-body p {
    margin: 0 0 20px;
}

.arf-news-article-body a {
    color: #2656d8;
    text-decoration: underline;
}

.arf-news-article-body img,
.arf-news-article-body figure {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 24px 0;
}

.arf-news-article-body figure {
    border-radius: 0;
}

.arf-news-article-body figure img {
    margin: 0;
}

.arf-news-article-body blockquote {
    border-left: 4px solid #7f43d9;
    margin: 32px 0;
    padding: 8px 0 8px 24px;
    font-family: 'Red Hat Display', 'Poppins', Arial, sans-serif;
    font-size: 22px;
    line-height: 1.45;
    color: #0a0a1a;
    font-style: italic;
}

.arf-news-article-body ul,
.arf-news-article-body ol {
    margin: 0 0 20px;
    padding-left: 24px;
}

.arf-news-article-body li {
    margin-bottom: 8px;
}

/* -------------------------------------------------------------------------
   Detail footer (tags + social share)
   ------------------------------------------------------------------------- */
.arf-news-article-footer {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #e8e8ef;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.arf-news-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.arf-news-tags-label {
    font-family: 'Lato', Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0a0a1a;
}

.arf-news-tags-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.arf-news-tags-list a {
    display: inline-flex;
    padding: 6px 12px;
    background: #f2ebff;
    color: #7f43d9;
    border-radius: 999px;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.arf-news-tags-list a:hover {
    background: #e9deff;
}

/* Share buttons */
.arf-news-share {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.arf-news-share-label {
    font-family: 'Lato', Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0a0a1a;
}

.arf-news-share-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
}

.arf-news-share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f2ebff;
    color: #7f43d9;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.arf-news-share-link:hover {
    background: #7f43d9;
    color: #ffffff;
}

.arf-news-share-link.is-copied {
    background: #16a34a;
    color: #ffffff;
}

/* -------------------------------------------------------------------------
   Sign-up CTA strip
   ------------------------------------------------------------------------- */
.arf-news-signup-cta {
    background: linear-gradient(120deg, #2656d8 0%, #7f43d9 100%);
    padding: 56px 0;
}

.arf-news-signup-cta-inner {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.arf-news-signup-cta-copy {
    flex: 1 1 380px;
    color: #ffffff;
}

.arf-news-signup-cta-heading {
    font-family: 'Red Hat Display', 'Poppins', Arial, sans-serif;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    margin: 0 0 8px;
}

.arf-news-signup-cta-subheading {
    font-family: 'Lato', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    opacity: 0.92;
}

.arf-news-signup-cta-form {
    flex: 1 1 380px;
    display: flex;
    gap: 12px;
    max-width: 520px;
    width: 100%;
}

.arf-news-signup-cta-field {
    flex: 1 1 auto;
}

.arf-news-signup-cta-field input[type="email"] {
    width: 100%;
    padding: 14px 18px;
    border-radius: 999px;
    border: 0;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 15px;
    color: #0a0a1a;
    outline: none;
}

.arf-news-signup-cta-field input[type="email"]::placeholder {
    color: #6c6c75;
}

.arf-news-signup-cta-btn {
    flex: 0 0 auto;
    padding: 14px 28px;
    border-radius: 999px;
    border: 0;
    background: #ffffff;
    color: #2656d8;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.arf-news-signup-cta-btn:hover {
    background: #0a0a1a;
    color: #ffffff;
}

/* -------------------------------------------------------------------------
   Related content
   ------------------------------------------------------------------------- */
.arf-news-related-heading {
    font-family: 'Red Hat Display', 'Poppins', Arial, sans-serif;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: #0a0a1a;
    margin: 0 0 32px;
    text-align: center;
}

/* -------------------------------------------------------------------------
   Utility
   ------------------------------------------------------------------------- */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Dark mode — News pages
   Follows the existing theme convention used by .arf-home-page /
   .arf-about-new-page: scoped via `prefers-color-scheme: dark` + `.dark-mode`
   manual toggle, and gated to the .arf-news-page body class so it never
   leaks onto other templates.

   Palette tokens (kept consistent with arf-global.css):
     bg base           : #0d1117
     surface           : #161b22
     surface hover     : #212a35
     line              : #2b3340
     text              : #e6edf3
     text muted        : #b7c1cc
     accent            : #8660e7
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    body.arf-news-page {
        color-scheme: dark;
        background: #0d1117 !important;
        color: #e6edf3 !important;
    }

    .arf-news-page .arf-section.arf-section-light,
    .arf-news-page .arf-news-listing,
    .arf-news-page .arf-news-detail,
    .arf-news-page .arf-news-related-section {
        background: #0d1117 !important;
    }

    /* Listing heading */
    .arf-news-page .arf-news-listing-title {
        color: #ffffff !important;
    }

    .arf-news-page .arf-news-listing-subtitle {
        color: #b7c1cc !important;
    }

    /* Cards — flat (no border / no surface) to match the homepage
       Latest-content dark treatment exactly. */
    .arf-news-page .arf-news-card {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .arf-news-page .arf-news-card:hover {
        box-shadow: none !important;
    }

    .arf-news-page .arf-news-card-media {
        background: #1f2733 !important;
    }

    .arf-news-page .arf-news-card-placeholder {
        background: #1f2733 !important;
        color: #4b5563 !important;
    }

    .arf-news-page .arf-news-card-title,
    .arf-news-page .arf-news-card-title a {
        color: #ffffff !important;
    }

    .arf-news-page .arf-news-card-title a:hover {
        color: #8660e7 !important;
    }

    .arf-news-page .arf-news-card-excerpt {
        color: #b7c1cc !important;
    }

    .arf-news-page .arf-news-card-cta {
        color: #8660e7 !important;
    }

    .arf-news-page .arf-news-card-cta:hover {
        color: #a78bfa !important;
    }

    /* Empty state */
    .arf-news-page .arf-news-empty {
        color: #b7c1cc !important;
    }

    /* Detail page */
    .arf-news-page .arf-news-breadcrumb a {
        color: #8660e7 !important;
    }

    .arf-news-page .arf-news-article {
        background: transparent !important;
    }

    .arf-news-page .arf-news-article-title {
        color: #ffffff !important;
    }

    .arf-news-page .arf-news-article-meta {
        color: #b7c1cc !important;
    }

    .arf-news-page .arf-news-article-hero {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }

    .arf-news-page .arf-news-article-body,
    .arf-news-page .arf-news-article-body p,
    .arf-news-page .arf-news-article-body li {
        color: #e6edf3 !important;
    }

    .arf-news-page .arf-news-article-body h2,
    .arf-news-page .arf-news-article-body h3 {
        color: #ffffff !important;
    }

    .arf-news-page .arf-news-article-body a {
        color: #8660e7 !important;
    }

    .arf-news-page .arf-news-article-body a:hover {
        color: #a78bfa !important;
    }

    .arf-news-page .arf-news-article-body blockquote {
        color: #ffffff !important;
        border-left-color: #8660e7 !important;
    }

    .arf-news-page .arf-news-article-body img,
    .arf-news-page .arf-news-article-body figure img {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    }

    /* Footer (tags + share) */
    .arf-news-page .arf-news-article-footer {
        border-top-color: #2b3340 !important;
    }

    .arf-news-page .arf-news-tags-label,
    .arf-news-page .arf-news-share-label {
        color: #ffffff !important;
    }

    .arf-news-page .arf-news-tags-list a {
        background: #221a3a !important;
        color: #b8a6ff !important;
    }

    .arf-news-page .arf-news-tags-list a:hover {
        background: #2d2350 !important;
    }

    /* Native share buttons (used as fallback if AddToAny is absent) */
    .arf-news-page .arf-news-share-link {
        background: #221a3a !important;
        color: #b8a6ff !important;
    }

    .arf-news-page .arf-news-share-link:hover {
        background: #8660e7 !important;
        color: #ffffff !important;
    }

    /* AddToAny icons (the plugin renders SVGs with their own colors;
       just soften the container background and divider lines) */
    .arf-news-page .addtoany_share_save_container,
    .arf-news-page .addtoany_content {
        background: transparent !important;
    }

    /* Sign-up CTA strip — already gradient; ensure inputs stay legible */
    .arf-news-page .arf-news-signup-cta-field input[type="email"] {
        background: #ffffff !important;
        color: #0a0a1a !important;
    }

    .arf-news-page .arf-news-signup-cta-field input[type="email"]::placeholder {
        color: #6c6c75 !important;
    }

    /* Related heading */
    .arf-news-page .arf-news-related-heading {
        color: #ffffff !important;
    }

    /* Load More — outline pill, accented for dark surface */
    .arf-news-page .arf-news-alm-wrap .alm-load-more-btn,
    .arf-news-page .arf-news-alm-wrap button.alm-load-more-btn,
    .arf-news-page .arf-news-load-more {
        background: transparent !important;
        border-color: #8660e7 !important;
        color: #b8a6ff !important;
    }

    .arf-news-page .arf-news-alm-wrap .alm-load-more-btn:hover,
    .arf-news-page .arf-news-alm-wrap button.alm-load-more-btn:hover,
    .arf-news-page .arf-news-load-more:hover {
        background: #8660e7 !important;
        color: #ffffff !important;
    }
}

/* Manual `dark-mode` toggle parity (matches arf-global.css convention) */
body.dark-mode.arf-news-page,
body.dark-mode .arf-news-page {
    color-scheme: dark;
    background: #0d1117 !important;
    color: #e6edf3 !important;
}

body.dark-mode .arf-news-page .arf-news-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body.dark-mode .arf-news-page .arf-news-card-title,
body.dark-mode .arf-news-page .arf-news-card-title a,
body.dark-mode .arf-news-page .arf-news-listing-title,
body.dark-mode .arf-news-page .arf-news-article-title,
body.dark-mode .arf-news-page .arf-news-article-body h2,
body.dark-mode .arf-news-page .arf-news-article-body h3,
body.dark-mode .arf-news-page .arf-news-related-heading {
    color: #ffffff !important;
}

body.dark-mode .arf-news-page .arf-news-card-excerpt,
body.dark-mode .arf-news-page .arf-news-listing-subtitle,
body.dark-mode .arf-news-page .arf-news-article-meta,
body.dark-mode .arf-news-page .arf-news-card-excerpt {
    color: #b7c1cc !important;
}

body.dark-mode .arf-news-page .arf-news-article-body,
body.dark-mode .arf-news-page .arf-news-article-body p,
body.dark-mode .arf-news-page .arf-news-article-body li {
    color: #e6edf3 !important;
}

body.dark-mode .arf-news-page .arf-news-card-cta,
body.dark-mode .arf-news-page .arf-news-breadcrumb a,
body.dark-mode .arf-news-page .arf-news-article-body a {
    color: #8660e7 !important;
}

body.dark-mode .arf-news-page .arf-news-article-footer {
    border-top-color: #2b3340 !important;
}

body.dark-mode .arf-news-page .arf-news-tags-list a,
body.dark-mode .arf-news-page .arf-news-share-link {
    background: #221a3a !important;
    color: #b8a6ff !important;
}